位置: IT常识 - 正文

Vue3中简单使用Mock.js(vue mocha)

编辑:rootadmin
Vue3中简单使用Mock.js mock.js简介

推荐整理分享Vue3中简单使用Mock.js(vue mocha),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 mounted,vue modern,vue3 mounted,vue3怎么用,vue modern,vue-monaco,vue3 mock,vue3 mock,内容如对您有帮助,希望把文章链接给更多的朋友!

  官方链接:Mock.js (mockjs.com)

        前端开发人员用来模拟虚拟数据,拦截ajax请求,方便模拟后端接口

安装npm install mockjs使用

        本文主要介绍在Vue项目中使用mock.js,包括axios发送请求与请求简单封装

创建mock文件夹,新建index.js文件

// 引入mockjsimport Mock from "mockjs";// 获取 mock.Random 对象const Random = Mock.Random;// 使用mockjs模拟数据let tableList = [ { id: "5ffa80aD-9CF4-0C77-eBFC-f6612BfAcF4F", account: "admin", password: "123456", address: "36918166@qq.com", }, { id: "4FcC922C-C72c-95c3-Ef92-FbFAc24cc831", account: "ebHoL6", password: "i320Hu74fbn2Gi", address: "48165263@qq.com", },]// for (let i = 0; i < 20; i++) {// let newObject = {// id: Random.guid(), // 获取全局唯一标识符// account: /^[a-zA-Z0-9]{4,6}$/,// password: /^[a-zA-Z]\w{5,17}$/,// address: /[1-9]\d{7,10}@qq\.com/,// };// tableList.push(newObject);// }/** get请求 * 获取用户列表 */Mock.mock("/api/mockGetList", "get", () => { return { code: "0", data: tableList, };});/** post请求添加表格数据 */Mock.mock("/api/add", "post", (params) => { let newData = JSON.parse(params.body); newData.id = Random.guid(); tableList.push(newData); return { code: "0", message: "success", data: tableList, };});

        模拟数据可自己手动编写,也可由for循环自动生成,可以设置数量,字段(可以通过正则表达式限制输出格式)。最后可设定请求路径,请求方式以及返回内容,可根据自身需求进行更改。

Vue3中简单使用Mock.js(vue mocha)

创建api文件夹,新建http.js文件(请求封装)

import axios from "axios";import { ElLoading, ElMessage } from "element-plus";let http = axios.create({ baseURL: "", timeout: 10000,});let loadingInstance;// 拦截器的添加http.interceptors.request.use( (config) => { loadingInstance = ElLoading.service("加载中"); return config; }, (err) => { loadingInstance?.close(); ElMessage.error("网络异常"); return Promise.reject(err); });//响应拦截器http.interceptors.response.use( (res) => { loadingInstance?.close(); return res.data; }, (err) => { loadingInstance?.close(); ElMessage.error("请求失败"); return Promise.reject(err); });export default http;

这部分主要是对请求进行封装

新建mockApi.js文件(接口封装)

import http from "./http.js";export default { //用户列表 findAll() { return http({ url: `/api/mockGetList`, method: "get", }); }, //添加用户 addUser(user) { return http({ url: `/api/add`, method: "post", data: user, }); },}

注意:url与提交方法要与mock中模拟请求保持一致

调用封装好的接口

         导入模拟数据与接口文件,根据自己的路径进行修改

import "../mock/index.js";import mockApi from "../api/mockApi/mockApi.js";

        调用接口

//页面数据请求let tableData = reactive([]);const getList = () => { mockApi .findAll() .then((res) => { console.log(res) if (res.code === "0"){ tableData.push.apply(tableData, res.data); } }) .catch(function (error) { console.log(error); });};getList(); //直接调用请求方法//添加用户mockApi .addUser(editUser) .then((res) => { console.log(res) if (res.code === "0") { ElMessage({ message: "保存成功", type: "success", }); } }) .catch(function (error) { console.log(error);});项目结构

 结构大体如上,mock中的Management.js就是文中说到的使用第一步,根据自身需要进行修改

本文链接地址:https://www.jiuchutong.com/zhishi/298375.html 转载请保留说明!

上一篇:使用vue-element-admin进行二次开发(使用的拼音)

下一篇:Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!(vue-introjs)

  • 可爱闪图(可爱闪图)(可爱图片,表情包)

    可爱闪图(可爱闪图)(可爱图片,表情包)

  • 华为手机浮动圆点怎么取消(华为手机浮动圆点)

    华为手机浮动圆点怎么取消(华为手机浮动圆点)

  • 鼠标灵敏度怎么调(鼠标灵敏度怎么调win11快捷键)

    鼠标灵敏度怎么调(鼠标灵敏度怎么调win11快捷键)

  • 人机考试是什么意思(人机考试是什么考试)

    人机考试是什么意思(人机考试是什么考试)

  • 为什么微信显示非朋友(为什么微信显示账号异常)

    为什么微信显示非朋友(为什么微信显示账号异常)

  • 商品扫码扫不出来是假的吗(商品扫码扫不出二维码)

    商品扫码扫不出来是假的吗(商品扫码扫不出二维码)

  • 安卓程序安全补丁级别日期什么意思(安卓程序安全补丁级别日期和开机日期)

    安卓程序安全补丁级别日期什么意思(安卓程序安全补丁级别日期和开机日期)

  • 小米9pro支持wifi6吗(小米9Pro支持多少w快充)

    小米9pro支持wifi6吗(小米9Pro支持多少w快充)

  • 三星手机在安全模式怎么解除(三星手机在安全模式怎么恢复出厂设置)

    三星手机在安全模式怎么解除(三星手机在安全模式怎么恢复出厂设置)

  • 视频会议2小时一般要多少流量(视频会议2小时一般要多少电)

    视频会议2小时一般要多少流量(视频会议2小时一般要多少电)

  • 路由器的wps功能是什么(路由器的wps功能关闭有什么用)

    路由器的wps功能是什么(路由器的wps功能关闭有什么用)

  • 蓝v是什么(蓝v是什么意思有什么好处)

    蓝v是什么(蓝v是什么意思有什么好处)

  • miui11主题是什么(miui11的主题是?)

    miui11主题是什么(miui11的主题是?)

  • 没有淘宝店可以开抖音橱窗吗(没有淘宝店可以分销吗)

    没有淘宝店可以开抖音橱窗吗(没有淘宝店可以分销吗)

  • 爱奇艺怎么设置屏幕比例(爱奇艺怎么设置跳过开头和结尾)

    爱奇艺怎么设置屏幕比例(爱奇艺怎么设置跳过开头和结尾)

  • 手机强制停机怎么解决(手机强制停机怎么进行二次实名认证)

    手机强制停机怎么解决(手机强制停机怎么进行二次实名认证)

  • 手机怎么买大巴票(手机怎么买大巴车票)

    手机怎么买大巴票(手机怎么买大巴车票)

  • boss被锁定了怎么处理(boss被锁定怎么注销账号)

    boss被锁定了怎么处理(boss被锁定怎么注销账号)

  • 荣耀20支持多少瓦快充(荣耀20支持多少倍数码变焦)

    荣耀20支持多少瓦快充(荣耀20支持多少倍数码变焦)

  • pbft00是什么手机型号(pbem00是什么型号手机)

    pbft00是什么手机型号(pbem00是什么型号手机)

  • no bootable device什么意思

    no bootable device什么意思

  • 三星a8s和a9s差距(三星a8和a8s区别)

    三星a8s和a9s差距(三星a8和a8s区别)

  • 8p屏幕发黄如何调节

    8p屏幕发黄如何调节

  • CSS页面布局(超详解)(div css页面布局)

    CSS页面布局(超详解)(div css页面布局)

  • Vue中 引入使用 babel-polyfill 兼容低版本浏览器(vuecdn方式引入)

    Vue中 引入使用 babel-polyfill 兼容低版本浏览器(vuecdn方式引入)

  • 转让金融商品应交增值税税率
  • 金蝶软件中怎么增加固定资产
  • 进出口环节税
  • 上年多交的增值税能退吗
  • 酒类许可证过期了去哪里换证
  • 制造费用多结转了下月如何调整
  • 原始凭证分类的目的是什么?
  • 分公司一定要汇总申报吗
  • 个人非专利技术转让属于什么收入
  • 低值易耗品费用包括哪些
  • 机械租赁费怎么算
  • 建筑业异地预交税款怎么入库
  • 企业汇算清缴补税原因
  • 自然人增值税免税额
  • 其他服务费包括哪些内容
  • 电子税务局进项票汇总
  • 如何从工商信息中看出是小规模还是一般纳税人
  • 金蝶标准版期末结转过不去
  • 手撕发票怎么报销给单位,怎么打印抬头和日期
  • 研发费用入账
  • 购买材料再进在建工程的账务处理
  • 移动通信定额发票
  • 公司处置车辆税金怎么算
  • 营改增后装饰公司税率
  • 出售股权收入会计分录
  • 月末计提电费
  • 计提增值税的会计科目
  • win11资源管理器怎么打开
  • win10无法以管理员身份运行的原因及解决方法
  • os x yosemite dp5下载地址 os x 10.10 dp5更新内容
  • linux安装tk
  • 财政补助收入的会计分录
  • 转出固定资产账务处理
  • 建安企业所得税怎么算2.25税率
  • php umask
  • 主营业务利润率多少合适
  • 出口退税率为0怎么处理
  • 股票金融资产被称为
  • 营改增开始时间
  • 审核过程中发现的问题应由被审核部门实施纠正
  • PHP:mcrypt_list_algorithms()的用法_Mcrypt函数
  • ipad最长使用时间
  • php uasort
  • phpstudy删除
  • 微信收款要求绑定银行卡怎么办
  • 使用二氧化碳灭火器时人应该站在什么位置
  • 收到退回残保金怎么做账
  • 增值税发票可以重开吗
  • 公司处置已使用4年多的汽车,怎么增值税申报
  • 应付账款尾差如何处理
  • 交通运输企业有什么优惠政策
  • 原材料用于加工什么
  • 停车费报销会计分录
  • 专项资金补助经费如何入账
  • 工业企业出售产品应交的消费税额,应计入营业成本
  • 咨询企业发生的费用计入
  • 过节费可以发现金吗
  • 科目怎么写?
  • mysql 随机io
  • mysql错误处理
  • mysql 5.6.26 winx64安装配置图文教程(一)
  • linux的收获
  • win10如何查看系统日志
  • win10联想笔记本还原系统
  • win10怎么快一点
  • 删除滑动解锁图片
  • linux文本操作命令
  • cocos2dx lua在sublime下的插件安装及查看定义
  • github 最火的项目
  • python 对象函数
  • javascript in
  • [置顶]游戏名 TentacleLocker
  • python 系统日期
  • javascript 数组删除
  • winpe文件下载
  • androidsdk的计算机
  • 社保已申报怎么停止缴费
  • 移动退订业务怎么恢复
  • 陕西电子发票开票流程?
  • 房没交契税和物业维修金房屋预告登记证明可以打印吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设