day80-vue

vue路由name的使用

#路由配置

import Main from './views/Main'
routes: [
    {
        path: '/main',
        name: 'main',
        component: Main
    }
]


#视图使用

<router-link :to="{name: 'main'}">主页</router-link>          <!--注：如果to后面没值，路由就变成之前点击的路由-->

router-link与系统a标签的区别

router-link：
　　会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换
<a>：
　　也可以完成同样的效果，但是会发生页面的转跳，并且效率低

路由的重定向

routes: [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',                     　　// 重定向
    }
]

路由传参1

#转跳页面(发送数据id)：Course.vue


<template>
    <div class="course">
        <h1>课程</h1>
        <hr>

        <ul>
            <li v-for="course in courses" :key="course.title">
                <router-link :to="'/course/detail/' + course.id">{{ course.title }}</router-link>        <!--比如这里路由是/course/detail/1-->
            </li>
        </ul>

    </div>
</template>

<script>
    let course_list = [
        {
            id: 1,
            title: '水浒传'
        },
        {
            id: 2,
            title: '西游记'
        },
        {
            id: 3,
            title: '金梅'
        },
    ];
    export default {
        name: "Course",
        data () {
            return {
                courses: []
            }
        },
        
        created () {                                                                                        <!--组件创建成功去获取数据,完成虚拟DOM-->
            this.courses = course_list                                                            
        },


    }
</script>

<style scoped>
  
</style>



#路由：router.js


{
    
    path: '/course/detail/:id',                                  <!--:id代表可以完成任意内容匹配，然后用变量id保存 ,-->
                                                                    <!--比如请求/course/detail/1 和 /course/detail/abc，id变量分别存的1和abc-->
    name: 'course-detail',                                        <!--上面页面使用name相当于Django反向解析-->
    component: CourseDetail
}



#渲染页面(展现id对应的数据)：CourseDetail.vue


<template>
    <div class="course-detail">
        <h1>课程详情</h1>
        <hr>
        <h2>{{ ctx }}</h2>
    </div>
</template>

<script>
    let course_detail_list = [
        '数据有误', '水浒传', '西游记', '金梅'
    ];

    export default {
        name: "CourseDetail",
        data () {
            return {
                ctx: ''
            }
        },
        created () {                            
         
                                                                                  <!--this.$route：负责路由的数据-->
                                                                                  <!--this.$router：负责路由的路径-->
           
            let index = this.$route.params.id;                                    <!--this.$route.params可以拿到链接中变量的数据-->
            
            if (index < 0 || index >= course_detail_list.length) index = 0;
            this.ctx = course_detail_list[index]
        }
    }
</script>

<style scoped>

</style>

路由传参2

#转跳页面：Course.vue


<router-link :to="'/course/detail?id=' + course.id">{{ course.title }}</router-link>

#路由：router.js


{
    path: '/course/detail',
    name: 'course-detail',
    component: CourseDetail
}

#渲染页面：CourseDetail.vue


created () {
    let index = this.$route.query.id;                                <!--this.$route.params可以拿到链接中？后面的数据-->
    if (index < 0 || index >= course_detail_list.length) index = 0;
    this.ctx = course_detail_list[index]
}

路由传参(事件传参)3

#转跳页面：Course.vue

    <li v-for="course in courses" :key="course.title" @click="toDetail(course.id)">
            {{ course.title }}
    </li>
    
    export default {
    
        name: "Course",
        data () {
            return {
                courses: []
            }
        },     
        created () {
            this.courses = course_list
        },
        
        methods: {                
            toDetail (id) {
            
                this.$router.push({                                        <!--this.$route.params可以拿到链接中？后面的数据-->
                    name: 'course-detail',
                    
                    // params: {                                        <!--第一种传法-->                                
                    //     id: id
                    // },
                    
                    
                    query: {                                            <!--第二种传法-->
                        id: id
                    }
                });

                this.$router.go(-1)                                        <!--ps:点击页面，前往历史记录的前一页，正数，前往历史记录的后一页-->

            }
        }

    }

#路由：router.js


{
    path: '/course/detail',
    name: 'course-detail',
    component: CourseDetail
}



#渲染页面：CourseDetail.vue

 export default {
        name: "CourseDetail",
        data () {
            return {
                ctx: ''
            }
        },
        created () {

            // let index = this.$route.params.id;                                <!--第一种接收-->
            // if (index < 0 || index >= course_detail_list.length) index = 0;
            // this.ctx = course_detail_list[index]

            let index = this.$route.query.id;                                    <!--第二种接收-->
            if (index < 0 || index >= course_detail_list.length) index = 0;
            this.ctx = course_detail_list[index]
        }
    }

 仓库的使用

#子组件

<template>
    <div class="main">
        <h1>{{ title }}</h1>
        <MainSub></MainSub>
    </div>
</template>

<script>
    import MainSub from '@/components/MainSub'
    export default {
        name: "Main",
      
        components: {
            MainSub
        },
        
        computed: {                                    <!--计算属性，监听仓库的值，只要仓库的值发生改变就会激活该方法-->
            title () {
                return this.$store.state.title        <!--获取仓库的值-->
            }
        }
    }
</script>

<style scoped>
 
</style>


#仓库
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        title: '123'                                   <!--全局可以访问的变量 - 用于获取值    -->    
    },
    mutations: {                                       <!--全局可以访问的方法 - 用于修改值    -->    
    
        updateTitle (state, newValue) {                <!--state是title: '123'，newValue是接收的新值    -->    
            state.title = newValue
        }
    },
    actions: {}
})


#子子子组件
<template>
    <div>
        <input type="text" v-model="val">
        <button @click="btnClick">修改</button>
    </div>
</template>

<script>
    export default {
        name: "MainSubSub",
        data () {
            return {
                val: ''
            }
        },
        
        methods: {
            btnClick () {

                this.$store.commit('updateTitle', this.val);        <!--给仓库变量传递新值 -->        
            }
        },
       
    }
</script>

<style scoped>

</style>

前后台交互：axios

准备工作

#安装

>: cd 项目目录
>: cnpm install axios --save


#配置：main.js

import Axios from 'axios'
Vue.prototype.$axios = Axios;                <!--在任何地方都能拿到Axios：this.$axios-->

跨域问题(同源策略)：CORS

前提：

　　前台向后跳请求数据

出现的问题：
　　1）服务器不一致 - ip
　　2）应用不一致 - 端口
　　3）协议不一致 - http <-> https

django解决跨域问题

1）安装django-cors-headers模块

2）在settings.py中配置
　　# 注册app
　　　　INSTALLED_APPS = [
　　　　　　'corsheaders'
　　　　]
3）添加中间件
　　　　MIDDLEWARE = [
　　　　　　'corsheaders.middleware.CorsMiddleware'
　　　　]
4）允许跨域源
　　　　CORS_ORIGIN_ALLOW_ALL = True

前台axios请求方式

get:

 export default {
        name: 'home',
        components: {
            HelloWorld
        },
        created () {
        
            this.$axios({                                                    <!--第一种get-->
                url: 'http://localhost:8000/test/data/',
                method: 'get',
                
                params: {                                                    <!--往后台发送数据-->
                    usr: 'zero',
                    pwd: '000'
                }
                
            }).then((response) => {
                console.log(response.data)                                    <!--从后台接收数据-->
            }).error((error) => {
                console.log(error)
            });


            this.$axios.get('http://localhost:8000/test/data/', {            <!--第二种get-->
            
                params: {
                    usr: 'zero',
                    pwd: '000'
                }
                
            }).then((response) => {
                console.log(response.data)
            }).error((error) => {
                console.log(error)
            });
        }


post：

export default {
        name: 'home',
        components: {
            HelloWorld
        },
        created () {
        
            this.$axios({                                                <!--第一种post-->
                url: 'http://localhost:8000/test/data/',
                method: 'post',
                
                data: {                                                    <!--往后台发送数据-->
                    username: 'owen',
                    password: '123'
                }
                
            }).then((response) => {                                        <!--从后台接收数据-->
                console.log(response.data)
            }).error((error) => {
                console.log(error)
            });


            this.$axios.post('http://localhost:8000/test/data/', {        <!--第二种post-->
                username: 'owen',
                password: '123',                                    
                
                headers: {                                                <!--默认发送原生的json,可以自己规定发送的类型-->
                    'Content-Type': 'urlencoded'
                }
                
            }).then((response) => {
                console.log(response.data)
            }).error((error) => {
                console.log(error)
            });
        }

前台操作Cookie

#安装

>: cd 项目目录
>: cnpm install vue-cookie --save


#配置：main.js

import cookie from 'vue-cookie'

Vue.prototype.$cookie = cookie;


#使用：在前端任何方法中

    ps：token是后台返回的

// 设置cookie
this.$cookie.set('token', token, 1);                <!--键，值，过期时间-->

// 取出cookie
this.$cookie.get('token')


// 删除cookie
this.$cookie.delete('token');