vue + webpack 模擬后臺數據

eternalshallow 發布于2019-08-26 12:09 / 1612人閱讀

摘要：一在文件中在后添加如下內容請求加載本地數據文件通過路由請求數據找到在里面加上方法二在文件小米音箱電腦三在文件中

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

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

const express = require("express")
const app = express() //請求server
var appData = require("../mock/goods.json") //加載本地數據文件
var apiRoutes = express.Router()
app.use(apiRoutes) //通過路由請求數據

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云服務器云服務器 js 后臺模擬鍵盤 django vue 數據綁定模擬數據模擬enum數據

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

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

手摸手，帶你用vue擼后臺系列一(基礎篇)

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

xiaotianyi 2019-08-22 11:03 評論0 收藏0
Vue后臺數據模擬的方法

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

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

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

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

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

graf 2019-05-21 19:33 評論0 收藏0
React項目實踐系列一

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

DC_er 2019-08-26 12:01 評論0 收藏0