今天我跟大家一塊學(xué)習(xí)一下express搭建一個簡單的服務(wù)器厕九。
前端搭建服務(wù)器的原因：
在我們項目開發(fā)過程中，當(dāng)后端端口沒有開發(fā)出來盔憨，而我們又需要開發(fā)接口調(diào)用數(shù)據(jù)的時候洗搂，我們就需要創(chuàng)建一個簡單的服務(wù)器，來模擬端口沛申。這個端口需要我們跟后端約定好劣领，避免后期因重新修改接口而遺漏，造成不必要的麻煩铁材。
用express搭建服務(wù)器需要以下幾步：
1.首先需要安裝express:
npm install express -–save-dev
2.在根目錄下創(chuàng)建一個data.json文件尖淘，這是我們通過接口返回的數(shù)據(jù)文件，設(shè)置如下：
{
"infos": [
"該商家支持發(fā)票,請下單寫好發(fā)票抬頭",
"品類:其他菜系,包子粥店",
"北京市昌平區(qū)回龍觀西大街龍觀置業(yè)大廈底商B座102單元1340",
"營業(yè)時間:10:00-20:30"
]
}
3.在要目錄下創(chuàng)建vue.config.js配置文件著觉，這個配置文件就是對express的配置村生，加載本地數(shù)據(jù)文件以及配置接口的路由。配置如下：
const express = require('express')
const app = express()
var appData = require('./data.json')//加載本地數(shù)據(jù)文件
var infos = appData.infos//獲取對應(yīng)的本地數(shù)據(jù)
var apiRoutes = express.Router()
app.use('/api', apiRoutes) //配置接口路徑
module.exports = {
devServer: {
before: function(app) {
app.get('/api/infos', function(req, res) { //對應(yīng)的數(shù)據(jù)接口
res.json({
errno: 0,
data: infos //對應(yīng)的本地數(shù)據(jù)
});
});
}
}
}
4.我們可以看下我們的接口文件是否設(shè)置成功饼丘。
在瀏覽器里查看路徑http://localhost:XXXX/api/infos趁桃，如果能夠?qū)?shù)據(jù)顯示出數(shù)據(jù)來，說明配置成功葬毫。
5．接下來我們就可以在需要接口的地方使用axios來獲取數(shù)據(jù)了镇辉。比如我們在About.vue里，延續(xù)我們上一節(jié)課的內(nèi)容贴捡，補(bǔ)充全：
methods: {
getApi() {
this.$axios.get("/api/infos")
.then((res) => {
console.log(res.data.data)
})
.catch((err) => {
console.log(err)
})
}
}
我們會在控制臺打印出我們想要看的數(shù)據(jù)了哈忽肛。
這節(jié)課最核心的部分就是配置vue.config.js文件，這個文件不會自動生成烂斋，需要我們手動去創(chuàng)建屹逛，里面的內(nèi)容直接復(fù)制我提供的代碼就可础废，在需要修改的地方修改一下即可。
可能我的視頻是會羅嗦一些罕模，只是為了讓所有剛步入前端學(xué)習(xí)vue的小伙伴們都能明白评腺。如果有什么建議或者有哪些不懂的地方，歡迎給我留言淑掌，我會第一時間回復(fù)蒿讥。
就到這里了，休息休息一會兒吧：）明天繼續(xù)加油噢抛腕！
