vue教程

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.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的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方,欢迎给我留言,我会第一时间回复。

就到这里了,休息休息一会儿吧:)明天继续加油噢!

上一篇下一篇

猜你喜欢

热点阅读