vue + webpack 模擬后臺(tái)數(shù)據(jù)

eternalshallow 發(fā)布于2019-08-26 12:09 / 1634人閱讀

摘要：一在文件中在后添加如下內(nèi)容請(qǐng)求加載本地?cái)?shù)據(jù)文件通過路由請(qǐng)求數(shù)據(jù)找到在里面加上方法二在文件小米音箱電腦三在文件中

一、在webpack-dev-conf.js文件中：

1、在const portfinder = require(‘portfinder’)后添加如下內(nèi)容

const express = require("express")
const app = express() //請(qǐng)求server
var appData = require("../mock/goods.json") //加載本地?cái)?shù)據(jù)文件
var apiRoutes = express.Router()
app.use(apiRoutes) //通過路由請(qǐng)求數(shù)據(jù)

2、找到devServer,在里面加上before（）方法

devServer: {
    clientLogLevel: "warning",
    historyApiFallback: {
        rewrites: [
            { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, "index.html") },
        ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
        poll: config.dev.poll,
    },
    before(app) {
        app.get("/goods", (req, res) => {
            res.json(appData)
        })
    }
},

二、在goods.json文件：

{
    "status": "0",
    "msg": "",
    "result": [
        {
            "productId": "100001",
            "productName": "小米6",
            "productPrice": "2499",
            "productImg": "1.jpg"
        },{
            "productId": "100002",
            "productName": "音箱",
            "productPrice": "999",
            "productImg": "2.jpg"
        },{
            "productId": "100003",
            "productName": "電腦",
            "productPrice": "199",
            "productImg": "3.jpg"
        }
    ]
}

三、在GoodsList.vue文件中：

GPU云服務(wù)器云服務(wù)器 js 后臺(tái)模擬鍵盤 django vue 數(shù)據(jù)綁定模擬數(shù)據(jù) 模擬enum數(shù)據(jù)

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

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

相關(guān)文章

手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)

摘要：詳細(xì)具體的使用可以見文章手摸手，帶你優(yōu)雅的使用。為了加速線上鏡像構(gòu)建的速度，我們利用源進(jìn)行加速并且將一些常見的依賴打入了基礎(chǔ)鏡像，避免每次都需要重新下載。完整項(xiàng)目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 評(píng)論0 收藏0
Vue后臺(tái)數(shù)據(jù)模擬的方法

摘要：初始配置是實(shí)際的路徑配置完成以后后期添加添加虛擬的步驟在文件中配置需要的數(shù)據(jù)在文件中配置接口數(shù)據(jù)在文件中配置接口重啟服務(wù)器一定要重啟服務(wù)器，不然修改無效。并且每次對(duì)虛擬的修改都需要重啟服務(wù)器。本文是在我學(xué)習(xí)vue2.0的一個(gè)視頻上接觸學(xué)習(xí)并結(jié)合網(wǎng)上搜索到的一些提示實(shí)現(xiàn)的。這是我實(shí)現(xiàn)并總結(jié)的步驟記錄。初始配置： showImg(https://segmentfault.com/img...

WelliJhon 2019-08-23 14:23 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列五(v4.0新版本)

摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，...

MonoLog 2019-08-26 13:43 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列五(v4.0新版本)

摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，收獲了三...

graf 2019-05-21 19:33 評(píng)論0 收藏0
React項(xiàng)目實(shí)踐系列一

摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠(yuǎn)程的其實(shí)還有個(gè)關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團(tuán)隊(duì)提供了平臺(tái)。數(shù)據(jù)分析平臺(tái)-實(shí)踐系列一項(xiàng)目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項(xiàng)目的實(shí)踐過程以及自己對(duì)前端的學(xué)習(xí)與體悟。技術(shù)選型框架： React 路由： React-Router 4 狀態(tài)管...

DC_er 2019-08-26 12:01 評(píng)論0 收藏0