vue+webpack模拟后台数据的示例代码

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

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

rush:js;"> const express = require('express') const app = express() //请求server var appData = require('../mock/goods.json') //加载本地数据文件 var apiRoutes = express.Router() app.use(apiRoutes) //通过路由请求数据

2、找到devServer,在里面加上before()方法

{ res.json(appData) }) } },

二、在goods.json文件

rush:js;"> { "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文件中:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...