vue+express+mysql

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页面即可。

参考链接：https://segmentfault.com/a/1190000012186439