Vue教程系列第四十四节-express搭建一个简单的服务器

今天我跟大家一块学习一下express搭建一个简单的服务器。

前端搭建服务器的原因：

在我们项目开发过程中，当后端端口没有开发出来，而我们又需要开发接口调用数据的时候，我们就需要创建一个简单的服务器，来模拟端口。这个端口需要我们跟后端约定好，避免后期因重新修改接口而遗漏，造成不必要的麻烦。

用express搭建服务器需要以下几步：

1.首先需要安装express:

npm install express -–save-dev

2.在根目录下创建一个data.json文件，这是我们通过接口返回的数据文件，设置如下：

{
  "infos": [
     "该商家支持发票,请下单写好发票抬头",
     "品类:其他菜系,包子粥店",
     "北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",
     "营业时间:10:00-20:30"
    ]
 }

屏幕快照 2018-10-30 上午7.11.38.png

3.在要目录下创建vue.config.js配置文件，这个配置文件就是对express的配置，加载本地数据文件以及配置接口的路由。配置如下：

const express = require('express')
const app = express()
var appData = require('./data.json')//加载本地数据文件
var infos = appData.infos//获取对应的本地数据
var apiRoutes = express.Router()
app.use('/api', apiRoutes) //配置接口路径
module.exports = {
 devServer: {
   before: function(app) {
     app.get('/api/infos', function(req, res) { //对应的数据接口
       res.json({ 
         errno: 0,
         data: infos //对应的本地数据
       });
     });
    }
  }
}

4.我们可以看下我们的接口文件是否设置成功。

在浏览器里查看路径http://localhost:XXXX/api/infos，如果能够将数据显示出数据来，说明配置成功。

屏幕快照 2018-10-30 上午7.18.20.png

5．接下来我们就可以在需要接口的地方使用axios来获取数据了。比如我们在About.vue里，延续我们上一节课的内容，补充全：

methods: {
   getApi() {
     this.$axios.get("/api/infos")
     .then((res) => {
          console.log(res.data.data)
     })
     .catch((err) => {
          console.log(err)
     })
    }
  }

我们会在控制台打印出我们想要看的数据了哈。

这节课最核心的部分就是配置vue.config.js文件，这个文件不会自动生成，需要我们手动去创建，里面的内容直接复制我提供的代码就可，在需要修改的地方修改一下即可。

可能我的视频是会罗嗦一些，只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，我会第一时间回复。

就到这里了，休息休息一会儿吧：）明天继续加油噢！