移动端开发之二Vue过滤器和侦听器
回顾:
vue核心:
数据决定视图
双向数据绑定
数组:every some map filter reduce foreach ....
题目:有一个整数数组,所有的数据都是有两个的,只有一个数据是单个,编写程序,把这个单个的数据输出。
[1,2,3,4,5,6,1,2,3,4,5]。
本章目标
-
能够使用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 HTTP请求方法
三、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>
- 点赞
- 收藏
- 关注作者
评论(0)