您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

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

来源:网络整理 浏览:154次 时间:2022-11-30

mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发。使前端不用去调用后端的接口,即可完成前端单元测试。

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

1.安装Mockjs

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

yarn add mockjs

2.配置Mock

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

配置统一入口

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


index.js文件内容如下:

/** * Mock配置文件 **/// 首先引入Mockconst 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";// 导入mockrequire('./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>

预览效果

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com