一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。
前言
工具的使用，对于开发是及其有利的，这里会给大家分享一个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"><</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>
结语
胸有惊雷而面如平湖者，可拜上将军也。
