淄博网站建设公司,苏州工业园区地图,简单的网站后台管理系统,免费申请电信卡上一篇我们介绍了ViteVue3TypeScript项目中axios的安装和配置#xff0c;并手动封装了api。本篇我们来在上篇基础上介绍如何引入mock#xff0c;并在本地模拟后台接口请求来达到本地测试的目的。在现在前后端分离的开发模式中#xff0c;前端页面很多渲染的数据都需要通过ht…上一篇我们介绍了ViteVue3TypeScript项目中axios的安装和配置并手动封装了api。本篇我们来在上篇基础上介绍如何引入mock并在本地模拟后台接口请求来达到本地测试的目的。在现在前后端分离的开发模式中前端页面很多渲染的数据都需要通过http请求异步从服务器获取前端很多开发工作都要依赖于后端的接口。但是实际项目上往往前端和后台的开发并行甚至前端都做了很多工作了后台还没开始这就没办法满足前端对后台接口的需求。所以前端需要一种方式可以来模拟数据请求从而更多的掌握主动权独立开发项目mockjs可以以无侵入的方式拦截 ajax 请求通过模拟服务器端响应来返回数据废话不所说大家撸起来......安装mockjs项目中mockjs主要用途一般为模拟后台数据接口所以安装为开发依赖就可以生产环境下失效。npm i mockjs vite-plugin-mock -D创建文件创建mock/index.ts在src目录下新建mock文件夹新建index.ts代码如下import { MockMethod } from vite-plugin-mockconst mock: ArrayMockMethod [{// 接口路径url: /api/test,// 接口方法method: get,// 返回数据response: () {return {status: 200,message: success,data: mock模拟数据请求成功}}}
]export default mock创建api/index.ts在src目录下新建api文件夹新建index.ts代码如下import request from /utils/request;export const testApi () {return request.get(/api/test)
}配置vite.config.ts为了正常要使用mock还需要在vite.config.ts文件对应位置对mock进行如下配置在vite启动项目的同时启动mock服务。//引入mock
import { viteMockServe } from vite-plugin-mock;//启动mock服务
viteMockServe({supportTs: false,logger: false,mockPath: ./src/mock/
})页面测试在src/views/index.vue文件添加如下代码进行接口测试divh1mock接口测试/h1el-button sizesmall clickmockTesttestApi/el-button
/divconst mockTest () {testApi().then((datas) {console.log(datas)})
}测试效果启动项目后点击按钮发现模拟接口返回数据正常至此mockjs安装和配置完成我相信每天学习一点点收获成长亿点点
