vue快速上手教程03--axios、过滤器、侦听器

vue快速上手教程03--axios、过滤器、侦听器

第三章：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 中。

官方地址：中文地址：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2.1 特性

从浏览器中创建​​XMLHttpRequests​​从 node.js 创建​​请求支持​​Promise​​ API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御​​XSRF​​

2.2 Axios安装

CDN方式​​​ npm install axios

2.3 axios的使用方法

#基本用法//可以通过向 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(' 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 = ' //基础地址axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //设置公共请求头axios.defaults.headers.post['Content-Type'] = 'application/x-multipart/form-data"格式、"application/json"格式和"text/xml"格式。通常最常见的是"application/json"格式，也就是通过JSON字符串形式。

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

const instance = axios.create({ baseURL: ' 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 请求配置见手册

参见官网配置信息：响应结构信息

某个请求的响应包含以下信息

{ // `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 | capitalize }}

3.2 过滤器的使用放法：

**局部过滤器：**你可以在一个组件的选项中定义本地的局部过滤器（只能在一个vue实例中使用）

**全局过滤器：**可以在多个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 : 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(' console.log(resp.data); }) }, //该属性取值为true/false 如果为true表示立即触发 immediate:true } }

//侦听器一：函数侦听器

应用场景：百度的注册页，用户名和密码框，随着数据的变化 页面上会给出相应的提示，用户名是否被占用，密码的强弱级别变化。启动server.js。

**案例：**判断用户名是否被占用。

五、总结与作业

ript>

```

应用场景：百度的注册页，用户名和密码框，随着数据的变化 页面上会给出相应的提示，用户名是否被占用，密码的强弱级别变化。启动server.js。

**案例：**判断用户名是否被占用。

五、总结与作业

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。