这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
Vue + express + mysql主要要注意这么几个问题：
- 跨域问题
- 连接数据库
- 用户接口
- sql语句
一、node后端服务器
在项目根目录下建立server，作为后端的服务部分。
首先建立db.js:
// 数据库连接配置
module.exports = {
mysql: {
host: '192.168.0.222',
port: "3308",
user: 'root',
password: '123456',
database: 'ele_test',
}
}
然后建立index.js:
// node 后端服务器
const userApi = require('./api/userApi');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
//解决跨域
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// 后端api路由
app.use('/api', userApi);
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');
sqlMap.js:
// sql语句
var sqlMap = {
// 用户
user: {
add: 'insert into t_test(id, name) values (566, ?)'
}
}
module.exports = sqlMap;
在server文件夹下建立api文件夹，api文件夹下建立userApi.js：
var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
// 连接数据库
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);
}
};
// 增加用户接口
router.post('/addUser', (req, res) => {
var sql = $sql.user.add;
var params = req.body;
console.log(params,"===");
conn.query(sql, [params.username], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, result);
}
})
});
module.exports = router;
二、前端部分
1.安装
安装express:npm install express --save
安装mysql: npm install body-parser --save
安装body-parser: npm install body-parser --save
2.main.js中注册
全局引入并且注册axios
安装：npm install axios --save
注册：
import axios from 'axios'
Vue.prototype.$http = axios;
3.配置跨域
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
这部分很重要，如果target填写的有问题，就会产生一些问题，最初我填写的不是localhost,然后报错403。
4.编写测试部分
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<form>
<input type="text" name="username" v-model="userName"> <br>
<a href="javascript:;" @click="addUser">提交</a>
</form>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
userName: '',
}
},
methods: {
addUser() {
var name = this.userName;
this.$http.post('/api/addUser', {
username: name,
},{}).then((response) => {
console.log(response);
})
}
}
}
</script>
三、启动服务
然后进入server目录下，将node服务启动起来node index
然后将前端也启动起来，进入对应的test页面即可。
