vue项目搭建mock服务(利用MockJs)
2023-09-11 14:20:08 时间
一,mockjs模拟banner和floor接口操作,组件获取数据
1.在vue根目录下创建mock文件夹,创建banner.json和floor.json, mockServer.js(提供服务,模拟接口) 安装mockjs npm i mockjs
mockServer.js 文件内容
//正儿八经的模拟接口
import Mock from 'mockjs'
import banner from './banner.json' //json数据被引入之后会变为真正的数组,不再是json串了
import floor from './floor.json' //json数据被引入之后会变为真正的数组,不再是json串了
//第一个参数,是以后我们要请求的模拟接口路径
//第二个参数,是访问这个接口后返回的数据
// '/mock/banner' /mock不能省,因为这个并不是去发送ajax请求,
// 发请求可以省,是因为我们在axios配置了baseUrl
// 这个不是发请求,是模拟整个接口
Mock.mock('/mock/banner',{code:200,data:banner})
Mock.mock('/mock/floor',{code:200,data:floor})
//最后切记在入口文件去引入一下,代表这个文件一开始就会执行
2.在入口文件main.js导入mock,
import '@/mock/mockServer'
3.在 ajax文件夹中新建mockAjax.js, 二次封装关于mock的ajax
mockAjax.js文件内容
//对axios的二次封装
// 配置基础路径和超时限制
// 添加进度条信息 nprogress
// 返回的响应不再需要从data属性当中拿数据,而是响应就是我们要的数据
// 统一处理请求错误, 具体请求也可以选择处理或不处理
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const service = axios.create({
baseURL: '/mock', // 配置基础路径
timeout: 20000, //和超时限制
});
//请求拦截器
//请求拦截器内部一般不会处理错误的信息
service.interceptors.request.use(config => {
//config是发送请求的配置对象,必须处理完返回这个配置对象
//开启我们的进度条
NProgress.start()
return config
});
// 响应拦截器
service.interceptors.response.use(
response => {
//停止进度条
NProgress.done()
//返回响应的时候,直接返回响应的data
return response.data
},
error => {
NProgress.done()
alert('请求出错' + error.message || '未知错误')
//以后不允许用户继续处理: 中断promise链
return new Promise(() => {}) //返回pending状态的promise 中断
//以后它允许用户继续对错误进行处理
// return Promise.reject(error)
}
);
export default service
4.在api---index.js中,使用mock的接口去请求 banner数据
引入二次封装的ajax; import mockAjax from '@/ajax/mockAjax'
// 使用mock的接口去请求 banner数据 get 请求 /banner
export const reqBannerList = () => mockAjax.get('/banner')
export const reqFloorList = () => mockAjax.get('/floor')
5.在入口文件main.js中导入mock接口函数
//这个是为了测试接口请求函数 后期也会使用这样的方式去使用
import * as API from '@/api'
//这个是为了测试接口请求函数 后期也会使用这样的方式去使用 import * as API from '@/api' // console.log(API) API.reqBannerList().then(v=> console.log(v)) // API.reqFloorList()
请求mock服务数据,并不会在真正发送请求,而是假请求
相关文章
- (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
- 【Vue+element+admin】登陆页面篇(login.vue)
- vue-cli3项目关闭烦人的代码检测
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue - 本地上传 Excel 文件页面表格预览(配合 Ant Design Vue / 带分页)
- Vue——vue中的双向数据绑定
- Java项目(前端vue后台java微服务)在线考试系统(java+vue+springboot+mysql+maven)
- Vue项目---尚品汇(创建项目)
- springboot + vue 项目之前端开发工具(一)
- vue-router的query和params的区别
- 15个 Vue 技巧,开发有段时间了,才知道还能这么用(你所知道真的包括这些吗?)
- vue confirm添加滚动条
- Vue+Echarts监控大屏实例八:智慧社区监控模板实例
- Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
- 在本机搭建vue-cli3项目
- 2017年React、Angular和Vue的动态
- SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目 图片上传并查看功能实现汇总
- vue项目 上传到git
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想
- vue 使用aes加密和rsa加密过程