Vue：前后端交互、路由

前后端交互

Promise > fetch > axios > async/await

1、Promise

由于$.ajax()调用后端接口，要按顺序调用接口时需要在这个方法的回调函数里边调用 $.ajax()，会形成回调地狱（回调十八层地狱）。

而 Promise的产生就是为了解决这个问题，Promise是一个异步对象，可以获取到异步操作的消息

var p = new Promise(function(resolve,reject){
    //成功调用 resolve('数据') ,然后下面调用then就会把这个 数据 传过去
    //失败调用 reject()
});
p.then(function(ret){
    //从resolve获得正常结果
},function(ret){
    //从reject获得错误信息
});

2、fetch: 是基于Promise实现的

//2、fetch
fetch('/abc').then(data=>{
    return data.text();  // 也可以 return data.json();
}).then(ret=>{
    //这里得到最终数据
    console.log(ret);
})

3、axios: 一个专门用来调用api的库，也是基于Promise实现的，所以语法很相似，用这个就行

　　vue里的说明文档：https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

　　中文翻译文档：https://www.kancloud.cn/yunye/axios/234845

　　通过 .then 获取数据，前面的几个也是通过.then

axios.get('http://localhost:8080/nav/list').then(function(respon){
    //data属性是固定写法，通过data可以拿到后台的数据
    console.log(respon.data);
});

　　axios对返回的结果进行封装，返回的是一个对象，里边有一个data属性，里边就是借口返回的数据

设置全局配置：axios.defaults.baseURL = 'https://api.example.com';发送请求不用再打前面那些字符。

请求拦截器，响应拦截器，对request和对response进行处理。

4、async / await 结合 axios 使用，可以使代码更加简洁，

　　axios里边可以不用编写回调函数

        methods:{
            queryData: async function(){
                var ret = await axios.get('访问地址');
                console.log(ret.data);//这就相当于axios里使用回调函数访问data数据
            }
        }

路由

文档： https://router.vuejs.org/zh/installation.html

基本使用 >嵌套路由>动态路由>命名路由>编程式导航

页面的哈希值：URL 中 # 后面的部分 https://abc.com/a/c#aaa #aaa为哈希值

const:

　　let 声明的变量只在 let 命令所在的代码块内有效。

　　const 声明一个只读的常量，一旦声明，常量的值就不能改变。

后端路由：根据不同的URL地址，寻找相对应的资源

前端路由：负责事件监听，触发事件后，调用不同的事件函数渲染不同的内容

1、router的基本使用

　　 html部分：

    <div id="app">
        <!-- 第1步 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <!--  通过传入 `to` 属性指定链接,to会渲染成为 :href-->
        <router-link to='/rick'>to rick!!</router-link>
        <router-link to='/morty'>to morty!!</router-link>
        <!-- 第2步 -->
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

　　js代码部分：

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript" >
//1、定义路由组件
const Rick = {template:'<div>rick的内容</div>'};
const Morty = {template:'<div>morty的内容</div>'};
//2、创建router实例
const router = new VueRouter({
    //路由规则
    routes:[
        {path:'/rick',component: Rick},
        {path:'/morty',component: Morty}
    ]
})
//3、将实例挂载上去
    var vm = new Vue({
        el: '#app',
        data:{
            msg:'插值表达式',
        },
        methods:{
        },
        //由于属性名和值相同，可以只写一个
        router

    });
</script>

路由重定向：添加一条路由规则， path表示当有这个hash时，重定向到 /rick

{path:'/',redirect: '/rick'},

2、路由嵌套

　　在父路由的模板里边定义 子路由链接

const Morty = {
    template:`
    <div>
    <div>morty的内容</div>
    <h4>子路由</h4>
    <!-- 子路由链接 -->
    <router-link to='/morty/tab1'>to rick!!</router-link>
    <router-link to='/morty/tab2'>to morty!!</router-link>
    <!-- 子路由出口 -->
    <router-view/>
    </div>
    `};

　　创建子路由组件：

//子路由
const Tab1 = {template:'<div>子组件Tab1</div>'};
const Tab2 = {template:'<div>子组件Tab2</div>'};

　　在父路由的路由规则里边添加子路由规则：

    //路由规则
    routes:[
        {path:'/',redirect: '/rick'},
        {path:'/rick',component: Rick},
        {
            path:'/morty',
            component: Morty,
            //子路由规则
            children:[
                {path:'/morty/tab1',component:Tab1},
                {path:'/morty/tab2',component:Tab2}
            ]
            }
    ]

3、动态路由匹配：类似 restful从url路径传一个id过去，

　　多个路径

<router-link to='/rick/r1'>to rick!!</router-link>

<router-link to='/rick/r2'>to rick!!</router-link>

<router-link to='/rick/r3'>to rick!!</router-link>

　　对应一个路由规则，使用 :id

　　{path:'/rick/:id',component: Rick},

　　组件获取数据，$route.params.id

　　const Rick = {template:'<div>{{$route.params.id}}星球的 rick的内容</div>'};

4、路由传参：

　　props设置为true则 $route.params 会被传到子组件，（还可以传对象）

{path:'/',redirect: '/rick',props :true},

5、命名路由：

给路由起一个别名

6、编程式导航

　　声明式导航：在HTML页面中，使用 a 链接进行跳转

　　编程式导航：在js里边写一个事件，通过点击HTML触发事件，进行导航。

跳转到页面 this.$router.puth('/hash地址');

    methods:{
            handel:function(){
                this.$router.puth('/hash地址');
            }
        },

回退页面 this.$router.go(-1);

。

Vue：前后端交互、路由

猜你喜欢