junit mock服务器文件,mock数据的几种姿势

前后端分离,往往后端负责提供数据接口,前端负责数据展示,但是往往后端接口有延迟或者其他原因,前端并不能等待接口进行下一步开发,所以mock数据就变得很重要(由于我司后端给力,接口给的非常迅速,所以实际开发中并没有使用过mock数据,mock数据往往是在个人项目中使用)。废话不讲,来看一下mock数据的不同方式

easy-mock

官网

注册配置好后会有个工作台

5427b17200673f12a610be0508026683.png

此时在vue.config.js里进行配置

module.exports = {

configureWebpack: {

// 扩展webpack

devServer: {

proxy: {

// easymock开头的请求,webpack帮你转发到target之上

'/easymock': {

target: ' https://www.easy-mock.com/mock/5c77db5ffb8a585dcd816fa4',

changeOrigin: true,

ws: true,

pathRewrite: {

'^/easymock': ''

}

}

}

}

}

}

复制代码

请求数据即可let mock = await this.$axios.get('/api/test')

webpack-dev-server中内置的express

在vue.config.js里进行配置

module.exports = {

configureWebpack: {

// 扩展webpack

devServer: {

before (app) {

// app就是一个express

app.get('/api/test', function (req, res) {

res.json({

list: [

{ text: 'node', },

{ text: 'vue',},

{ text: 'react', }

]

})

})

}

}

}

}

复制代码

请求接口即可let ret = await this.$axios.get('/api/test')

Mock

官网

具体根据官网配置即可,可以选择install mock,也可以选择将mock压缩文件放在static文件夹下,在main.js文件里注册一下

if (process.env.NODE_ENV !== 'production') {

require('@/mock')

}

复制代码

其他按照官网配置即可

express服务器

新建server.js文件

// 安装express

const express = require('express')

const app = express()

// 设置允许跨域访问该服务.

app.all('*', function (req, res, next) {

res.header('Access-Control-Allow-Origin', '*')

res.header('Access-Control-Allow-Headers', 'Content-Type')

res.header('Access-Control-Allow-Methods', '*')

res.header('Content-Type', 'application/json;charset=utf-8')

next()

})

app.get('/api/test', function (req, res) {

res.json({

title: '测试数据',

list: [

{ text: 'node', },

{ text: 'vue',},

{ text: 'react', }

]

})

})

const server = app.listen(9082, function () {

console.log('Express app server listening on port %d', server.address().port)

})

复制代码

此时node server.js会显示Express app server listening on port 9082说明我们的9082端口启动成功,在浏览器输入http://localhost:9082/api/test就会出现我们填写的死数据,在页面请求let res = await this.$axios.get('http://localhost:9082/api/test')即可

yapi

具体参考esay-mock,但是yapi不支持https,官网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值