前端和后端的概念
任何一个应用程序都有前端和后端
前端:客户端,就是浏览器(pc端 手机端)
后端:服务器(性能很好的电脑)是提供计算服务的设备。
服务器的构成包括处理器、硬盘、内存、系统总线等,和通用的计算机架构类似,但是由于需要提供高可靠的服务,因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。
前后端交互原理
[外链图片转存失败(img-RrwDsZFq-1562074235053)(…/AppData/Roaming/Typora/typora-user-images/1561614402046.png)]
交互的应用场景(什么时候用到前后端交互)
1.从后端获取一些数据,将其进行展示或计算
2.将用户在页面中提交的数据发送给后端
Vue.js resource交互
Vue自身不带处理HTTP请求 如果想使用HTTP请求必须要引入 vue-resource.js 库它可以通过XMLHttpRequest发起请求并处理响应。也就是说,$能做的事情,插件一样也能做到,而且的更为简洁。交互借助于.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。
Vue.js 交互借助于 $http 完成
下载:npm install --save vue-resource
Vue请求数据交互
vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件,axios与fetch是第三方插件
Vue-resource可以和jauery融合吗?
是可以的,但是不推荐这么使用,因为这样违背了
vue不对dom进行操作的原则
Vue-resource特点
vue-resource是官方推荐我们使用的请求方式
但是在vue2.0版本之后官方已经停止对当前http
库进行维护,官方转头推荐我们使用axios等
第三方http库来进行数据的请求
get 类型
语法:this.$http.get(‘url’,
{params: {key1:val1,key2:val2…}}).
then(function(res){处理请求成功的情况},
function(res){处理请求失败的情况})
post类型
语法:this.$http.post(‘url’,
{key1:val1,key2:val2…},
{emulateJSON:true}).
then(function(res){处理请求成功的情况},
function(res){处理请求失败的情况})
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<button @click="funa()">点我发送get</button>
<button @click="funb()">点我发送post</button>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script>
new Vue({
el: ".box",
data: {},
methods: {
funa() {
// get传参的第一种方式
this.$http.get(
"http://localhost:8888/get",
{ params: { "uname": "我是get传参的第一种方式" } }//传值在params里面传,地址和值在get()里面写,函数在外面写
).then(function (data) {//成功的回调
console.log(data);
}, function (err) {//失败的回调
console.log(err);
})
//get的第二种方式,直接在url后面添加数据
this.$http.get(
"http://localhost:8888/get?uname=我是get传参的第二种方式",
).then(function (data) {//成功的回调
console.log(data);
}, function (err) {//失败的回调
console.log(err);
})
},
funb(){
this.$http.post(
"http://localhost:8888/post",
{"uname":"我是post"},
{emulateJSON:true}//模拟json格式,传递参数
).then(function (data) {//成功的回调
console.log(data)
}, function (err) {//失败的回调
console.log(err)
})
}
}
})
</script>
Axios的使用
Axios是第三方插件,不仅能在Vue里使用,还能再其他第三方库中使用例如react
npm install --save axios
get类型
语法:axios.get(’/路径?k=v&k=v}
.then((ok)=>{})
.catch((err)=>{})
post类型
语法:axios.post(’/user’, {k:v,k:v })
.then(function (ok) { })
.catch(function (error) { });
注意事项:
Axios的post请求的发送方式是Request Payload,但是后台只认识Form data这种方式,所以在进行post请求的时候需要转换发送方式==(URLSearchparams)==
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<button @click="funa()">点我执行axios.get</button>
<button @click="funb()">点我执行axios.post</button>
</div>
</body>
</html>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: ".box",
data: {},
methods: {
funa() {
axios.get("http://localhost:8888/get?uname=我是axios.get").then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
})
},
funb() {
var param = new URLSearchParams();
param.append("uname","我是axios.post")
axios.post("http://localhost:8888/post",param).then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
})
},
}
})
</script>
Axios–综合交互
axios(utl:‘请求地址’,method:‘请求方式’,data/params:{k:v}).then((ok)=>{})
使用get发送数据的时候 使用params:{key:val}发送数据
使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法
使用param.append(“uname”,“xixi”)添加数据并且使用data发送数据
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<button @click="funa()">点我发送axios的get请求</button>
<button @click="funb()">点我发送axios的post请求</button>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:".box",
data:{},
methods:{
funa(){
axios({
url:"http://localhost:8888/get",
method:"get",
params:{"uname":"我是get"}
}).then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err);
})
},
// 因为Axios里post的发送方式是Request Payload,但是后台只认识Form data所以我们需要用URLSearchParams来改变
//post的发送方式,在这里传参和get有一点小小的不同
funb(){
var param = new URLSearchParams();
param.append("uname","我是post")
axios({
url:"http://localhost:8888/post",
method:"post",
data:param,
}).then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err);
})
}
}
})
</script>
过滤器
过滤器作用
在不改变数据的情况下,输出前端需要的格式数据
2.0中已经废弃了内置过滤器,需要我们自定义过滤器来使用filter
全局过滤器的定义方法
位置:创建实例之前
Vue.filter(‘sum’, function(val){
return val + 4;
});
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<p>{{text|maren}}</p>
<p></p>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
Vue.filter("maren",(val)=>{
return val.toUppercase;
})
new Vue({
el:".box",
data:{
text:"sdsdas"
},
methods:{
}
})
</script>
局部过滤器
只能在当前vue注册内容中使用
在vue实例中与el属性data属性同级定义
filters:{
过滤器名字:function(val){
return 输出内容
}
}
过滤器的调用方法
{{ msg | sum }}
注意事项
定义全局过滤器,必须放在Vue实例化前面
在没有冲突的前提下,过滤器可以串联
实例生命周期
什么是实例的生命周期
实例在被创建前经过的一系列初始化过程叫生命周期
什么是生命周期钩子
在生命周期中被自动调用的函数叫做生命周期钩子
生命周期钩子函数的用途
在生命周期中会自动调用一些函数,为我们提供执行自定义逻辑的机会
钩子函数有哪些
beforeCreate(创建实例)、created(创建完成)、beforeMount(开始创建模板)、mounted(创建完成)、beforeUpdate(开始更新)、updated(更新完成)、beforeDestroy(开始销毁)、destroyed(销毁完成)
钩子函数的书写位置在data与methods同级位置书写。
扩展设置数据请求的钩子
created里面,如果涉及到需要页面加载完成之后的话就用 mounted。
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点
扩展常见问题
1.什么是vue生命周期?
2.vue生命周期的作用是什么?
3.vue生命周期总共有几个阶段?
4.第一次页面加载会触发哪几个钩子?
5.DOM 渲染在 哪个周期中就已经完成?
扩展常见问题答案
1.Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
2.生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易完成指定逻辑。
3.它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4.第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5.DOM 渲染在 mounted 中就已经完成了.
简单描述每个周期?
beforeCreate(创建前) 在数据观测和初始化事件还未开始
created(创建后) 完成数据观测,属性和方法的运算,初始化事件,实例中的el属性还没有显示出来
beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
**mounted(载入后) **在el 被新创建的 vue.el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
**beforeUpdate(更新前) **在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
**updated(更新后) **在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
**destroyed(销毁后) **在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。