vuejs api server開發小抄

使用vue提供的vue-cli工具創建腳手架後，我能夠編寫客戶端router，component等代碼，能夠利用熱加載等特性，卻沒必要須要瞭解webpack等運行於後端的技術。

然而，當我須要建立後端的api，此問題終於浮出水面。個人服務端api代碼應該放置於何處才能夠：

1. 在開發階段，繼續利用webpack的熱加載

2. 在發佈階段，能夠沒必要改變任何api代碼就能夠繼續使用

3. 這些代碼不該該在dev-server.js內修改或者添加，而最好獨立於dev-server.js存在

答案是使用腳手架代碼中的config/index.js內的proxyTable屬性的配置，把到達dev-server.js的api訪問轉發給個人api server。

咱們從一個案例出來。一個hello組件，從服務器的api/who提取消息，並綁定到客戶端組件內。使用的技術以下：

1. vue-cli

2. express

3. vue-resource

首先，咱們建立腳手架代碼：

vue init webpack helloapi
cd helloapi
npm i
npm run dev

此時能夠看到瀏覽器打開，顯示我特別熟悉的vue默認的html頁面:

Welcome to Your Vue.js App

咱們如今提供一個api實現（api server），爲默認的vue的歡迎頁面消息作一個修改，服務器端來提供它：

var express = require('express');
var app = express();
app.get('/api', function (req, res) {
  var j = {msg:'Hello From Server'}
  res.end(JSON.stringify(j));
})
var server = app.listen(8181, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("listening at http://%s:%s", host, port)
})

客戶端(Hello.vue)須要安裝vue-resource

npm i vue-resource --save

併發起GET請求：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome'
    }
  },
  mounted(){
      this.$http.get('/api').then((response) => {
        var j = JSON.parse(response.body)
        this.msg = j.msg
      }, (response) => {
        console.log('error',response)
      });
  }
}
</script>

在src/main.js內使用vue-resource：

import r from 'Vue-Resource'
Vue.use(r)

特別重要的點來了，已經要在config/index.js內添加代理轉發，把原本發給dev-server.js的api rul轉發給咱們的api server。

module.exports = {
  ..
  dev: {
    ...
    proxyTable: {       
        '/api': 'http://localhost:8181',
    },
  }
}

啓動api server：

node server.js

如今啓動dev-server.js:

npm run dev

客戶端看到：

Hello From Server

這樣，開發階段咱們已經作到了apiserver和dev-server.js的代碼分離，而且繼續利用本有的熱加載能力。bingo!如今，我須要驗證的是，若是我發佈了此代碼，是否能夠api server代碼中和api有關的代碼無絲毫修改就能夠繼續複用。如今開始。

首先，發佈當前代碼：

npm run build

命令會建立一個dist目錄，內有編譯打包好的所有js代碼和資源代碼。儘管其中有index.html，可是直接用瀏覽器打開是無效的。好比首先啓動一個服務器，全部的資源文件必須經過瀏覽器發起，有服務器服務才能夠正常運行。咱們能夠稍稍修改api server，引入插件，讓此服務器除了提供api服務外，也能夠對整個dist目錄提供服務。只要添加代碼：

var path = require('path')
var dist = path.join(__dirname, 'dist')
app.use('/',express.static(dist))

而後啓動服務：

node server.js

打開瀏覽器，訪問http://localhost:8181,能夠看到和dev-server.js下同樣的結果。

這說明，api server能夠在發佈後不作修改（修改時爲了提供服務靜態內容的能力，對於api提供者的代碼是不作修改的）繼續使用。

做者：劉傳君

建立過產品，創過業。好讀書，求甚解。
能夠經過 1000copy#gmail.com 聯繫到我

出品

bootstrap小書 https://www.gitbook.com/book/...
http小書 http://www.ituring.com.cn/boo...
Git小書 http://www.ituring.com.cn/boo...