最近在研究vue项目中使用node.js搭建server服务器，链接本地mysql数据库，进行数据操作。

准备工作：
1.vue
2.node.js
3:mysql

前面两项对于入行前端的小伙伴应该不是问题了吧， 如果有的话，可以参考vue安装项目。

我选用的vue-cli构建项目，我好久没有用vue了，才发现快落伍了，现在3.0版本使用的vue create < project-name>，我就还是选用的2.0构建的项目，附vue-cli 3.0 和 2.0的区别。

附npm淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

然后去安装mysql了，不是专业后台人员，这个我也是鼓捣了好久，给大家附上几个靠谱的参考链接
1、mysql下载以及安装配置方法
2、mysql基础知识
3、Navicat神器的安装以及使用教程

准备工作会花费很多时间的，一定要细心和耐心啊
准备好了，就开始进入正题啦

1、第一步：
在vue项目中创建server文件夹

2、先来看index.js做了什么事

// node后端服务器
const homeApi = require('./api/homeApi') // 上面说的后台接口文件const bodyParser = require('body-parser') 
// body-parser是非常常用的一个express中间件，作用是对http请求体进行解析const express = require('express') // express框架
const app = express()app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))// 后端api路由
app.use('/home', homeApi) // 使用homeapi文件中的接口// 监听端口
app.listen(3000) // 监听server3000端口
console.log('success listen at port:3000')

3、db.js就是数据库的基本配置

module.exports = {mysql: {host: 'localhost',user: 'root',password: '123456', // mysql用户名密码database: 'test_ly', // mysql数据库名port: '3306' // mysql链接端口}
}

4、再来看一下api中honeApi.js

// homeApi.js
var models = require('../db') // 引入db配置
var express = require('express') // express框架
var router = express.Router()
var mysql = require('mysql')
var $sql = require('../sqlMap') // sql语句// 连接数据库
var conn = mysql.createConnection(models.mysql)
conn.connect()var jsonWrite = function (res, ret) {if (typeof ret === 'undefined') {res.json({code: '1',msg: '操作失败'})} else {res.json(ret)}
}// 查询列表接口，
// get接口，这里配置的/getlist,使用的时候就是 /home/getlist
// 回看index.js 中 app.use('/home', homeApi) ，就懂了router.get('/getlist', (req, res) => {var sql = $sql.home.searchvar parms = req.queryconsole.log(parms)conn.query(sql, function (err, result) {if (err) {console.log(err)}if (result) {console.log(result)res.send(result)}})
})// 新增列表
router.post('/addlist', (req, res) => {var sql = $sql.home.addvar parms = req.bodyconsole.log(parms)conn.query(sql, [parms.title, parms.num], function (err, result) {if (err) {console.log(err)}if (result) {jsonWrite(res, result)}})
})module.exports = router

5、存放sql语句的sqlMap.js

// sqlmap.js
var sqlMap = {// homehome: {search: 'select * from zp_list',add: 'insert into zp_list(name) values (?)'},other:{delete:'', // delete sql语句post: '',get: ''}
}
module.exports = sqlMap

6、项目根目录下安装

npm install express mysql body-parser

现在我们就可以使用home/getlist接口了么？我们的server服务还没有启动呢，启动有几个方法

1、cmd到项目中server目录下执行 node index.js
2、编辑器启动，我用的vscode

启动服务以后，控制台打印“success listen at port:3000”，说明node服务已经启动了，如果报错，仔细看数据库的相关配置哦，别搞错了

7、前端开始连接后台数据库

export default {name: 'hello',data () {return {}},methods: {getList() {this.$http.get('/home/getlist',{}).then((response) => {console.log(response);})}}
}

如果没有引用vue-resource，this.$http.post是不生效的，还会报错
报错信息：

Uncaught TypeError: Cannot read property ‘post’ of undefined
解决方案：在main.js中引入vue-resource

在根目录下还要安装vue-resource哦，如果用的axios也是一样，记得安装

8、设置代理转发

然后我们在前端目录下npm run dev执行getList方法，发现控制台报错404，那是因为直接访问8080端口，是访问不到的，这里需要设置一下代理转发。后端启动的服务是3000
找到config目录下index.js中的proxyTable设置代理转发

proxyTable: {'/api': {target: 'http://localhost:3000', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite: { // 路径重写，'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。}}

这个时候接口地址前要加上api/home/getlist

然后再重新启动npm run dev就可以看到数据，恭喜你！说明你的操作成功了。

9、总结
这是我花了两天空余时间研究出来的，突发兴趣，一下总结了几点容易犯的错误吧：

1、mysql安装不小心，记得安装mysql server服务
2、db.js文件配置数据库的用户名和密码记得别搞错了
3、记得server搭建好了要启动服务
4、vue中用到的express、axios、vue-resouce等，记得安装和配置
5、设置代理转发
6、mysql服务要启动

希望能帮助到各位感兴趣的小伙伴