nuxt+node搭建我的博客mini

前言

這是預覽地址。
這是源碼地址。

技術棧

前端：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項目 監聽端口與項目端口一致（7六、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還有功能都過於簡陋，可是後邊我會把她作爲學習過程當中的一個載體,慢慢完善、填充她。