axios简化 组件 路由

1.Axios 简化操作
1.1 async和await用法
1.1.1 入门案例

Axios简化

1.1.2 解构赋值操作
说明: 通过对象的方式 从其中获取需要的数据进行展现 const {data: result}

//解构赋值操作  想直接获取返回值结果
		async function getUser2(){
			//data是promise中的属性  result为data的value值
			const {data: result} = await axios.get("http://localhost:8090/getUserById",{
				params:	{id: 1}
				})
					
			console.log("解构赋值")
			console.log(result)
		}
		
		//函数调用
		getUser2()

1.1.3 关于Ajax简化说明
通过3种Ajax的方式进行对比, 发现最后的方式更加简洁 高效.

$.get("url1",function(data){
			 $.get("url2",data,function(data2){
				 
			 })
		})
		
		axios.get("url1")
			 .then(result => {
				 axios.get("ur2",{
					 params: result.data
				 }).then( result2 => {
					
				 })
			 })
		
		async function aa(){
			const {data: result1} = await axios.get(url1)
			const {data: result2} = await axios.get(url2,result1)
		}

2 分布式思想
2.1 分布式计算(拆)
说明: 将一项任务进行拆分.由多个线程(机制)共同完成.
例子: 一个人完成一项任务需要10个小时, 问10个人一起干活需要多久? 1个小时. (理想主义)
实际处理: 大数据处理方式.
大数据的方式处理:

1. 将大型任务 拆分为小型任务 (拆包) 1个包 1M
2. 分配任务 1000包
3. 将各个线程进行计算之后,将数据进行合并.等待二次处理.
4. 将数据进行清洗,整理得到最终结果. 2- 10G

2.2 分布式系统
2.2.1 说明
按照特定的方式,将大型的项目拆分为若干个小型的项目.
作用: 降低系统架构设计的耦合性

2.2.2 按照模块拆分
单体项目都是将模块写到一起.如果其中一个出现问题.,则影响整个系统正常运行. 所以可以将系统按照层级进行拆分. 如图所示:
在这里插入图片描述

2.2.3 按照层级拆分
拆分: 先按照模块拆分 之后按照层级拆分. 拆分是为了业务/架构服务的.合理即可.
在这里插入图片描述

3 VUE中组件化思想
3.1 组件介绍
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想(分布式思想)
补充知识: 为了保证组件化相互之间互不干扰,则应该在组件内部 单独定义html/js/css.
在这里插入图片描述

3.2 组件化语法

	<!-- 3.定义html模板 -->
	<template id="addNumTem">
		<!-- 必须有根标签 -->
		<div>
			<h1>定义组件</h1>
			<h3>数值: {{num}}</h3>
			<button @click="addNum">自增</button>
		</div>
	</template>
	
	
	
	<!-- 1.导入vue.js -->
	<script src="../js/vue.js"></script>
	<!-- 2.定义组件 -->
	<script>
		//2.1 创建组件
		Vue.component("addNumCom",{
			//2.2 定义组件内部结构
			data(){
				return {
					num: 0
				}
			}, 
			//2.3 定义组件的标签体  方式1: 字符串拼接  
			//					  方法2: ES6 模板字符串写法 块级作用域 反引号``
			//					  方法3: template 模板语法
			template: "#addNumTem",
			methods: {
				addNum(){
					this.num++
				}
			}
		})
		
		//3. 定义Vue对象
		const app = new Vue({
			el: "#app"
		})
		
		
		
	</script>
	
	
	
</body>

3.3 局部组件定义

	<div id="AAA">
		<hello1-com></hello1-com>
	</div>
	
	
	<!-- 定义第一个组件 -->
	<template id="hello1Tem">
		<div>
			<h3>{{msg}}</h3>
		</div>
	</template>
	
	<!-- 定义模板 -->
	<template id="personTem">
		<div>
			{{msg}}
		</div>
	</template>
	
	
	<!-- 1.导入vue.js -->
	<script src="../js/vue.js"></script>
	<!-- 2.定义组件 -->
	<script>
		//1.定义对象
		let hello1 = {
			data(){
				return {
					msg: "我是hello1"
				}
			},
			//定义组件模板
			template: "#hello1Tem"
		}
		
		//定义第二个组件对象
		let personCom = {
			data(){
				return {
					msg: "我是中国人"
				}
			},
			template: "#personTem"
		}
		
		
		
		
		const app = new Vue({
			el: "#app",
			//定义局部组件
			components: {
				//key 组件名称: value 组件内容
				hello1Com: hello1,
				//personCom: personCom,
				//如果key和value的值相同,则简化为key即可
				personCom
			}
		})
	</script>
</body>

3.4 局部组件嵌套

	<!-- 2.定义dog标签 -->
	<template id="dogTem">
		<div>
			<h1>{{name}}</h1>
		</div>
	</template>
	
	<!-- 1.定义home标签 -->
	<template id="homeTem">
		<div>
			<h1>{{name}}</h1>
			<dog></dog>
		</div>
	</template>
	
	
	<!-- 1.导入vue.js -->
	<script src="../js/vue.js"></script>
	<script>
		//2.定义组件对象
		let dog = {
			data(){
				return {
					name: "哈士奇拆家狂魔"
				}
			},
			//3准备模板标签
			template: "#dogTem"
		}
		
		let home = {
			data(){
				return {
					name: "这里是家"
				}
			},
			//3准备模板标签
			template: "#homeTem",
			//在home中引用局部组件 必须先声明之后调用
			components: {
				dog
			}
		}
		
		const app = new Vue({
			el: "#app",
			components: {
				//1.定义home组件
				home,
				dog
			}
		})
	</script>
</body>

4 VUE 路由器说明
4.1 VUE Router介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

4.2 VUE Router 前端路由说明
4.2.1 传统的页面跳转方式说明
1.http://localhost:8090/toUser,由后端服务器进行处理,返回一个特定的页面,被用户展现. user.html
说明: 之前的页面都是通过服务器进行跳转.,没有实现前后端分离,导致后端服务器压力太高.
在这里插入图片描述

4.2.2 客户端路由机制
说明: 通过JS对用户的请求进行控制,在用户本地可以页面路由跳转,不需要经过后端服务器.真正的实现了前后端分离机制.
在这里插入图片描述

4.2.3 规则说明
以后操作页面时, 操作的页面就是VUE中定义的组件(html/css/js)
通过VUE实现路由的跳转,实质通过路由访问的就是组件