Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CSDN 技术社区
skill_tree_vue
提交
147743ec
S
skill_tree_vue
项目概览
CSDN 技术社区
/
skill_tree_vue
通知
5
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
S
skill_tree_vue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
147743ec
编写于
5月 09, 2022
作者:
Z
zhaoss
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
2.7.1小节习题修改
上级
53a21e06
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
117 addition
and
108 deletion
+117
-108
data/2.Vue中阶/7.Mock/1.Mock是什么?/config.json
data/2.Vue中阶/7.Mock/1.Mock是什么?/config.json
+8
-2
data/2.Vue中阶/7.Mock/1.Mock是什么?/exercises.md
data/2.Vue中阶/7.Mock/1.Mock是什么?/exercises.md
+23
-47
data/2.Vue中阶/7.Mock/2.Mock语法规范/config.json
data/2.Vue中阶/7.Mock/2.Mock语法规范/config.json
+7
-2
data/2.Vue中阶/7.Mock/2.Mock语法规范/exercises.md
data/2.Vue中阶/7.Mock/2.Mock语法规范/exercises.md
+79
-48
data/2.Vue中阶/7.Mock/4.Easy Mock创建接口/config.json
data/2.Vue中阶/7.Mock/4.Easy Mock创建接口/config.json
+0
-9
未找到文件。
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录