資訊專欄INFORMATION COLUMN
摘要：開發請求本地數據的配置配置本地數據訪問在之后加加載本地數據文件獲取對應的本地數據找到在里面添加接口返回數據，上面配置的數據就賦值給請求后調用文件目錄及內容新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條新聞條新聞條新聞
VUE開發請求本地數據的配置.webpack.dev.conf.js
1.webpack.dev.conf.js配置本地數據訪問
a.在const portfinder = require("portfinder")之后加：
var appData = require("../db.json")//加載本地數據文件（db.json）
var getNewsList = appData.getNewsList//獲取對應的本地數據
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數據，上面配置的數據getNewsList就賦值給data請求后調用
}),
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文件目錄及內容：
{
"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廣告發布",
"url": "http://hearstone.com"
}
],
"login": {
"username": "yudongdong", "userId": 123123
},
"getPrice": {
"amount": 678
},
"createOrder": {
"orderId": "6djk979"
},
"getOrderList": {
"list": [
{
"orderId": "ddj123",
"product": "數據統計",
"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": "廣告發布",
"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返回的是一個數組
（我當時這里在頁面就是不出來數據，之后..........糾結了好久才知道要這樣的）
post請求：
app.post("/api/getNewsList", (req, res) => {
res.json({
data: getNewsList
})
}),
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110242.html
摘要：在其的下面增加以下代碼代碼為在根目錄下創建存放模擬的數據文件我命名為，名字可以根據自己口味定義，但是要跟第一步的配置依賴要一樣。數據存放文件也需要更改為為請求的地址，為查詢數據的入口請求請求歐了 早期在vue構建工程文件在build里面有dev-server.js，但是后來構建去除了該文件集成到了webpack的webpack.dev.conf.js里面。 在項目制作過程中，作為一個前...
摘要：缺點需要增加本地的代碼量，以及需要配置實現攔截優點數據通過會更豐富。缺點修改內容溝通成本高，跟后端扯皮利用去模擬優點可控內容以及實現動態。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景 哎喲，好煩啊，這個需求還么結束就來下一個需求，程序員不要排期的嗎？ 沒辦法啊，資本主義的XX嘴臉啊 來吧，技術評審我倆把接口...
摘要：前言兵馬未動糧草先行同理項目開發過程中經常會出現接口未出前端頁面已搭建完畢的情況此時為了提高前端的開發效率解放生產力我們可以按照預定的接口文檔做一些接口模擬的工作等等后端小伙伴開發完接口后我們只需要替換一個接口基地址即可初始準備這里已項目為 前言 兵馬未動,糧草先行; 同理,項目開發過程中經常會出現接口未出, 前端頁面已搭建完畢的情況;此時為了提高前端的開發效率,解放生產力,我們 FE...
摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。 作者：gauseen 0. 關于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。 生態系統 項目 介紹 awesome-vue Vue.js 相關很棒的...
閱讀 659·2023-04-25 15:49
閱讀 3116·2021-09-22 15:13
閱讀 1251·2021-09-07 10:13
閱讀 3477·2019-08-29 18:34
閱讀 2560·2019-08-29 15:22
閱讀 510·2019-08-27 10:52
閱讀 687·2019-08-26 18:27
閱讀 3021·2019-08-26 13:44
