本文為前後端聯合 的思路演示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. 插入資料