vue中用mockjs模拟webapi服务

我就是我 2022-11-06 12:52 166阅读 0赞

npm install mockjs --save-dev

安装完成之后，我们写个例子测试一下。

在 src 目录下新建一个 mock 目录，创建 mock.js，在里面我们模拟了两个接口，分别拦截用户和菜单的请求，并返回相应的数据。

如下图所示：

![8ebd226915830c42c99079e5b1df255b.png][]

修改 Home.vue，在页面放置两个按钮，分别触发用户和菜单的处理请求，成功后弹出获取结果。

![63278a2253618fd0dde3dd0c02c94c5a.png][]

浏览器访问：http://localhost:8080/\#/，分别点击两个按钮，mock 会根据请求 url 拦截对应请求并返回模拟数据。

获取用户信息

![f0d4974ac9ccbad9e5459d5880f5ec6f.png][]

获取菜单信息

![93125041187aaa26d931005ff0099392.png][]

==================

mock.js文件内容如下：

<template>

<div>

<el-button @click="show = !show">Click Me</el-button>

<div style="display: flex; margin-top: 20px; height: 100px;">

<transition name="el-fade-in-linear">

<div v-show="show" class="transition-box">.el-fade-in-linear</div>

</transition>

<transition name="el-fade-in">

<div v-show="show" class="transition-box">.el-fade-in</div>

</transition>

</div>

<el-button @click="getUser()" type="primary">获取用户信息</el-button>

<el-button @click="getMenu()" type="primary">获取菜单信息</el-button>

</div>

</template>

<script>

import axios from 'axios'

import mock from '@/mock/mock.js'

export default \{

data: () => (\{

show: true

\}),

methods: \{

getUser() \{

axios.get('http://localhost:8080/user')

.then(function(res)\{

alert(JSON.stringify(res.data))

\}).catch(function(res)\{

alert(res)

\})

\},

getMenu() \{

axios.get('http://localhost:8080/menu')

.then(function(res)\{

alert(JSON.stringify(res.data))

\}).catch(function(res)\{

alert(res)

\})

\}

\},

created () \{

this.$message(\{type: 'warning',message:'你好'\})

\}

\}

</script>

<style>

.transition-box \{

margin-bottom: 10px;

width: 200px;

height: 100px;

border-radius: 4px;

background-color: \#409EFF;

text-align: center;

color: \#fff;

padding: 40px 20px;

box-sizing: border-box;

margin-right: 20px;

\}

</style>

[8ebd226915830c42c99079e5b1df255b.png]: /images/20221023/9fc37dd86b064159b30592aae8198b60.png
[63278a2253618fd0dde3dd0c02c94c5a.png]: /images/20221023/1c179a1162474be4ac850f5c1dda39e3.png
[f0d4974ac9ccbad9e5459d5880f5ec6f.png]: /images/20221023/30977f272c4548d788993ca112ae6970.png
[93125041187aaa26d931005ff0099392.png]: /images/20221023/7b5f559688bc4c3992a5297ac15d301e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用mockjs来生成模拟数据

Mockjs生成模拟数据在前端进行开发的时候，我们需要拿到后端的接口，然后调用进而拿到后端所提供的数据；但在实际情况当中，有可能后端的接口还没有设计好，但是你想要拿到数

野性酷女/ 2023年01月16日 06:28/ 0 赞/ 147 阅读

相关 mockJs -- vue中常用数据模拟

mockJs – vue中常用数据模拟 import Mock from "mockjs"; // 引入mockjs const Random = Moc

客官°小女子只卖身不卖艺/ 2022年12月10日 10:06/ 0 赞/ 167 阅读

相关 mockjs（接口服务代理）

mock官网：http://mockjs.com/ 一、搭建一个练习项目 1.利用vue的项目脚手架进行搭建命令： > vue create mock

傷城~/ 2022年12月05日 12:21/ 0 赞/ 288 阅读

相关 vue中用mockjs模拟webapi服务

npm install mockjs --save-dev 安装完成之后，我们写个例子测试一下。在 src 目录下新建一个 mock 目录，创建 mock.js，在里面我

我就是我/ 2022年11月06日 12:52/ 0 赞/ 167 阅读

相关 Vue-cli项目中使用mockjs模拟数据

vue-cli项目中如何使用在项目中安装mockjs、axios（http请求库） cnpm install mockjs axios

秒速五厘米/ 2022年05月10日 16:56/ 0 赞/ 200 阅读

相关 Mockjs生成Vue数据表格

1.npm install mockjs --save 2.在src文件下建mock.js文件 3.mock.js文件文件内容 1 //引入mockjs

素颜马尾好姑娘i/ 2022年04月10日 13:08/ 0 赞/ 295 阅读

相关 vue中使用mockjs

1.安装mockjs 和axios npm install --save-dev mockjs npm install --save axios 2.在sr

╰半橙微兮°/ 2021年12月19日 02:21/ 0 赞/ 270 阅读

相关 mockjs的常用方法

一.mock.mock() 根据数据模板生成模拟数据。更关键的是，我们发起Ajax请求的时候要能够接收到这些数据。这就是Mock.mock()的作用啦！ Mock.mock

Dear 丶/ 2021年09月15日 02:52/ 0 赞/ 765 阅读

相关 vue中使用mockjs模拟接口

效果图 ![9d7a5b501eb0468ea5d153e5005d4693.png][] ![7b58f80c50964e958ab8ae915c3f565b.png]

╰半橙微兮°/ 2021年09月09日 03:36/ 0 赞/ 439 阅读

相关 Vue-cli中用mockjs axios实现前后端分离

一，安装axios和mockjs cnpm i axios -S （注意：-S是--save的简写，也就是说，安装axios也可以用：cnpm i axios

向右看齐/ 2021年07月25日 16:21/ 0 赞/ 348 阅读