Vite + Vu3项目中 Mockjs 插件的学习使用

本篇主要是讲解记录一下自己在Vite+Vue3项目中不依赖后端模拟开发的案例

带入几个问题：

• 什么是Mock，有什么用
• 怎么使用

一、什么是Mock

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。

重点：独立于后端进行开发

二、怎么使用

安装

使用之前学习的npm进行安装

npm i vite-plugin-mock

使用

1. 先参考前一章创建一个Vite+Vue的项目

2. 打开你的vite.config.js文件

   

3. 使用编辑器打开。

   import {defineConfig} from 'vite'
   import vue from '@vitejs/plugin-vue'
   import {viteMockServe} from "vite-plugin-mock";
   
   
   export default defineConfig({
   	plugins: [vue(),
   		viteMockServe({
   			mockPath: "/src/http/mock",
   			localEnabled: true,
   		})
   	]
   })
   

4. 在src文件下创建一个/http/mock文件夹。

5. 在mock文件夹之下创建一个index.js文件

6. 编写一个模拟登录之后返回的结果

   export default [
   	{
   		url: "/api/login", // 模拟登录的链接
   		method: "post", // 请求方式
   		timeout: 500, // 超时时间
   		statusCode: 200, // 返回的http状态码
   		response: { // 返回的结果集
   			code: 200,
   			message: "登录成功",
   			data: {
   				name: "tom"
   			},
   		},
   	},
   ]
   

7. 现在接口写好了，准备写一个界面测试

8. 开始复习上一章的Scss + HTML 的界面开发

   

9. 先编写一个上图界面

   偷懒一下 直接使用element-plus的组件，在Vite学习章节中有 element-plus的安装与配置使用

   下面直接导入使用即可，scss也需要在相应位置进行创建文件引入

   • login.vue

     <template>
       <div class="login_wrapper">
         <div class="login_box">
           <div class="avatar_container">
             <img src="/src/assets/logo.png" alt="">
           </div>
           <el-form label-width="0px" class="login_form" :model="userInfo" ref="userForm">
             <el-form-item>
               <el-input :prefix-icon="User" placeholder="用户名" v-model="userInfo.username"></el-input>
             </el-form-item>
             <el-form-item>
               <el-input :prefix-icon="Lock" placeholder="密码" v-model="userInfo.password"></el-input>
             </el-form-item>
             <el-form-item class="btns">
               <el-button @click="getLogin" type="primary">登录</el-button>
               <el-button @click="setReset">重置</el-button>
             </el-form-item>
           </el-form>
         </div>
       </div>
     </template>
     
     <script setup>
     import {Lock, User} from '@element-plus/icons-vue';
     import {ElMessage} from 'element-plus';
     import http from '/src/http/request'
     import {ApiUrl} from '/src/http/api'
     import {reactive} from "vue";
     const userInfo = reactive({
         username: '',
         password: ''
     })
     
     const getLogin = async function () {
         if (!(userInfo.password || userInfo.password)) {
             return ElMessage.error("不允许为空")
         }
         const url = "/login";
         await http.post(url, userInfo)
     }
     
     const setReset = function () {
         userInfo.password = ""
         userInfo.username = ""
     }
     
     </script>
     
     <style src="/src/assets/style/login.scss" scoped></style>
     

     • login.scss

       $themeColor: #DDDDDD;
       $secondaryColor: #e5eaed;
       
       .login_wrapper {
           background-color: $themeColor;
           height: 100vh;
       
           .login_box {
               width: 450px;
               height: 300px;
               background-color: $secondaryColor;
               border-radius: 3px;
               position: absolute;
               left: 50%;
               top: 50%;
               transform: translate(-50%, -50%);
       
               .avatar_container {
                   width: 130px;
                   height: 130px;
                   border: 1px solid #eee;
                   border-radius: 50%;
                   padding: 10px;
                   background-color: #fff;
                   position: absolute;
                   left: 50%;
                   transform: translate(-50%, -50%);
                   box-shadow: 0 0 10px #D6E9C6;
       
                   img {
                       width: 100%;
                       height: 100%;
                       border-radius: 50%;
                       background-color: #D6E9C6;
                   }
               }
       
               .login_form {
                   position: absolute;
                   bottom: 0;
                   width: 100%;
                   padding: 0 50px;
                   box-sizing: border-box;
               }
       
               .btns {
                   display: flex;
                   justify-content: flex-end;
               }
           }
       }
       

10. 如果想要mockJs生效，当然还得加入axios进入发送请求

    1. 安装axios

       yarn add axios
       

    2. 进行一个axios的简易封装

       import axios from 'axios'
       import {ElLoading, ElMessage} from 'element-plus';
       
       let http = axios.create({
       	baseURL: 'api',
       	timeout: 10000
       })
       
       let loadingInstance;
       
       // 拦截器的添加
       http.interceptors.request.use(config => {
       	loadingInstance = ElLoading.service("加载中")
       
       	return config
       }, err => {
       	//请求错误(前端操作是，取消loading圈，并会弹出一个网络异常的提示)
       	loadingInstance?.close()
       	ElMessage.error("网络异常")
       	return Promise.reject(err)
       })
       
       //响应拦截器
       http.interceptors.response.use(res => {
       	loadingInstance?.close()
       	return res.data
       }, err => {
       	//请求失败(前端做法是取消loading圈给提示)
       	loadingInstance?.close()
       	ElMessage.error("请求失败")
       	return Promise.reject(err)
       })
       
       export default http;
       

11. 上手测试

    

12. 完毕

结语

我是幸福部长，我在学Mock了，可以简单的上手操作了，现在可以脱离后端独自进行开发了，感觉正在一步步变强了，从一个个小bug小demo中成长。