vue3+vite+axios+mock从接口获取模拟数据实战

admin
admin
admin
137432
文章
113
评论
2024年8月27日08:16:35评论78 views字数 4962阅读16分32秒阅读模式

vue3+vite+axios+mock从接口获取模拟数据实战

在用Vue.js开发前端应用时通常要与后端服务进行交互，例如通过API接口获取数据，在后端服务接口还没有具备之前，可以通过mock(模拟)数据来进行开发。使用mock数据可以让前端开发人员独立于后端开发人员工作，加快开发速度。在没有真实数据的情况下，mock数据可以帮助开发者更快地看到UI的呈现效果和交互逻辑。
本文通过vue3+vite+axios+mock来介绍如何实现Vue.js的前端应用从接口获取模拟数据。

一、安装相关组件

1
2
 
npm install axios -S
npm install mockjs vite-plugin-mock -D
其中axios 是一个基于 Promise 非常强大且灵活的 HTTP 客户端，适用于 Vue.js 应用程序中的数据获取和后端交互。它可以简化 HTTP 请求的处理，并提供丰富的功能来满足不同的需求。我们用axios来实现与接口服务的http请求。
Mock.js 是一个用于生成随机数据的 JavaScript 库，它主要用于前端开发过程中模拟后端接口数据。Mock.js 提供了一套简洁易用的 API，可以帮助开发者快速生成符合特定规则的假数据，从而在没有后端支持的情况下进行前端开发和测试。
vite-plugin-mock 是一个专为 Vite 设计的插件，用于在 Vite 项目中模拟数据。它简化了使用 Mock.js 的过程，让开发者能够更加方便地管理模拟数据。
简单来说，就是mock.js提供mock数据，通过vite-plugin-mock，将管理mock发布成服务，通过axios通过http请求接口的方式获取mock数据。
安装相关组件后，在package.json中看到相关的组件信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
package.json
{
  "name": "mocktest",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "test": "vite --mode test",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.5",
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "mockjs": "^1.1.0",
    "vite": "^5.3.1",
    "vite-plugin-mock": "^3.0.2"
  }
}

二、在vite.config.js中配置vite-plugin-mock插件

● viteMockServe的相关配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // mock 数据的 dev环境
    viteMockServe({
      // supportTs: true, // 是否开启支持ts
      mockPath: 'mock', // 设置mockPath为根目录下的mock目录
      localEnabled: true, // 设置是否监视mockPath对应的文件夹内文件中的更改
      prodEnabled: false, // 设置是否启用生产环境的mock服务
      watchFiles: true, // 是否监视文件更改
      logger: true  //是否在控制台显示请求日志
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
在viteMockServe中指定了mockPath为mock也就是根目录下的mock目录，在该目录下的mock服务都会被发布成mock服务。

三、实现mock服务

在根目录下新建mock目录在mock目录下新建mock文件实现mock服务，如app.js、user.js
vue3+vite+axios+mock从接口获取模拟数据实战
app.js代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
export default [{
    url: '/mock/api/getApiInfo',
    method: 'get',
    response: () => {
      return {
        code: 200,
        title: 'mock api test.'
      }
    }
  },
  {
    url: '/api/category',
    type: 'get',
    response: () => {
        return {
            code: 200,
            data: [
                {
                    id: 1,
                    title: 'JAVA',
                    href: '/category/java'
                },
                {
                    id: 2,
                    title: 'SpringBoot',
                    href: '/category/SpringBoot',
                },
                {
                    id: 3,
                    title: 'MySql',
                    href: '/category/MySql'
                },
                {
                    id: 4,
                    title: '随笔',
                    href: '/category/live'
                }
            ]
        }
    }
  }
]
在app.js中我们并没有用mock生产数据，只是实现了mock服务放到了mock文件目录通过viteMockServe发布出来，后面可以通过axios调用获取。
user.js代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
import Mock from 'mockjs';

// 通过Mock生成模拟数据
const userdata = Mock.mock({
  'list|10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'age|18-60': 1,
      'email': '@email',
    },
  ],
}); 

export default [
  {
    url: '/mock/api/getUserInfo',
    method: 'get',
    response: () => {
      return {
        code: 200,
        data: userdata
      }
    }
  },
]
在user.js中，我们通过Mock生成模拟的用户列表数据

四、调用api接口请求mock数据

方法一、直接使用axios 请求mock 数据

1
 
import axios from 'axios'
在方法中通过axios.get()方法直接获取请求数据
1
2
3
4
5
6
7
 
async getData() {
         await axios.get('/mock/api/getApiInfo').then(res =>{
          console.log(res.data)
          this.msg = res.data.title
        }
      )
    },

方法二、对axios进行封装统一请求mock数据

建立一个service.js对axios进行封装，让后通过service.js来统一请求mock数据，这样做的好处是在切到真实接口的时候可以更加灵活
service.js的代码如下
1
2
3
4
5
6
7
8
9
 
import axios from 'axios'
const api_rul = ''  //mock 接口地址可以为空字符串，真实接口配置为真实的接口地址。
// create an axios instance
const service = axios.create({
    baseURL: api_rul,
    timeout: 5000 // request timeout
})

export default service
通过一个统一的调用接口文件请求mock数据
如mockapi.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
import service from '@/utils/service'

export function  getCategory() {
    return service({
        url: '/api/category',
        method: 'get',
        params: {}
    })
}

export function  getUserInfo() {
    return service({
        url: '/mock/api/getUserInfo',
        method: 'get',
        params: {}
    })
}
在methods中进行方法的调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
// 方法二：通过封装后的get方法获取数据
    getUserInfo()
    {
      getUserInfo().then(res =>{
          console.log(res.data)
          this.userinfo = res.data.data
        }
      )
    },
    getCategory()
    {
      getCategory().then(res =>{
          console.log(res.data)
          this.categorys = res.data.data
        }
      )
    }
在vue的组件中具体的调用和展示代码如下：
HelloWorld.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<template>
  <h1>{{ msg }}</h1>
  <div>
    人员列表
  </div>
  <div>
    <ul>
      <li v-for="(user) in userinfo.list" :key="index">
        {{ user.id }} : {{ user.name }}  {{ user.age }}  {{ user.email }}
      </li>
    </ul>
  </div>
  <div>
    目录
  </div>
  <div>
    <ul>
      <li v-for="(category) in categorys" :key="index">
        {{ category.id }} : {{ category.title }}  {{ category.href }} 
      </li>
    </ul>
  </div>
</template>
<script >
import axios from 'axios'
import { getCategory,getUserInfo } from '../api/mockapi'

export default {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      userinfo: {},
      categorys: []
    };
  },
  mounted() {
    this.getData()
    this.getUserInfo()
    this.getCategory()
  },
  methods: {
    // 方法一：直接axios请求调用获取mock数据
    async getData() {
         await axios.get('/mock/api/getApiInfo').then(res =>{
          console.log(res.data)
          this.msg = res.data.title
        }
      )
    },
    // 方法二：通过封装后的get方法获取数据
    getUserInfo()
    {
      getUserInfo().then(res =>{
          console.log(res.data)
          this.userinfo = res.data.data
        }
      )
    },
    getCategory()
    {
      getCategory().then(res =>{
          console.log(res.data)
          this.categorys = res.data.data
        }
      )
    }
  }
}
</script>
整个工程的目录结构说明如下：
vue3+vite+axios+mock从接口获取模拟数据实战

五、实际运行效果

vue3+vite+axios+mock从接口获取模拟数据实战
可以看到分别用两种方式获取mock数据的效果，其中人员列表中的数据是mock生成的模拟数。
博客地址：http://xiejava.ishareread.com/


“fullbug”微信公众号


关注微信公众号,一起学习、成长！


‍

‍

原文始发于微信公众号（fullbug）：vue3+vite+axios+mock从接口获取模拟数据实战

免责声明:文章中涉及的程序(方法)可能带有攻击性，仅供安全研究与教学之用，读者将其信息做其他用途，由读者承担全部法律及连带责任，本站不承担任何法律及连带责任；如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截，联系方式见首页)，望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2024年8月27日08:16:35
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出)：
                   vue3+vite+axios+mock从接口获取模拟数据实战https://cn-sec.com/archives/3096228.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性，仅供安全研究与教学之用，读者将其信息做其他用途，由读者承担全部法律及连带责任，本站不承担任何法律及连带责任；如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截，联系方式见首页)，望知悉.

发表评论

匿名网友 填写信息