目录

• luffy前台案例
  • 1.课程点击跳转详情页
  • 2.详情页的数据分析与布局
  • 3.路由有名分组传参
  • 4.route-link的两种传参方式
  • 5.路由逻辑跳转与传参
  • 6.axios安装及请求后台
  • 7.vue-cookie的使用
  • 8.element-ui的使用

luffy前台案例

1.课程点击跳转详情页

#views/Course.vue
<template>
    <div class="course">
        <Nav></Nav>
        <h1>课程主页</h1>
        <!--组件不能直接绑定点击函数,对象(字典)不能作为key值-->
        <CourseCard  :card="card" v-for="card in card_list" :key="card.title"></CourseCard>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    import CourseCard from '@/components/CourseCard'
    export default {
        name: "Course",
        data() {
            return {
                card_list: []
            }
        },
        components: {
            Nav,
            CourseCard
        },

        created() {
            let cards= [
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基础'
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土'
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL删库高级'
                },
            ];
            this.card_list = cards;
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
        background-color: brown;
    }
</style>


#conponents/CourseCard.vue

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></div>
        <!--<div class="right" @click="goto_detail">{{ card.title }}</div>-->
        //由课程点击跳转详情页
        <router-link to="course/detail" class="right">{{card.title}}</router-link>

    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: ['card'],
        methods:{
            goto_detail(){
                console.log(this.card.id)
            }
        }
    }
</script>

<style scoped>
    .course-card {
        margin: 10px 0 10px;
    }
    .left,.right {
        float: left;
    }
    //清浮动
    .course-card:after {
        content: '';
        display: block;
        clear: both;
    }
    .left {
        width: 50%;
        height: 120px;
        background-color: blue;
    }
    .right {
        width: 50%;
        height: 120px;
        background-color: tan;
        font: bold 30px/120px 'STSong';
        text-align: center;
        cursor: pointer;
    }
</style>

2.详情页的数据分析与布局

<template>
    <div class="course-detail">
        <h1>课程详情页</h1>
        <hr>
        <div class="detail">
            <div class="header" :style="{background:course_ctx.bgColor}"></div>
            <div class="body">
                <div class="left">{{course_ctx.title}}</div>
                <div class="right">{{course_ctx.ctx}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "CourseDetail",
        data(){
            return{
                course_ctx:""
            }
        },
        //页面创建成功,完成数据的渲染
        created(){
            //console.log("页面创建了")
            //需求,获取课程主页传过来的课程id,通过课程id拿到该课程的详细信息
            //伪代码:数据来源于后台
            // $.ajax({
            //     url:`/course/detail/${id}/`,
            //     success:(response)=>{
            //         this.course_ctx=response.data
            //     }
            // })
            let detail_list=[
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基础',
                    ctx:"python"
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土',
                    ctx:"django"
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL删库高级',
                    ctx:"mysql"
                },

            ];

            let id = 1;
            for(let dic of detail_list){
                if(dic.id==id){
                    this.course_ctx = dic;
                    break;
                }
            }

        }

    }
    
</script>

<style scoped>
        h1 {
        text-align: center;
    }
    .detail {
        width: 80%;
        margin: 20px auto;
    }
    .header {
        height: 150px;
    }
    .body:after {
        content: '';
        display: block;
        clear: both;
    }
    .left, .right {
        float: left;
        width: 50%;
        font: bold 40px/150px 'Arial';
        text-align: center;
    }
    .left { background-color: aqua }
    .right { background-color: aquamarine }

</style>

3.路由有名分组传参

#coursecard.vue
<router-link :to="`course/detail/${card.id}`" class="right">{{card.title}}</router-link>

#coursedetail.vue
created(){'''
            let id = this.$route.params.pk;
        '''}

#route.js
route:[ {
      path: '/course/detail/:pk',
      name: 'course-detail',
      component: CourseDetail
    }]

4.route-link的两种传参方式

#以数据包方式携带参数id
<router-link :to="{
            name: 'course-detail',
            params: {pk: card.id},      
        }" class="right">{{ card.title }}</router-link>

#以路由拼接携带参数
        <router-link :to="{
            query: {pk: card.id}
        }" class="right">{{ card.title }}</router-link>

#route.js 配置
route:[ {
      path: '/course/detail/',
      name: 'course-detail',
      component: CourseDetail
    }]

#coursedetail.vue
created(){'''
            let id = this.$route.params.pk || this.$route.query.pk;
        '''}

5.路由逻辑跳转与传参

通过route-link路由转跳并不是万能的,当激活某个事件,才会发生路由跳转.

<div class="right" @click="goto_detail">{{ card.title }}</div>
普通标签发生路由跳转

export default {
        name: "CourseCard",
        props: ['card'],
        methods: {
            goto_detail() {
                // 注：在跳转之前可以完成其他一些相关的业务逻辑，再去跳转
                let id = this.card.id;
                // 实现逻辑跳转
                this.$router.push(`/course/detail/${id}`);
                // this.$router.push({
                //     'name': 'course-detail',
                //     // params: {pk: id}
                //     query: {pk: id}
                // });

                // 在当前页面时，有前历史记录与后历史记录
                // go(-1)返回上一页,逻辑返回上一页
                // go(2)去向下两页
                // this.$router.go(-1)
            }
        }
    }

6.axios安装及请求后台

安装axios
:项目名>cnpm install axios --save

#main.js中配置axios,完成ajax请求
import axios from "axios"
Vue.prototype.$axios = axios

'''
export default {
        name: "CourseDetail",
        data() {
            return {
                course_ctx: '',
                val: '',
            }
        },
        created() {
                    let id = this.$route.params.pk || this.$route.query.pk || 1;
                    this.$axios({
                        url: `http://127.0.0.1:8000/course/detail/${id}/`,
                        method: 'get',(默认请求方式为get)
                    }).then(response => {
                        console.log('请求成功');
                        console.log(response.data);
                        this.course_ctx = response.data;
                    }).catch(error => {
                        console.log('请求失败');
                        console.log(error);
                    })
                }
}
'''

注:开发时需要将django中csrf禁用

7.vue-cookie的使用

:项目名>cnpm install vue-cookie --save

#main.js配置cookie,完成数据的存储(可以设置过期时间)
import cookie from "vue-cookie"
Vue.prototype.$cookie = cookie

'''
   created() {
            console.log('组件创建成功');
            let token = 'asd1d5.0o9utrf7.12jjkht';
            // 设置cookie默认过期时间单位是1d(1天),以key:value形式存储
            this.$cookie.set('token', token, 1);
        },
        mounted() {
            console.log('组件渲染成功');
            let token = this.$cookie.get('token');
            console.log(token);
        },
        destroyed() {
            console.log('组件销毁成功');
           //删除cookie时,将key值为空
            this.$cookie.delete('token')
        }
'''

8.element-ui的使用

安装
https://element.eleme.cn/#/zh-CN/component/installation

#main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);