1.Axios 简化操作
1.1 async和await用法
1.1.1 入门案例
Axios简化
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个包 1M
- 分配任务 1000包
- 将各个线程进行计算之后,将数据进行合并.等待二次处理.
- 将数据进行清洗,整理得到最终结果. 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实现路由的跳转,实质通过路由访问的就是组件
