（项目）在线教育平台（六）
八、授课机构功能
1、模板继承
如果几个页面的大体结构相同，可以使用继承的方式来实现母版的重用性，也就是子版继承母版的内容，既可以使用模板的内容，也可以重写需要改变的地地方。
首先完成授课机构的页面，通过页面显示发现，
先把org-list.html页面拷贝到templates下，在该目录下新建base.html页面，然后将org-list.html内容剪切到base.html下，然后修改静态文件的路径，在base.html页面下找到需要block的地方，以供子版继承重写：
org-list.html继承base.html，自定义org-list.html页面中的内容：
base.html页面还需要修改的地方是顶部登录注册的显示问题，这个问题和index.html页面的一样，只需要将index页面的拷贝过来即可。
2、后端机构列表接口
2.1 机构列表接口
在organization/views.oy文件下编写机构列表的接口：
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 return render(request, 'org-list.html')
配置url：
1 from organization.views import OrgView 2 3 urlpatterns = [ 4 path('org_list/', OrgView.as_view(), name='org_list') # 机构列表 5 ]
然后修改index.html导航栏跳转到机构列表的url：
现在访问机构列表页就可以看到页面了。
2.2 后台添加数据
后台添加城市的相关数据：
后台添加机构的相关数据，不过需要先在organization/models.py机构中添加一个字段category，用来区分机构的类别：
1 class CourseOrg(models.Model): 2 """课程机构""" 3 CATEGORY_CHOICES = ( 4 ('pxjg', '培训机构'), 5 ('gx', '高校'), 6 ('gr', '个人') 7 ) 8 name = models.CharField('机构名称', max_length=50) 9 category = models.CharField('机构类别', max_length=20, choices=CATEGORY_CHOICES, default='pxjg') 10 desc = models.TextField('机构描述') 11 click_nums = models.IntegerField('点击数', default=0) 12 fav_nums = models.IntegerField('收藏数', default=0) 13 image = models.ImageField('封面图', upload_to='org/%Y/%m', max_length=100) 14 address = models.CharField('地址', max_length=150) 15 city = models.ForeignKey(CityDict, verbose_name='所在城市', on_delete=models.CASCADE) 16 add_time = models.DateTimeField('添加时间', default=datetime.now) 17 18 class Meta: 19 verbose_name = '课程机构' 20 verbose_name_plural = verbose_name
修改之后需要迁移数据库。
在后台添加机构信息的时候需要上传机构的图片，在项目根目录下新建一个media，用来存放上传的图片，然后在settings.py文件中设置上传文件的路径：
1 # 上传文件的路径 2 MEDIA_URL = '/media/' 3 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
然后现在添加机构的数据：
2.3 完善机构列表的接口
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 # 取出所有的机构 5 all_orgs = CourseOrg.objects.all() 6 org_nums = all_orgs.count() 7 8 # 取出所有的城市 9 all_citys = CityDict.objects.all() 10 11 return render(request, 'org-list.html', { 12 'all_orgs': all_orgs, 13 'all_citys': all_citys, 14 'org_nums': org_nums 15 })
然后修改前端org-list.html显示的内容：
要显示后台的图片，需要在settings.py中的TEMPLATES添加图片处理器django.template.context_processors.media，如下：
1 TEMPLATES = [ 2 { 3 'BACKEND': 'django.template.backends.django.DjangoTemplates', 4 'DIRS': [os.path.join(BASE_DIR, 'templates')] 5 , 6 'APP_DIRS': True, 7 'OPTIONS': { 8 'context_processors': [ 9 'django.template.context_processors.debug', 10 'django.template.context_processors.request', 11 'django.contrib.auth.context_processors.auth', 12 'django.contrib.messages.context_processors.messages', 13 # 图片处理器，为了在课程列表中前面加上MEDIA_URL 14 'django.template.context_processors.media', 15 ], 16 }, 17 }, 18 ]
然后在urls中配置处理图片的url，固定写法：
1 from django.views.static import serve 2 from MxOnline.settings import MEDIA_ROOT 3 4 urlpatterns = [ 5 re_path(r'^media/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT}), # 处理图片显示 6 ]
现在刷新列表页即可看到如下效果：
3、分页功能
机构如果超出每一页的数量，就需要使用分页，在这里使用第三方库django-pure-pagination来实现分页。
3.1 安装
在虚拟环境中直接pip install django-pure-pagination
3.2 注册
将pure_pagination注册进INSTALLED_APPS中：
1 INSTALLED_APPS = [ 2 'pure_pagination', 3 ]
3.3 在机构列表接口加入分页逻辑
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 # 取出所有的机构 5 all_orgs = CourseOrg.objects.all() 6 org_nums = all_orgs.count() 7 8 # 取出所有的城市 9 all_citys = CityDict.objects.all() 10 11 # 分页 12 try: 13 page = request.GET.get('page', 1) 14 except PageNotAnInteger: 15 page = 1 16 p = Paginator(all_orgs, 5, request=request) 17 orgs = p.page(page) 18 19 return render(request, 'org-list.html', { 20 'all_orgs': orgs, 21 'all_citys': all_citys, 22 'org_nums': org_nums 23 })
然后修改org-list.html中的all_orgs：
在org-list.html中修改前端分页显示的代码：
刷新列表页后，每页显示5条机构：
4、筛选功能
4.1 城市筛选
在机构列表接口中完善筛选数据的逻辑：
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 # 取出所有的机构 5 all_orgs = CourseOrg.objects.all() 6 org_nums = all_orgs.count() 7 8 # 取出所有的城市 9 all_citys = CityDict.objects.all() 10 11 # 筛选(从request中获取城市的id) 12 city_id = request.GET.get('city', '') 13 if city_id: 14 all_orgs = all_orgs.filter(city_id=int(city_id)) 15 16 # 分页 17 try: 18 page = request.GET.get('page', 1) 19 except PageNotAnInteger: 20 page = 1 21 p = Paginator(all_orgs, 5, request=request) 22 orgs = p.page(page) 23 24 return render(request, 'org-list.html', { 25 'all_orgs': orgs, 26 'all_citys': all_citys, 27 'org_nums': org_nums, 28 'city_id': city_id 29 })
前端显示的修改如下：
4.2 类别筛选
继续在机构列表接口完善类别筛选功能：
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 # 取出所有的机构 5 all_orgs = CourseOrg.objects.all() 6 7 # 取出所有的城市 8 all_citys = CityDict.objects.all() 9 10 # 城市筛选(从request中获取城市的id) 11 city_id = request.GET.get('city', '') 12 if city_id: 13 all_orgs = all_orgs.filter(city_id=int(city_id)) 14 15 # 类别筛选(从request中获取机构类别ct) 16 category = request.GET.get('ct', '') 17 if category: 18 all_orgs = all_orgs.filter(category=category) 19 20 # 筛选完再统计数量 21 org_nums = all_orgs.count() 22 23 # 分页 24 try: 25 page = request.GET.get('page', 1) 26 except PageNotAnInteger: 27 page = 1 28 p = Paginator(all_orgs, 5, request=request) 29 orgs = p.page(page) 30 31 return render(request, 'org-list.html', { 32 'all_orgs': orgs, 33 'all_citys': all_citys, 34 'org_nums': org_nums, 35 'city_id': city_id, 36 'category': category 37 })
前端的显示修改内容如下：
修改完成之后，筛选功能完成，可以根据类别和城市筛选机构：
4.3 机构排名筛选
机构的排名按照点击量进行排名，在机构列表接口中添加排名筛选逻辑：
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 # 取出所有的机构 5 all_orgs = CourseOrg.objects.all() 6 7 # 取出所有的城市 8 all_citys = CityDict.objects.all() 9 10 # 排名筛选(根据点击量排名) 11 hot_orgs = all_orgs.order_by('-click_nums')[:3] 12 13 # 城市筛选(从request中获取城市的id) 14 city_id = request.GET.get('city', '') 15 if city_id: 16 all_orgs = all_orgs.filter(city_id=int(city_id)) 17 18 # 类别筛选(从request中获取机构类别ct) 19 category = request.GET.get('ct', '') 20 if category: 21 all_orgs = all_orgs.filter(category=category) 22 23 # 筛选完再统计数量 24 org_nums = all_orgs.count() 25 26 # 分页 27 try: 28 page = request.GET.get('page', 1) 29 except PageNotAnInteger: 30 page = 1 31 p = Paginator(all_orgs, 5, request=request) 32 orgs = p.page(page) 33 34 return render(request, 'org-list.html', { 35 'all_orgs': orgs, 36 'all_citys': all_citys, 37 'org_nums': org_nums, 38 'city_id': city_id, 39 'category': category, 40 'hot_orgs': hot_orgs 41 })
然后修改前端显示代码：
4.4 学习人数和课程排名筛选
首先在organization/models.py中的CourseOrg中加入students和course_nums两个字段：
1 class CourseOrg(models.Model): 2 """课程机构""" 3 CATEGORY_CHOICES = ( 4 ('pxjg', '培训机构'), 5 ('gx', '高校'), 6 ('gr', '个人') 7 ) 8 name = models.CharField('机构名称', max_length=50) 9 category = models.CharField('机构类别', max_length=20, choices=CATEGORY_CHOICES, default='pxjg') 10 desc = models.TextField('机构描述') 11 students = models.IntegerField('学习人数', default=0) 12 course_nums = models.IntegerField('课程数', default=0) 13 click_nums = models.IntegerField('点击数', default=0) 14 fav_nums = models.IntegerField('收藏数', default=0) 15 image = models.ImageField('封面图', upload_to='org/%Y/%m', max_length=100) 16 address = models.CharField('地址', max_length=150) 17 city = models.ForeignKey(CityDict, verbose_name='所在城市', on_delete=models.CASCADE) 18 add_time = models.DateTimeField('添加时间', default=datetime.now) 19 20 class Meta: 21 verbose_name = '课程机构' 22 verbose_name_plural = verbose_name 23 24 def __str__(self): 25 return self.name
然后迁移数据库。
然后在机构列表接口中完善学习人数和课程数排名的逻辑：
1 class OrgView(View): 2 """机构列表""" 3 def get(self, request): 4 # 取出所有的机构 5 all_orgs = CourseOrg.objects.all() 6 7 # 取出所有的城市 8 all_citys = CityDict.objects.all() 9 10 # 排名筛选(根据点击量排名) 11 hot_orgs = all_orgs.order_by('-click_nums')[:3] 12 13 # 学习人数和课程数排名筛选 14 sort = request.GET.get('sort', '') 15 if sort: 16 if sort == 'students': 17 all_orgs = all_orgs.order_by('-students') 18 elif sort == 'courses': 19 all_orgs = all_orgs.order_by('-course_nums') 20 21 # 城市筛选(从request中获取城市的id) 22 city_id = request.GET.get('city', '') 23 if city_id: 24 all_orgs = all_orgs.filter(city_id=int(city_id)) 25 26 # 类别筛选(从request中获取机构类别ct) 27 category = request.GET.get('ct', '') 28 if category: 29 all_orgs = all_orgs.filter(category=category) 30 31 # 筛选完再统计数量 32 org_nums = all_orgs.count() 33 34 # 分页 35 try: 36 page = request.GET.get('page', 1) 37 except PageNotAnInteger: 38 page = 1 39 p = Paginator(all_orgs, 5, request=request) 40 orgs = p.page(page) 41 42 return render(request, 'org-list.html', { 43 'all_orgs': orgs, 44 'all_citys': all_citys, 45 'org_nums': org_nums, 46 'city_id': city_id, 47 'category': category, 48 'hot_orgs': hot_orgs, 49 'sort': sort 50 })
然后修改前端代码：
5、我要学习咨询功能
5.1 我要学习咨询接口
我要学习咨询的表单这次使用ModelForm来实现，首先在organization下新建form.py文件：
1 from django import forms 2 from operation.models import UserAsk 3 4 5 class UserAskForm(forms.ModelForm): 6 """我要学习咨询表单验证""" 7 class Meta: 8 model = UserAsk 9 fields = ['name','mobile','course_name']
编写我要学习咨询的后台接口：
1 class UserAskView(View): 2 """我要学习咨询""" 3 def post(self, request): 4 userask_form = UserAskForm(request.POST) 5 if userask_form.is_valid(): 6 # 通过ModelForm可以直接将表单中的内容保存 7 user_ask = userask_form.save(commit=True) 8 # 通过ajax提交，给前端返回json数据 9 return HttpResponse('{"status": "success"}', content_type='application/json') 10 else: 11 return HttpResponse('{"status": "fail", "msg": "添加出错"}', content_type='application/json')
现在使用路由分发的方式来配置url，首先删除urls.py中的org_list这个路由，然后添加一级路由：
1 urlpatterns = [ 2 # path('org_list/', OrgView.as_view(), name='org_list'), # 机构列表 3 path('org/', include('organization.urls', namespace='org')), # 机构列表 4 ]
然后在organization下新建urls.py文件，在这个文件配置机构列表页的相关url，之前删除了机构列表的url，现在将机构列表和我要学习咨询的url都添加到这个文件下：
1 from django.urls import path, re_path 2 3 from .views import OrgView, UserAskView 4 5 app_name = 'organization' 6 7 urlpatterns = [ 8 path('list/',OrgView.as_view(),name='org_list'), # 机构列表 9 path('user_ask/', UserAskView.as_view(), name='user_ask'), # 我要学习咨询 10 ]
之前在首页跳转机构列表的url需要修改过来：
然后在form中添加验证手机号码合法性的逻辑：
1 import re 2 3 from django import forms 4 from operation.models import UserAsk 5 6 7 class UserAskForm(forms.ModelForm): 8 """我要学习咨询表单验证""" 9 class Meta: 10 model = UserAsk 11 fields = ['name','mobile','course_name'] 12 13 def clean_mobile(self): 14 """验证手机号合法性""" 15 mobile = self.cleaned_data['mobile'] 16 REGEX_MOBILE = "^1[358]\d{9}$|^147\d{8}$|176\d{8}$" 17 p = re.compile(REGEX_MOBILE) 18 if p.match(mobile): 19 return mobile 20 else: 21 raise forms.ValidationError('手机号非法', code='mobile_invalid')
我要学习咨询表单是将数据ajax提交到后台的，不刷新页面，所以在前端要编写script代码：
