MySQl+express+node.js+vue+axios项目搭建（持续更新ing）

前期准备：需要安装Node、和mysql
参考文档

1.利用vue-cli脚手架创建vue项目

2、在vue项目基础上添加后端目录 2.1、项目中新建server文件夹,结构如下

userApi.js

// 引入express调用路由模块
var express = require('express')
var router = express.Router();

// 访问该路由的路径：/api/User/addUser
router.post('/addUser',function(req,res,next){
	// 接收post请求的数据
	console.log(req.body)
})

// 导出路由
module.exports = router;

index.js
注意1）下次要改的话，只需要引入对应的api和使用对应的api
2）后端api路由,第一个/必须写

const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

// 引入对应的api
const userApi=require('./api/userApi');

// 获取对req.body格式的设置
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

// 后端api路由,第一个/必须写
app.use('/api/user',userApi)

// 监听端口
app.listen(3000)
console.log('success listen at port:3000......');

db.js
注意：1）user和password、database是你自己的数据库

module.exports ={
  mysql:{
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'h5',
    port: '3306'
  }
}

sqlMap.js：里面包括了sql *** 作的命令

var sqlMap = {
  // 用户
  user: {
    add: 'insert into user(username,pass) values(?,?)'
  }
}

module.exports = sqlMap;

2.2、上面好了，启动前端项目

npm run server

1.然后再home.vue里面写上按钮测试

测试一下

2.接下来用form表单模拟后端
注意：1）action的值为监听的端口+index.js的父路由+userApi配置的路径

写好了前端页面，启动后端

在server中使用命令node index.js

在前端输入数据点击提交测试一下

2.3、装mysql

package.json中有了

2.4、在userApi里面增加如下语句

// 引入mysql数据库配置文件
var models= require('../db.js');
// 导入sql语句
var $sql= require('../sqlMap.js')
// 创建数据库的连接
var mysql=require('mysql')
var conn=mysql.createConnection(models.mysql);
conn.connect();


// 访问该路由的路径：/api/User/addUser
router.post('/addUser',function(req,res,next){
	// 接收post请求的数据
	console.log(req.body)
	
	var {username,pass}=req.body;
	
	// 编写sql语句
	var sql=$sql.user.add;
	var data=[username,pass];
	conn.query(sql,data,function(err,result){
		if(err) return console.log(err)
		console.log(result)
	})
})

测试一下:此时插入了数据库和拿到了值

3.安装和使用axios(跨域)

axios的参考资料
跨域查询数据效果图

1.在项目安装axios

npm i -S axios

2.main.js引入axios并注册，

main.js
3.这样就可以在vue页面使用axios了
userAPI中加入/selectUser路由

router.post('/selectUser',function(req,res,next){
	console.log(11)
	var sql=$sql.user.select;
	conn.query(sql,function(err,result){
		if(err) return console.log(err)
		res.send(result)
	})
})

home.vue

4.测试一下，报以下错误，这是因为端口不一样，需要跨域
5.在vue根目录创建vue.config.js配置文件

注意:1）多代理需要把优先级高的写精确并放在第一个
2）代理不能超过十个
3）像这样写前端就可以简写了

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/car/select': {
                // /car/select代表http://localhost:3000/api/user
                target: 'http://localhost:3000/',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/car/select': '/api/user'
                }
            },
			'/api': {
			    // /api代表了http://localhost:3000/api/user
			    target: 'http://localhost:3000/',
			    // 允许跨域
			    changeOrigin: true,
			    ws: true,
			    pathRewrite: {
					// 我们看到的是http://localhost:8080/api/selectUser
					// 实际上访问的是http://localhost:8080/selectUser	因为/api重置了
			        '^/api': '/api/user'
			    }
			}
        }
    }
}

6.修改home.vue的axiosd的url

测试一下:必须重启项目
npm run serve

7.在sqlMap里面增加查询语句

8.在/selectUser路由编写sql语句

重启后端测试一下

9.接下来需要把查询的放在页面上，后端通过send发给前端，前端循环就行了
后端
index.js

sqlMap.js

前端

测试一下页面上有数据了

总结 1.连接数据库这个 *** 作(这里是封装的为db.js)必须封装，为了以后能方便更改2.跨域报404错误时（你的代码没错），需要重新启动项目3.数据库的sql语句写在路由里面