本文为前后端联合 的思路演示demo：
重要工具： Vue-Cli Mysql Nodejs Express Webpack打包工具
重要概念：
nodejs其实是可以做服务器的！
nodejs就是让JavaScript(js)可以实现服务器上的开发。
vue(前端)+nodejs(JavaScript的运行环境)=实现服务器上的开发(后端技术)服务器：
用来提供 Web 浏览的数据， 服务器还包括了数据库
主流的服务器架构 lamp j2ee .net 是应用最多的网站架构
1.Vue前端准备
前提：安装node环境 ， 自行百度
创建一个基础的vue 项目
使用的是webpack 打包工具 创建
首先全局安装： npm install -g vue-cli,然后创建一个项目文件夹
进入项目目录执行：vue init webpack my-project(my-project是项目名)。
安装完成之后可以执行 npm install 安装依赖，执行 npm run dev
由于这里只是为了测试，所以直接在vue-cli生成的Hello.vue中编写即可。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<form>
<input type="text" name="username" v-model="userName"> <br>
<input type="text" name="age" v-model="age"> <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: '',
age: ''
}
},
methods: {
addUser() {
var name = this.userName;
var age = this.age;
this.$http.post('/api/user/addUser', {
username: name,
age: age
},{}).then((response) => {
console.log(response);
})
}
}
}
</script>
2.添加Express 服务器
前提：电脑安装mysql数据库
在项目根文件夹下创建一个server文件夹。然后里面创建下面三个文件：
db.js----用来添加mysql配置
// 数据库连接配置
module.exports = {
mysql: {
host: 'localhost',
user: 'root',
password: '',
database: 'test',
port: '3306'
}
}index.js----Express服务器入口文件
// 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.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 (0, ?, ?)'
}
}
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
即服务端启动成功。
3.设置跨域
vue-cli的config文件中有一个proxyTable参数，用来设置地址映射表，
可以添加到开发时配置（dev）中
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://127.0.0.1:3000/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// ...
}此时，记得安装 vue-resources 执行 npm install --save vue-resource
Vue.js是数据驱动的， vue-resource是Vue.js的一款插件，
它可以通过XMLHttpRequest或JSONP发起请求并处理响应。
也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁.
此时在inedx.js文件夹下加入插件
import VueResource from 'vue-resource'
Vue.use(VueResource)
最终项目目录结构
|-- build
|-- config
|-- node_modules
|-- server
|-- api
|-- userApi.js
|-- db.js
|-- index.js
|-- sqlMap.js
|-- src
|-- assets
|-- components
|-- Helloworld.vue
|-- App.vue
|-- static
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- index.html
|-- package.json
|-- README.md
4. 插入数据
参考文章：https://segmentfault.com/a/1190000008176208