nuxt+node搭建個人部落格mini

彩色的橙子發表於2019-02-18
UX

前言

這是預覽地址。
這是原始碼地址。

技術棧

前端：nuxt+element-ui+mavon-editor 
後端：node+express+mongodb+mongoose
複製程式碼

前端頁面結構

* 部落格首頁
* 文章釋出頁 
複製程式碼

nuxt與vue語法一致，前端頁面比較簡單不多說。

部署

nuxt有兩種部署方式。

* 靜態化部署（預渲染）：npm run generate  將每一個路由靜態化為一個html檔案，部署不需要伺服器環境；

* 服務端渲染部署： nuxt start（linux下修改package.json裡start：node server/index.js）。這種方式需要nginx反向代理配置。
複製程式碼

本次開發中emoji外掛靜態部署報錯，所以採用了服務端部署。

nginx反向代理 訪問服務端渲染專案
ubuntu 安裝nginx：sudo apt-get install nginx
啟動nginx: nginx
關閉nginx：$ nginx -s quit
複製程式碼

進入etc資料夾，編輯nginx.conf如下

user www-data;
worker_processes 4;
pid /run/nginx.pid;
events {
	worker_connections 768;
}
http {

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;

include /etc/nginx/mime.types;
default_type application/octet-stream;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

gzip on;
gzip_disable "msie6";
upstream deju-pc-ssr {
#nuxt專案 監聽埠與專案埠一致（76、251的docker環境要把127.0.0.1替換成伺服器ip）
server 127.0.0.1:3004;  //3004為nuxt專案埠
keepalive 64;
}

server {
	listen 443;     //nginx監聽埠
	location ~* ^/(index|index.html)?/?$ {
				proxy_http_version 1.1;
				proxy_set_header Upgrade $http_upgrade;
				proxy_set_header Connection "upgrade";
				proxy_set_header Host $host;
				proxy_set_header X-Nginx-Proxy true;
				proxy_cache_bypass $http_upgrade;
				proxy_pass http://deju-pc-ssr; #反向代理
	}
	location ~ .*\.(jpg|icon|woff|ttf|gif|png|js|css)$ {
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_set_header Host $host;
	proxy_set_header X-Nginx-Proxy true;
	proxy_cache_bypass $http_upgrade;
	proxy_pass http://deju-pc-ssr;
	}
	location / {            //防止重新整理404
         try_files $uri $uri/ @router;
         index index.html;
     }
    location @router {
        rewrite ^.*$ /index.html last;
    }

}
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
複製程式碼

伺服器端 npm start啟動nuxt專案，至此前端部署完成。

後端資料結構

* article 文章Schema
* comment   評論Schema
* bloginfo 部落格資訊Schema
複製程式碼

初始化Schema的時候一定要加上索引值，不然當儲存物件值過大的時候會出現key值過大的錯誤”。

主要功能

  • 接收圖片
    var storage = multer.diskStorage({
    // 如果你提供的 destination 是一個函式，你需要負責建立資料夾
    destination: 'public/images/',
    //給上傳檔案重新命名，獲取新增字尾名
    filename: function (req, file, cb) {
        cb(null,  file.originalname);
     }
    }); 
    var upload = multer({
        storage: storage
    })
    router.post('/upload',upload.single('image'),(req,res)=>{
        // var file = req.file;
        res.send('http://127.0.0.1:4001/public/images/'+req.file.filename)
    })
複製程式碼
  • 返回檔案
* app.get('/public/images/*', function (req, res) {
  res.sendFile( __dirname + "/" + req.url );
})
複製程式碼
  • 略縮圖
//將圖片轉換成base64存入資料庫
getBase64(file) {
    return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
        imgResult = reader.result;
        };
        reader.onerror = function(error) {
        reject(error);
        };
        reader.onloadend = function() {
        resolve(imgResult);
        };
    });
}
複製程式碼
  • 文章搜尋
let regex = new RegExp(searchVal, 'ig');
 Article.find({articleType:articleType,title:regex}).then(()=>{})
複製程式碼

總結

第一次使用nuxt，比著文件前前後後寫了六天時間，學習部署又花了一天半。作為blog來說她的ui還有功能都過於簡陋，但是後邊我會把她做為學習過程中的一個載體,慢慢完善、填充她。

相關文章