在Vue中实现发送网络请求
目标: 了解在Vue中发送网络请求在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。
- vue-resource: Vue.js的插件，已经不维护，不推荐使用
- axios :不是vue的插件，可以在任何地方使用，推荐
说明: 既可以在浏览器端又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp
如果遇到jsonp请求, 可以使用插件
jsonp实现
基础-json-server工具的使用
**
目标**掌握json-server工具的使用
- 目的: 没有后端的支撑下 ,前端难以为继,json-server可以快速构建一个后台的接口服务,供前端调用
- mock => 模拟数据
json-server 是一个命令行工具 可以json文件变成接口文件
- json-server遵循**
restful**接口规则安装
npm i -g json-server // 也可以采用yarn 和 cnpm新建一个json文件 db.json,并在相对目录下运行命令行命令
json文件格式
{ // brands 相等于 我们数据库中的一个表 "brands": [ { "name": "苹果", "date": "2018-05-30T08:07:20.089Z", "id": 2 }, { "name": "小米", "date": "2018-07-04T08:59:51.200Z", "id": 4 }, { "name": "华为", "date": "2019-07-14T04:04:56.599Z", "id": 5 }, { "name": "75期大神", "date": "2019-07-14T04:31:03.017Z", "id": 7 }, { "name": "李四", "id": 8 } ], user:[{ }], money:[{ }] }json-server --watch db.json
- 启动完成后=> 通过访问地址访问接口
任务
- 安装json-server
- 新建db.json 写入json数据
- 启动json-server服务
- 通过访问地址访问接口
基础-RESTFUL的接口规则
目标: 掌握restful接口规则
- RESTful是一套接口设计规范
- 用**
不同的请求类型发送同样一个请求标识** 所对应的处理是不同的- 通过Http请求的不同类型(POST/DELETE/PUT/GET)来判断是什么业务操作(CRUD )
- CRUD => 增删改查
- json-server应用了RESTful规范
2. HTTP方法规则举例
| HTTP方法 | 数据处理 | 说明 |
|---|---|---|
| POST | Create | 新增一个没有id的资源 |
| GET | Read | 取得一个资源 |
| PUT | Update | 更新一个资源。或新增一个含 id 资源(如果 id 不存在) |
| DELETE | Delete | 删除一个资源 |
- 查询数据 GET /brands 获取db.json下brands对应的所有数据
列表 - GET /brands/1 查询id=1数据
单条 - 删除数据 DELETE /brands/1 删除id=1数据
- 修改数据 PUT /brands/1 请求体对象 {name:‘李四’ }
- 上传/添加 POST /brands 请求体 {name:‘李四’}
PUT和POST用法一样 请求体 {name:“张三”,age: 18, sex:‘男’}
- 查询 GET /brands?title_like=关键字 -> 模糊搜索
任务在json-server中测试体会restful接口规则
基础-postman测试接口
**
目标**学会使用postman测试接口
- 说明:Postman是一款功能强大的网页调试与发送网页HTTP请求的测试工具
**
任务**安装postman工具,并启动son-server 测试json-server的crud接口
基础-axios-介绍-及基本使用
目标:掌握如何使用axios
本地引入axios文件
在npm 中引入axios文件
axios.get(url).then((res) => { // 请求成功 会来到这 res响应体 }).catch((err) => { // 请求失败 会来到这 处理err对象 })
- 发送get请求
axios.get('http://localhost:3000/brands') .then(res => { console.log(res.data); }) .catch(err => { console.dir(err) });
- 发送delete请求
axios.delete('http://localhost:3000/brands/109') .then(res => { console.log(res.data); }) .catch(err => { console.dir(err) });
- 发送post请求
axios.post('http://localhost:3000/brands', { name: '小米', date: new Date()}) .then(res => { console.log(res); }) .catch(err => { console.dir(err) });注意:post 成功 status===201 其他是200
基础-表格案例-axios-列表
目标-任务将表格案例中列表数据实现用axios请求
路径: 使用axios请求列表 1. 引入axios资源
2. 在渲染完成时间中请求列表数据
3. 赋值给data数据
代码
mounted() { // 渲染完成事件 axios.get("http://localhost:3000/brands").then(result => { this.list = result.data; }); } ``` **注意** mounted 是一个事件,后面会讲到,指的是渲染完成事件
基础-表格案例-axios-删除商品
目标-任务` 将表格案例中列表数据实现用axios删除
路径: 使用axios请求列表 1. 删除方法中传入ID
2. 删除方法中调用删除接口
3. 删除完成后重新调用请求接口
代码
delItem(id) { if (confirm("确定删除此条记录")) { axios .delete("http://localhost:3000/brands/" + id) .then(result => { this.getList(); // 重新调用拉取数据 }); } } 路径: 使用axios删除商品
1 删除方法中传入ID
2 删除方法中调用删除接口
3 删除完成后重新调用接口
delItem(id) { if (confirm("确定删除此条记录")) { axios .delete("http://localhost:3000/brands/" + id) .then(result => { this.getList(); // 重新调用拉取数据 }); } }
基础-表格案例-axios-添加商品
目标-任务将表格案例中列表数据实现用axios添加
路径: 使用axios请求列表 1. 添加方法中调用新增接口
2. 添加成功后 拉取数据
3. 清空输入框
代码
addItem() { // 添加商品 axios .post("http://localhost:3000/brands", { name: this.name, date: new Date() }) .then(result => { if (result.status == 201) { this.getList(); // 请求数据 this.name = ""; // 清楚文本框内容 } });
基础-表格案例-axios-搜索功能-分析
目标通过分析得出 计算属性不能进行搜索功能分析的结论
- 如果**
一个函数有return** 那么这个函数基本上就是一个**同步的函数** 就不能执行任何的异步的业务计算属性=> 异步操作搜索=>返回结果 XXXXX 走不通
结论: 搜索功能不能采用 axios请求有 进行解决
计算属性中一定是**
同步操作,如果有异步**操作,则该业务逻辑就会失败新知识: 监听属性 watch
基础-实例选项-watch-文档分析
目标:掌握watch 选项的基本功能含义场景: 当需要根据**
数据变化** 进行相应业务操作,且该操作是**异步操作时,计算属性不能再使用**,可以使用监听watch特性
基础-实例选项-watch-基本使用
目标-任务-: 定义一个城市city变量,当城市city变量发生改变时 生成对应城市的一个数组 如[{ city:'北京',count:1},{ city:"北京",count:2},,{ city:"北京",count:3}] 1 实现 city的双向绑定
2 watch监听city的数据项改变
3 改变函数中实现
- 计算属性和watch区别
- 计算属性 必须要有返回值 所以说不能写异步请求 因为有人用它的返回值(插值表达式)
- watch选项中可以写很多逻辑 不需要返回值 因为没有人用它的返回值
代码
watch: { //newValue是最新的值 oldValue为后面的旧值 city(newValue, oldValue) { this.list = this.list.map(item => ({ city: item.name, })); } }
基础-表格案例-axios-搜索功能-实现
**
目标-任务**使用watch实现前后台搜索功能 1. 监听搜索内容框
2. 在监听函数中实现搜索逻辑
3. 将返回结果设置给 当前数据对象
4. 更换数据对象
代码
watch: { searchValue(newValue) { if (newValue) { axios .get("http://localhost:3000/brands?name_like=" + newValue) .then(result => { this.list = result.data; }); } else { this.getList(); } } } ```
基础-组件-组件体验
**
目标：**建立对于组件的认识场景: 重复的页面结构,数据,逻辑 都可以抽提成一个组件
对于复杂的结构来说 都可以通过抽提组件的方式 来简化开发过程
- 简单 高效 不重复
基础-组件-组件特点
**
目标**认识组件特点组件特点: 组件是一个**
特殊的 Vue实例**和实例相似之处: data/methods/computed/watch 等一应俱全
注意 值得注意的是 data和Vue实例的区别为 组件中data为一个函数 没有el选项
template 代表其页面结构 (有且只要一个根元素)
每个组件都是**
独立**的 运行作用域 数据 逻辑没有任何关联
基础-组件-全局组件
**
目标**掌握如何实现一个全局组件路径: 实现一个全局组件
1 定义一个全局组件
2 写入组件选项
3 使用注册组件
// 注册组件名称 推荐 小写字母 加横向的结构
Vue.component("content-a", {
template: `<div>
{
{count}}
</div>`,
data() {
return {
count: 1
};
}
});
// 注意 data中必须为一个返回对象的函数
// template必须有且只有一个根元素
任务 实现一个全局组件 完成 加减步进器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmkEAzAI-1582442544413)(C:\Vue备课\第四天\笔记\assets\step.png)]
基础-组件-局部组件
目标: 掌握 如何实现一个局部组件路径: 局部组件的实现
1 定义一个局部组件
2 写入组件选项
3 使用组件
var vm = new Vue({ el: "#app", data: { }, methods:{ }, components:{ "content-a": { template: `<div> { {count}} </div>`, data() { return { count: 1 }; } } })注意注册组件时,注册名不能为 - 分割的名称
任务实现一个局部组件 完成 加减步进器
基础-组件-组件嵌套
**
目标**掌握如何在组件中掌握嵌套
- 我们可以在new Vue()实例中使用自定义组件,
- 也可以在注册自定义组件时,嵌套另一个自定义组件,也就是父子组件的关系
var comA = { template: `<div>我是子组件</div>` }; var parentA = { template: `<div> 我是父组件 <com-a></com-a> </div>`, components: { 'com-a': comA } }; var vm = new Vue({ el: "#app", data: { }, methods: { }, components: { 'parent-a":parentA } });
任务
- 实现一个Vue实例
- 自定义一个组件parentB，内容为我是父组件parentB
- 自定义一个组件childA ,内容是我是子组件childA
- 将在父组件中使用childA, 并在页面上实现显示两个parentB
路径: 实现组件嵌套 1 定义多个组件
2 组件对组件进行引用
3 使用根组件
注意: 组件嵌套和全局 及局部组件没关系
关于具体实现参考课程提供的代码
基础-组件-组件通信的几种情况
目标：了解组件通信的几种情况（
- 父组件 =》 子组件 需要将数据传给子组件
- 子组件 =》 父组件 如果父组件需要 子组件也可以传数据给父组件
- 兄弟组件1 =》兄弟组件2
基础-组件-父组件给子组件传值Props
目标:掌握父组件用Props给子组件传值
- props作用: 接收父组件传递的数据
- props就是父组件给子组件标签上定义的属性
1. props是组件的选项 定义接收属性 2. props的值可以是字符串数组 props:["list"] 3. props数组里面的元素称之为prop(属性) 属性=?值 4. prop的值来源于外部的(组件的外部) 5. prop(我们这里是lists)是组件的属性->自定义标签的属性 6. prop的赋值位置(在使用组件时,通过标签属性去赋值) 7. prop的用法和data中的数据用法一样
注意: 父组件传递给子组件的数据是**只读的,即只可以用,不可以改**- 用props完成父组件给子组件传值 传值的属性都是定义在 子组件的标签上,可以采用v-bind的形式传递动态值
- 定义props属性 在标签上定义属性 v-bind传递动态值
- 在子组件中声明接收的属性
- 在子组件中使用 组件 记住 属性只可以用 不可改
任务
- 定义子组件
- 在父组件中将 [“北京”, “上海”,“天津”] 传递给子组件
- 在子组件中获取该数据 并采用v-for循环显示在页面上
components: { a: { template: "<b :name1='123'></b>", components: { b: { props: ["name1"], template: "<c :name2='234'></c>", components: { c: { props: ["name2"], template: "<d :name3='345'></d>", components: { d: { props: ["name3"] } } } } } } } }
路径:1. 定义父子组件 2. 定义props接受父组件属性 3. 父组件中通过属性给子组件传值 4. 注册使用子组件const comA = { template: `<div> <span v-for="(item,index) in list" :key="index">{ {item}}</span> </div> `, props: ["list"] // props可以是数组 也可以是对象 };
关于具体实现参考课程提供的代码
基础-组件-子组件给父组件传值(自定义事件)
目标:掌握如何通过子组件给父组件传值 父组件如何监听子组件事件?
- 上个小节中,父组件通过props将值传给了子组件,那么子组件如何将数据传给父组件?
- 可通过在子组件中触发**
$emit**事件,然后在父组件中监视此事件 进行追踪任务
- 上一小节基础上 实现 点击子组件的城市时,将当前点击的城市传递给父组件,
- 父组件 将 当前点击城市 通过props再次传递给子组件
- 子组件 根据当前选中和循环项目比对 得出 哪个城市 得到 select class
- 对 select class进行样式赋值,使其 字体大小为40px 字体颜色为红色
注意：抛出事件名必须为全小写
路径: 点击子组件时 调用父组件的方法 改变当前的select 1 定义子组件
2 定义props接收 父组件 数据 函数
3 父组件给子组件传值 数据 和函数
4 子组件点击事件绑定 父组件传递prop函数
注意 !!! 如果props有驼峰命名的情况 赋值时 需要拆成- 分割的形式 否则无法传递
例如
<p postTitle="hello world"></p> // 错误 <p post-title="hello world"></p> //正确*
关于具体实现参考课程提供的代码