vue2.0+koa2+mongodb实现注册登录

前言

前段时间和公司一个由技术转产品的同事探讨他的职业道路，对我说了一句深以为然的话：

“不要把自己禁锢在某一个领域，技术到产品的转变，首先就是思维上的转变。你一直做前端，数据的交互你只知道怎么进，却不知道里面是怎么出的，这就是局限性。”

醍醐灌顶般，刚好学习vue的时候看到有个注册登录的项目，索性我也跟着动手做一个vue项目，引入koa和mongodb，实现客户端（client）提交-服务端（server）接收返回-入数据库全过程。

本项目基于vue-cli搭建，利用token方式进行用户登录验证，并实现注册入库、读取用户、删除用户等功能。文章默认读者有一定的node和vue基础，基础部分不赘述。

系统环境：MacOS 10.13.3

关于npm安装速度慢或不成功

使用淘宝镜像安装

然后所有的 npm install 改为 cnpm install

项目流程图

为了让项目思路和所选技术更加清晰明了，画了一个图方便理解。

项目启动

0.项目地址

github：

1.初始化项目

$ npm install

2.启动项目

$ npm run dev

3.启动MongoDB

$ mongod --dbpath XXX

xxx是项目里 data 文件夹（也可以另行新建，数据库用于存放数据）的路径，也可直接拖入终端。

4.启动服务端

$ node server.js

前端UI

vue的首选UI库我是选择了饿了么的Element-UI了，其他诸如 iview 、 vue-strap 好像没有ele全面。

安装Element-UI

$ npm i element-ui -S

引入Element-UI

利用UI里面的选项卡切换做注册和登录界面的切换，以login组件作为整个登录系统的主界面，register组件作为独立组件切入。Element-UI的组成方式，表单验证等API请查阅官网。

输出页面比较简单，这里说几个要点：

1.要在实例创建完成后（ created() ）立即请求getUser()接口，请求失败要清楚掉token，请求成功要把返回数据放入user以供页面渲染。

2. thisID 要写成对象格式，否则会报错

3.注销时要清除掉token

总结

人的思维转变确实是最难的。按流程来说，应该是koa先设计出接口，前端再根据这个接口去请求，但我反过来，是先写好前端请求，再根据这个请求去制定接口。

当然，也遇到了很多困难：当我搞好了前端展示页面，axios也写好了，但在用koa写接口这里卡了很久，完全没有概念，就是前言说的“只知道数据怎么进，不知道怎么出”。然后遇到接口500报错又调试了很久，主要是自己对接口没有调试概念，最后还是公司的琅琊大佬帮忙解决，感谢。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!