VUE+nodejs+mysql的最简单应用

安装node、vue-cli、用webpack生成简单的项目目录

这一步不再做过多的介绍，聪明的你一定能在互联网上找到菜鸟教程等相关资源完成学习vue的第一步~
安装完成之后记得安装vue-resource依赖

编写服务端

在项目根文件夹下创建一个 server 文件夹。然后里面创建下面三个文件：index.js,db.js,sqlMap.js，一个api目录，api里面建一个文件userApi.js

db.js——用来添加 mysql 配置

根据mysql的IP，端口，用户名，密码，数据库名称自行修改
代码如下：

// 数据库连接配置

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

index.js——Express 服务器入口文件

根据mysql的IP，端口，用户名，密码，数据库名称自行修改
代码如下：

// node 后端服务器
const userApi = require('./api/userApi')
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())
app.use(bodyParser.urlencoded({ extended: false }))
// 后端api路由

app.use('/api/user', userApi)
// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')

sqlMap.js——SQL 语句映射文件，供 API 调用

// sql语句

var sqlMap = {
    user: {
        add: 'insert into user(id,name,age) values (00001,?,?)'
    }

}

module.exports = sqlMap

api/userApi.js —— 测试用 API 示例

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, params.age], function (err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});
module.exports = router;

项目下再安装依赖
npm install express mysql body-parser
此时在 server 文件夹下执行node index（这里也可以加载package.json中，然后使用 npm 执行）看到 success listen at port:3000……即服务端启动成功。

编写前端页面

我们打开src里的hello.vue,编写如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="userName" placeholder="请输入姓名">
    <input v-model="age" placeholder="请输入年龄">
    <button v-on:click="addUser">提交</button>
  </div>
</template>

<script>
  export default {
    name: 'Hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        userName: '',
        age: ''
      }
    },
    methods: {
      addUser() {
        var name = this.userName;
        var age = this.age;
        this.$http.post('http://localhost:3000/api/user/addUser', {
          username: name,
          age: age
        }, {}).then((response) => { console.log(response); })
      }
    }
  }
</script>

<style>

</style>

数据库

基本语句是
DROP TABLE IF EXISTS user;
CREATE TABLE user (id varchar(50) NOT NULL,name varchar(255)
DEFAULT NULL,age int(11)
DEFAULT NULL,PRIMARY KEY (id))
ENGINE=InnoDB
DEFAULT CHARSET=utf8;

参考文章：
链接：https://www.jianshu.com/p/4c058db039d5