Vue+MySQL+Express小試牛刀

眼睛一閉一睜，到年末了。早就想嘗試用js玩兒全棧，最近正好作畢設了，是一個關於資金的管理系統，因而乎，正好用來練練手。一咬牙一跺腳----嗯，就用Vue+MySQL+Express吧。前端用Vue，後端用Express作服務端提供數據接口，數據庫用MySQL（因爲畢設就要求的是基於SQL數據庫）。

說時易，作時難。之前都是單寫Vue，數據請求是請求的假數據，並且沒有搭建過環境，因此單獨用Express的話，也只是用express-generator生成expreess項目，並且前端是基於jade或ejs模板的。思來想去不知道如何將Vue加進去，若是要用Vue而且以組件式開發，則必然要用到webpack編譯打包，因而...

1.用vue-cli腳手架工具建立一個基於webpack的Vue項目

前提：安裝node環境

首先全局安裝： npm install -g vue-cli,而後建立一個項目文件夾，進入項目目錄執行：vue init webpack my-project(my-project是項目名)。安裝完成以後能夠執行 npm install 安裝依賴，執行 npm run dev進行開發時調試。

安裝 vue-resource依賴,一種安裝方式先在package.json中對應地方添加，而後執行npm install

"dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.0.3",
    "vue-resource": "^1.0.3"
  },

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測試文件

因爲這裏只是爲了測試，因此直接在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>

4.設置代理與跨域

完成上面3步以後，執行npm run dev，而後輸入一組數據，點擊保存，你會發現會報一個錯誤：vue-resource.common.js?e289:1071 POST http://localhost:8080/api/user/addUser 404 (Not Found).
這是因爲直接訪問8080端口，是訪問不到的，因此這裏須要設置一下代理轉發映射.

vue-cli的config文件中有一個proxyTable參數，用來設置地址映射表，能夠添加到開發時配置（dev）中

dev: {
    // ...
    proxyTable: {
        '/api': {
            target: 'http://127.0.0.1:3000/api/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    // ...
}

即請求/api時就表明http://127.0.0.1:3000/api/(這裏要寫ip，不要寫localhost)，
changeOrigin參數接收一個布爾值，若是爲true，這樣就不會有跨域問題了。

好了，到這裏，基本上完成了，能夠去添加一個數據試試了。

最終項目目錄結構

|-- build
|-- config
|-- node_modules
|-- server
  |-- api
    |-- userApi.js
  |-- db.js
  |-- index.js
  |-- sqlMap.js
|-- src
  |-- assets
  |-- components
    |-- Hello.vue
  |-- App.vue
|-- static
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- index.html
|-- package.json
|-- README.md

終於調通了，這裏的項目目錄還能夠根據項目的實際狀況進行模塊劃分等等。若有問題或其餘建議，歡迎交流~
博客原文：http://fehey.com/2017/01/20/v...

注：建議換用 axios