需要用到

前端：
Vue-cli 快速構建項目，開發前端頁面
Vue-Resource 與后端交互
后端：
Node + Express 僅用于編寫API給前端提供數據
MySQL 創建數據庫

開始準備工作

安裝Vue-Cli
http://www.lxweimin.com/p/5c9b489d4103
之前已經寫過關于Vue的安裝，點擊連接
直到npm run dev運行起來
vue2本身是基于nodeJs的，此時node也已經安裝好了
Express 是基于 Node.js平臺，快速、開放、極簡的 web 開發框架，待會再安裝相關依賴

搭建后端Express服務器

在根目錄下創建server文件
1、db.js 數據庫mysql連接配置
// 數據庫連接配置

module.exports = {
    mysql: {
        host: 'localhost',     //mysql地址127.0.0.1
        user: 'root',     //連接mysql的用戶名和密碼
        password: '',
        database: 'mycake',   //數據庫名
        port: '3306',   //mysql端口號
    }
}

如果以上信息不太清楚，或者還未安裝mysql，請參考
http://www.lxweimin.com/p/023f3a758c05
2、index.js Express 服務器入口文件

// node 后端服務器
const cakeList = require('./api/cakeList');
const addUser= require('./api/addUser');
const express = require('express');
const app = express();
// 后端api路由
app.use('/api/cake', cakeList);
app.use('/api/user', addUser);
// 監聽端口
app.listen(3000);
console.log('success listen at port:3000......');

3、創建api文件夾
cakeList.js 關于cake查詢所有數據的api

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
// 連接數據庫
var conn = mysql.createConnection(models.mysql);
conn.connect();
// 增加cakelist接口
router.get('/cakelist', (req, res) => {
    var sql ="select * from cake";
    conn.query(sql, (err, result)=>{
        if (err) {
            console.log(err);
        }
        if (result) {
            console.log(result);
            res.json(result);
        }
    })
});
module.exports = router;

4、安裝express+mysql的依賴
在根目錄下

npm install express mysql  --save

注意：--save安裝后并將其保存到依賴列表中，如果不保存依賴列表可以忽略不寫，不寫--save就是臨時安裝某個依賴
此時進入 server 文件夾下
執行 node index
看到 success listen at port:3000……即服務端啟動成功。

編寫前端vue

1、Hello.vue 頁面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    } 
  },
  created:function (){
        this.$http.get('/api/cake/cakelist')
       .then((response) => {
        console.log(response.data);
      })
    }
}
</script>

2、安裝vue-resource
vue-resource相當于jquery中的ajax
只有安裝vue-resource，$http.get才能生效，不然就會報錯

npm install vue-resource --save

在main.js中引入vue-resource

import VueResource from 'vue-resource'
Vue.use(VueResource)

來看一下完成后的目錄結構

image.png

從圖上可以看出，前后端是完全分離式開發
此時還不能運行，因為服務器在3000端口上，8081端口訪問不到，這樣運行就會報Not Found 404錯誤

配置跨域

config／index.js
proxyTable參數，用來設置地址映射表

  dev: {
    env: require('./dev.env'),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:3000/api/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    },

即請求/api時就代表‘http://localhost:3000/api/’，
注意：這里最好使用http://127.0.0.1，因為我寫http://localhost也會報同樣的錯誤
現在我們可以運行啦npm run dev，記住：之前的啟動服務器千萬不要關閉，再開一個終端運行

image.png