使用Easy Mock构建模拟数据

最新推荐文章于 2022-02-17 16:16:38 发布

原创最新推荐文章于 2022-02-17 16:16:38 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easy mooc #mock数据

javascript 专栏收录该内容

51 篇文章

订阅专栏

EasyMock是一款高效在线Mock服务，支持快速生成模拟数据，适用于前后端分离开发场景。本文介绍如何使用EasyMock创建项目、添加接口及前端请求流程，同时提供了mockjs语法基础，帮助开发者更好地理解和应用。

Easy Mock简介

Easy Mock 是一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。我们可以使用它来模拟数据

使用Easy Mock创建一个项目

使用Easy Mock网址：https://easy-mock.com/,你需要去注册一个账号，并且登录，才能进行下面的操作

1.创建项目

把里面的各种选项填写好点创建按钮就可以了

2.添加接口

进入到刚才创建的项目

点击创建接口

添加接口内容

内容填写后点击创建按钮完成接口创建

3.获取接口

回到接口列表页面，点击图中的按钮即可获取到url

例如：https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list

4.前端请求接口

在vue中使用axios去请求

<template>
  <div class="page">
  </div>
</template>

<script type="text/javascript">
import axios from 'axios'
export default {
  data () {
    return {

    }
  },
  components: {

  },
  created () {
    axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
      .then((response) => console.log(response))
  }
}
</script>

<style scoped>
</style>

添加接口的时候需要用到mockjs基础语法

Easy Mock引入了mockjs，你需要知道一些mockjs基本语法，可以参考官方文档

mockjs文档： https://github.com/nuysoft/Mock/wiki
mockjs案例： http://mockjs.com/examples.html

更详细的用法，请访问Easy Mock官方文档：https://easy-mock.com/docs