今天我跟大家一塊學習一下express搭建一個簡單的服務器。

前端搭建服務器的原因：

在我們項目開發(fā)過程中，當后端端口沒有開發(fā)出來，而我們又需要開發(fā)接口調用數據的時候，我們就需要創(chuàng)建一個簡單的服務器，來模擬端口。這個端口需要我們跟后端約定好，避免后期因重新修改接口而遺漏，造成不必要的麻煩。

用express搭建服務器需要以下幾步：

1.首先需要安裝express:

npm install express -–save-dev

2.在根目錄下創(chuàng)建一個data.json文件，這是我們通過接口返回的數據文件，設置如下：

{
  "infos": [
     "該商家支持發(fā)票,請下單寫好發(fā)票抬頭",
     "品類:其他菜系,包子粥店",
     "北京市昌平區(qū)回龍觀西大街龍觀置業(yè)大廈底商B座102單元1340",
     "營業(yè)時間:10:00-20:30"
    ]
 }

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

3.在要目錄下創(chuàng)建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里，延續(xù)我們上一節(jié)課的內容，補充全：

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

我們會在控制臺打印出我們想要看的數據了哈。

這節(jié)課最核心的部分就是配置vue.config.js文件，這個文件不會自動生成，需要我們手動去創(chuàng)建，里面的內容直接復制我提供的代碼就可，在需要修改的地方修改一下即可。

可能我的視頻是會羅嗦一些，只是為了讓所有剛步入前端學習vue的小伙伴們都能明白。如果有什么建議或者有哪些不懂的地方，歡迎給我留言，我會第一時間回復。

就到這里了，休息休息一會兒吧：）明天繼續(xù)加油噢！