2024年Web前端最全告别等待后端接口，前端使用在线mock数据，2024年最新前端面试事件流

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}
}

## mock 语法


支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等  
 支持扩展更多数据类型，支持自定义函数和正则。

{
“string|1-10”: “★”,
“string2|3”: “★★”,
“number|+1”: 202,//递增
“number2|1-100.1-10”: 1,
“boolean|1”: true,//随机生成布尔值
‘paragraph1’: ‘@cparagraph(2)’, //生成一段2句话的中文文本,
‘paragraph2’: ‘@paragraph(3)’, //生成一个3句话的英文文本
‘title’: ‘@title’, //随机生成一个英文标题
‘ctitle’: ‘@ctitle’, //随机生成一个中文标题
“regexp”: /[a-z][A-Z][0-9]/,//生成小写字母、大写字母、数字组成的随机字符
“absolutePath”: “@/string @/user/name”,
‘protocol’: ‘@protocol’, //随机生成一个url协议
‘domain’: ‘@domain’, //随机生成一个域名,
‘email’: ‘@email’, //随机生成一个邮箱地址,
‘ip’: ‘@ip’ //随机生成一个ip地址
“user”: {
“name”: “demo”
},
“object|2”: {
“310000”: “上海市”,
“320000”: “江苏省”
},
“array|1”: [ “AMD” ]
}

## 在线 mock 操作步骤


在线 mock 指的是可以在线拟定接口，具体操作如下：


1. 打开官方网址，<https://easy-mock.com>，登陆账号（没有账号登陆后会提示以登陆的账号和密码自动注册）。如图所示，点击项目，进入创建接口页面。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814140812666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)
2. 在创建接口页面，点击创建接口。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814141121834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)
3. 按如图1，2，3，4，5步创建接口。【格式化】按钮是对左边的接口返回数据进行格式化。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814141447812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)
4. 创建完成后，返回主页面，右边的操作按钮可对接口进行预览、编辑、复制接口地址、克隆、下载、删除。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/201908141417349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)
5. 点击【设置】按钮，可对项目名称、项目url、项目描述进行修改，修改完成之后点击下方的保存按钮。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814142005162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)
6. 创建完成之后可以在主页面看到接口地址。加上配置的接口名称，就可以直接调用 mock 接口了。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814142142592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)
7. 在可视化页面配置完成之后，就可以在自己的项目里面配置 mock 环境了。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814142334478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70)







### 基础面试题

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

![](https://img-blog.csdnimg.cn/img_convert/4f37a562b41c174ea90e91f61afa38cd.webp?x-oss-process=image/format,png)

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

[外链图片转存中...(img-68qaDc6Z-1715403144075)]