python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(16)---课程列表组件

python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(16)---课程列表组件

PS：笔记只是为了更好表达我怎么语言表述，有些时候可能难免废话一推！
因知识有限, 如有错误, 欢迎指正！

每日细语：学海无涯苦作舟！

最终效果图：

image.png

续言

上一节，我们已经把底部的导航栏放置在了默认的页面渲染可见的第一个组件Index.vue组件，而它的上面还可以包含有其他组件，也可以是通过路由来进行匹配的。

这个就涉及到Index.vue组件里的子组件的渲染，也就是二级路由！

回顾我们的Index.vue组件代码：

其中的代码：

说明了我们还可以在Index.vue渲染其他子组件。也就是我们的

• 课程列表组件
• 我的列表组件

所以我们的需要先配置好上述两个子组件的路由（即对应的组件）
重新规划结构：

image.png

修改route下的index.js

// 第一个界面所包含的相关组件
const Index = resolve => require(['../pages/Index/Index'], resolve)
const Course = resolve => require(['../pages/Index/Course/course'], resolve)
const Me = resolve => require(['../pages/Index/Me/me'], resolve)

const routes = [{
  path: '/',
  name: 'index',
  component: Index,
  children: [
    {
      path: '/r/course',
      name: 'course',
      component: Course,
      meta: {
        title: 'course',
        keepAlive: true
      }
    },
    {
      path: '/r/me',
      name: 'me',
      component: Me,
      meta: {
        title: 'me',
        keepAlive: true
      }
    }
  ]
}
]
export default routes

image.png

修改Index.vue文件：

image.png

image.png

遇到的问题是：子组件无法渲染出来？

尝试解决：

image.png

问题表现，必须包含在 的元素才会可见！！
有点奇怪！为什么呢？

image.png

发现问题点在外面的App.vue中的

：

PS： z-index: -1; 这个设置为-1的时候显示就正常了！！
但是默认设置为了0 所以无法显示！！！

image.png

既然我们需要显示出课程列表的话，那么我们就需要在

image.png

包含对应的课程列表的中Item组件，用户显示我们的课程列表信息。

定义课程组件

course.vue代码：

course_item.vue 代码：

最终效果显示：

image.png

显示对应的测试数据的列表的所有数据：
在course_item.vue 定义

props: {
      item: {}
    }

接受父组件传输的

image.png

完整代码：

修改之后显示的效果：

image.png

美化我们的course_item.vue样式组件

效果：

image.png

感觉不对劲啊！

什么对应的比例压缩的不成人样了！！！

后来发现是需要使用flexible 来进行对应的自适应处理！

所以需要在main.js导入

image.png

最终结果：

image.png

完善一些对应的字段输出处理！

image.png

结束

以上笔记纯属个人学习实践总结，有兴趣的同学可以加群一起学习讨论QQ：308711822