“不要把自己禁锢在某一个领域，技术到产品的转变，首先就是思维上的转变。你一直做前端，数据的交互你只知道怎么进，却不知道里面是怎么出的，这就是局限性。”
系统环境：MacOS10.13.3
关于npm安装速度慢或不成功
使用淘宝镜像安装
项目流程图
为了让项目思路和所选技术更加清晰明了，画了一个图方便理解。
项目启动
$npminstall
2.启动项目
$npmrundev
3.启动MongoDB
$mongod--dbpathXXX
xxx是项目里data文件夹（也可以另行新建，数据库用于存放数据）的路径，也可直接拖入终端。
4.启动服务端
$nodeserver.js
前端UI
vue的首选UI库我是选择了饿了么的Element-UI了，其他诸如iview、vue-strap好像没有ele全面。
安装Element-UI
$npmielement-ui-S
引入Element-UI
vue-router是vue创建单页项目的核心，可以通过组合组件来组成应用程序，我们要做的是将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。
上面的代码里已有涉及到一些路由切换，我们现在来完善路由：
安装
$cnpmivue-router
引入
我们引入了三个组件：
register注册组件
路由守卫
vuex
$cnpmivuex--S
在main.js引入store，vue实例中也要加入store
我们写好了基础界面，接下来就是要把表单数据发送到后台并进行一系列处理。现在还没有后端接口没关系，我们先写好前端axios请求。
axios
vue的通讯之前使用vue-resource，有很多坑。直到vue2.0来临，直接抛弃vue-resource，而使用axios。
用途：
封装ajax，用来发送请求，异步获取数据。以Promise为基础的HTTP客户端，适用于：浏览器和node.js。
$cnpmi-Saxios
importaxiosfrom'axios'
拦截器
在src文件夹下面新建axios.js(和App.vue同级)
服务端server
注意
koa2可以使用可以使用async/await语法，免除重复繁琐的回调函数嵌套，并使用ctx来访问Context对象。
现在我们用koa2写项目的API服务接口。
constKoa=require('koa');
在项目根目录下面新建server.js，作为整个server端的启动入口。
接口地址配置
另外由于我们的项目启动端口是8080，koa接口监听的端口是8888，于是需要在config/index.js文件里面，在dev配置里加上：
JsonWebToken是怎么工作的？
2、服务端对客户端身份进行验证；
3、服务端对该用户生成Token，返回给客户端；
4、客户端将Token保存到本地浏览器，一般保存到cookie（本文是用sessionStorage，看情况而定）中；
5、客户端发起请求，需要携带该Token；
6、服务端收到请求后，首先验证Token，之后返回数据。服务端不需要保存Token，只需要对Token中携带的信息进行验证即可。无论客户端访问后台的哪台服务器，只要可以通过用户信息的验证即可。
在server文件夹，下面新建/token(文件夹)里面新增checkToken.js和createToken.js，分别放置检查和新增token的方法。
checkToken.js
数据库mongodb
MongoDB是一种文档导向数据库管理系统，旨在为WEB应用提供可扩展的高性能数据存储解决方案。用node链接MongoDB非常方便。
$cnpmimongoose-S
MongoDB的连接有好几种方式，这里我们用connection。connection是mongoose模块的默认引用，返回一个Connetion对象。
在server文件夹下新建db.js，作为数据库连接入口。
Schema定义表的模板，让这一类document在数据库中有一个具体的构成、存储模式。但也仅仅是定义了Document是什么样子的，至于生成document和对document进行各种操作（增删改查）则是通过相对应的model来进行的，那我们就需要把userSchema转换成我们可以使用的model，也就是说model才是我们可以进行操作的handle。
编译完model我们就得到了一个名为User的model。
注意你在这里定义的schema表，后面写注册入库时数据的存储需要对应这个表。
在server文件夹下新建controller(文件夹)/user.js,存放数据库的操作方法。
先安装一些功能插件
首先定义了公用的三个基础方法：findUser、findAllUsers、delUser。其中findUser需要传入username参数，delUser需要传入id参数。
注册方法
此时要先搜索数据库这个用户名是否存在，存在就返回失败，否则把user存入数据库并返回成功。
拿到用户post的表单信息，用户名和密码（注册用了哈希加密，此时要解密）。从数据库搜索该用户名，判断用户名是否存在，不存在返回错误，存在的话判断数据库里存的密码和用户提交的密码是否一致，一致的话给这个用户生成一个新的token，并存入数据库，返回成功。
获得所有用户信息
就是把上面公用findAllUsers方法封装了一下并把信息放在result里面，让后面helloworld页面可以获取到这个数据并展示出来。
删除某个用户
注意要先拿到需要删除的用户id，作为参数传入。
数据库可视化
当我们注册完，数据入库，此时我们想查看一下刚才注册入库的数据，要用到数据库可视化工具。我是用MongoBooster，操作简单。
由下图可以看到示例中注册的两条数据，包含了id、username、password、token、time。那串长长的密码是由于哈希加密编译而成。
整合完善注册组件
在register.vue的表单验证后加上下列代码
引入axios
importaxiosfrom'../axios.js'
然后在login.vue的表单验证后加上下列代码
完善目标页组件
我们来完善这个组件，让它展示出目前所有的已注册用户名，并给出删除按钮。
1.要在实例创建完成后（created()）立即请求getUser()接口，请求失败要清楚掉token，请求成功要把返回数据放入user以供页面渲染。