7-9 django在线教育平台----机构详情页展示1

一、准备:添加数据、新建template

这里写图片描述

从后台添加数据,从上图中可以看到需要添加的数据有课程、教师

添加教师
这里写图片描述

这里写图片描述

这里写图片描述

添加教师完成

这里写图片描述

添加课程
但是课程页面少了机构,不知道课程是属于哪个机构的,所以在model中添加机构字段,在这里机构是外键

添加外键,修改model,执行makemigrations courses和migrate courses

这里写图片描述

添加课程完成

点击显示课程机构列
这里写图片描述

添加完成
这里写图片描述

新建template

总共4个页面,机构首页、机构课程、机构介绍、机构讲师
这里写图片描述

四个页面变化的部分是图中的right部分,头部和左侧的基本不变
这里写图片描述

根据之前模板的继承,重写html页面

可以按住F12在前端页面分析,下图中的section是头部,以此类推确定每个标签对应着哪个部分

页面部分
这里写图片描述

html对应部分,新建org_base.html,在org-detail-homepage.html基础上修改
这里写图片描述

org-detail-homepage.html
这里写图片描述

二、配置org-detail-homepage.html页面的url

这里是通过点击页面中不同的授课机构进入机构详情页面的,不同的授课机构链接不同,用机构的id表示

涉及到正则知识
这里写图片描述

三、编写view

返回的数据是课程、教师

这里写图片描述

四、配置模板

这三个div是页面静态的课程显示,我们需要将views中传过来的动态数据显示在模板中
取数据可以通过外键关联来取,也可以到对应的数据库中取
这里写图片描述

将具体的动态数据对应到模板中
这里写图片描述

配置org_list.html中进入机构详情页面入口的url
这里写图片描述

五、测试

点击机构列表页任意一个机构进入机构详情页面
测试成功

但是图中的1、2、3处图片未显示
这里写图片描述

1处是课程机构的logo,从courses model中的image取得,所以必须把courses model中的image字段传给模板,在views中传给了org-detail-homepage.html,在org_base.html中依然可以使用(模板的向上传递作用)

这里写图片描述

配置org_base.html模板中图片的显示

这里写图片描述

这里写图片描述

最终测试结果

这里写图片描述

猜你喜欢

转载自blog.csdn.net/f1ngf1ngy1ng/article/details/81109521