前言
用 node 作为后端支持已经比较成熟了，很早以前就想自己动手，从零开始，前端+后端+数据库+部署都自己操作。最近刚好 PM 想要一个公司内部的需求网站，并且公司的后端大佬们，没时间来写接口。😝 那就让我们动起手来，就有了这个项目。
前置技能：
本项目，难度不大，只需要稍微花一点时间和有一点耐心，就可以掌握。
涉及的技术点和需要了解掌握的的技术如下：（就是要看文档啦~，痛苦的一匹）
后端：
node （只是用了node的环境，基本上没有它什么事）
koa （基于koa搭建后端服务，提供api）
koa-router （koa的路由中间件）
koa-bodyparser （处理koa POST请求参数 的中间件）
koa-cors （处理跨域问题的中间件）
mysql （数据库，没啥好说的）
前端：
vue （基于vue搭建的后端服务）
vue-router （vue-cli搭建的时候选一下就好了）
axios （ajax请求库）
element-ui （UI库）
项目结构
└──needs
├── client （前端项目）
│ ├── build （vue-cli生成，项目配置）
│ ├── config （vue-cli生成，项目配置）
│ ├── src
│ │ └── api （api地址）
│ │ └── assets （静态资源）
│ │ └── components （公共组件）
│ │ └── router （路由）
│ │ └── style （公共样式）
│ │ └── views （各页面）
│ │ └── App.vue （页面入口）
│ │ └── elementUI.js （按需加载elementUI)
│ │ └── main.js （程序入口）
│ ├── needs (需求上传地址)
├── server （后端项目）
│ ├── contorllers （控制器）
│ ├── models （数据层）
│ ├── routers （路由）
│ ├── util （工具）
│ ├── app.js （项目入口）
└── readme.md
数据库
本项目需要两个表
needs 表：
user 表：
手动创建即可，sql 语句创建也行，反正有数据库，有表就 OK 了
后端代码实现
后端接口的具体工作流程如下：
访问 api 地址
>>> 在 routers 里面对应 api 地址，调用回调函数
>>> 在 controllers 里面响应回调，调用操作数据库函数
>>> 在 models 里面实现了操作数据库的函数，通过 util
里面封装的数据库操作方法，完成对数据库的读写操作，
并返回相应数据。
1、后端入口文件：
server/app.js
引入 koa 已经相关中间件，new 一个 koa 对象 app，使用 app.use 进行加载各个中间件并监听 3000 端口。
这样的话，对外暴露的就是 3000 端口，等路由和数据库操作部分操作完，就可以通过 http://localhost:3000/+路由地址进行接口请求
2、路由文件：
server/router/api.js
server/router/index.js
引入 koa-router，根据文档编写接口，并导出接口
3、MySQL 数据库
- 主要代码：
server/util/db.js
a、引入 mysql b、通过 mysql.createPool 建立连接池 c、编写一个 query 方法用以执行 sql 语句 d、pool.getConnection 创建数据库链接，通过回调中的连接上下文 connection 中的 query 方法执行 sql 语句，执行完毕就释放当前连接
- 自定义数据库操作方法：
server/util/dbMethods.js
andWhere 函数用来处理多个可选参数的时 sql 语句的拼接
4、编写控制器
server/controllers/needs.js
server/controllers/user.js
对应路由文件里面的回调函数，调用 models 里面对数据库操作的 方法并返回相应的内容给到接口
5、编写 models
server/models/needs.js
server/models/needs.js
models 里面定义对数据库操作的方法，在server/util/db.js中，定义了一个名为 query 的方法，主要是使用这个方法。
有一部分是可以在server/util/db.js里面单独定义一个函数，例如：insertData()、deleteNeedById()等，这样可以让代码看起来更加语义化，也减少了耦合
前端代码实现
1、采用 vue-cli 直接生成 vue 的模板项目，安装依赖并且跑起来
vue init webpack needs
cd needs
npm install
npm run dev
2、编写路由文件
路由文件：client/src/router/index.js
3、页面编写，代码比较多，就不贴了，附上传送门吧
4、api 对接
axios 配置文件：client/src/api/axios.js
主要是，接口地址以及对请求的拦截
需求相关的接口：client/src/api/modules/needs.js
用户相关的接口：client/src/api/modules/user.js
api 的的入口文件：client/src/api/index.js
前端部分比较简单，需要讲的不多，相信大佬们要写一个出来，也是分分钟的事~
如果觉得本文对你有一点帮助的话，留下一个start吧~
