VUE3 +axios+mock, 前端使用mock模拟后端数据

原创已于 2023-09-19 14:30:38 修改 · 797 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-09-19 14:30:37 首次发布

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

mock

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中引入并使用Mock.js，包括安装、配置拦截Ajax请求、设置模拟数据以及在组件中调用mock数据。通过Mock.js，可以丰富数据类型并模拟网络延迟，无需修改原有代码，方便进行单元测试和开发环境中的预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端项目引入mock

Mock.js因为两个重要的特性风靡前端:

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

拦截 Ajax

请求不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷

一般情况下，mock 是与 axios 配合使用的，因为用 axios 来调用地址；

mockjs 的官方文档：Mock.js

操作：

1.安装：npm install mockjs

在package.json里面可以看到 mockjs已经安装好了

2.在src文件夹下建立mock文件夹，建立文件index.ts

 //index.js
 // 引入: mockjs 模块;
 import Mock from 'mockjs'
 // 设置拦截Ajax请求的响应时间，模拟网络延迟
 Mock.setup({
     timeout:'200-600'
 })
 
 Mock.mock('/Testing', {
     name: "@name()", 
     city: "@city()"
   })
 export default Mock

4.在main.ts文件中，引入mock文件

 //main.ts
 import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 //引入mock文件
 import  mock  from './mock'
 app.use(mock)
 const app = createApp(App)
 app.use(router)
 app.mount('#app')

5.使用页面

点击按钮，请求mock模拟的数据

 <template>
     <div>
         <button @click="handleTest">Testing</button>
         <div>{{user.name}}</div>
         <div>{{user.city}}</div>
     </div>
 </template>
 
 <script setup lang="ts">
 import axios from 'axios';
 import { reactive } from 'vue';
 const user = reactive({
     name:'',
     city:''
 })
 function handleTest(){
     console.log('handleTest')
     axios.get('/Testing').then(res=>{
         console.log('res',res)
         user.name = res.data.name
         user.city = res.data.city
     })
 }
 </script>
 <style scoped></style>

效果：