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还有功能都过于简陋，可是后边我会把她作为学习过程当中的一个载体,慢慢完善、填充她。