vue+webpack模拟后台数据的示例代码
作者:冯琦杰 时间:2024-06-05 10:04:11
一、在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://segmentfault.com/a/1190000015763652
标签:vue,webpack,后台数据
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python实现可变变量名方法详解
2021-04-23 11:42:49
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2024-02-27 00:00:25
理想高通滤波实现Python opencv示例
2022-09-29 03:58:07
![](https://img.aspxhome.com/file/2023/1/81461_0s.png)
手把手带你走进Go语言之类型转换
2024-02-14 23:25:05
![](https://img.aspxhome.com/file/2023/8/112218_0s.gif)
django 中QuerySet特性功能详解
2021-09-29 17:48:14
Firefox Bug: inline/inline-block的间隙
2009-11-03 13:20:00
Python+Opencv实战之人脸追踪详解
2022-09-22 16:03:38
![](https://img.aspxhome.com/file/2023/6/99136_0s.gif)
Python使用python-docx读写word文档
2023-12-27 06:27:30
![](https://img.aspxhome.com/file/2023/4/124924_0s.jpg)
聊聊Python代码中if __name__ == ‘__main__‘的作用是什么
2022-05-10 18:06:44
![](https://img.aspxhome.com/file/2023/6/118606_0s.jpg)
asp截取指定英汉混合字符串_支持中文
2011-04-19 10:39:00
SQL Server数据库复制失败的原因及解决方法
2024-01-17 20:35:50
![](https://img.aspxhome.com/file/2023/6/107686_0s.png)
Perl实现的Linux下socket代理服务器
2023-04-28 10:57:41
WPF框架Prism中ViewModelLocator用法介绍
2024-05-13 09:17:27
![](https://img.aspxhome.com/file/2023/6/126186_0s.jpg)
python通过配置文件共享全局变量的实例
2023-06-08 03:10:29
Django {{ MEDIA_URL }}无法显示图片的解决方式
2023-06-20 07:42:22
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2021-06-22 17:32:38
判断数据库表是否存在以及修改表名的方法
2024-01-22 09:21:24
golang redigo发布订阅使用的方法
2024-04-29 13:05:23
![](https://img.aspxhome.com/file/2023/5/133925_0s.png)
Python读写压缩文件的方法
2023-06-02 19:37:53
基于python,Matplotlib绘制函数的等高线与三维图像
2021-09-06 08:51:33
![](https://img.aspxhome.com/file/2023/5/110425_0s.png)