web组件_路由_async-await

最新推荐文章于 2025-04-23 11:38:43 发布

萌新zys

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量156

点赞数

文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_58679791/article/details/119376476

版权

1 组件化

1.1 定义组件

全局组件: 任意的DIV都可以引入该组件
局部组件: 特定的DIV才可以引入该组件
全局组件:
定义组件模板html写到app外,模版字符串必须有根标签 div

 <template id="helloTem">
        <div>
            <h3>静夜思</h3>
            床前明月光，疑是地上霜。
            举头望明月，低头思故乡。
        </div>
        </template>

组件标签放到app标签之内,中间使用-线连接(核心知识点,重复静夜思)

  <hello-com></hello-com>

定义组件,写在引入js文件下的<script></script>里

  Vue.component("helloCom",{
        template: "#helloTem"
        })

1.2 组件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化</title>
	</head>
	<body>
		<h1>组件化结构</h1>
		<div id="app">
	<!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用. 
				 实现策略: 组件化思想
			 2.组件化步骤:
					1.定义组件   
						全局组件: 任意的DIV都可以引入该组件
						局部组件: 只有特定的DIV可以引入组件
					2. 编辑组件的key(注意驼峰规则的写法)    
						 编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}
						 html标签: 使用template进行标记
					3.通过key对组件进行引用.
	 -->
	 
	 <!-- 1.组件标签的使用 放到app标签之内 才能解析
				2.如果采用驼峰规则命令则中间使用-线连接
		-->
	 <hello-com></hello-com>
	 <hello-com></hello-com>
	 <hello-com></hello-com>
			 
	</div>	
		
	<!-- 定义组件的模版html 
		 注意事项: 
			1.切记标识在app之外!!!!
			2.要求模版字符串必须有根标签 div		
	-->
	<template id="helloTem">
		<div>
			<h3>静夜思</h3>
			床前明月光，疑是地上霜。
			举头望明月，低头思故乡。
			引入属性: {{msg}}
		</div>
	</template>
	<!-- 引入JS文件 -->
	<script src="../js/vue.js"></script>
	<script>
	/* 1.定义组件 */
	Vue.component("helloCom",{
	//定义属性  必须添加return 返回值
	data() {
	return {
	msg: "我是一个组件"
		}
	},
	template: "#helloTem"
	}) 
			
	const app = new Vue({
	el:	"#app",
	data: {
		},
	methods: {
					
		}
	}) 
		</script>
	</body>
</html>

2 局部组件

2.1 局部组件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化</title>
	</head>
	<body>
		<h1>局部组件</h1>
		<div id="app">
			<hello-com></hello-com>
			<hello-com></hello-com>
			<hello-com></hello-com>
		</div>
		
		<div id="app2">
			<hello-com></hello-com>
			<hello-com></hello-com>
			<hello-com></hello-com>
		</div>
		
		
			
		<template id="helloTem">
			<div>
				<h1>我是局部组件AAAAAAAAA</h1>
				属性取值: {{msg}}
			</div>
		</template>	
			
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			
			//声明组件
			let helloCom = {
				//属性定义
				data(){
					return {
						msg: "我是局部组件"
					}
				},
				template: "#helloTem"
			}
			
			
			/* 说明:只能在某个VUE的对象之内,使用组件标签 */
			const app = new Vue({
				el:	"#app",
				data: {
				},
				methods: {
					
				},
				//定义局部组件
				components: {
					//组件key: 组件体
					//helloCom: helloCom,
					//如果key-value相同 则JS可以简化为key
					helloCom
				}
			})
		</script>
	</body>
</html>

3 async-await

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async-await语法</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					
			/**
			 * axios的get请求语法
			 * 知识点:
			 * 		1.箭头函数 主要简化回调函数的写法
			 * 		思路: 重复的 固定的可以简化
			 * 		规则: 如果参数只有一个则括号可以省略
			 *  	
			 * 		2.async-await简化  解构赋值
			 * 		2.1 async 需要标识函数
			 * 		2.2 await 需要标识ajax请求
			 *    上述的操作可以将多行js 封装为一行执行 简化代码操作
			 */
			/**
			 * 箭头函数写法
			 * axios.get("xxx").then( result => {})
			 */
			
			//定义axios基本请求路径 为ajax请求添加前缀
			axios.defaults.baseURL = "http://localhost:8090"
			
			//1.定义一个方法
			async function getUserById(){
					let url = "/axios/getUserById?id=100"
					// 2.发起ajax请求  获取promise对象
					let promise = await axios.get(url)
					console.log(promise)
					console.log(promise.data)
					
					//解构赋值 提取对象中有价值的数据
					let {data: resultData,status: code} = await axios.get(url)
					console.log(resultData)
					console.log(code)
			}
			
			//2.调用方法
			getUserById()
					

		</script>
	</body>
</html>

4 ajax链式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios-POST请求</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<!-- 引入jQuery 主要的作用对比post请求 -->
		<script src="../../webDemo/jquery-1.8.3.min.js"></script>
		<script>
					
					/* 
						1.什么时候使用post请求????
						  答:一般采用form表单提交时,采用post请求类型
								 主要用于数据的新增操作
								 
						2.get请求/post请求主要的区别
							get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
							post: 一般采用post请求数据是涉密的 
					 */
					
					
					/**
					 * post业务:
					 * 		实现用户的新增 传递User对象
					 * 
					 * URL地址:
					 * 		http://localhost:8090/axios/insertUser
					 * 总结: 如果需要对象传参  
					 * 				1.get请求采用 axios.get(url,{params: 对象})
					 * 				2.post请求 axios.post(url,对象)
					 */
					let user = {
						name: "post请求的语法",
						age: 20,
						sex: '女'
					}
					let url1 = "http://localhost:8090/axios/insertUser"
					axios.post(url1, user)
							 .then(function(result){
								 console.log(result.data)
							 })
					
					/* *
					 * post请求 restFul的写法
					 * 实现用户新增入库
					 * url: http://localhost:8090/axios/user/name/age/sex
					 */ 
					let url2 = "http://localhost:8090/axios/user/redis/18/男"
					axios.post(url2)
							 .then(function(result){
								 console.log(result.data)
							 })
					
					
					//对比Axios中的post请求
					let url3 = "http://localhost:8090/axios/jQuery"
					$.post(url3,user,function(data){
						 console.log(data)
					})
					
				/* 	axios.delete()
					axios.put() */
					
		</script>
	</body>
</html>

5 路由

5.1 路由机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- <a href="设定跳转的地址">百度</a> -->
			
			<!-- 二:定义链接
					1.router-link 被编译之后转化为a标签
					2.关键字 to    被编译之后转化为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!--三: 指定路由的填充位置 未来展现组件信息 
				填充的位置被解析之后 就是一个DIV
			 -->
			<router-view></router-view>
		</div>
		
		<!-- 定义组件的标签体 -->
		<template id="userTem">
			<div>
				<h3>用户信息</h3>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h3>狗狗信息</h3>
			</div>
		</template>
		
		<!-- 1.导入路由JS    先导入vue.js  再导入路由.js 顺序问题 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			
		/**
		 * 第四步: 准备组件,定义路由对象
		 */
			let userCom = {
				template: "#userTem"
			}
			
			let dogCom= {
				template: "#dogTem"
			}
			
			/**
			 * 定义路由对象
			 * routes:  路由的多个映射通过该属性进行定义.
			 * redirect:  实现请求的重定向 
			 * 在vue路由中只有重定向没有转发
			 */
			let vueRouter = new VueRouter({
				routes: [
					{path: "/", redirect: "/user"},
					{path: "/user", redirect: "/dog"},
					{path: "/dog",  component: dogCom}
				]
			})
		
			const APP = new Vue({
				el: "#app",
				data: {
				},
				//实现路由的挂载
				router: vueRouter
			})
		</script>
	</body>
</html>

5.2 路由嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.定义路由 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!-- 路由占位符A -->
			<router-view></router-view>
		</div>
		
		<!-- 定义模版标签 -->
		<template id="userTem">
			<div>
				<h1>定义用户组件</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>定义宠物组件</h1>
				<!-- 准备2个组件  -->
				<router-link to="/samo">萨摩耶</router-link>
				<router-link to="/bite">比特犬</router-link>
				<!-- 定义路由占位符B -->
				<router-view></router-view>
			</div>
		</template>
		
		<template id="samoTem">
			<div>
				<h3>白色的狗狗</h3>
			</div>
		</template>
		
		<template id="biteTem">
			<div>
				<h3>一只凶猛的狗</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
				
		let userCom = {
			template: "#userTem"
		}
		
		let dogCom = {
			template: "#dogTem"
		}
		
		let samoCom = {
			template: "#samoTem"
		}
		
		let biteCom = {
			template: "#biteTem"
		}
		
		
		
		/* 路由展现问题说明:
			 如果需要进行路由的嵌套 需要采用children 
			 子级的路由会在当前的路由占位符中进行展现
		 */
		//定义路由对象
		let router = new VueRouter({
			routes: [
				{path: "/user", component: userCom},
				{path: "/dog", component: dogCom, children:[
					{path: "/samo", component: samoCom},
					{path: "/bite", component: biteCom}
				]}
			]
		})
		
		//需要vue对象 进行挂载
		const app = new Vue({
			el: "#app",
			//vue对象挂载路由
			router: router
		})
		</script>
	</body>
</html>