• 03 Vue -课程详细(传参id)、图片显示、推荐课程(主动重定向)


    1、CourseDetail 课程详细信息

    1.如何传入参数id

    (1)router中导入

     

    (2) router-link 关联子组件

    (3)detail.vue接受id

    (4)通过id查询详细

     

    2.图片显示

    (1)图片路径与效果

     

     (2)v-for循环图片路径

     

    3.ajax请求:点击跳转

    (1)后端json数据

     (2)ajax请求

     

     (3)效果图

    2、推荐课程切换

    1. url 跳转了,id没有跳转

    detail组件不会重写加载,init不会执行

    2.主动重定向:改变url和页面id

     

     

     3、代码与总结

     1.Detail组件代码

    <template>
        <div>
            <h1>课程详细页面</h1>
            <p>{{detail.title}}</p>
            <p>{{detail.img}}</p>
            <p>{{detail.level}}</p>
            <p>{{detail.course}}</p>
            <p>{{detail.slogon}}</p>
            <p>{{detail.why}}</p>
    
            <div>
                <p>章节</p>
                <ul v-for="item in detail.chapter">
                    <li>{{item.name}}</li>
                </ul>
            </div>
    
             <div>
                 <p>推荐课程</p>
                <ul v-for="item in detail.recommends">
                    <!--<li><router-link :to="{name:'detail',params:{id:item.id}}">{{item.title}}</router-link></li>-->
                    <li @click="changeDetail(item.id)">{{item.title}}</li>
                </ul>
            </div>
    
        </div>
    </template>
    
    <script>
    export default {
        name:"detail",
        data(){
            return {
                detail:{
                    title:null,
                    img:null,
                    level:null,
                    recommends:[],
                    chapter:[],
                    course:null,
                    slogon:null,
                    why:null,
                }
            }
        },
        mounted(){
            // console.log(this.$route.params.id)
            var id = this.$route.params.id
            this.initDetail(id)
        },
        methods:{
            // 初始化路由id
            initDetail(nid){
    
                var that = this
    
                this.$axios.request({
                    url:"http://127.0.0.1:8001/api/v1/course/" + nid +'/',
                    method:'GET'
                }).then(function (arg){
                    console.log(arg.data)
                    if(arg.data.code === 1000){
                        that.detail = arg.data.data
                    }else{
                        alert(arg.data.error)
                    }
                    
                }).catch(function(){
    
                })
            },
            // 改变页面id
            changeDetail(id){
                this.initDetail(id)
                this.$router.push({name:'detail',params:{id:id}})  // 主动重定向
            }
        }
    }
    </script>
    
    <style  scoped>
    
    </style>

     2.Course组件代码

    <template>
        <div>
            <!-- 1.版本1 -->
            <h1>{{ msg }}</h1>
            <ul v-for="row in courseList">
                <li> 
                    <router-link :to='{name:"detail",params:{id:row.id}}'>{{ row.title }}</router-link>
                </li>
            </ul> 
    
    
            <!-- 2.版本2 -->
            <div v-for="row in courseList">
                <div style="350px;float:left">
                    <!-- 1.传统写法 -->
                    <!-- <img src="@/assets/logo.png" alt=""> -->
    
                    <!-- 2.v-for -->
                    <!-- <img src="{{ row.course_img }}" alt=""> -->
    
                    <!-- 3.跳转链接 -->
                    <router-link :to='{name:"detail",params:{id:row.id}}'><img src="@/assets/logo.png" alt=""></router-link>
                    
                    <h3><router-link :to='{name:"detail",params:{id:row.id}}'>{{ row.title }}</router-link></h3>
                    <p>{{row.level}}</p>
                    
                </div>
            </div>
    
        </div>
    </template>
    
    
    <script>
    export default {
        name:"course",
        data(){
            return {
                msg:"课程列表",
                courseList:[]
            }
        },
        mounted:function(){
            // vue页面刚加载时自动执行
            this.initCourse()
        },
        methods:{
            initCourse:function(){
                // 通过ajax向接口发送请求,并获取课程列表
                // jquery/axios
    
                // npm install axios --save
                //第一步:在main.js中配置
                //第二步:使用axios发送请求
                
                var that = this
                
                this.$axios.request({
                    //参数
                    url:"http://127.0.0.1:8001/api/v1/course",
                    method:"GET"
    
                }).then(function(ret){
                    //ajax请求发送成功后,获取响应的内容
                    console.log(ret)
                    if(ret.data.code === 1000){
                        that.courseList = ret.data.data
                    }else{
                        alert("获取数据失败")
                    }
    
                }).catch(function(){
                    //ajax请求失败后,获取响应的内容
                })
            }
        }
    }
    </script>
    
    <style  scoped>
    
    </style>

     3.router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    
    import Index from "@/components/Index"
    import Course from "@/components/Course"
    import Micro from "@/components/Micro"
    import News from "@/components/News"
    import Detail from "@/components/Detail"
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/index',
          name: 'index',
          component: Index
        },
        {
          path: '/course',
          name: 'course',
          component: Course
        },
        {
          path: '/micro',
          name: 'micro',
          component: Micro
        },
        {
          path: '/news',
          name: 'news',
          component: News
        },
        {
          path: '/detail/:id',
          name: 'detail',
          component: Detail
        },
      ],
      'mode':'history'
    })

     4.作业

  • 相关阅读:
    amfphp1.9 class mapping初探
    C#程序打包.exe应用程序
    数据库备份方案
    ListView 控件使用
    在C#中运用SQLDMO备份和恢复Microsoft SQL Server数据库
    .NET
    转载:MATLAB 符号函数作图
    整理雷达相关
    Python 程序 运行过程
    struts2 文件上传显示进度条
  • 原文地址:https://www.cnblogs.com/venicid/p/11655969.html
Copyright © 2020-2023  润新知