Skip to content

S
skill_tree_vue

CSDN 技术社区 / skill_tree_vue

通知 5
Star 2
Fork 0
S
skill_tree_vue

体验新版 GitCode，发现更多精彩内容 >>

提交 147743ec 编写于 作者: Z zhaoss
浏览文件
操作

2.7.1小节习题修改

上级 53a21e06
隐藏空白更改
内联 并排
Showing with 117 addition and 108 deletion
data/2.Vue中阶/7.Mock/1.Mock是什么？/config.json
浏览文件 @ 147743ec
{ {
"node_id": "vue-b5fd0da867d74041a258647cd1f2b688", "node_id": "vue-b5fd0da867d74041a258647cd1f2b688",
"keywords": [], "keywords": [
"mock是什么",
"什么是mock"
],
"children": [], "children": [],
"export": [ "export": [
"exercises.json" "exercises.json"
], ],
"keywords_must": [], "keywords_must": [
"mock"
],
"keywords_forbid": [] "keywords_forbid": []
} }
\ No newline at end of file
data/2.Vue中阶/7.Mock/1.Mock是什么？/exercises.md
浏览文件 @ 147743ec
# 通过脚手架创建项目 # Mock是什么
 <div style="color: pink;font-size:22px;font-weight:700">小常识：</div> <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
<br> <br>
**创建Vue项目** 当下采用`前后端分离模式`开发Web应用已经成为气候，在开发阶段有一个不成文的规定则是 `项目开发后端先行` 但是作为前端开发工程师的我们，难道在搭建完页面后只能等待后端的接口么？这样的话我们则完全被后端开发限制住了。
> 在要创建项目的文件夹下面打开Powershell窗口
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200728104924858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
> 输入命令 vue create 项目名称
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230344767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第二项
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230458492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
回车后
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230604113.png)
<br/>
选择是否使用历史路由 no 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230655384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择 Less 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230733469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第三个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230815578.png)
<br/>
选择第一个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230835328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第一个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230905737.png)
<br/>
是否保存模板 选择no
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721231628826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
完成啦
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721233714426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
<br> <br>
但其实我们只需要同后端同学商议决定好接口返回的数据格式我们就可以并行开发。很多同学则在开发中则会使用定义变量写好数据模拟接口返回的数据进行前端渲染工作；完全是可以的，但是有没有`更加专业`的手段或者技术呢？
当然有，那就是我们的 `Mock` 下面让我们来看一下前端人最后的倔强吧！
<br>
**Mock概述**
<br>
![在这里插入图片描述](https://img-blog.csdnimg.cn/4a81818a55ca464884658619d3ef8db9.png)
<br>
`mock：模仿的;虚假的;不诚实的`，这是mock作为单词的翻译，当然他的用途也是如同他的翻译一样就是模拟`接口、数据`其实mock的出现就是前后端分离后为前端不受制于后端同学的束缚而出现的，在实际开发中后端同学有自己的开发节奏，不能如我们前端所想几分钟出一个接口，可能我们索要接口的时候后端同学还在构思如何建表？
<br>
而mock则避免了我们对后端同学催促的尴尬，他就可以完成模拟接口，让前后端并行开发，提高我们的开发效率，不被后端拖节奏。
<br>
mock即mock.js，他的流程就是 `前端发送请求到后端 =》mock.js拦截请求=》并返回模拟数据给前端`。至于数据我们事先只需要与后端同学定义好格式即可，mock.js会通过法则为我们生成比较贴近真实数据的模拟数据。看到这里你是不是对mock属实有点心动了呢？下面就让我们来看一下mock.js运用到项目中。
 <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div> <br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
关于vue-cli的安装以下说法不正确的是？<br/><br/> 根据上方小常识完成填空：生成随机数据，拦截 `(__1__)`<br/><br/>
## 答案 ## 答案
手动选择特性，无法保存已选项 Ajax 请求
## 选项 ## 选项
### A ### A
手动设置则提供了更多的选项，它们是面向生产的项目更加需要的 Ajax 响应
### B ### B
可以选默认的preset也可以选“手动选择特性”来选取需要的特性 Ajax 参数
### C ### C
使用vue create命令来创建项目 后端接口相应
data/2.Vue中阶/7.Mock/2.Mock语法规范/config.json
浏览文件 @ 147743ec
{ {
"node_id": "vue-be7de8061d2443dead0d472870a1fa1b", "node_id": "vue-be7de8061d2443dead0d472870a1fa1b",
"keywords": [], "keywords": [
"Mock.js 的语法规范"
],
"children": [], "children": [],
"export": [ "export": [
"exercises.json" "exercises.json"
], ],
"keywords_must": [], "keywords_must": [
"Mock.js"
],
"keywords_forbid": [] "keywords_forbid": []
} }
\ No newline at end of file
data/2.Vue中阶/7.Mock/2.Mock语法规范/exercises.md
浏览文件 @ 147743ec
# 通过脚手架创建项目 # Mock.js 的语法规范
 <div style="color: pink;font-size:22px;font-weight:700">小常识：</div> <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
<br> <br>
**创建Vue项目**
> 在要创建项目的文件夹下面打开Powershell窗口
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200728104924858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
> 输入命令 vue create 项目名称
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230344767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第二项
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230458492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
回车后
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230604113.png)
<br/>
选择是否使用历史路由 no 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230655384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择 Less 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230733469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第三个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230815578.png)
<br/>
选择第一个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230835328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第一个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230905737.png)
<br/>
是否保存模板 选择no
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721231628826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
完成啦
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721233714426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
<br> Mock.js 的语法规范包括两部分：
1. 数据模板定义规范（Data Template Definition，DTD）
 <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div> 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
```php
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
```
> 注意：
> 属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 7 种格式：
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
2. 数据占位符定义规范（Data Placeholder Definition，DPD）
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
```php
@占位符
@占位符(参数 [, 参数])
```
> 注意：
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
占位符 支持 相对路径 和 绝对路径。
```php
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
```
上面这些呢只是简单的介绍了一下mock的规范，但其实他是有很多法则的我们可以到官方来去看看，掌握这些法则后我们能够模拟的数据就会更加真实更加繁琐的数据都可以轻松生成！
[https://github.com/nuysoft/Mock/wiki/Syntax-Specification](https://github.com/nuysoft/Mock/wiki/Syntax-Specification)
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
关于vue-cli的安装以下说法不正确的是？<br/><br/> 根据上方小常识完成填空：数据模板中的每个属性由`（__1__）`部分构成：`(__2__)`，属性名和生成规则之间用`(__3__)`分隔 <br/><br/>
## 答案 ## 答案
手动选择特性，无法保存已选项 1、 3 ；2、属性名、生成规则、属性值；3、竖线 |
## 选项 ## 选项
### A ### A
手动设置则提供了更多的选项，它们是面向生产的项目更加需要的 1、 2 ；2、属性名、生成规则；3、竖线 |
### B ### B
可以选默认的preset也可以选“手动选择特性”来选取需要的特性 1、 2 ；2、属性名、生成规则；3、与符号&
### C ### C
1、 3 ；2、属性名、生成规则、属性值；3、与符号&
使用vue create命令来创建项目
data/2.Vue中阶/7.Mock/4.Easy Mock创建接口/config.json 已删除 100644 → 0
浏览文件 @ 53a21e06
{
"node_id": "vue-ea0937067ef3462daa6a9de2cbfa764a",
"keywords": [],
"children": [],
"export": [],
"keywords_must": [],
"keywords_forbid": []
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或