第三章：axios，vue过滤器、侦听器
回顾：
vue核心:
? 数据决定视图
? 双向数据绑定
数组：every some map filter reduce foreach …
题目：有一个整数数组，所有的数据都是有两个的，只有一个数据是单个，编写程序，把这个单个的数据输出。
[1,2,3,4,5,6,1,2,3,4,5]。
课前测试10分钟：
购物车的全选和反选
reading ‘id’ undefined
本章目标
- 能够使用Axios发起请求进行前后端数据交互
- 掌握vue过滤器的使用（Vue3.0已遗弃）
- 掌握 Vue.js 侦听器器的使用方法
一、前端和后端的开发简介
1.1 概念
- 任何一个应用程序都有前端和后端（后台、服务端）
- 前端：客户端，就是浏览器
- 后端：服务器
- 前端开发
- 控制页面的样式
- 数据的展示
- 越来越多的业务逻辑放前端处理
- 后端开发
操作数据库，返回给我们需要的数据
1.2 交互的应用场景
- 从后端获取一些数据，将其进行展示或计算
- 浏览页面的时候，打开一个页面，这时候就会有交互产生，会从后端获得页面数据在前端页面显示
- 将用户在页面中提交的数据发送给后端
- 登录的场景中体现的较为明显，登录操作的时候需要把用户名和密码发送后端，后端验证之后，确定是否能登录成功
二、Axios基本介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官方地址：https://github.com/axios/axios
中文地址：http://www.axios-js.com/zh-cn/docs/ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
2.1 特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
2.2 Axios安装
CDN方式
https://unpkg.com/axios/dist/axios.min.js
NPM
npm install axios
2.3 axios的使用方法
<script src='./../js/axios.min.js'></script>
#基本用法
//可以通过向 axios 传递相关配置来创建请求
//axios(config) 基于promise的api ，所以在then方法中接收数据
axios({
//配置请求的方式 默认为get
method: 'post',
//请求路径
url: '/user/12345',
//put post 才使用data配置
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res=>console.log(res));
//res是整体的响应对象，一共有6个属性 其中一个 data才是我们需要的返回数据
#get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
#执行post请求
let obj = {
firstName: 'Fred',
lastName: 'Flintstone'
}
axios.post('/user', obj)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
#执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
//一般使用不多
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
async + await调用axios：
async handler(newVal){
let obj = await axios.get('http://127.0.0.1:8080/register?name='+newVal);
console.log(obj.data);
}
2.4 请求方法的别名
为方便起见，为所有支持的请求方法提供了别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
2.5 配置默认值
你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com'; //基础地址
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //设置公共请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//通常前端通过POST请求向服务器端提交数据格式有4中，分别是"application/x-www-form-urlencoded"格式、" multipart/form-data"格式、"application/json"格式和"text/xml"格式。通常最常见的是"application/json"格式，也就是通过JSON字符串形式。
创建实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
});
此时发送请求，直接使用我们自己定义的instance实例对象就可以了 instance====》axios对象
testConfig(){
instance.get('aaa?id=123&subject=java').then(res=>{
console.log(res.data);
})
}
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
2.6 请求配置见手册
参见官网配置信息：http://www.axios-js.com/zh-cn/docs/
2.7 响应结构信息
某个请求的响应包含以下信息
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
2.8 axios拦截器
全局配置：所有的请求都必须要经过拦截器。
在请求或响应被 then 或 catch 处理前拦截它们。aaa
// 添加请求拦截器
axios.interceptors.request.use(function (request) {
// 在发送请求之前做些什么 此处的config就是请求的整个配置对象
return request;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么 此处的response相当于相应的整体配置对象
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
注意：必须有return 此处return相当于拦截放行。
如果你想在稍后移除拦截器，可以这样：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
2.9 补充
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ij3SdIBW-1655165235919)(assets/image-20201224234441900.png)]
三、Vue.js 过滤器
3.1 概念简介
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化，比如字母的大写、货币的千位使用逗号分隔。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道” ‘|’ 符号指示。注意：过滤器在vue3中已经被干掉了。
//<!-- 在双花括号中 message：data中定义的属性 | 管道符 capitalize:过滤器函数 -->
//表示页面中显示的数据是过滤器函数的返回值
<p>{{ message | capitalize }}</p>
//<!-- 在 `v-bind` 中 |管道符 formatId：过滤器 -->
<div v-bind:id="rawId | formatId"></div>
注意：过滤器是一个函数，一定要有反回值，参数就是管道符前边的数据。
3.2 过滤器的使用放法：
**局部过滤器：**你可以在一个组件的选项中定义本地的局部过滤器（只能在一个vue实例中使用）
<body>
<div id="app">
<!-- msg是原本的值 | 表示管道符 调用filter函数 此时标签中显示的就是过滤器函数的返回值 -->
<p>{{msg | test1}}</p>
</div>
</body>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'你好哈哈哈'
},
methods:{},
filters:{
test1(msg){
return msg.replace(/哈/g,'*');;
}
}
})
</script>
**全局过滤器：**可以在多个vue实例中共享过滤器。
在创建 Vue 实例之前全局定义过滤器：
/*
格式Vue.filter(参数1,参数2)
参数1 表示全局过滤器的名字
参数2 表示处理函数
*/
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
过滤的规则是自定义的，通过给Vue示例添加选项filters来设置
过滤器是 JavaScript 函数，因此可以接收参数,过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
注意： 如果全局过滤器和私有过滤器的名字相同，优先使用私有过滤器！！！
3.3 过滤器可以串联
{{ message | filterA | filterB | filterC}}
//filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
Vue.filter('capitalize', function (value,arg1,arg2) {})
注意：过滤器调用时也可以传递其余的参数，但是function函数中第一个参数永远都是管道符前边的数据，后边的arg1...可以传递别的参数。
案例：时间格式化
moment.js 常用的js格式化日期库
使用moment.js : http://momentjs.cn/ moment.js中文网
需求说明：
格式化的规则是当 月份、日期、小时等小于 10的时候，前面补上 0
对需要过滤的数据调用定义的规则进行处理，并返回处理之后的结果
filters: {
changeDate(date){
/* var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds() > 9 ? date.getSeconds() : "0"+ date.getSeconds();
return year+"年"+month+"月"+day+"日 星期"+week+" "+hour+"时"+minute+"分"+second+"秒"; */
return moment(date).format('YYYY-MM-DD HH:mm:ss');
}
},
axios({
? method:get
? url:
? params:{},
? data{}
})===>promise .then(res=>{data}).catch() async+await
$.ajax({
? method url data dataType success error
})
.get 获取 .post .put .delete ====>rest/restful风格 解决的是关于请求的问题
查询
RESTful 风格 URL:
什么是 rest：**REST（英文：Representational State Transfer，简称 REST）描述了一个架构样式的网络系统，比如 web 应用程序。它首次出现在 2000 年 Roy Fielding 的博士论文中，他是 HTTP 规范的主要编写者之一。在目前主流的三种 Web 服务交互方案中，REST 相比于 SOAP（Simple Object Access protocol，简单对象访问协议）以及 XML-RPC 更加简单明了，无论是对 URL 的处理还是对 Payload 的编码，REST 都倾向于用更加简单轻量的方法设计和实现。值得注意的是 REST 并没有一个明确的标准，而更像是一种设计的风格。它本身并没有什么实用性，其核心价值在于如何设计出符合 REST 风格的网络接口。restful 的优点它结构清晰、符合标准、易于理解、扩展方便，所以正得到越来越多网站的采用。
restful 的特性：资源（Resources）：网络上的一个实体，或者说是网络上的一个具体信息。它可以是一段文本、一张图片、一首歌曲、一种服务，总之就是一个具体的存在。可以用一个 URI（统一资源定位符）指向它，每种资源对应一个特定的 URI 。要获取这个资源，访问它的 URI 就可以，因此 URI 即为每一个资源的独一无二的识别符。 表现层（Representation）：把资源具体呈现出来的形式，叫做它的表现层 （Representation）。比如，文本可以用 txt 格式表现，也可以用 HTML 格式、XML 格式、JSON 格式表现，甚至可以采用二进制格式。状态转化（State Transfer）：每 发出一个请求，就代表了客户端和服务器的一次交互过程。HTTP 协议，是一个无状态协议，即所有的状态都保存在服务器端。因此，如果客户端想要操作服务器，必须通过某种手段，让服务器端发生“状态转化”（State Transfer）。而这种转化是建立在表现层之上的，所以就是 “表现层状态转化”。具体说，就是 HTTP 协议里面，四个表示操作方式的动词：GET 、POST 、PUT、DELETE。它们分别对应四种基本操作：GET 用来获取资源，POST 用来新建资源，PUT 用来更新资源，DELETE 用来删除资源。
restful 的示例：
/account/1 HTTP GET ： 得到 id = 1 的 account
/account/2 HTTP DELETE： 删除 id = 1 的 account
/account/3 HTTP PUT： 更新 id = 1 的 account
四、侦听器(watch)
监听，computed 计算属性
4.1 概念
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，可以使用侦听器来完成，就是通过侦听器监视数据的变化，从而做出合适的对应操作。
4.2 使用
方法：watch属性专门用来定义侦听器，watch中定义的函数的名字就是要侦听的属性的名字，newVal就是变化后的数据，oldVal就是变化之前的数据。
- 函数式侦听器
- 进入页面不调用不会触发
- 如果侦听的是对象中的属性，不会触发侦听器
//函数形式的侦听器 进入页面不调用不会触发 并且如果侦听的是对象中的属性，不会触发侦听器
watch:{
name(newVal,oldVal){
console.log(newVal,oldVal);
}
}
//对象格式的侦听器 进入页面就会立即执行一次 借助于immediate属性来决定 借助于deep属性能实现侦听对象中属性的需求
watch:{
//对象格式的侦听器
name:{
//侦听的处理函数
handler(newVal,oldVal){
axios.get('http://127.0.0.1:8080/register?name='+newVal).then((resp)=>{
console.log(resp.data);
})
},
//该属性取值为true/false 如果为true表示立即触发
immediate:true
}
}
//侦听器一：函数侦听器
<body>
<div id="app">
<input type="text" v-model="name">
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
name:'张三'
},
methods:{},
//watch属性专门用来定义侦听器
watch:{
name(newVal,oldVal){
console.log(newVal,oldVal);
}
}
})
</script>
//侦听器二：对象侦听器
<body>
<div id="app">
<input type="text" v-model="user.name">
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
user:{
name:'张三'
}
},
methods:{},
watch:{
//对象格式的侦听器
user:{
//侦听的处理函数
handler(newVal,oldVal){
axios.get('http://127.0.0.1:8080/register?name='+newVal).then((resp)=>{
console.log(resp.data);
})
},
//该属性取值为true/false 如果为true表示页面加载 就立即触发
immediate:true,
//可以实现侦听对象中的属性的变化
deep:true
},
//直接侦听对象中属性的变化
'user.name'(newVal){
}
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'',
user:{
name:'张三',
age:18
}
},
computed:{
//计算属性要调用才能执行
changeMsg(){
return this.msg+1
}
},
//所有的侦听器都定义在这里
//侦听器中函数的名字就是要侦听的属性的名字
//函数中有两个参数，第一个是改变后的新数据，第二个是变化前的老数据
watch: {
//函数侦听器
/* msg(newVal,oldVal){
console.log(newVal,oldVal)
} */
//方式一：侦听的是整个user对象
/* user:{
handler(newVal){
console.log(newVal.name,newVal.age)
},
//页面加载 立即执行一次
immediate:true,
//深度侦听
deep:true
}, */
//方式二：单独侦听某一个属性
'user.name'(newVal){
console.log(newVal)
}
}
})
</script>
</html>
应用场景：百度的注册页，用户名和密码框，随着数据的变化 页面上会给出相应的提示，用户名是否被占用，密码的强弱级别变化。启动server.js。
**案例：**判断用户名是否被占用。
<body>
<div id="app">
<input type="text" v-model="name">
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
name:'张三'
},
methods:{},
watch:{
//判断用户名是否被占用
name(newVal){
axios.get('http://127.0.0.1:8080/register?name='+newVal).then((resp)=>{
console.log(resp.data);
})
}
}
})
</script>
五、总结与作业
ript>
```应用场景：百度的注册页，用户名和密码框，随着数据的变化 页面上会给出相应的提示，用户名是否被占用，密码的强弱级别变化。启动server.js。
**案例：**判断用户名是否被占用。
<body>
<div id="app">
<input type="text" v-model="name">
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
name:'张三'
},
methods:{},
watch:{
//判断用户名是否被占用
name(newVal){
axios.get('http://127.0.0.1:8080/register?name='+newVal).then((resp)=>{
console.log(resp.data);
})
}
}
})
</script>