1. axios 简化操作
1.1 async-await关键字
1.1.1 关键字说明
ES6以后推出的新的代码规范,目的简化现有axios ajax请求的代码结构.提高用户的开发效率.
关键字用法:
1. async 用来标识函数!!!
2. await 用来标识请求的!!!
1.1.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios简化操作</title>
</head>
<body>
<h1>简化操作语法</h1>
<script src="../js/axios.js"></script>
<script>
//1.定义请求的前缀
axios.defaults.baseURL = "http://localhost:8090/vue"
//2.定义函数!!!!
async function findAll(){
//解构赋值操作
let {data: result} = await axios.get("/findAll")
console.log(result)
}
//3.调用函数
findAll()
</script>
</body>
</html>
1.1.3 关于简化操作说明
async - await 是axios为了简化then()的一种全新的语法. 语法如此.
该用法只能用到Ajax请求中
2 .组件化
2.1 知识回顾
说明: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱 不便于管理. 开发维护时 成本较高.
组件化思想:
在VUE中 可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.
关键字: 组件–页面 (html/css/js)
核心知识点: 组件化的思想体现了"分治思想"
补充知识: 为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css.
2.2 组件化入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件定义</title>
</head>
<body>
<div id="app">
<!-- 如果需要使用组件,则在vue渲染区中中使用 -->
<!-- 规则:
1.在vue中使用标签时默认都是小写字母.如果需要
引入驼峰规则.则使用-线代替.
2.使用组件通过标签引用
-->
<add-num-com></add-num-com>
<add-num-com></add-num-com>
<add-num-com></add-num-com>
</div>
<!-- 定义模板标签语法 必须有根标签-->
<template id="numTem">
<div>
<h1>我是一个组件</h1>
获取数值: {{num}}
</div>
</template>
<!-- 1.导入JS -->
<script src="../js/vue.js"></script>
<!-- 2.定义全局组件 -->
<script>
/*
组件的定义
参数:
1.组件名称
2.组件实体内容
*/
Vue.component("addNumCom",{
//属性
data(){
return {
//自定义属性
num: 100
}
},
//页面标记
template: "#numTem"
})
/* 2.实例化vue对象 找到区域交给vue渲染 */
const app = new Vue({
el: "#app"
})
</script>
</body>
</html>
2.3 局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件定义</title>
</head>
<body>
<div id="app">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 定义app2 局部组件只能在特定位置使用,
所以该位置 不能解析-->
<div id="app2">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 模板标签必须定义在vue渲染div外边 -->
<template id="msgTem">
<div>
<h3>我是一个局部组件</h3>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
let msgCom = {
template: "#msgTem"
}
//定义局部组件 只对当前vue对象有效
const app = new Vue({
el: "#app",
components: {
//key: value
//msgCom: msgCom,
//如果在JS中key-value一样的.可以只写一个
msgCom
}
})
const app2 = new Vue({
el: "#app2",
})
</script>
</body>
</html>
2.4 关于组件知识点
为什么使用组件?
1.原来用户编辑页面时,需要引入/维护大量的JS/CSS等.如果数量很多,则导致代码结构混乱.所以需要引入组件化思想.
2.前端框架为了更好的解耦,采用了"分治"思想的构建代码.前端向后端代码结构看齐.(微服务框架)
3.组件采用树形结构, 可以将功能小型化.单独维护.
4.组件是一个独立的个体,内部包含HTML/CSS/JS
5.使用组件看做就是一个页面
如何理解template属性?
1.template标签是组件中定义html标记的模板.
2.template标签必须有根标签div
3.template标签最好定义在body标签内部,写法方便.
关于组件使用有什么注意事项?
1. 组件的使用必须在VUE对象渲染的区域中使用.
2. 组件有全局的/有局部的.注意作用域.
3. 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
4. 组件必须先定义再使用.
3.路由
3.1 路由说明
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
3.2.1 实现步骤
1.引入JS类库
2.指定路由跳转链接
3.指定路由填充位
4.封装路由对象
5.实现路由对象的绑定
3.2.2 路由入门案例实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
</head>
<body>
<div id="app">
<h1>实现路由案例</h1>
<!-- 2.定义路由标签
1.a标签说明
标签说明: a标签 超链接标签
href属性: 请求跳转的地址
<a href="http://www.baidu.com">百度</a>
2.路由标签说明
router-link 解析为a标签
to 解析之后变成 href属性
-->
<router-link to="/home">主页</router-link>
<!-- 3.指定路由填充位(占位符)
需要给组件一个展现的位置,需要提前定义.
-->
<router-view></router-view>
</div>
<!-- 定义template标签 -->
<template id="homeTem">
<div>
<h1>这里是系统首页</h1>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
<!-- 4.封装路由对象 -->
let HomeCom = {
template: "#homeTem"
}
let router = new VueRouter({
//routes 定义请求与组件的映射关系
routes: [
{path: "/home", component: HomeCom}
]
})
/* 5.实现路由对象绑定 */
const app = new Vue({
el: "#app",
//router: router
router
})
</script>
</body>
</html>
3.3 路由嵌套机制(难点!!!)
3.3.1 编辑页面JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由的嵌套</title>
</head>
<body>
<div id="app">
<h1>动物园</h1>
<router-link to="/tiger">老虎</router-link>
<router-link to="/lion">狮子</router-link>
<router-view></router-view>
</div>
<template id="tigerTem">
<div>
<h1>我是一只凶猛的喵</h1>
<img src="images/1.jpeg"/>
</div>
</template>
<template id="lionTem">
<div>
<h1>我是狮子王 辛巴!!!!</h1>
<img src="./images/2.png"/>
<h3>
<!-- 实现路由的嵌套机制 -->
<router-link to="/lion/one">原配</router-link>
<router-link to="/lion/two">小妾</router-link>
<!-- 子级应该在该区域展现数据!!!! -->
<router-view></router-view>
</h3>
</div>
</template>
<template id="oneTem">
<div>
<h1>我是原配-老大</h1>
<img src="images/3.png"/>
</div>
</template>
<template id="twoTem">
<div>
<h1>我是小妾-更喜欢我!!!</h1>
<img src="images/4.png"/>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let tigerCom = {
template: "#tigerTem"
}
let lionCom = {
template: "#lionTem"
}
let oneCom = {
template: "#oneTem"
}
let twoCom = {
template: "#twoTem"
}
/*
1.如果需要在App根标签中跳转,则写到routes根目录下
2.如果需要进行父子嵌套,则应该使用children属性
3.如果使用children属性,则在自身的router-view展现数据
*/
let router = new VueRouter({
routes: [
{path: "/tiger",component: tigerCom},
{path: "/lion",component: lionCom,
children: [
{path: "/lion/one",component: oneCom},
{path: "/lion/two",component: twoCom},
],
}
]
})
const app = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
3.4 重定向/转发(web经典面试题)
3.4.1 转发说明
说明: 用户请求服务器时,由服务器将请求转给另一台服务器的过程.叫做转发
3.4.2 重定向说明
说明: 用户请求服务器时,服务器由于特殊原因告知用户应该访问服务器B,之后用户再次发起请求访问服务器B. 这个过程称之为重定向
3.4.3 vue中的重定向
VUE中使用redirect实现重定向效果.