Easy-Mock 全解及其详细使用

HelloWorldZ

发布于 2024-03-20 18:35:14

1470

发布于 2024-03-20 18:35:14

文章被收录于专栏：前端开发

前言

工具的使用，对于开发是及其有利的，这里会给大家分享一个Mock假接口完整的是使用历程。

Easy-Mock传送门

界面介绍

数据

这么好的Mock数据网站，咋这么少用户呢？是不是这个行业一点都不卷？这么点用户怎么调用这么多次呢？这个行业是不是好累？

工作台

一些再使用的接口就可以丢到工作台，方便使用。

我的项目 & 团队项目

立项

点击加号

新建好的一个项目，我们只要添加接口就可以了。

编辑接口数据

这属于是比较无脑的操作，你想要什么数据，在这个 Json 文件里面定义就可以。

预览

右侧模拟发起请求，左侧响应：

Mock 实战

获取全部文章信息
根据文章id，获取文章详情

Mock 数据 1

{
    "success": true,
    "code": 10000,
    "message": "success",
    "result": {
        "total": "381",
        "pageTotal": 39,
        "rows": [
            {
                "id": "41156",
                "questionNo": "mj27483",
                "stem": "百度前端面经",
                "content": "虽然百度这几年发展势头落后于AT，甚至快被京东赶上了，毕竟瘦死的骆驼比马大，面试还是相当有难度和水准的。一面1.询问你的项目经验、学习经历、主修语言（照实答）2.解释ES6的暂时性死区（ let 和 var 的区别）3.箭头函数、闭包、异步（老生常谈，参见上文）4.高阶函数（呃……我真不太清楚这是啥，听起来挺像闭包的）5.求N的阶乘末尾有多少个0，在线码代码或讲思路（求因数，统计2、5、10的个数",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "315",
                "likeCount": "44",
                "questionBankType": 9,
                "creatorName": "靑春，那么骚",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41169",
                "questionNo": "mj27496",
                "stem": "宇宙头条校招前端面经",
                "content": "笔者读大三，前端小白一枚，正在准备春招，人生第一次面试，投了头条前端，总共经历了四轮技术面试和一轮hr面，不多说，直接上题 一面1.自我介绍，然后问了为什么学习前端2.算法：实现36进制转换 3.简述https原理，以及与http的区别 4.操作系统中进程和线程怎么通信 5.node中cluster是怎样开启多进程的，并且一个端口可以被多个进程监听吗 6.实现原生ajax 7.vue-router",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "320",
                "likeCount": "43",
                "questionBankType": 9,
                "creatorName": "不风流怎样倜傥",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41145",
                "questionNo": "mj27472",
                "stem": "字节跳动前端开发面试题总结",
                "content": "【一面】1.首先：自我介绍＋项目2.instanceOf实现的原理3.typeof4.js的类型5.给了一段setTimeout、Promise判断输出顺序6.事件循环7.BFC8.position的属性，fixed是相对于什么定位的9.闭包10.new之后发生了什么11.es6有什么觉得好用12.__proto__是用来做什么的13.强缓存/协商缓存14.bind、apply、call15.如何",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "418",
                "likeCount": "34",
                "questionBankType": 9,
                "creatorName": "醉卧九天",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41144",
                "questionNo": "mj27471",
                "stem": "前端小白的知乎一二面面试",
                "content": "    知乎面试体验很棒，推一波知乎二面面试官Lucas大佬，是《React状态管理和同构实战》的作者，二面没有常规的面试题，会根据简历中项目不断深入，提出让你有思考有收获的问题，我认为这是面试最好的状态～。知乎的面试有点久了，当时也没有记录下来，大致回忆一下（遗漏的应该很多）～一面：https握手过程？http缓存？（其实http缓存除了强缓存和协商缓存，还有一个自发的启发式缓存，具体可以查查r",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "266",
                "likeCount": "31",
                "questionBankType": 9,
                "creatorName": "五行缺钱",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41187",
                "questionNo": "mj27514",
                "stem": "快手三面+HR面-前端工程师面经奉上~秋招",
                "content": "秋招，马不停蹄的面试中，快手本来不打算去，面试一下攒经验，不过整个的面试过程还是比较舒服的，面试完勤于总结真的很重要，目前已经拿到小米、阿里、腾讯、河狸家等五家offer，心仪的公司还没开始面，后续持续更新吧快手一面判断链表是否有环删除链表倒数第n个判断回文给定数组，统计出现次数js数据类型Symbol的特点 独一无二let和const的区别tcp和udp的区别http有哪些请求头或响应头以及有哪",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "421",
                "likeCount": "17",
                "questionBankType": 9,
                "creatorName": "~星星眼",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41141",
                "questionNo": "mj27468",
                "stem": "图森未来视频一面复盘总结",
                "content": "这个面试有点东西，只面试了一面，约的第二面我打电话取消了（因为二面之前有了其他公司的offer）我对这个公司做过一些调查，觉得不是很大，面试会比较简单吧，但一面过程中我还挺多不会的，让我觉得它高大尚起来了。1.关于项目的问题太多了，我本身做的高仿小米商城，就是跟着教程做的，所以深入一点的东西都回答不上来，他问，做项目的过程中有没有遇到什么难点，我说有，项目我用的Vue框架，但子组件更新后，父组件不",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "167",
                "likeCount": "22",
                "questionBankType": 9,
                "creatorName": "非常可乐",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 1
            },
            {
                "id": "41172",
                "questionNo": "mj27499",
                "stem": "21届秋招猿辅导前端面经笔试",
                "content": "笔试给一定的钱去买物品，算性价比最高的方案，用递归来写的传卡片记录最大值（和网易的教师认证那道题比较像） 解析文档（类似vue的模板解析 解析v-if v-for {{}} 方法） 一面自我介绍项目交流了很多，包括一些问题和学到的东西对git的使用vue的常用optionvue生命周期流程vue的原理es6使用了哪些东西原型链的理解（编程题）解析字符串，从url上提取键值对css盒模型反问二面自我",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "547",
                "likeCount": "7",
                "questionBankType": 9,
                "creatorName": "多吉利奥",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 1
            },
            {
                "id": "41158",
                "questionNo": "mj27485",
                "stem": "去哪儿网前端面经",
                "content": "距离去哪儿网笔试快一个月了，我都以为我凉了，结果在北京面腾讯的当天下午连续接到三个电话……只有一轮技术面+一轮HR面，然后就给我发了口头offer，相当地干脆利落…… 去哪儿网好像更注重考察你对框架、工具的应用，对于基础考得反而不多。而且还考了我 jQuery ,别的公司都不怎么考的…… 一面1.webpack 用过吗？2.如何处理图片、 CSS 文件？（各种 loader ）3.使用 flex ",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "216",
                "likeCount": "15",
                "questionBankType": 9,
                "creatorName": "孤老序",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41165",
                "questionNo": "mj27492",
                "stem": "字节跳动前端面经",
                "content": "一面1、 http1.0/2.0/3.02、3.0的tcp复用3、 网络攻击知道哪些4、 浏览器缓存5、代码： 实现LRU6、margin和padding的区别7、 实现水平居中和垂直居中的方法8、冒泡9、 事件分发二面1、排序算法2、常见的数据结构有哪些3、网络攻击4、tcp和udp的区别5、闭包6、 js实现person类7、代码：实现堆排序8、代码：最大子序和            ",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "367",
                "likeCount": "7",
                "questionBankType": 9,
                "creatorName": "不想翻身的咸鱼",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            },
            {
                "id": "41166",
                "questionNo": "mj27493",
                "stem": "阿里巴巴前端面经",
                "content": "电话面1、简单自我介绍, 做过哪些项目, 使用哪些技术栈?2、如何看待前端框架选型? 3、vue的如何实现双向绑定的 ? 4、react 虚拟DOM 是什么? 如何实现? 说一下diff算法? 5、平时如何学习, 最近接触了解了哪些新的知识? 技术一面1、简单自我介绍, 介绍一下你的项目, 技术栈?2、react和vue的比较? 3、React Diff 算法? 4、观察者模式实现? 5、http",
                "subjectName": "前端与移动开发",
                "questionType": 8,
                "difficulty": 1,
                "views": "323",
                "likeCount": "8",
                "questionBankType": 9,
                "creatorName": "轮獄道",
                "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
                "createdAt": "2022-01-20",
                "likeFlag": 0
            }
        ]
    }
}

Mock 数据 2

某篇文章详情

{
    "success": true,
    "code": 10000,
    "message": "success",
    "result": {
        "id": "41166",
        "questionNo": "mj27493",
        "stem": "阿里巴巴前端面经",
        "content": "电话面1、简单自我介绍, 做过哪些项目, 使用哪些技术栈?2、如何看待前端框架选型? 3、vue的如何实现双向绑定的 ? 4、react 虚拟DOM 是什么? 如何实现? 说一下diff算法? 5、平时如何学习, 最近接触了解了哪些新的知识? 技术一面1、简单自我介绍, 介绍一下你的项目, 技术栈?2、react和vue的比较? 3、React Diff 算法? 4、观察者模式实现? 5、http",
        "subjectName": "前端与移动开发",
        "questionType": 8,
        "difficulty": 1,
        "views": "323",
        "likeCount": "8",
        "questionBankType": 9,
        "creatorName": "轮獄道",
        "creatorAvatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
        "createdAt": "2022-01-20",
        "likeFlag": 0
    }
}

调用 Mock 接口

该 Demo 文件接口如下：

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout'
import ArticleDetail from '../views/ArticleDetail'
import Article from '../views/Article'
import Collect from '../views/Collect'
import Like from '../views/Like'
import User from '../views/User'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      // 通过children配置项,可以配置嵌套子路由
      // 1.在children配置项中,配规则
      // 2．准备二级路由出口
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: 'user', component: User }
      ]
    },
    {
      path: '/detail/:id',
      component: ArticleDetail
    }
  ]
})

export default router

views/Article.vue

<template>
  <div class="article-page">
    <div
    v-for="item in articles" :key="item.id" @click="$router.push(`/detail/${ item.id }`)" class="article-item">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
        {{ item.content }}
      </div>
      <div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ArticlePage',
  data () {
    return {
      articles: []
    }
  },
  async created () {
    const res = await axios.get('https://mock.presstime.cn/mock/658c5914ec1ac42222a3a9b5/getArticals/getAll')
    this.articles = res.data.result.rows
    console.log(res)
  }
}
</script>

<style lang="less" scoped>
.article-page {
  background: #f5f5f5;
}
.article-item {
  margin-bottom: 10px;
  background: #fff;
  padding: 10px 15px;
  .head {
    display: flex;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .con {
      flex: 1;
      overflow: hidden;
      padding-left: 15px;
      p {
        margin: 0;
        line-height: 1.5;
        &.title {
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
          white-space: nowrap;
        }
        &.other {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }
  .body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .foot {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>

views/ArticleDetail.vue

使用了动态路由。

<template>
  <div class="article-detail-page" v-if="article.id">
    <nav class="nav"><span @click="$router.back()" class="back">&lt;</span> 面经详情</nav>
    <header class="header">
      <h1>{{ article.stem }}</h1>
      <p>{{ article.createdAt }} | {{ article.views }} 浏览量 | {{ article.likeCount }} 点赞数</p>
      <p>
        <img
          :src="article.creatorAvatar"
          alt=""
        />
        <span>{{ article.creatorName }}</span>
      </p>
    </header>
    <main class="body">
     {{ article.content }}
    </main>
  </div>
</template>

<script>
// 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 请求方式: get
import axios from 'axios'
export default {
  name: 'ArticleDetailPage',
  data () {
    return {
      article: {}
    }
  },
  async created () {
    const { data } = await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${this.$route.params.id}`)
    this.article = data.result
    console.log(this.article)
  }
}
</script>

<style lang="less" scoped>
.article-detail-page {
  .nav {
    height: 44px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 44px;
    text-align: center;
    .back {
      font-size: 18px;
      color: #666;
      position: absolute;
      left: 10px;
      top: 0;
      transform: scale(1, 1.5);
    }
  }
  .header {
    padding: 0 15px;
    p {
      color: #999;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .body {
    padding: 0 15px;
  }
}
</style>