0
点赞
收藏
分享

微信扫一扫

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

eelq 2022-01-10 阅读 61

 

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

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

  前端搭建服务器的原因:

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

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

  1.首先需要安装express:

  npm install express -–save-dev

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

  {

  "infos": [

  "该商家支持发票,请下单写好发票抬头",

  "品类:其他菜系,包子粥店",

  "北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",

  "营业时间:10:00-20:30"

  ]

  }

  

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

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

  const express=require('express')

  const app=express()

  var appData=require('./data.json')//加载本地数据文件

  var infos=appDatas//获取对应的本地数据

  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.我们可以看下我们的接口文件是否设置成功。

  在浏览器里查看路径

  localhost:XXXX/api/infos,如果能够将数据显示出数据来,说明配置成功。

  

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

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

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

举报

相关推荐

0 条评论