迅美网站建设,如何做行业网站,全球邮企业邮箱,泉州做网站排名在使用Vue3开发的时候#xff0c;有时候没有后端或者后端接口还没有准备好#xff0c;那就需要使用Mock模拟数据便于前端开发。
现在就记录一下ViteVue3的环境下如果使用MockJS。
版本
vue 3.3.11mockjs 1.1.0axios 1.6.3
Mockjs配置使用
使用pnpm命令安装Mockjs
pnpm …在使用Vue3开发的时候有时候没有后端或者后端接口还没有准备好那就需要使用Mock模拟数据便于前端开发。
现在就记录一下ViteVue3的环境下如果使用MockJS。
版本
vue 3.3.11mockjs 1.1.0axios 1.6.3
Mockjs配置使用
使用pnpm命令安装Mockjs
pnpm install axios
pnpm install mockjsmock模拟接口
在src目录下新建文件夹mock并新建文件index.ts引入mockjs
import Mock from mockjs直接在上面引入在vscode中会报错
找不到模块“mockjs”或其相应的类型声明。ts(2307)我是使用pnpm、vite新建的vue3项目只需要在src目录下的vite-env.d.ts文件下加入以下配置即可
/// reference typesvite/client /declare module mockjsmain文件下引入mockjs
在main.ts文件下引入mockjs
import ./mock/index编写模拟接口
import Mock from mockjsMock.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;charsetutf-8}
})//请求拦截
service.interceptors.request.use((config){config.headersconfig.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请求接口
templatediv classlogin-boxdiv classlogin-boxel-form refruleFormRef :modelruleForm status-icon :rulesrules label-width80pxclasslogin-ruleFormh2后台管理系统/h2el-form-item label账号 propusernameel-input v-modelruleForm.username autocompleteoff //el-form-itemel-form-item label密码 proppasswordel-input v-modelruleForm.password typepassword autocompleteoff //el-form-itemel-form-itemel-button classloginBtn typeprimary clicksubmitForm(ruleFormRef)登录/el-buttonel-button classloginBtn clickresetForm重置/el-button/el-form-item/el-form/div/div
/templatescript langts 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 reactiveLoginData({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 refFormInstance();const routeruseRouter()//--$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);};
/scriptstyle langscss 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
