VUE
axios练习, 局部组件, 全局组件,重定向
知识回顾
Axios
Ajax
- javascript 原生的AJAX操作 处理复杂,不便于使用
- jQuery是JS高级函数类库,封装了很多的API,简化程序调用的过程,一些选择器的使用和函数运算的功能(回调地狱:Ajax嵌套,嵌套层级比较多,每次都要返回)
- Promise对象 将AJAx嵌套结构转化为链式加载的结构 ajax.get().then(xxxxx)
- Axios 主要封装了promise对象,将调用变得更加的简化,整合到vue.js中,大部分条件下都整合axios, axios发起ajax请求
请求的类型
http的常用的请求8种
4种需要单独记忆
- GET
查询操作 特点:参数结构 key = value URL?key=value&key2 = value2 - POST
新增 POST请求 特点:会将参数封装到请求头, key = value key2=value2 可以直接用对象的方式接受
用户的数据相对的更加安全
Axios的post 参数是一个JSON串{key1:value1, key2:value2 } 将json串转换为对象 @RequestBody - DELETE
删除操作
特点: 与get请求类型一致 - PUT
更新操作
特点: 与POST请求类型一致 - RestFul风格 在上述的四大请求类型中都可以使用(单独的体系)
RestFul语法结构
参数的位置固定
参数的使用分割
VUE 练习
VUE组件化的思想
说明:传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱,不便于管理,开发维护时,成本较高
组件化思想:
在VUE中,可以将一个组件看作是一个页面。在其中可以引入独立的样式/JS/HTML进行单独的管理。
组件可以进行复用。
关键词: 组件——页面(html/css/js)
代码复用
实现策略:利用组件化思想
组件化步骤:
1.定义组件 :
全剧组件: 任意的div都可以引入该组件
局部组件:只有特定的DIV可以引入该组件
2.编辑组件的key(注意驼峰规则的写法)
编辑组件体 特殊语法: 定义属性时 data(){return{key:value}}
html标签:使用template进行标记
3.通过key对组件进行引用
⚠️:
定义组件的模版html 切记标识在app之外
要求模版字符串必须有根标签div
全局组件:
<html>
<head>
<meta charset="utf-8">
<title>组件化</title>
</head>
<body>
<h1>组件化结构</h1>
<div id="app">
<div>
<hello-Com></hello-Com>
<hello-Com></hello-Com>
<hello-Com></hello-Com>
</div>
</div>
<template id = "helloTem">
<div>
<h3>静夜思</h3>
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
引入属性: {{msg}}
</div>
</template>
<!-- 1.引入VUE.js -->
<script src="./vue.js"></script>
<script >
Vue.component("helloCom",{
//定义属性 必须添加return
data(){
return{
msg:"我是一个组件"
}
},
template:"#helloTem"
})
const app = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
局部组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
</head>
<body>
<h1>局部组件</h1>
<div id="app">
<div>
<hello-Com></hello-Com>
<hello-Com></hello-Com>
<hello-Com></hello-Com>
</div>
</div>
<template id = "helloTem">
<div>
<h3>静夜思</h3>
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
引入属性: {{msg}}
</div>
</template>
<!-- 1.引入VUE.js -->
<script src="./vue.js"></script>
<script >
// 只能在某个VUE对象之内使用组件标签
//声明组件
let helloCom = {
//属性定义
data(){
return{
msg: "我是一个局部组件"
}
},
template:"#helloTem"
}
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components:{
//组件key: 组件体
helloCom: helloCom
}
})
</script>
</body>
</html>
VUE路由机制
路由介绍
网络中的路由:用户发起一个请求,在互联网中,经过多个站点的跳转,最终获取服务器端的数据,把互联网中网络的链路称之为路由。
VUE中的路由: 根据用户请求的URL地址,展现特定的组件(页面)信息
(控制用户程序跳转过程)
路由步骤
- 导入路由.js
- 指定路由的跳转链接
- 定义路由的填充位
- 封装组件信息,指定路由对象
- 在VUE对象中声明路由
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
</head>
<body>
<div id="app">
<!-- 效果同a标签 router-link被编译后会转化为a标签
关键字 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>我是用户:{{msg}}</h3>
</div>
</template>
<template id="dogTem">
<div>
<h3>我是狗子:{{msg}}</h3>
</div>
</template>
<!-- 1.先导入VUE的JS文件 -->
<script src="../js/vue.js"></script>
<!-- 2.再导入路由的JS文件 -->
<script src="../js/vue-router.js"></script>
<!-- 3.创建VUE对象 -->
<script>
/**
* 准备组件,定义路由对象
*/
let userCom ={
data(){
return{
msg:"i'm a user"
}
},
template:"#userTem"
}
let dogCom ={
data(){
return{
msg:"i'm a dog"
}
},
template:"#dogTem"
}
//定义路由对象
// routes:路由的多个映射通过该属性进行定义
let vueRouter = new VueRouter({
routes:[
{path:"/user",component:userCom},
{path:"/dog",component:dogCom}
]
})
const APP = new Vue({
//1.指定区域
el: "#app",
//2.定义属性
data: {
},
router: vueRouter
})
</script>
</body>
</html>
路由关键字
-
redirect 路由的重定向
请求和转发都是服务器行为,不会做额外的操作,用户无法干预
重定向和转发的区别:
重定向:用户访问服务器,但是目标服务器无法处理该请求,目标服务器返回一个能够处理请求的网址,由用户再次发起请求,访问服务器获取数据
用户请求多次, 响应多次,URL地址信息发生变化,不可以传递数据(第一个请求携带的数据无法自动传递到第二个请求中)请求的对象不是同一个
转发:用户访问服务器,但是目标服务器无法处理该请求,由服务器内部将请求交给其他服务器处理
用户请求1次, 响应1次,用户请求的URL地址不发生变化,请求可以携带数据
在VUE中只有重定向没有转发