CGB2106-Day06-CSDN博客

本文链接：https://blog.csdn.net/qq_16804847/article/details/119924333

1.MVC思想说明

在这里插入图片描述

2. VUE基本用法

2.1 表单双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 问题: 表单中的哪些标签可以使用双向数据绑定
				 双向数据绑定说明: 用户可以录入的标签.
				 
				 答案: 
					1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域
			 -->
			 <form action="http://baidu.com">
				 <div>
					 用户名: <input type="text" v-model="username"/>
				 </div>
				 <div>
				 	 性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男
						   <input  type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
				 	 爱好: 
						<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
						<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
						<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
				 </div>
				 <div>
					 <!-- 
						VUE的点击事件中有一个属性,可以取消标签的默认行为
						@click.prevent
						常用场景: 
							1. form标签  阻止 action 提交
							2. a标签     阻止 href   属性跳转
					 -->
					 <input type="submit" value="提交" @click.prevent="formBtn"/>
				 </div>
			 </form>
			 
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: 'aaaa',
					sex: '女',
					hobby: ['敲代码']
				},
				methods: {
					formBtn(){
						alert("点击按钮 ajax提交数据")
					}
				}
			})
		</script>
	</body>
</html>

2.2 常用双向数据绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!--1.v-model.number 将输入的内容转化为数值类型  -->
			年龄: <input type="number" v-model.number="ageTest"/>
			<button @click="addNum">加法</button>
			<br>
			<!--2.去除多余的空格  -->
			用户名: <input type="text" v-model.trim="username" />
			用户输入的长度 {{username.length}}
			<br>
			
			<!-- 3.懒加载方式 用户离焦触发 -->
			信息: <input type="text" v-model.lazy="msg" /> {{msg}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					ageTest: '',
					username: '',
					msg: ''
				},
				methods: {
					addNum(){
						this.ageTest = this.ageTest + 1
					}
				}
			})
		</script>
	</body>
</html>

2.3 VUE生命周期

2.3.1 如何理解生命周期

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

2.3.2 生命周期流程

在这里插入图片描述

<!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>

3 VUE 前后端调用

3.1 前后端调用流程

在这里插入图片描述

3.2 Ajax

3.2.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.2 Ajax异步原理

请求同步说明:
用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
为了让用户的体验更好,则一般采用异步.

异步调用的原理:
在这里插入图片描述
步骤:
1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的回调函数, 将服务器数据交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求不关注顺序.

3.3 Axios 入门案例

3.3.1 编辑页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		
		<h1>Ajax请求练习</h1>
		<!-- 使用步骤:
			1.导入JS函数类库
			2.发起Ajax请求,之后业务处理.
		 -->
		 <script src="../js/axios.js"></script>
		 <script>
			/* axios请求方式
			 
				1.请求类型
				   1. get  执行查询业务
				   2. post 执行form表单提交(登录/新增)
				   3. put  执行修改操作 
				   4. delete 执行删除业务时.
				   
				2. axios语法
				   axios.get("url地址信息","参数信息")
						.then(function(args){
							
						})
						
				3. 关于args参数说明
					axios为了统筹请求状态.将所有的数据封装为
					promise对象
					
			 */
			
			/* 
			案例1: 利用axios获取后台用户列表信息
			url: http://localhost:8090/findAll 
			
			*/
			
			axios.get("http://localhost:8090/findAll")
				 .then(function(promise){
					 console.log(promise)
					 console.log(promise.data)
				 })
		 
		 </script>
	</body>
</html>

3.3.2 开启跨域

在这里插入图片描述

3.3.3 编辑UserController

在这里插入图片描述

3.3.4 编辑UserServiceImpl

在这里插入图片描述

4. Axios 请求案例

4.1 GET-带参数(方式1)

4.1.1 编辑页面html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/* 需求1: 查询id=1的用户
			   
			   GET方式1: 动态拼接参数的写法 
			   url: http://localhost:8090/axios/getUserById?id=1
			 */
			let url1 = "http://localhost:8090/axios/getUserById?id=1"
			axios.get(url1).then(promise => {
				console.log(promise.data)
			})
		 </script>
	</body>
</html>

4.1.2 编辑AxiosController

@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {

    @Autowired
    private UserService userService;

    /**
     * URL: http://localhost:8090/axios/getUserById?id=1
     * 参数: id=1
     * 返回值: User对象
     */
    @GetMapping("/getUserById")
    public User getUserById(Integer id){

        return userService.findUserById(id);
    }

}

4.1.3 编辑AxiosService

在这里插入图片描述

4.2 GET-带参数(restFul格式)

4.2.1 编辑页面HTML

/* 
				GET方式2: 利用restFul查询数据
				需求:     查询sex=女 age>18
				
				原因: restFul结构越来越受欢迎,则拼接restFul结构 变得繁琐.
				模板字符串:  
					语法: 一对反引号  ``
					取值: ${key} 形式取值
					优势: 保留代码的格式
					
			 */
			let sex2 = "女"
			let age2 = 18
			//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
			let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
			axios.get(url2).then(promise => {
				console.log(promise.data)
			})

4.2.2 编辑AxiosController

在这里插入图片描述

4.2.3 编辑UserServiceImpl

在这里插入图片描述

4.2.4 页面效果展现

在这里插入图片描述

4.3 GET-带参数(对象写法)

4.3.1 编辑html页面

/**
			 * GET方式3: 利用对象实现参数传递
			 * 需求3: 查询 name="王昭君" sex=女 age=19
			 * 参数语法:
			 * 	 数据结构: {}
			 * 	 关键字key(固定写法): params 
			 *   value: 用户需要传递的值
			 */
			let user = {
				name: '王昭君', 
				sex: '女',
				age: 19
			}
			
			let url3 = "http://localhost:8090/axios/getUser"
			axios.get(url3,{params : user})
			     .then(promise => {
					 console.log(promise.data)
				 })