CGB2108（三）Day07_在组件实例创建完成后被立即同步调用的钩子为-优快云博客

1. VUE.JS案例复习

1.1 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 利用差值表达式 获取数据 -->
			{{msg}}
			
			<!-- v-text标签 只有页面渲染数据完成之后,才会展现
				 只能使用在展现标签中
			 -->
			<p v-text="msg"></p>
		</div>
		
		<!-- 1.引入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.定义vue js -->
		<script>
			new Vue({
				//数据挂载
				el: "#app",
				data: {
					msg: "VUE的入门案例"
				}
			})
		</script>
	</body>
</html>

1.2 点击事件用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击事件操作</title>
	</head>
	
	<body>
		<div id="app">
			<!-- 点击事件的案例
				  1.事件绑定使用基本语法  v-on:
				  2.简化写法   v-on: 使用@符号代替
			 -->
			{{num}} <br>
			<!-- <button v-on:click="">自增</button> -->
			<button @click="addNum">自增</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			/*  
				JS中的变量名称
				1. var 最常规的变量声明,没有作用域
				2. let 代替var 有作用域
				3. const 定义常量
			 */
			const app = new Vue({
				el: "#app",
				data: {
					num: 100  
				},
				methods:{
					addNum(){
						//自增
						this.num ++
					}
				}
			})
		</script>
	</body>
</html>

1.3 双向数据绑定

1.3.1 页面案例测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	
	<body>
		<div id="app">
			<h1>测试双向数据绑定</h1>
			<!-- 定义一个输入框 -->
			<!-- 双向数据绑定的规则:
				1. data中的数据变化,则页面数据变化.
				2. 页面数据变化,则data中的数据变化
			 -->
			用户名: <input  type="text" v-model="msg"/>
			{{msg}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: "admin1111111"
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

1.3.2 双向数据绑定的原理

设计模型: MVVM
模块说明:

M Model 代表数据. 大概率事件代表 data中的数据.
VM ViewModel 视图模型层在内部进行计算在页面进行展现
V View 视图层用户看到的页面展现效果.

内存原理图:
总结: 虚拟DOM是实现数据实时更新的重要的组件. 内存数据变化.则页面数据实时变化

1.4 分支结构用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构-IF</title>
	</head>
	
	<body>
		<div id="app">
			<h1>分支结构测试</h1>
			请输入分数: <input type="text" v-model="score" />
			<!-- 
				判断原则: 如果判断为true 则展现标签
			 -->
			<p v-if="score >= 90">优秀</p>
			<p v-else-if="score >= 80">良好</p>
			<p v-else-if="score >= 70">中等</p>
			<p v-else>再接再厉</p>
			<!-- 
				用户输入考试成绩,自动获取评级.
				 >=90    优秀
				 >=80    良好
				 >=70    中等
				 低于70  再接再厉
			 -->
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					score: ''
				},
				methods:{
				}
			})
		</script>
	</body>
</html>

1.5 循环遍历结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	
	<body>
		<div id="app">
			<h1>循环结构</h1>
			<!-- 指定午饭数组,之后循环遍历输出 -->
			<h3 v-for="item in lunch">{{item}}</h3>
			<!-- 获取数组下标 -->
			<h3 v-for="(item,index) in lunch">{{index}} ---- {{item}}</h3>
			
			<h1>遍历数组对象</h1>
			<p v-for="user in list">
				id号: {{user.id}} | 名称: {{user.name}}
			</p>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					lunch: ['宫保鸡丁','爆炒腰花','土豆片','土豆丝','土豆泥'],
					list: [
						{id: 1, name: "张三"},
						{id: 2, name: "李四"},
						{id: 3, name: "王五"}
					]
				},
				methods:{
				}
			})
		</script>
	</body>
</html>

1.6 VUE生命周期函数

1.6.1 图例

生命周期函数的目的: 控制整个vue对象的, 在各个阶段都可以对VUE进行控制.
生命周期函数都是自动调用, 如果你配置了生命周期方法.
在这里插入图片描述

1.6.2 生命周期函数分类

第一类: 对象的初始化阶段

beforeCreate.
created
3.beforeMount
4.mounted
第二类: 数据修改阶段
1.beforeUpdate
2.updated

第三类: 对象的销毁阶段
1.beforeDestroy
2.destroyed

1.6.3 初始化时知识点

beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解释: 创建了一个VUE的对象,只是还没有加载其中的属性.只是一个空对象.
created
在实例创建完成后被立即同步调用
解释: VUE对象开始填充数据. 表示配置完成.
3.beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
解释: 对象根据已经配置的内容,在指定的区域开始加载数据.(属性的值,保存到内存中)
4.mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
解释: 在指定的区域中,渲染页面. (为页面填充数据), 页面初始化完成.

1.6.4 生命周期函数用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<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生命周期"
				},
				
				//在实例初始化之后，数据观测 (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 远程调用

2.1 什么是跨域

说明: 浏览器解析Ajax时要求浏览器的网址,与Ajax请求的网址,必须满足三要素.
要素:

协议相同
域名相同
端口号相同
如果上述的三要素都满足,则叫同域访问, 如果三要素有一项不满足,则称为跨域访问.

2.2 跨域访问测试案例

浏览器网址: http://www.baidu.com:80/xxx/xxxx

Ajax请求网址: https://www.baidu.com:80/xxx/xxxx 跨域访问协议不同

浏览器网址: http://110.242.68.3:80/xxx/xxxx

Ajax请求网址: http://www.baidu.com:80/xxx/xxxx 跨域请求域名不同

浏览器网址: http://www.baidu.com/xxx/xxxx

Ajax请求网址: http://www.baidu.com:80/xxx/xxxx 同域请求 http端口默认80

浏览器网址: https://www.baidu.com/xxx/xxxx

Ajax请求网址: https://www.baidu.com:443/xxx/xxxx 同域请求 https端口默认443

浏览器地址: http://127.0.0.1:8848/vuejs/xxxx/xxxx
10.Ajax请求网址: http://localhost:8090/findAll 跨域请求域名和端口号不同

2.3 远程入门案例测试

2.3.1 编辑页面JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		<div id="app">
			<h1>前后端调用测试</h1>
		</div>
		
		<!-- 1.完成前后端远程调用 -->
		<!-- 1.1 引入js函数 -->
		<script src="../js/axios.js"></script>
		<script>
			
			//1. 动态获取用户列表信息 axios.get(url地址,提交的参数)
			let url1 = "http://localhost:8090/findAll"
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise)
					 /* 获取服务器返回值数据 */
					 console.log(promise.data)
				 })	
		</script>
	</body>
</html>

2.3.2 前后端调用结果

在这里插入图片描述

2.4 带参数GET请求

2.4.1 编辑页面JS

//2. 根据id动态获取用户信息
			let id = 3
			let url2 = "http://localhost:8090/findUserById?id="+id
			axios.get(url2)
				 .then(function(promise){
					 console.log(promise.data)
				 })

2.4.2 页面效果展现

在这里插入图片描述

2.5 GET请求对象参数用法

2.5.1 F12 开发工具用法

在这里插入图片描述

2.5.2 前端页面JS

//3. 多参数的Get请求. 如果是多个参数可以考虑封装为对象
			let user3 = {age: 18, sex: "女"}
			let url3 = "http://localhost:8090/findUserByAS" 
			// GET请求传递对象 使用 {params: 对象参数}
			axios.get(url3,{params: user3})
				 .then(function(promise){
					 console.log(promise.data)
				 })

2.5.3 前端请求路径结构

在这里插入图片描述

2.5.4 前端响应

在这里插入图片描述

2.6 请求类型与业务关系

2.6.1 请求类型说明

在这里插入图片描述

2.6.2 类型与请求的映射关系

新增操作类型:POST 接收注解: @PostMapping
删除操作类型:DELETE 接收注解: @DeleteMapping
更新操作类型:PUT 接收注解: @PutMapping
查询操作类型:GET 接收注解: @GetMapping
尾巴: POST提交今天没有说,下节课完成.

2.6.3 编辑前端页面

/**
			 * 4. 实现数据修改操作
			 * 4.1 请求路径  必须使用restFul结构
			 * 4.2 前端知识点: 模板字符串  
			 * 			语法:  ``    反引号
			 * 			作用:  1.   保留代码片段的格式
			 *                 2.  可以动态取值  ${key}
			 */
			let html = `
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
						`
			let user4 = {id: 1,name: "黑熊精",age: 3000,sex: "男"}
			let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
			axios.put(url4)
				 .then(function(promise){
					 console.log(promise.data)
				 })