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项目 监听端口与项目端口一致（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还有功能都过于简陋，但是后边我会把她做为学习过程中的一个载体,慢慢完善、填充她。