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
  

1.  //index.js
2.  // 引入: mockjs 模块;
3.  import Mock from 'mockjs'
4.  // 设置拦截Ajax请求的响应时间，模拟网络延迟
5.  Mock.setup({
6.      timeout:'200-600'
7.  })
8.  ​
9.  Mock.mock('/Testing', {
10.      name: "@name()",
11.      city: "@city()"
12.    })
13.  export default Mock

复制代码

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

1.  //main.ts
2.  import './assets/main.css'
3.  import { createApp } from 'vue'
4.  import App from './App.vue'
5.  import router from './router'
6.  //引入mock文件
7.  import  mock  from './mock'
8.  app.use(mock)
9.  const app = createApp(App)
10.  app.use(router)
11.  app.mount('#app')

复制代码

  5.使用页面
  点击按钮，请求mock模拟的数据

1.  <template>
2.      <div>
3.          <button @click="handleTest">Testing</button>
4.          <div>{{user.name}}</div>
5.          <div>{{user.city}}</div>
6.      </div>
7.  </template>
8.  ​
9.  <script setup lang="ts">
10.  import axios from 'axios';
11.  import { reactive } from 'vue';
12.  const user = reactive({
13.      name:'',
14.      city:''
15.  })
16.  function handleTest(){
17.      console.log('handleTest')
18.      axios.get('/Testing').then(res=>{
19.          console.log('res',res)
20.          user.name = res.data.name
21.          user.city = res.data.city
22.      })
23.  }
24.  </script>
25.  <style scoped></style>

复制代码

效果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。