位置: 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)

  • 企业为员工缴纳公积金的通知
  • 固定资产清理应该在年报中怎么填写
  • 缴纳上月附加税会计科目
  • 通用机打发票内容可以随便写吗
  • 物流辅助服务属于什么费用
  • 注册资本需要实交吗
  • 个税申报时提示扣缴单位无有效的税费种认定信息
  • 银行承兑贴现的会计分录怎么做
  • 个人垫付费用报销申请怎么写
  • 增值税调整后开具发票
  • 事业单位收个人部分社保怎么入账
  • 生产过程中产生的废料怎么管理
  • 公司厂房出租发票怎么开
  • 增值税专用发票几个点
  • 本月计错多发的工资可以不交个税
  • 去税务局领用发票要多久
  • 小规模纳税人开专票税率是1%还是3%
  • 外管证开具后如何缴税?
  • 个人提前退休取得的一次性补贴收入免征
  • 个人转让住房交土地增值税吗
  • 退税差额怎么做账
  • 银行存款二级明细科目有哪些
  • 个人独资企业是什么意思
  • 买一赠一怎么确定真假
  • 停产资产折旧如何处理
  • 补提以前年度税费应该计入
  • 外账缺成本费用怎么处理
  • 附加税申报表
  • 未竣工验收已交付使用的工程还需安全监管吗
  • 预借差旅费计入其他应收款吗
  • 为什么我的windows10
  • 债券类资产的远期合约是什么
  • 企业筹建期间购置机器设备支出计入什么科目
  • 支付委托加工费用会计科目
  • 浏览器显示英语怎么设置成中文
  • rapapp.exe - rapapp是什么进程 有何作用
  • Mac SIP系统完整性保护开启及关闭的方法介绍
  • win11预览版体验
  • 既征收消费税又征收增值税的是
  • 金融工具减值会影响什么
  • mgaqdesk.exe进程有什么作用 mgaqdesk进程查询
  • 购买农产品没有发票入帐怎么办
  • 实际出资大于注册资金
  • 增值税税控系统技术维护费怎么做账
  • php公众号推送完整示例
  • 成本会计科目的三级科目有哪些
  • 财务报表报送与信息采集(小企业会计准则)季报
  • 公允价值计量的投资性房地产
  • 研发费用没有发票怎么做账
  • 织梦程序
  • 挖机租赁如何做账
  • 完税凭证是
  • 什么叫财务台账
  • 产品成本包括哪些
  • 水利建设基金应税项是什么
  • 库存现金银行存款用什么凭证
  • 无固定合同有哪些好处
  • 路桥公司会计核算办法
  • 外贸退税是算利润吗
  • 金融存款利率
  • 填制费用报销单怎么填写
  • 个税返还开票什么项目
  • 最全的免费追漫软件
  • centos如何挂载fc存储
  • 如何重装windows8
  • linux关机后机器还亮着
  • hp是什么代码
  • windows重大更新
  • win8右边栏设置
  • window10 弹窗广告
  • 怎样设置从硬盘启动给电脑做系统
  • perl脚本输出变量
  • opengl怎么学
  • ip地址一键切换
  • 百度地图给map添加
  • js原型作用
  • 医保断交一年怎么续交
  • 税务部门行政审批
  • 江西省税务局电话号码查询
  • 广东地税服务电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设