成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue開發(fā) 請(qǐng)求本地JSON數(shù)據(jù)

TerryCai / 690人閱讀

摘要：開發(fā)請(qǐng)求本地?cái)?shù)據(jù)的配置配置本地?cái)?shù)據(jù)訪問在之后加加載本地?cái)?shù)據(jù)文件獲取對(duì)應(yīng)的本地?cái)?shù)據(jù)找到在里面添加接口返回?cái)?shù)據(jù)，上面配置的數(shù)據(jù)就賦值給請(qǐng)求后調(diào)用文件目錄及內(nèi)容新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條新聞條新聞條新聞

VUE開發(fā)請(qǐng)求本地?cái)?shù)據(jù)的配置.webpack.dev.conf.js

1.webpack.dev.conf.js配置本地?cái)?shù)據(jù)訪問
a.在const portfinder = require("portfinder")之后加：

var appData = require("../db.json")//加載本地?cái)?shù)據(jù)文件（db.json）
var getNewsList = appData.getNewsList//獲取對(duì)應(yīng)的本地?cái)?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請(qǐng)求后調(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)計(jì)",
    "version": "高級(jí)版",
    "period": "1年",
    "buyNum": 2,
    "date": "2016-10-10",
    "amount": "500元"
  },
  {
    "orderId": "yuj583",
    "product": "流量分析",
    "version": "戶外版",
    "period": "3個(gè)月",
    "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)
})

}
重新啟動(dòng)：npm run dev

注意：
res.data 返回的是一個(gè)對(duì)象，res.data.data返回的是一個(gè)數(shù)組
（我當(dāng)時(shí)這里在頁(yè)面就是不出來數(shù)據(jù)，之后..........糾結(jié)了好久才知道要這樣的）
post請(qǐng)求：
app.post("/api/getNewsList", (req, res) => {
res.json({

data: getNewsList

})
}),

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110242.html

相關(guān)文章

  • WEBPACK+VUE2.0開發(fā)請(qǐng)求本地模擬數(shù)據(jù)的配置方法

    摘要：在其的下面增加以下代碼代碼為在根目錄下創(chuàng)建存放模擬的數(shù)據(jù)文件我命名為，名字可以根據(jù)自己口味定義，但是要跟第一步的配置依賴要一樣。數(shù)據(jù)存放文件也需要更改為為請(qǐng)求的地址，為查詢數(shù)據(jù)的入口請(qǐng)求請(qǐng)求歐了 早期在vue構(gòu)建工程文件在build里面有dev-server.js，但是后來構(gòu)建去除了該文件集成到了webpack的webpack.dev.conf.js里面。 在項(xiàng)目制作過程中，作為一個(gè)前...

    galaxy_robot 評(píng)論0 收藏0

  • VueCli3.0中集成MockApi

    摘要：缺點(diǎn)需要增加本地的代碼量，以及需要配置實(shí)現(xiàn)攔截優(yōu)點(diǎn)數(shù)據(jù)通過會(huì)更豐富。缺點(diǎn)修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點(diǎn)可控內(nèi)容以及實(shí)現(xiàn)動(dòng)態(tài)。三本地周邊知識(shí)本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場(chǎng)景 哎喲，好煩啊，這個(gè)需求還么結(jié)束就來下一個(gè)需求，程序員不要排期的嗎？ 沒辦法啊，資本主義的XX嘴臉啊 來吧，技術(shù)評(píng)審我倆把接口...

    劉玉平 評(píng)論0 收藏0

  • vue項(xiàng)目接入mock&& axios 通用配置

    摘要：前言兵馬未動(dòng)糧草先行同理項(xiàng)目開發(fā)過程中經(jīng)常會(huì)出現(xiàn)接口未出前端頁(yè)面已搭建完畢的情況此時(shí)為了提高前端的開發(fā)效率解放生產(chǎn)力我們可以按照預(yù)定的接口文檔做一些接口模擬的工作等等后端小伙伴開發(fā)完接口后我們只需要替換一個(gè)接口基地址即可初始準(zhǔn)備這里已項(xiàng)目為 前言 兵馬未動(dòng),糧草先行; 同理,項(xiàng)目開發(fā)過程中經(jīng)常會(huì)出現(xiàn)接口未出, 前端頁(yè)面已搭建完畢的情況;此時(shí)為了提高前端的開發(fā)效率,解放生產(chǎn)力,我們 FE...

    Ilikewhite 評(píng)論0 收藏0

  • Vue-項(xiàng)目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

    摘要：放置在目錄下或通過絕對(duì)路徑被引用。對(duì)于相關(guān)來說，我們推薦使用而不是直接鏈?zhǔn)街付āＴ诓桓呐渲梦募那闆r下，前端頁(yè)面迭代發(fā)布，不需要重啟服務(wù)。 作者：gauseen 0. 關(guān)于 Vuejs 簡(jiǎn)介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，易用、靈活、高效。 生態(tài)系統(tǒng) 項(xiàng)目 介紹 awesome-vue Vue.js 相關(guān)很棒的...

    Arno 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<