《VUE》系列项目
十二、axios
12.1 axios 介绍
vue可以实现数据渲染,但是如何获取数据?
vue本身不具备通信能力,通常结合一个axios— 一个专注于异步通信的js框架
- axios 数据通信
- vue 数据渲染
12.2 axios的使用
- 原生ajax—实现步骤复杂
- jQuery 笨重
- axios 简洁、高效、对RESTful支持良好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/axios.min.js" ></script>
</head>
<body>
<div id="container">
<button type="button" @click="test1">测试1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
methods:{
test1:function(){
//发送异步请求
// axios.get(url).then(fn);
// axios.get(url,{}).then(fn)
axios.get("http://localhost:9999/music/detail",{
params:{
id:"25640392"
}
})
.then(function(res){
console.log(res);
});
}
}
});
</script>
</body>
</html>
12.3 axios异步请求⽅法
axios提供了多种异步请求⽅法,实现对RESTful⻛格的⽀持
12.3.1 get请求
-
axios.get(url).then(fn);
-
axios.get(url,{}).then(fn)
//使⽤axios的get请求传递参数,需要将参数设置在params下
axios.get("http://localhost:9999/music/detail",{
params:{
id:"25640392"
}
})
.then(function(res){
console.log(res);
});
12.3.2 post请求
- axios.post(url,{}).then(fn)
axios.post("http://localhost:9999/music/search",{s:"阿刁"})
.then(function(res){
console.log(res);
});
12.3.3 ⾃定义请求
⾃定义请求:⾃定义请求⽅式、请求参数、请求头、请求体(post)
axios({
url:"http://localhost:9999/music/search",
method:"post",
params:{
//设置请求⾏传值
s:"成都",
limit:15
},
headers:{
//设置请求头
},
data:{
//设置请求体(post/put)
}
}).then(function(res){
console.log(res)
});
12.3.4 其他
-
delete
-
put
-
option
12.4 并发请求
<div id="container">
<button type="button" @click="test1">测试1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
methods:{
test1:function(){
//发送异步请求
axios.all([listMusics(),getMusicDetail()]).then(axios.spread(function (r1, r2) {
// 两个请求现在都执⾏完成
console.log(r1);
console.log(r2);
}));
}
}
});
function listMusics() {
return axios.get('http://localhost:9999/music/search?s=成都');
}
function getMusicDetail() {
return axios.get('http://localhost:9999/music/detail?id=25640392');
}
</script>
12.5 箭头函数
12.5.1 axios回调函数的参数res
res并不是接⼝返回的数据,⽽是表示⼀个响应对象;res.data才表示接⼝响应的数据
12.5.2 箭头函数
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
song:{
}
},
methods:{
test1:function(){
//发送异步请求
axios.get("http://localhost:9999/music/detail?id=25640392").then( (res)=>{
// res并不是接⼝返回的数据,⽽是表示⼀个响应对象;res.data才表示接⼝响应的数据
if(res.data.code == 200){
this.song = res.data.songs[0];
}
});
}
}
});
</script>
十三、路由router
router是由vue官⽅提供的⽤于实现组件跳转的插件
13.1 路由插件的引⽤
13.3.1 离线
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js"></script>
13.3.2 在线CDN
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
13.2 路由使⽤案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{padding: 0px;margin: 0px;}
ul{list-style: none;}
ul li{display: inline; float: left; margin-left: 15px; margin-bottom: 15px;}
ul li a{text-decoration: none; color: white; font-size: 18px; font-weight: bold;}
ul li a:hover{color: yellow;}
</style>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<div style="width: 100%; height: 70px; background: #00BFFF;">
<table>
<tr>
<td><img src="img/logo.png" height="70" style="margin-left:100px;"/></td>
<td>
<ul>
<li><router-link to="/a">⾸⻚</router-link></li>
<li><router-link to="/b">Java</router-link></li>
<li><router-link to="/c">HTML5</router-link></li>
<li><router-link to="/d">Python</router-link></li>
</ul>
</td>
</tr>
</table>
</div>
<div style="width: 100%; height: 680px; background: lemonchiffon;">
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
// vue的路由旨在为单⻚⾯应⽤开发提供便捷
//1.定义链接跳转的模板(组件)
const t1 = {template:`<p>index</p>`};
const t2 = {template:`<p>Java</p>`};
const t3 = {template:`<p>HTML5</p>`};
const t4 = {template:`<p>PYTHON</p>`};
const myrouter = new VueRouter({
routes:[
{path:"/a",component:t1},
{path:"/b",component:t2},
{path:"/c",component:t3},
{path:"/d",component:t4}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
</body>
</html>
13.3 动态路由匹配
13.3.1 通配符
- 可以匹配任意路径
例如:
-
/user- * 匹配所有以 user- 开头的任意路径
-
/ * 匹配所有路径
注意
如果使⽤通配符定义路径,需要注意路由声明的顺序
13.3.2 路由参数
-
/a/:id 可以匹配 /a/ 开头的路径
<div id="container"> <li><router-link to="/a/101">⾸⻚</router-link></li> <router-view></router-view> </div> <script type="text/javascript"> const t1 = {template:`<p>index:{{$route.params.id}}</p>`}; const myrouter = new VueRouter({ routes:[ {path:"/a/:id",component:t1} ] }); var vm = new Vue({ el:"#container", router:myrouter }); </script>
13.3.3 优先级
如果⼀个路径匹配了多个路由,则按照路由的配置顺序:路由定义的越早优先级就越⾼。
13.4 嵌套路由
在⼀级路由的组件中显示⼆级路由
<div id="container">
<router-link to="/a">⾸⻚</router-link>
<router-link to="/a/c1">⾸⻚-c1</router-link>
<router-link to="/a/c2">⾸⻚-c2</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index<hr/>
<router-view></router-view></div>"
};
const t2 = {template:`<div>t2</div>`};
const t3 = {template:`<div>t3</div>`};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
component:t1,
children:[
{
path:"c1",
component:t2
},
{
path:"c2",
component:t3
}
]
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</scrip
13.5 编程式导航
13.5.1 push()
<div id="container">
<button type="button" @click="test">按钮</button>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter,
methods:{
test:function(){
//js代码实现路由跳转:编程式导航
myrouter.push("/a");
}
}
});
</script>
13.5.2 push()参数
//1.字符串
myrouter.push("/a");
//2.对象
myrouter.push({path:"/a"});
//3.命名的路由 name参数指的是定义路由时指定的名字
myrouter.push({name:"r1",params:{id:101}});
//4.URL传值,相当于/a?id=101
myrouter.push({path:"/a",query:{id:101}});
13.5.3 replace()
功能与push⼀致,区别在于replace()不会向history添加新的浏览记录
13.5.4 go()
参数为⼀个整数,表示在浏览器历史记录中前后/后退多少步 相当于 window.history.go(-1) 的作⽤
13.6 命名路由
命名路由:在定义路由的时候可以给路由指定name,我们在进⾏路由导航时可以通过路由的名字导航
<div id="container">
<input type="text" v-model="rname"/>
<router-link :to="{name:rname}">t1</router-link>
<button type="button" @click="test">按钮1</button>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>t1</div>"
};
const t2 = {
template:"<div style='width:400px; height:200px; border:red 1px solid'>t2</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
name:"r1",
component:t1
},
{
path:"/b",
name:"r2",
component:t2
}
]
});
var vm = new Vue({
el:"#container",
data:{
rname:"r1"
},
router:myrouter,
methods:{
test:function(){
myrouter.push({name:vm.rname});
}
}
});
</script>
13.7 命名路由视图
<div id="container">
<router-link to="/a">t1</router-link>
<router-link to="/b">t2</router-link>
<!--路由视图-->
<!--如果在HTML中有⼀个以上的路由视图router-view,需要给router-view指定name,在路由中使⽤components映
射多个组件根据name设置组件与router-view绑定关系-->
<router-view name="v1"></router-view>
<router-view name="v2"></router-view>
</div>
<script type="text/javascript">
const t11 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>t11</div>"
};
const t12 = {
template:"<div style='width:400px; height:200px; background:pink'>t12</div>"
};
const t21 = {
template:"<div style='width:400px; height:200px; border:red 1px solid'>t21</div>"
};
const t22 = {
template:"<div style='width:400px; height:200px; background:yellow'>t22</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
components:{
v1:t11,
v2:t12
}
},
{
path:"/b",
components:{
v1:t21,
v2:t22
}
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
13.8 重定向和别名
13.8.1 重定向
访问 /b ,重定向到 /a
<div id="container">
<router-link to="/a">路径A</router-link>
<router-link to="/b">路径B</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
component:t1
},
{
path:"/b",
redirect:"/a"
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
根据路由命名重定向
const myrouter = new VueRouter({
routes:[
{
path:"/a",
name:"r1",
component:t1
},
{
path:"/b",
//redirect:"/a" //根据路由路径重定向
redirect:{name:"r1"} //根据路由命名重定向
}
]
});
13.8.2 路由别名
<div id="container">
<router-link to="/a">路径A</router-link>
<router-link to="/wahaha">路径wahaha(别名)</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
alias:"/wahaha",
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
13.9 路由组件传参
可以通过 /url/:attr ⽅式实现通过路由传值给组件
<div id="container">
<router-link to="/a/101">路径A</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
template:`<div style='width:400px; height:200px; border:blue 1px solid'>
index:{{$route.params.id}}
</div>`
};
const myrouter = new VueRouter({
routes:[
{
path:"/a/:id",
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
通过props传参
<div id="container">
<router-link to="/a/102">路径A</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {
props:["id"],
template:`<div style='width:400px; height:200px; border:blue 1px solid'>
index:{{id}}
</div>`
};
const myrouter = new VueRouter({
routes:[
{
path:"/a/:id",
props:true,
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script