今天我跟大家一块学习一下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的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，我会第一时间回复。
就到这里了，休息休息一会儿吧：）明天继续加油噢！
