資訊專欄INFORMATION COLUMN
摘要：開發(fā)請求本地數(shù)據(jù)的配置配置本地數(shù)據(jù)訪問在之后加加載本地數(shù)據(jù)文件獲取對應(yīng)的本地數(shù)據(jù)找到在里面添加接口返回數(shù)據(jù)，上面配置的數(shù)據(jù)就賦值給請求后調(diào)用文件目錄及內(nèi)容新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條新聞條新聞條新聞
VUE開發(fā)請求本地數(shù)據(jù)的配置.webpack.dev.conf.js
1.webpack.dev.conf.js配置本地數(shù)據(jù)訪問
a.在const portfinder = require("portfinder")之后加：
var appData = require("../db.json")//加載本地數(shù)據(jù)文件（db.json）
var getNewsList = appData.getNewsList//獲取對應(yīng)的本地數(shù)據(jù)
var login = appData.login
var getPrice = appData.getPrice
var createOrder = appData.createOrder
找到devServer{}在里面添加：
before (app) {
app.get("/api/getNewsList", (req, res) => {
res.json({
data: getNewsList
})//接口返回json數(shù)據(jù)，上面配置的數(shù)據(jù)getNewsList就賦值給data請求后調(diào)用
}),
app.get("/api/login", (req, res) => {
res.json({
data: login,
})
}),
app.get("/api/getPrice", (req, res) => {
res.json({
data: getPrice
})
}),
app.get("/api/createOrder", (req, res) => {
res.json({
data: createOrder
})
})
}
db.json文件目錄及內(nèi)容：
{
"getNewsList": [
{
"id": 1,
"title": "新聞條目1新聞條目1新聞條目1新聞條目1",
"url": "http://starcraft.com"
},
{
"id": 2,
"title": "新聞條目2新聞條目2新聞條目2新聞條目2",
"url": "http://warcraft.com"
},
{
"id": 3,
"title": "新聞條3新聞條3新聞條3",
"url": "http://overwatch.com"
},
{
"id": 4,
"title": "新聞條4廣告發(fā)布",
"url": "http://hearstone.com"
}
],
"login": {
"username": "yudongdong", "userId": 123123
},
"getPrice": {
"amount": 678
},
"createOrder": {
"orderId": "6djk979"
},
"getOrderList": {
"list": [
{
"orderId": "ddj123",
"product": "數(shù)據(jù)統(tǒng)計",
"version": "高級版",
"period": "1年",
"buyNum": 2,
"date": "2016-10-10",
"amount": "500元"
},
{
"orderId": "yuj583",
"product": "流量分析",
"version": "戶外版",
"period": "3個月",
"buyNum": 1,
"date": "2016-5-2",
"amount": "2200元"
},
{
"orderId": "pmd201",
"product": "廣告發(fā)布",
"version": "商鋪版",
"period": "3年",
"buyNum": 12,
"date": "2016-8-3",
"amount": "7890元"
}
]
}
}
2.組件里面：
created: function(){
this.$http.get("api/getNewsList")
.then((res) => {
this.newsList = res.data.data
console.log(res.data)
console.log(res.data.data)
console.log(this.newsList)
}, (err) => {
console.log(err)
})
}
重新啟動：npm run dev
注意：
res.data 返回的是一個對象，res.data.data返回的是一個數(shù)組
（我當時這里在頁面就是不出來數(shù)據(jù)，之后..........糾結(jié)了好久才知道要這樣的）
post請求：
app.post("/api/getNewsList", (req, res) => {
res.json({
data: getNewsList
})
}),
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/110242.html
摘要：在其的下面增加以下代碼代碼為在根目錄下創(chuàng)建存放模擬的數(shù)據(jù)文件我命名為，名字可以根據(jù)自己口味定義，但是要跟第一步的配置依賴要一樣。數(shù)據(jù)存放文件也需要更改為為請求的地址，為查詢數(shù)據(jù)的入口請求請求歐了 早期在vue構(gòu)建工程文件在build里面有dev-server.js，但是后來構(gòu)建去除了該文件集成到了webpack的webpack.dev.conf.js里面。 在項目制作過程中，作為一個前...
摘要：缺點需要增加本地的代碼量，以及需要配置實現(xiàn)攔截優(yōu)點數(shù)據(jù)通過會更豐富。缺點修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點可控內(nèi)容以及實現(xiàn)動態(tài)。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景 哎喲，好煩啊，這個需求還么結(jié)束就來下一個需求，程序員不要排期的嗎？ 沒辦法啊，資本主義的XX嘴臉啊 來吧，技術(shù)評審我倆把接口...
摘要：前言兵馬未動糧草先行同理項目開發(fā)過程中經(jīng)常會出現(xiàn)接口未出前端頁面已搭建完畢的情況此時為了提高前端的開發(fā)效率解放生產(chǎn)力我們可以按照預(yù)定的接口文檔做一些接口模擬的工作等等后端小伙伴開發(fā)完接口后我們只需要替換一個接口基地址即可初始準備這里已項目為 前言 兵馬未動,糧草先行; 同理,項目開發(fā)過程中經(jīng)常會出現(xiàn)接口未出, 前端頁面已搭建完畢的情況;此時為了提高前端的開發(fā)效率,解放生產(chǎn)力,我們 FE...
摘要：放置在目錄下或通過絕對路徑被引用。對于相關(guān)來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發(fā)布，不需要重啟服務(wù)。 作者：gauseen 0. 關(guān)于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架，易用、靈活、高效。 生態(tài)系統(tǒng) 項目 介紹 awesome-vue Vue.js 相關(guān)很棒的...
閱讀 979·2023-04-25 15:49
閱讀 3376·2021-09-22 15:13
閱讀 1558·2021-09-07 10:13
閱讀 3689·2019-08-29 18:34
閱讀 2786·2019-08-29 15:22
閱讀 742·2019-08-27 10:52
閱讀 910·2019-08-26 18:27
閱讀 3377·2019-08-26 13:44
