node + koa + mysql + vue作一个公司内部需求网站

前言

用 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
    里面封装的数据库操做方法，完成对数据库的读写操做，
    并返回相应数据。
复制代码

一、后端入口文件：server/app.js

引入 koa 已经相关中间件，new 一个 koa 对象 app，使用 app.use 进行加载各个中间件并监听 3000 端口。 这样的话，对外暴露的就是 3000 端口，等路由和数据库操做部分操做完，就能够经过 http://localhost:3000/+路由地址进行接口请求

二、路由文件：

server/router/api.js

server/router/index.js

引入 koa-router，根据文档编写接口，并导出接口

三、MySQL 数据库

1. 主要代码：server/util/db.js

a、引入 mysql b、经过 mysql.createPool 创建链接池 c、编写一个 query 方法用以执行 sql 语句 d、pool.getConnection 建立数据库连接，经过回调中的链接上下文 connection 中的 query 方法执行 sql 语句，执行完毕就释放当前链接

2. 自定义数据库操做方法：server/util/dbMethods.js

andWhere 函数用来处理多个可选参数的时 sql 语句的拼接

四、编写控制器

server/controllers/needs.js

server/controllers/user.js

对应路由文件里面的回调函数，调用 models 里面对数据库操做的 方法并返回相应的内容给到接口

五、编写 models

server/models/needs.js

server/models/needs.js

models 里面定义对数据库操做的方法，在server/util/db.js中，定义了一个名为 query 的方法，主要是使用这个方法。

有一部分是能够在server/util/db.js里面单独定义一个函数，例如：insertData()、deleteNeedById()等，这样可让代码看起来更加语义化，也减小了耦合

---

前端代码实现

---

一、采用 vue-cli 直接生成 vue 的模板项目，安装依赖而且跑起来

vue init webpack needs

  cd needs

  npm install

  npm run dev
复制代码

二、编写路由文件

路由文件：client/src/router/index.js

三、页面编写，代码比较多，就不贴了，附上传送门吧

四、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

前端部分比较简单，须要讲的很少，相信大佬们要写一个出来，也是分分钟的事~

完整代码移步到 github

若是以为本文对你有一点帮助的话，留下一个start吧~