VUE生命周期与Ajax前后端调用

最新推荐文章于 2024-01-25 12:38:57 发布

爱~消逝

最新推荐文章于 2024-01-25 12:38:57 发布

阅读量524

点赞数 3

分类专栏： vue 后端 Mybatis 文章标签： ajax vue.js spring boot

本文链接：https://blog.csdn.net/qq_45377275/article/details/119940440

版权

本文探讨了Vue的生命周期，详细阐述了Vue前后端调用的流程，并重点讲解了Ajax异步原理。介绍了使用Axios进行前后端交互，包括设置@CrossOrigin解决跨域问题，以及在Spring Boot后端和Vue前端的具体实现步骤。

摘要由CSDN通过智能技术生成

1 VUE的生命周期

VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点有特殊的需求,可以对VUE对象进行扩展!(销毁需要手动销毁)

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<!-- 知识梳理:
		 
			1.生命周期函数的方法名称 必须固定.
			2.生命周期函数是VUE对象特有的函数.应该放到根目录下.
			3.当页面渲染成功之后, 一共执行了4个生命周期方法.
				第一类: VUE对象的创建.
					beforeCreate:对象创建前调用
					created: VUE对象已经创建完成之后调用	
				第二类: VUE对象的挂载(渲染)
					beforeMount:  el : "#app",VUE对象在找到@APP标签之前先执行该函数.
					mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数
			
			4. 用户修改阶段:
				第三类:
					beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数
					过渡: 数据已经被修改
					updated: 数据已经被修改之后调用该函数
			5. 销毁阶段:
				 销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
				 beforeDestroy: 在销毁方法执行前
				 destroyed:     标志着VUE对象已经销毁.
				 
		-->
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				methods:{
					
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>

2 VUE 前后端调用

2.1 前后端调用流程

在这里插入图片描述

3 Ajax

3.1 Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

特点:
局部刷新,异步访问

3.2 Ajax异步原理

请求同步 : 用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.

异步调用的原理:

在这里插入图片描述

步骤:
1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的回调函数, 将服务器数据交还

最低0.47元/天解锁文章

爱~消逝

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE生命周期与Ajax前后端调用

1 VUE的生命周期VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点有特殊的需求,可以对VUE对象进行扩展!(销毁需要手动销毁)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试vue生命周期函数</title> </head> <body> <!-.
复制链接

扫一扫

专栏目录