Vite+Vue3使用MockJS

在使用Vue3开发的时候,有时候没有后端或者后端接口还没有准备好,那就需要使用Mock模拟数据便于前端开发。

现在就记录一下Vite+Vue3的环境下如果使用MockJS。

版本

  • vue 3.3.11
  • mockjs 1.1.0
  • axios 1.6.3

Mockjs配置使用

使用pnpm命令安装Mockjs

pnpm install axios
pnpm install mockjs

mock模拟接口

src目录下新建文件夹mock,并新建文件index.ts,引入mockjs

import Mock from 'mockjs'

直接在上面引入,在vscode中会报错

找不到模块“mockjs”或其相应的类型声明。ts(2307)

我是使用pnpm、vite新建的vue3项目,只需要在src目录下的vite-env.d.ts文件下,加入以下配置即可

/// <reference types="vite/client" />declare module 'mockjs'

main文件下引入mockjs

main.ts文件下引入mockjs

import './mock/index'

编写模拟接口

import Mock from 'mockjs'Mock.mock("/mock/login","post", {code: 200, token:"login success token"});Mock.mock("/mock/getGoodsList","get", {code: 200, message:"请求成功",data:[{id:1,introduce:"旺仔牛奶很好喝!!!",title:"旺仔牛奶",userId:1},{id:2,introduce:"旺旺碎碎冰很冰很好吃!!!",title:"旺旺碎碎冰",userId:1},{id:3,introduce:"喜之郎品牌很好吃!!!",title:"喜之郎",userId:1},{id:4,introduce:"卫龙辣条很好吃!!!",title:"卫龙辣条",userId:1},{id:5,introduce:"德芙巧克力很好吃!!!",title:"德芙巧克力",userId:1},{id:6,introduce:"伊利牛奶很好喝!!!",title:"伊利牛奶",userId:1}]
});

axios配置使用

配置axios

import axios from 'axios'//创建axios实例
const service = axios.create({baseURL:"/mock",timeout:5000,headers:{"Content-Type":"application/json;charset=utf-8"}
})//请求拦截
service.interceptors.request.use((config)=>{config.headers=config.headers || {}if(localStorage.getItem("token")){config.headers.token = localStorage.getItem("token") || ""}return config
})// 响应拦截
service.interceptors.response.use((res)=>{const code:number = res.data.codeif(code != 200){return Promise.reject(res.data)}return res
},(err)=>{console.log(err)
})export default service

编写axios的请求接口

import service from ".";
import { LoginData } from "../type/login";//登录接口
export function login(data:LoginData) {return service({url:"/login",method:"post",data})
}//获取商品接口
export function getGoodsList(){return service({url:"/getGoodsList",method:"get",})
}

页面中使用axios请求接口

<template><div class="login-box"><div class="login-box"><el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px"class="login-ruleForm"><h2>后台管理系统</h2><el-form-item label="账号:" prop="username"><el-input v-model="ruleForm.username" autocomplete="off" /></el-form-item><el-form-item label="密码:" prop="password"><el-input v-model="ruleForm.password" type="password" autocomplete="off" /></el-form-item><el-form-item><el-button class="loginBtn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button><el-button class="loginBtn" @click="resetForm">重置</el-button></el-form-item></el-form></div></div>
</template><script lang="ts" setup>
import { reactive,ref } from 'vue';
import { LoginData } from '../type/login';
import type { FormInstance } from "element-plus";
import { login } from "../request/api";
import { useRouter } from "vue-router";const ruleForm = reactive<LoginData>({username:"",password:""});const rules = {username: [{required: true,message: "请输入你的账号",trigger: "blur",},{min: 3,max: 10,message: "账号的长度在3到10之间",trigger: "blur",},],password: [{required: true,message: "请输入你的密码",trigger: "blur",},{min: 3,max: 10,message: "密码的长度在3到10之间",trigger: "blur",},],};const resetForm = () => {ruleForm.username = "";ruleForm.password = "";};const ruleFormRef = ref<FormInstance>();const router=useRouter()//-->$routerconst submitForm = (formEl: FormInstance | undefined) => {if (!formEl) return;// 对表单的内容进行验证// valid布尔类型,为true表示验证成功,反之formEl.validate((valid) => {if (valid) {// console.log("submit!");login(ruleForm).then((res) => {console.log(res);// 将token进行保存localStorage.setItem("token", res.data.token);// 跳转页面,首页router.push('/')});} else {console.log("error submit!");return false;}});// console.log(formEl);};
</script><style lang="scss" scoped>
.login-box {width: 100%;height: 100%;background: url('../assets/bg.jpg');padding: 1px;.login-ruleForm{width: 500px;margin: 200px auto;background-color: #fff;padding: 40px;border-radius: 20px;}.loginBtn {width: 48%;}h2 {margin-bottom: 10px;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/590460.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯python比赛历届真题99道经典练习题 (41-50)

【程序41】 题目:学习static定义静态变量的用法    1.程序分析: 2.程序源代码: # python没有这个功能了,只能这样了:) def varfunc():var = 0print var = %d % varvar += 1 if __name__ == __main__:for i in range(3):varfunc()# attribut of class # 作为类的一个属…

5.微服务代码模型

1.微服务代码模型 代码分层 在微服务代码模型里&#xff0c;我们分别定义了用户接口层、并分别为它们建立了interfaces、application、domain和infrastructure四个一级代码目录&#xff1b; interfaces(用户接口层): 它主要存放用户接口层与前端应用交互、数据转换和交互相关…

Ultra ISO 虚拟光驱修改光盘盘符

windows xp 环境 ultra iso 虚拟光驱修改光盘盘符 method 1. 在ultra iso 中 [选项]->[配置]->[虚拟光驱]&#xff0c;在新盘符里选指定盘符 ->[修改] method 2. 打开命令行&#xff0c;进入安装目录&#xff0c;如 "C:\Program Files\UltraISO\drivers"&…

Vue3复习笔记

目录 挂载全局属性和方法 v-bind一次绑定多个值 v-bind用在样式中 Vue指令绑定值 Vue指令绑定属性 动态属性的约束 Dom更新时机 ”可写的“计算属性 v-if与v-for不建议同时使用 v-for遍历对象 数组变化检测 事件修饰符 v-model用在表单类标签上 v-model还可以绑定…

【LMM 002】大型语言和视觉助手 LLaVA-1.5

论文标题&#xff1a;Improved Baselines with Visual Instruction Tuning 论文作者&#xff1a;Haotian Liu, Chunyuan Li, Yuheng Li, Yong Jae Lee 作者单位&#xff1a;University of Wisconsin-Madison, Microsoft Research, Columbia University 论文原文&#xff1a;htt…

JavaScript的三种引入的方式

目录 (一).什么是JS1.1JS的特点1.2JS的组成 (二).JS引用的三种方式2.1标签引用&#xff08;或嵌入式)2.2文件引用&#xff08;外链式&#xff09;2.3行内式 (三).JS三种引用方式的优缺点1.行内方式&#xff1a;2.标签引用&#xff08;或嵌入式&#xff09;&#xff1a;3.文件引…

怎么获取客户端真实IP?GO

在使用 Golang 的 net/rpc 包进行 RPC 服务开发时&#xff0c;我们有时候会遇到需要获取客户端的真实 IP 和当前连接 net.Conn 的需求。然而在 net/rpc 的服务处理方法中&#xff0c;并没有提供直接获取到这些信息的途径。 那么&#xff0c;我们应该如何去获取这些信息呢&…

如何高效查询文件:Linux 下的多种方法详解

如何高效查询文件&#xff1a;Linux 下的多种方法详解 在日常工作中&#xff0c;我们经常需要查找文件&#xff0c;无论是寻找特定的代码文件、配置文件还是其他文档。Linux 提供了多种强大的命令和工具&#xff0c;通过巧妙地使用管道符&#xff0c;我们可以将这些命令组合起来…

连锁门店管理需要信息化系统

连锁门店管理的信息化系统可以提供以下功能&#xff0c;以满足连锁企业日常管理的需求&#xff1a; 1. 连锁线下收银&#xff1a;信息化系统可以提供线下收银功能&#xff0c;包括商品扫码、价格结算、支付方式选择等。通过系统记录每笔交易数据&#xff0c;方便对销售情况进行…

【基于VirtualBox及openEuler20.03 TLS SP1编译openGauss2.1.0源码】

【openEuler 20.03 TLS编译openGauss2.1.0源码】 一、安装环境二、安装步骤 一、安装环境 项目Value虚拟机virtualbox操作系统openEuler 20.03 TLSopenGauss2.1.0openGauss-third_party2.1.0 二、安装步骤 以下操作需要在root用户下执行 编辑/etc/selinux/config vim /etc/s…

C++程序编译

GCC编译器 文章目录 GCC编译器 源文件 为 Main.cpp 注意cpp文件 一定要用g命令 否则没办法执行 预处理&#xff08;Pre-Processing&#xff09;&#xff1a;首先会经过预处理器将程序中的预编译指令进行处理&#xff0c;然后把源文件中的注释这些没用的东西都给扬了。 g -E Mai…

JVM系列-方法区、堆区、栈区

在 Java 中&#xff0c;内存主要分为方法区、堆区和栈区&#xff0c;每个区域负责不同类型的数据和任务。以下是它们的主要特征&#xff1a; 1. 方法区&#xff08;Method Area&#xff09; 方法区是 JVM 的一部分&#xff0c;用于存储类的元数据信息、静态变量、常量池等。在…

【拼题A】2024跨年挑战赛

文章目录 跨年-1 特殊的年份输入格式:输出格式:C代码 跨年-2 穿什么衣服输入格式:输出格式:输入样例:输出样例:C 代码 跨年-3 按比例发奖输入格式:输出格式:输入样例:输出样例:C代码 跨年-4 骗钱的手机游戏输入格式:输出格式:输入样例:输出样例:C代码 跨年-5 找年兽输入格式:输…

Qt6.5示例:QMainWindow集成QMenuBar菜单栏

欢迎关注公众号(20YC编程)&#xff0c;有免费C视频课程哦&#xff01; -今日内容- 1 QMenuBar简介 QMenuBar是Qt框架中的一个菜单栏类&#xff0c;它提供了一个可以包含一个或多个QAction对象或级联的QMenu对象的菜单栏。 QMenuBar通常被放置在主窗口的标题栏下方&#xff0…

消息队列LiteQueue

文章目录 一、简介二、设计2.1 队列结构设计2.2 队列接口设计 三、实现3.1 队列锁的实现3.2 创建队列3.3 写入队列3.4 读出数据3.5 判断队列是否为空3.6 判断队列是否为满3.7 清空队列3.8 删除队列 四、测试参考 一、简介 收到消息时先把接收到的消息放到队列中。在任务中从队…

63页!嵩山版Java开发手册分享

作为广受欢迎的编程语言之一&#xff0c;Java在软件开发领域扮演着重要的角色。然而&#xff0c;由于Java的灵活性和广泛应用&#xff0c;很容易出现代码质量低下、可读性差、维护困难等问题。为了解决这些问题&#xff0c;阿里巴巴集团发布了一份权威指南——阿里嵩山版Java开…

redis数据库高可用应用场景-配置哨兵

一&#xff0c;redis数据库哨兵的使用场景 Redis哨兵机制通常在需要高可用性的 Redis 环境中使用&#xff0c;如果是普通的项目&#xff0c;只是用来做缓存的可以忽略。 适用场景&#xff1a; 高可用性需求&#xff1a;当需要确保 Redis 服务的高可用性并且防止单点故障时&…

【2023年第十三届APMCM亚太地区大学生数学建模竞赛】A题 水果采摘机器人的图像识别 35页论文及python代码

【2023年第十三届APMCM亚太地区大学生数学建模竞赛】A题 水果采摘机器人的图像识别 1 题目 水果采摘机器人的图像识别 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世界上最大的苹果出口国&#xff0c;世界上每两个苹果中就有…

iToF人脸识别

iToF(间接飞行时间)是一种测量光飞行时间的技术,主要应用于人脸识别。 iToF人脸识别技术在哪些场景下会用到 iToF人脸识别技术可以应用于许多场景,以下是一些常见的应用场景: 平安城市:在城市监控系统中,iToF人脸识别技术可以用于实时监控、目标检测和识别,以及异常行为…

iostat获取IO延迟单位从ms调整us的方案

iostat命令统计的磁盘I/O延迟通常是以毫秒&#xff08;ms&#xff09;为单位&#xff0c;例如在输出中的await字段表示的是平均服务时间&#xff0c;包括等待时间和处理时间&#xff0c;这个值就是以毫秒为单位。 然而&#xff0c;要获取更精确到微秒级别&#xff08;us&#x…