Vue 配置請求本地Json數(shù)據(jù)

zxhaaa 發(fā)布于2019-08-22 16:12 / 2286人閱讀

摘要：文件里的修改在后添加加載本地的文件然后找到，在他的里面插入一下代碼接口返回數(shù)據(jù)，上面配置的數(shù)據(jù)就復制給請求后調(diào)用請求訪問文件里的調(diào)用這里要使用箭頭函數(shù)，使用的寫法是最后重啟項目即可參考鏈接

build/webpack.dev.conf.js 文件里的修改

在const portfinder = require("postfinder")后添加

const express = require("express")
const app = express()
const appData = require("../data.json")//加載本地的json文件
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use("/api",apiRoutes)

然后找到devServer，在他的里面插入一下代碼：

before(app){
    app.get("/api/seller",(reg,res)=>{
        res.json({
            errno: 0,
            data: seller
        })//接口返回json數(shù)據(jù)，上面配置的數(shù)據(jù)seller就復制給data請求后調(diào)用
    }),
    app.get("/api/goods",(reg,res) => {
        res.json({
            errno: 0,
            data: goods
        })
    }),
    app.get("api/ratings",(reg,res) => {
        res.json({
            errno: 0,
            data: ratings
        })
    })
}

請求訪問(.vue 文件里的調(diào)用)

this.$axios.get("/api/home", {
     params: {
         categoryId: categoryId
     }
})
.then(response => {     //這里要使用箭頭函數(shù)，使用ES5的寫法  this是undefined
    console.log(response);
 })
 .catch(error => {
     console.log(error)
     console.log(this);
 })

最后重啟項目即可 npm run dev

參考鏈接：https://my.oschina.net/lpcysz...

云服務(wù)器 GPU云服務(wù)器 json數(shù)據(jù)請求網(wǎng)址 json數(shù)據(jù)請求地址 ajax請求json數(shù)據(jù) js發(fā)送請求 json數(shù)據(jù)

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

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

相關(guān)文章

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

摘要：開發(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 ...

TerryCai 2019-08-26 18:27 評論0 收藏0
WEBPACK+VUE2.0開發(fā)請求本地模擬數(shù)據(jù)的配置方法

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

galaxy_robot 2019-08-22 11:22 評論0 收藏0
vue項目接入mock&& axios 通用配置

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

Ilikewhite 2019-08-26 10:33 評論0 收藏0
VueCli3.0中集成MockApi

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

劉玉平 2019-08-26 13:59 評論0 收藏0
Vue-項目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

摘要：放置在目錄下或通過絕對路徑被引用。對于相關(guān)來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發(fā)布，不需要重啟服務(wù)。作者：gauseen 0. 關(guān)于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架，易用、靈活、高效。生態(tài)系統(tǒng) 項目介紹 awesome-vue Vue.js 相關(guān)很棒的...

Arno 2019-08-26 13:49 評論0 收藏0