没有合适的资源?快使用搜索试试~ 我知道了~
vue-cli3使用mock数据的方法分析
5星 · 超过95%的资源 2 下载量 90 浏览量
2020-11-21
14:16:18
上传
评论 1
收藏 66KB PDF 举报
温馨提示
试读
2页
本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下: 在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。 正文开始 在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。 在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示 ## vue-cli2 先放一张vue-cli2生成项目图片 mock文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文
资源详情
资源评论
资源推荐
vue-cli3使用使用mock数据的方法分析数据的方法分析
本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下:
在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进
度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。
正文开始正文开始
在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。
在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示
## vue-cli2
先放一张vue-cli2生成项目图片
mock文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文件,下面我们要对build目录下
webpack.dev.conf.js进行配置
// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
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/list',(req,res,next)=>{
res.json(goodsList);
})
}
后面的before(app)部分就定义了可以通过向/goods/list发送get请求来得到我们要的json文件。
weixin_38670186
- 粉丝: 8
- 资源: 945
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论10