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...