vue + webpack 模拟后台数据

eternalshallow 发布于2019-08-26 12:09 / 1611人阅读

摘要：一在文件中在后添加如下内容请求加载本地数据文件通过路由请求数据找到在里面加上方法二在文件小米音箱电脑三在文件中

一、在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文件中：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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