开发项目的时候,如果后端接口没有出来,前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据,以下就是使用vue3设置hook函数来封装axios请求,配合mock.js来实现的代码,mock的官网 Mock.js

 一.mockjs安装

npm install mockjs --save

二.在src下 创建mock\index.js 配置文件

import Mock from 'mockjs'

// 设置一下模拟返回数据时间
Mock.setup({
    timeout: '200-600'
})

// 方式一:无参数
Mock.mock(
    "/user/userinfo",
    'get',
    (req) => {
        console.log(req);
        return {
                msg: '请求成功',
                code: 0,
                data: [
                    {
                        meta: {
                            title: '系统',
                            icon: 'ri:pages-line',
                            defaultOpened: true,
                            breadcrumb: true,
                            permanent: false,
                            sidebar: true,
                        },
                        children: [
                            {
                                path: '/systemAuth',
                                component: 'Layout',
                                redirect: '/systemAuthDept',
                                name: 'systemAuth',
                                meta: {
                                    title: '权限管理',
                                    icon: 'ri:function-line',
                                    defaultOpened: true
                                },
                            }]
                    }]
        }
    }
)

// 方式二:有参数
Mock.mock(
    /\/account.*/,
    'get',
    (req) => {
        console.log(req);
        return {
            username: 'abc',
            type: '123'
        }
    }
)


三.在main.js中进行引入

import { createApp } from 'vue'
import App from './App.vue'
 
// 如果不想用mock测试就把这行代码注释掉
import './mock/index.js'

const app = createApp(App)
app.mount('#app')

四.页面使用

import { onMounted } from 'vue'
import axios from 'axios'
onMounted(() => {
    axios.get('/user/userinfo').then(res => {
        console.log(res, '返回数据 ')
    })
       axios.get('/account?username=张三&password=12345678').then(res => {
        console.log(res, '返回数据 ')
    })

})

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐