Vue教程系列第四十四节-express搭建一个简单的服务器
2018-10-30 本文已影响3人
独绽2018
今天我跟大家一块学习一下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.png5.接下来我们就可以在需要接口的地方使用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的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方,欢迎给我留言,我会第一时间回复。
就到这里了,休息休息一会儿吧:)明天继续加油噢!