node连接mysql生成接口，vue通过接口实现数据的增删改查（一）

　　武汉加油！中国加油！

　　想必许多学vue的小伙伴想连接数据库，对数据进行增删改查吧，奈何不知道怎么实现。作为一路踩坑的我，为大家带来我的一些踩坑经历，水平有限，其中错误，望请指正。

　　前言：

　　本篇主要讲述的是如何把零件凑在一起让车跑起来，不会去关注如何制造零件，等车跑起来了我们再去了解造零件。

　　先看一下效果图，如果是你需要的再往下看，不是则不必浪费你的时间。如图1，图2所示

图1 添加信息图

图2 查询、修改信息图

一、所需环境

　　node、mysql、vue，最好是有phpstudy，其自带mysql，非常方便。如此选择是因为，node是运行在服务端的 JavaScript，速度快，性能好，mysql速度快，安装方便且轻量。

二、搭建项目

2.1 搭建vue项目

　　我是用的是v-cli4.0的脚手架进行搭建的，不是本文重点，不详细介绍。

2.1.1 安装依赖

cnpm install vuex --save

cnpm install axios --save

　　在main.js中挂载原型。如图3所示。

图3

2.1.2 安装服务依赖

cnpm install mysql express body-parser --save

2.2 搭建本地服务

　　搭建完成vue项目后，在根目录建立server文件夹；

　　在server下建立api文件夹，api文件夹下建立StuApi.js，用于创建接口；

　　在server下建立db.js，用于连接数据库；

　　在server下建立index.js，为运行主文件；

　　在server下建立sqlMap.js，sql语句，将和StuApi.js连接使用；

　　咱先创建着这些文件，等创建了数据库，再填写内容。

　　目录结构如图4所示。

图4 项目结构图

三、创建数据库

3.1 创建库

　　此处推荐使用phpstudy，其自带mysql，方便快捷，打开MySQL-Front。如图5所示。

图5

　　右键点击localhost-->新建-->数据库，输入名称：apitest。因为我已经创建过了，所以就不继续了。如图6所示。

图6

3.2 创建表、字段

　　找到数据库apitest，右键单击-->新建-->表格，输入名称axios_demo，对表axios_demo右键点击，新建-->字段，输入需要的字段名，如图7所示。

图7

　　至此，数据库就已经创建完成了，接下来我们去配置本地服务。

四、配置本地服务

4.1 连接数据库

　　db.js

　　找到我们的server文件夹，这就是我们的服务，db.js作为连接数据库的配置，代码如下：

// db.js
// 数据库连接配置
module.exports = {
  mysql: {
    host: 'localhost', // 新建数据库连接时的 主机名或ID地址 内容
    user: 'root',
    password: 'root', // root 密码
    database: 'apitest', // 数据库名
    port: '3306'
  }
}

4.2 sql语句操作

　　sqlMap.js

　　连接到数据库后，我们就要对数据进行sql语句操作，在sqlMap.js里配置，代码如下：

// sqlMap.js  sql语句
const sqlMap = {
  Stu: {
    add: 'insert into axios_demo(stu_Id,stu_name,stu_sex,stu_college,stu_class) values (0,?,?,?,?)',
    show: 'select * from axios_demo',
    del: 'delete from axios_demo where stu_Id = ?',
    update: 'update axios_demo set stu_name = ?,stu_sex = ?,stu_college = ?,stu_class = ? where stu_Id = ?'
  }
}
 
module.exports = sqlMap

4.3 制作接口

StuApi.js

　　连接到数据库，也可以操作数据了，前端怎么和后端联系起来呢，解决办法之一就是：接口

　　在server下的api文件夹下，藏着一个可爱的StuApi.js，它就是关键，目前我做了四个接口，分别对应数据简单的增、删、改、查，如果有更深逻辑处理的，小伙伴自行研究哦。

　　代码如下：

const models = require('../db')
const express = require('express')
const router = express.Router()
const mysql = require('mysql')
const $sql = require('../sqlMap')
// 连接数据库
const conn = mysql.createConnection(models.mysql)
conn.connect()
const jsonWrite = function (res, ret) {
  if (typeof ret === 'undefined') {
    res.json({
      code: '1', msg: '操作失败'
    })
  } else {
    res.json(
      ret
    )
  }
}
// 接口：增加信息
router.post('/addStu', (req, res) => {
  const sql = $sql.Stu.add
  const params = req.body
  console.log('添加', params)
  conn.query(sql, [params.stu_name, params.stu_sex, params.stu_college, params.stu_class], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})
 
// 接口：查询全部
router.get('/showStu', (req, res) => {
  const sql = $sql.Stu.show
  const params = req.body
  console.log(params)
  conn.query(sql, [params.stu_Id, params.stu_name, params.stu_sex, params.stu_college, params.stu_class], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})
 
// 接口：删除信息
router.post('/delStu', (req, res) => {
  const sql = $sql.Stu.del
  const params = req.body
  console.log('删除', params)
  conn.query(sql, [params.stu_Id], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})
 
// 接口：修改信息
router.post('/updateStu', (req, res) => {
  const sql = $sql.Stu.update
  const params = req.body
  console.log('修改', params)
  conn.query(sql, [params.stu_name, params.stu_sex, params.stu_college, params.stu_class, params.stu_Id], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})
 
module.exports = router

4.4 配置主文件

　　index.js

　　这是启动文件，也是设置跨域、端口的文件。

　　一般来说项目运行端口号为8080，服务端口为3000，所以会造成跨域的问题。这里我们设置跨域的域名为*，即表示允许任意域名跨域（代码里已注释），跨域允许的请求方式为put、get、post等。

　　端口默认为3000，如果被占用的话，改为其他不被占用的端口就行。

　　代码如下：

// node 后端服务器
const StuApi = require('./api/StuApi')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()
//采用设置所有均可访问的方法解决跨域问题
app.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200); //让options尝试请求快速结束
    else
        next();
})
app.use(bodyParser.json()) // 以json格式返回出去
app.use(bodyParser.urlencoded({ extended: false }))
// 后端api路由
 
app.use('/api/Stu', StuApi)
// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')

4.5 接口测试

　　请求接口，推荐使用postman，没用过的小伙伴安装试一下。

　　以hbuilderx为例，右键server文件夹，点击“使用命令行窗口打开文件所在目录”，即打开dos面板，非hbuilderx的小伙伴，在server文件夹的地址栏里输入cmd打开命令行面板也是一样的。打开面板后，输入

node index.js

　　或者

node index

　　回车之后即可开启服务。出现图8字样，即代表开启服务成功。如图8所示。

图8

　　目前来说，请求数据我用get请求，发送数据用post，即对数据的增、删、改等操作时接口的请求方式。

　　请求展示数据的接口：http://localhost:3000/api/Stu/showStu

　　如图9所示。

 

图9

　　至此，后台服务配置和测试就已经完成。

总结：

　　首先我们要有一个清晰的逻辑，node作为中间人连接数据库，可以直接操作数据，vue和node之间通过接口联系起来，实现对数据的操作。例如修改数据调用“修改接口”，而“修改接口”调用update的sql语句，此时，vue传过来修改的数据，对应上sql语句里的字段名和id，就可以实现数据的修改。

　　本篇讲述了，数据库的创建、本地服务的搭建和配置，以及接口的调用等。下一篇将讲述vue前端如何调用接口，对数据进行操作等。