【第三阶段 day23】vue复习远程调用类型请求与映射关系

最新推荐文章于 2022-11-30 08:56:40 发布

是九九鸭~

最新推荐文章于 2022-11-30 08:56:40 发布

阅读量190

点赞数

分类专栏：第三阶段文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/oriettahuiru/article/details/121116039

版权

第三阶段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.vue复习

1.1 点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击事件</title>
	</head>
	<body>
		<div id="app">
			{{num}}
			<!-- 两者的作用是相同的 -->
			<button v-on:click="addnum()">自增</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.2 双向数据绑定

双向数据绑定的原理:

MVVM模块说明
1.M Model 代表数据大概率的事件是data中的数据
2.VM ViewModel 视图模型层在内部进行计算,在页面进行展现
3.V View视图层用户看到的展现效果
总结:虚拟DOM是实现数据实时更新的重要组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			用户名:<input type="text" v-model="msg" />
			{{msg}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
					msg:"admin"
				}
			})
		</script>
	</body>
</html>

1.3 生命周期函数

目的:控制整个vue对象的,在各个阶段都可以进行控制

1.beforeCreate:
创建了一个vue对象,只是还没有加载其中的属性,只是一个空对象
2.created:
vue对象开始填充对象,表示配置完成
3.beforeMount
对象根据以及配置的内容,在指定的区域开始加载数据(属性的值保存到内存当中)
4.mounted
在指定的区域中,渲染页面(为页面填充数据).页面初始化完成

<!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 跨域访问测试案例

2.3 测试案例

2.3.1 html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用测试</title>
	</head>
	<body>
		
		<!-- 1.完成前后端远程调用 -->
		<!-- 1.1 引入JS的函数 -->
		<!-- <script src="../js/vue.js"></script> -->
		<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.data[0].name)
				})
		</script>
	</body>
</html>

2.3.2 controller中

@CrossOrigin //解决跨域问题

2.4 根据id,动态获取用户信息

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

2.5 多参数的get请求

let user3={age:18,sex:"女"}
let url3="http://localhost:8090/findUserByAS"
//get请求传递对象:使用:{Param:对象}
 axios.get(url3,{params:user3})
	 .then(function(promise){
		 console.log(promise.data)
	 })

2.6 更新操作

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)
					})

3.类型请求与映射关系

新增操作类型:POST 接收注解: @PostMapping
删除操作类型:DELETE 接收注解: @DeleteMapping
更新操作类型:PUT 接收注解: @PutMapping
查询操作类型:GET 接收注解: @GetMapping

是九九鸭~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【第三阶段 day23】vue复习远程调用类型请求与映射关系

1.vue复习1.1 点击事件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击事件</title> </head> <body> <div id="app"> {{num}}  <button v-on:click="addnum()
复制链接

扫一扫