Vue 配置請求本地Json數據

zxhaaa 發布于2019-08-22 16:12 / 2282人閱讀

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

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數據，上面配置的數據seller就復制給data請求后調用
    }),
    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 文件里的調用)

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

最后重啟項目即可 npm run dev

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

GPU云服務器云服務器 json數據請求網址 json數據請求地址 ajax請求json數據 js發送請求 json數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94128.html

vue開發請求本地JSON數據

摘要：開發請求本地數據的配置配置本地數據訪問在之后加加載本地數據文件獲取對應的本地數據找到在里面添加接口返回數據，上面配置的數據就賦值給請求后調用文件目錄及內容新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條目新聞條新聞條新聞條新聞 VUE開發請求本地數據的配置.webpack.dev.conf.js 1.webpack.dev.conf.js配置本地數據訪問a.在const ...

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

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

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

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

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

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

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

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

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