对应github地址:第9天

 
一. 实现我要学习功能
 
里面的三个字段对应operation/models/UserAsk中的变量
 
1. 首先对表单进行后台验证,新建orgazaiton/form文件,然后在里面定义之前的表单验证类。
因为我们已经定义了UserAsk类,发现定义的表单验证类和UserAsk类很相似,那么能不能把这个models里的类转变为表单验证类呢?那么我们需要用到ModelForm
 
 
2. 改写URL结构
首先改写org-list.html的访问URL,在mxonline/urls.py中将原先的URL改写为
 
新建organization/urls.py
然后访问http://127.0.0.1:8000/org/list,即可打开原先http://127.0.0.1:8000/org_list的访问内容
 
 
3. 使用modelform做表单提交
这里使用ajax异步操作,不对整个页面进行刷新,因此我们不能直接render一个页面回来,而是给前端返回json数据,而不是页面。那么就需要使用到HttpResponse类来指明给用户返回哪种类型数据
from django.http import HttpResponse
 
3.1 编写视图类organization/views.py->AddUserAskView
注意HttpResonse里面的单双引号的问题,一样要那样写,否则会出错,原因不明
 
3.2 organization/urls.py 中新增URL
 
3.3 url-list.html中关于我要学校的表单代码中的<form>标签中增加{% csrf_token %}
 
3.4 相关ajax请求在base.html中,看不太懂,注意里面的url, msg都和之前的设置相关联
监听这个button,如果用户点击了button,我们就向这个url进行post请求,然后把表单进行序列化
 
3.5 手机号码验证是否合法,在organization/forms.py中添加 clean_mobile函数(必须以clean开头)
 
 
 
 
 
二. 机构详情展示
 
1. 准备工作
在后台中新增几个教师和课程的数据,发现之前课程里没有到机构的外键,所有在courses/models.py-->class Course中新建一个外键
 
把org-detail-course.html, org-detail-desc.html, org-detail-homepage.html,  org-detail-teachers.html 这四个页面放到templates目录下
 
2. 编写基础模板
我们发现这4个页面很相似,所以要再写一个基础页面org_base.html让他们来重载,把org-detail-homepage.html内容复制过来
 
2.1 把title名字用block包起来,在css, js后面新增block,用来处理在不同的页面可能定制不同的样式
 
2.2 分析页面可发现,页面左边是固定的,页面右边不同,对应的在代码中有<div class="left">,<div class="right">,因此我们需要用block包住<div class="right">
 
面包屑那里也要加block
 
2.3 替换js, css路径
重载static变量
使用模板标签修改路径如下
 
 
3. org-detail-homepage.html继承基础页面
删掉原先内容,把org_base.html的<div class="right">的3个div剪切过来
 
 
4. 为机构首页添加URL,view
organization/urls.py中增加
需要传一个课程机构的ID,来指定是哪个机构的首页
 
定义view,organization/views.py中新增
courses/models.py/class Course中有一个机构的外键,那么机构为主,所以可在机构的view中使用一个对象+课程类小写course+下划线+set的方法反向取到课程
 
5. 填充org-detail-homepage.html页面
原先有三个课程的<div>标签,把其中一个<div>放到for循环模板中,删掉其他
 
 
6. 在org-list.html页面修改机构<dl>标签中的机构的跳转链接<a href="org-detail-homepage.html">
修改为
其中course_org.id 为课程机构的ID号,数据库中自动生成的id号, 传递到跳转链接里,然后在organization/urls.py中的<int:org_id>就能取到这个id
all_orgs.object_list中的object_list为分页时的固定写法
 
 
7. 修改org_base.html中图片地址
在子页面中使用的变量标签,其实也是可以在基本页面中直接使用
 
上面这段代码影响的是机构详情页里面的头部信息,如下
 
 
 
8. 机构教师信息填充
 
1). organization/models/class Teacher中新增一个讲师头像字段,并在后台添加头像
 
2). org-detail-homepage.html中找到表示讲师的代码并修改昵称和图片
 
 
 
 
三. 机构课程列表页(org-detail-course.html)
 
1. 把org-detail-homepage.html中的内容拷贝过来,只须替换<div class="right">和标题就好
 
2. 编写url和view
organization/views.py中添加
 
organization/urls.py中添加
 
3. 修改org-base.html的left部分代码,使点击左侧的机构课程可成功跳转到org-detail-course.html页面
 
4. 在org-detail-course.html中把信息补充完整
 
5. 增加机构课程选中状态
在organization/views.py-->class OrgHomeView中增加一个变量current_page = "home", 
orgCourseView中增加变量current_page = "course"
并且分别加到render函数中传递到org-detail-homepage.html页面
 
然后就可以在org_base.html页面中的<div class="left">中增加判断条件
 
 
 
 
四. 课程介绍页面
1. 同样的把<div class="right">替换一下
 
2. 配置URL,view
organization/views.py中增加
 
organization/urls.py中增加
 
3. 增加点击机构介绍跳转链接
在org_base.html中的<div class="left">中修改
 
 
五. 机构讲师
1. 修改页面
 
2. 配置view, URL
 
urls.py中
 
3. 增加跳转链接,在org_base.html页面中修改为如下
 
4. 显示讲师头像等信息,修改org-detail-teachers.html页面如下
 
5. 面包屑导航
在org_base.html中修改面包屑代码
 
然后在所有子页面中分别加入,改为相应的名字
{% block page_title %}机构课程{% endblock %}
 
 
 
 
六.课程机构收藏功能,也是ajax提交
 
1. 写view, URL
organization/views.py中增加
 
organization/urls.py中增加
 
 
2. 机构收藏功能的ajax代码放在org-base.html中
修改117行代码成如下图
修改135行为下图
修改window.location.href的地址
 
 
3. 如果机构已收藏,我们刷新后,又会显示收藏字样,不会显示已收藏,怎么办呢
 
3.1 organization/views.py-->class OrgHomeView中增加如下代码
并且在return render中加上
"has_fav": has_fav
 
3.2 org_base.html中大概51行的固定字段"收藏"修改为如下
 
分别在OrgCourseView, OrgDescView, OrgTeacherView添加上面相同代码
 
 
4. 机构页面显示登陆状态
把index.html中的<head>标签中if模板标签拷贝到org_base.html中替换一下
 

mxonline实战9,我要学习功能块,机构详情展示,收藏功能的更多相关文章

  1. 17、Django实战第17天:机构详情展示

    1.进入xadmin添加测试数据(教师.课程) 2.把以下4个前端页面复制到templates中 先打开这几个页面分析,它们和之前的课程机构列表页是不一样的机构,且没有共同的部分,但是这4个页面却是类 ...

  2. 25、Django实战第25天:讲师详情页

    1.复制teacher-detail.html到templates目录下 2.编辑teacher-detail.html,继承base.html 3.编辑organization.view.py cl ...

  3. mxonline实战13,授课讲师列表页,详情页,index页面全局导航

    对应github地址:第13天   把teacher-list.html和teacher-detail.html拷贝过来   一. 授课讲师列表页   1. 修改html文件 把org-list.ht ...

  4. mxonline实战11,课程详情页2,课程章节页

    对应github地址:第11天   一. 课程详情页2   1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码

  5. 20、Django实战第20天:课程详情页

    1.把course-detail.html复制到templates目录下 2.编辑course-detail.html,分析页面,继承base.html 3.编辑courses.views .... ...

  6. 18、Django实战第18天:课程机构收藏功能

    这里点击"收藏"也是ajax异步操作,我在operation.model.py中创建了一个用户收藏表,其中fav_id字段,如果我们收藏的是课程,那就是课程id,如果收藏的是课程机 ...

  7. ajax“显示弹窗详情”和“删除”功能练习

    1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...

  8. mxonline实战10,课程列表页,课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加

  9. mxonline实战8,机构列表分页功能,以及按条件筛选功能

    对应github地址:列表分页和按条件筛选     一. 列表分页   1. pip install django-pure-pagination   2. settings.py中 install ...

随机推荐

  1. 给我们的Empty Object加个图标

    Gizmos.DrawIcon (transform.position, "1.png", true);

  2. PHP与Imagemagick

    Imagemagick:相关站点: ImageMagick中文站:http://www.imagemagick.com.cn/ ImageMagick英文站:http://www.imagemagic ...

  3. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  4. KbmMW 4.40.00 测试发布

    经过漫长的等待,支持移动开发的kbmmw 4.40.00 终于发布了,这次不但支持各个平台的开发, 而且增加了认证管理器等很多新特性,非常值得升级.具体见下表. 4.40.00 BETA 1 Oct ...

  5. web应用安全权威指南(文摘)

    第1章 什么是web应用的安全隐患 第3章 Web安全基础,HTTP,会话管理,同源策略 content_length 字节数 content_type mime类型 百分号编码 referer :请 ...

  6. IndexedDB:浏览器里内置的数据库(转)

    出处;http://www.webhek.com/indexeddb/ IndexedDB是HTML5规范里新出现的浏览器里内置的数据库.对于在浏览器里存储数据,你可以使用cookies或local ...

  7. Android 一些注意

    半年没碰android,想给一个按钮写个click,硬是想不起来怎么搞,哎! 1.编码问题调整 2.引用框架问题 3.界面设计无法显示问题,需要调整设计界面的API Level 4.任意输入自动提示 ...

  8. 20169202 2016-2017-2《Windows攻击》

    Windows攻击 实验要求:使用Metaspoit攻击MS08-067,提交正确得到远程Shell的截图,加上自己的学号水印 (1):MS08-067远程溢出漏洞描述 MS08-067漏洞的全称为& ...

  9. 寻找最大的K个数(上)

    这是一道很经典的题目,有太多方法了,今天写了两种方法,分别是快排和堆排序 #include <iostream> using namespace std; #define N 25 //初 ...

  10. 20145233计算机病毒实践九之IDA的使用

    20145233计算机病毒实践之IDA的使用 PSLIST导出函数做了什么 这个函数是一个export函数,所以在view中选择export 查到后,双击打开这个函数的位置 仔细看这个函数可以发现这个 ...