开发者社区> 青年码农> 正文

Vue3项目配置Mock模拟接口数据

简介: Vue3项目配置Mock模拟接口数据
+关注继续查看

当一个项目开始开发,正常情况是前后台开发同时进行,但是很多情况是后台先提供接口,然后前端才开始编写页面,这样就会导致项目进度缓慢,为了解决这个问题,前端一般是根据接口先在本地进行数据模拟请求,本次我们使用Mockjs,实现在基于Vue3项目的数据模拟。

1.安装Mockjs

Mockjs提供npm包,所以安装比较方便

yarn add mockjs

复制

2.配置Mock

我们配置方法可以按照官方提供的,写的比较详细,这里我们稍微加点自己的方法,方便我们在添加mock模块的时候更加方便。

配置统一入口

在src文件夹下新建mock文件夹,文件夹中新建index.js,这个js文件作为统一入口文件,之后添加的所有的Mock数据都经过这个文件解析后,统一注册。

image.png

index.js文件内容如下:

/**
 * Mock配置文件
 **/
// 首先引入Mock
const Mock = require('mockjs');
// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});
let configArray = [];
// 使用webpack的require.context()遍历所有Mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});
// 注册所有的Mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

复制

main.js中导入

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入mock
require('./mock');
createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

复制

3.编写模拟数据接口

编写请求数据方法

比如我们有个登录接口,一般我们会在src文件夹下新建api文件夹,里面定义我们所有的请求接口方法,这里,我们也不例外,src/api/basis/下新建login.js,内容如下:

import { liSend } from '@/utils/request'
// 测试请求
export const login = (obj) => { return liSend("post", "login", obj) };

复制

这里面我们只关注,请求方式是post,url是login。

编写mock返回数据方法

src/mock/basis/下新建login.js,内容如下:

/******************
 * 基础 - 登录 - mock
 *****************/
// 登录
let Login = {
    "code": 0,
    "msg": "success",
    "data": {}
}
export default {
    /**
     * 基础 - 登录
     * @param: {}    
     * @returns:Promise {<pending>}
     **/
    'post|login': option => {
        return Login
    }
}

复制

4.调用mock数据

新建组件

新建组件,组件内调用login方法,返回数据。

<template>
  <div>请求数据:{{ state.loginMsg }}</div>
  <button @click="loginBtn">获取mock数据</button>
</template>
<script>
import { reactive, provide } from "vue";
import { login as loginDemo } from "@/api/basis/login";
export default {
  setup(props, context) {
    const state = reactive({
      loginMsg: {}
    });
    const loginBtn = () => {
      loginDemo().then(res => {
        state.loginMsg = res;
      });
    };
    return {
      loginBtn,
      state
    };
  }
};
</script>

复制

预览效果

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
18581 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27727 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
12967 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
21933 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15291 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
+关注
青年码农
公众号【青年码农】:有趣、有料,有深度、有广度、有热度。
225
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载