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

在前端项目引入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>

效果：