vuejs api server开发小抄

2024年1月4日 123次阅读 来源: 1000copy

使用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…

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000007749465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞