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

Posted teayear

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 中。

官方地址：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对象
            
以上是关于vue快速上手教程03--axios过滤器侦听器的主要内容，如果未能解决你的问题，请参考以下文章
 

 Vue 过滤器计算属性侦听器 图解版 一目了然


 vue快速上手教程之vue--组件01


 基于uniapp/Vue的发布订阅模式实现和快速上手


 使用CycleGAN训练自己制作的数据集，通俗教程，快速上手


 想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!


 （Vue -03）Vue绑定样式 + 计算属性 + 侦听器+ 过滤器