Vue+Koa+Mongodb 小练习

Vue+Koa+Mongodb 小练习

做者： Pawn

本文首发： Pawn博客

功能： 基于vue koa mongodb进行登陆，注册，留言的简单网站。

体验地址： demo.lcylove.cn

github: github.com/LiChangyi/d…

前面的话

缘由

1. 前段时间用vue+koa+mongodb搭建了一个我的博客，由于是第一次写先后交互，发现有不少地方不是特别的完善，同时代码对于新学者来讲可读性也不是很大。因此这个小练习，从一个简单的方面入手，但愿能给踩过一样多坑的同路人一点启发。
2. 在我今年年初在学习vue以及koa的时候，网上对这方面的内容，都是一个完整的项目，文件太多，观看难度太大，其次是，都对图片的上传都没怎么涉及。
3. 我在学习部署koa和vue的项目的时候，网上的知识很零碎，这里我会概括一下。

涉及知识点

1. vue全家桶的使用
2. 在vue中使用axios，并配置它
3. koa与mongoose的基本使用
4. jsonwebtoken的使用以及先后台鉴定登陆

注： 本文面对刚学vue或者koa不久或者想了解一个简单的先后台交互的问题的同窗，涉及基础。

预览

感兴趣的问题

我在代码里面写了不少的注释方便阅读，这里简单说一下我我的当初学习的时候比较疑惑为问题

一些小变更

前端直接采用vue-cli进行一个基础的项目骨架。而后因为是一个简单的项目，因此页面就随便写一下，主要是实现功能。

由于咱们在服务器上面采用的是二级域名的形式，因此须要在 config/index.js 下面的 build 项里面将 assetsPublicPath 设置成相对路径。

assetsPublicPath: ''
复制代码

咱们在本地开发的时候须要进行调试，须要用到代理，否则就只有设置后台容许跨域。因此在 config/index.js 下面的 dev 对象里面添加：

proxyTable: {
    '/api':{  // 只代理 /api url下的请求
        target: "http://localhost:7778", // 后台服务器的地址
        changeOrigin: true
    }
}
复制代码

如何让服务器端记住你(jsonwebtoken)

HTTP请求是无状态的，意思是他记不住你这我的是谁，他只知道你要什么资源，而后给你什么。可是实际问题是当用户给咱们寻求资源的时候，咱们应该要考虑应该给他这个资源。对这我的的身份作一个判别，而后在作决定给他什么样的资源。

因此针对每一个用户咱们须要用一个惟一的标识来肯定他，这就是为何须要登陆才能操做，登陆的目的就是让服务端产生一个认识你的标识，之后你的每次请求都要带上去。

在先后台不分离的时候，服务器端每每会在客服端放一个SessionId 或者一个cookie的东西。可是如今先后端分离之后，咱们登陆成功，服务器端应该也会给咱们这样一个惟一标识身份的字符串。而后咱们在每次请求数据的时候带上它。这里我服务器端采用的是jsonwebtoken 来制造这个惟一标识，代码详情 => server/utils/token.js 而后我写了一个中间件check_token 来判断若是这个资源须要登陆，就会去检查他的token若是token不对那么就直接抛出错误。

前端拿到服务端的token后咱们须要把他存放起来这里大概会有2种方式：

1. 存在vuex 里面， 这种方式有一个弊端就是，网页一刷新vuex里面的数据就清空了。就意味着要从新登陆。
2. 存在sessionStorage里面，采用浏览器的会话存储，只有当浏览器关闭的时候才会清空数据。

这里我把2种方法结合起来，获得token的时候把他同时存放在vuex和sessionStorage里面，存放在vuex里面是为了操做方便，存放在sessionStorage是为了保持刷新页面的时候数据不丢失。在前端每次向后台请求数据的时候，带上这个token,详见代码 => client/src/axios/index.js

关于一些网上的争论：

Q ：有人说，让客服端存放token不安全，或者说用sessionStorage方法来存放不安全，由于存在着csrf问题

A ：没有绝对的安全，我我的了解到就是用之前的cookie或者SessionId 也存在着这样的问题。想要解决这个问题就尽可能的吧网页升级成https，或者，采用服务器中转的方式，在2者之间在加入一个服务器端，把真实的token存放在中转，而后客服端与中转进行通讯。

验证码的识别

验证码的生成我采用了gd-bmp 包具体用法，看server/controller/other.js 一样根据上面的介绍，http是没有状态的，咱们要验证验证码的正确性，应该对每一个验证码增长一个惟一的标识，而后存放在数据，当用户登陆或者用户注册用到验证码的时候，把验证码和相应的验证码标识一块儿发日后台，而后判断验证码的正确与否。对于验证码及标识的存储，我这里为了方便就是采用mongodb来存储，可是网上不少人推荐用redis来存储。

本地图片的上传

这个问题从好久之前就很迷惑，一直不知道如何上传图片到服务器。即便h5出现了<input type="file">可是解决这个问题也是很麻烦。我我的以为上传图片应该有2种方式：

1. 直接用过input的onchang事件获取到的文件，来上传二进制文件。
2. 将图片转换成base64来进行上传

我这里采用的是第二种，用base64上传图片，而后本身吧base64字符串保存进数据库，由于操做比较方便。固然你也能够在服务器端吧base64转换成二进制文件存放在服务器里面，而后把文件地址保存在数据库里面。也能够在本地直接上传二进制文件，若是你采用这个方式，那么你应该在koa里面在加入一个处理file请求的中间件。

也能够借助第三方的存储，好比我在个人博客里面写了一个接口就是直接在客服端上传文件到七牛云，而后七牛云返回给我连接。当时之因此采用这个操做是由于，小水管服务器太慢了，借助第三方加载图片会快不少。

关于项目的服务器部署

由于vue的简单，不少都只知道npm install 和 npm run dev 因此有不少人会有疑问，那就是我这个vue项目如何部署在服务器上面？难道是把代码上传到服务器上面来执行上面2条命令吗？

其实这个问题是因为你们只会机械式操做留下的，由于vue-cli的简单方便已经mvvm框架的厉害，咱们忘记了咱们写的东西本子上仍是网页。因此咱们须要用webpack 将咱们的项目打包一下在命令行里面执行npm run build 将咱们写的vue和js代码以及其余的资源文件，打包/dist里面。这里面的文件就是咱们写的网页，，咱们只须要吧这里面的文件上传到服务器下就能够运行了。

这里关于把打包出来的文件每每会有2方式运行：

1. 将文件丢到server/public 文件夹下面，由于咱们在server/app.js下面配置了静态文件目录，而后咱们启动服务端。就能够在127.0.0.1:7778/index.html(假设服务器端口号是7778)看到咱们的网页。
2. 用nginx服务器代理 ，静态文件用nginx托管，而后设置转发的方式来获取api请求数据。

其实第一种的话也是借助与nodejs会自动启动一个服务器，进行静态文件的托管。我我的比较喜欢第二种方法，下面咱们就进行这种文件的配置。

开始以前，你应该检查你的服务器是否安装有nginx与pm2

$ pm2 -v
$ nginx -v
复制代码

若是正确出现版本号，那么就已经安装了，若是没有的话，请谷歌安装。pm2的做用是进行进程守护，当你的nodejs意外的中止的时候，进行重启。

若是咱们有域名的话，咱们如今域名商哪里添加一个二级域名解析。这里添加完解析之后会要几分钟的等待时间

而后，咱们找到nginx的配置文件nginx.conf 在里面加入：

server {
        listen 80;
        server_name demo.lcylove.cn;
        root   /data/www/demo; 
        index  index.html index.htm index.php;

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            proxy_pass http://127.0.0.1:7778;
        }
    }
复制代码

注意： location /api/ 这里说明只有api/*的请求才会进行转发。

而后进行nginx服务器的重启：nginx -s reload

咱们把server的代码放在服务器下，经过命令行移到相应位置执行命令：

$ npm install && cnpm i
$ pm2 start --name demo1 npm -- run start
复制代码

启动咱们的nodejs服务器。而后咱们就能够打开网站 demo.lcylove.cn 查看效果

最后

因为本人才疏学浅，若是有任何问题的欢迎下面留言讨论！