2. 程式人生 > >Django+xadmin打造線上教育平臺（四）

Django+xadmin打造線上教育平臺（四）

阿新 • • 發佈：2018-12-31

目錄

程式碼

七、授課機構功能

7.1.模板繼承

（1）建立母板

把org-list.html拷貝到templates目錄下，新建base.html,剪下org-list.html內容到裡面

再修改一下靜態檔案的地址（css、就是、image和media）

（2）機構首頁路由

from organization.views import OrgView

path('org_list/',OrgView.as_view(),name = 'org_list'),

（3）機構views

class OrgView(View):
    
 
'''課程機構'''
    def get(self,request):
        return render(request,'org-list.html')

（4）org-list.html繼承base

{#templates/org-list.html#}

{% extends 'base.html' %}

{% block title %}
    課程機構列表
{% endblock %}

訪問：http://127.0.0.1:8000/org_list/   可以看到org_list頁面

（5）修改base模板

把base中custom_bread和content兩個block的內容剪下到org-list.html裡面

base.html

org-list.html

7.2.新增城市和課程機構

 （1）進xadmin後臺新增城市

 這裡機構是靜態固定不變的，所在地區是動態的，從資料庫中獲取得到的

 （2）修改機構的models，新增一個機構類別欄位

organization/models.py：

class CourseOrg(models.Model):
    ORG_CHOICES = (
        ("pxjg", u"培訓機構"),
        ("gx", u"高校"),
        ("gr", u"個人"),
    )

#
 
新增欄位
 category = models.CharField(max_length=20, choices=ORG_CHOICES, verbose_name=u"機構類別", default="pxjg")
class CourseOrg(models.Model):
    ORG_CHOICES = (
        ("pxjg", u"培訓機構"),
        ("gx", u"高校"),
        ("gr", u"個人"),
    )
    name = models.CharField('機構名稱',max_length=50)
    desc = models.TextField('機構描述')
    category = models.CharField(max_length=20, choices=ORG_CHOICES, verbose_name=u"機構類別", default="pxjg")
    click_nums = models.IntegerField('點選數',default=0)
    fav_nums = models.IntegerField('收藏數',default=0)
    image = models.ImageField('logo',upload_to='org/%Y%m',max_length=100)
    address = models.CharField('機構地址',max_length=150,)
    city = models.ForeignKey(CityDict,verbose_name='所在城市',on_delete=models.CASCADE)
    add_time = models.DateTimeField(default=datetime.now)

    class Meta:
        verbose_name = '課程機構'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name
全部程式碼

新增後makemigrations-->>migrate

（3）新增機構

新增機構資訊的時候要上傳機構的圖片

在專案目錄下面新建一個目錄“media”，用來存放上傳的圖片

setting中要配置我們把檔案存放在哪個根目錄之下

#settings.py

# 設定上傳檔案的路徑
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')   #指定根目錄

會跟upload裡面拼接完整的路徑

“/media/org/2018/月份/圖片名字”

然後在後臺新增十個機構

7.3.顯示課程機構和城市

 （1）寫檢視函式organization/views.py

class OrgView(View):
    '''課程機構'''
    def get(self,request):
        # 取出所有課程機構
        all_orgs = CourseOrg.objects.all()
        org_onums = all_orgs.count()
        # 取出所有城市
        all_citys = CityDict.objects.all()
        return render(request, "org-list.html", {
            "all_orgs": all_orgs,
            "all_citys": all_citys,
            'org_onums':org_onums,
        })

（2）修改org-list.html

顯示機構總共數量

顯示城市

顯示機構

然後還要做下面的設定

如何將image Field轉換成圖片地址

 資料庫中image以字串格式儲存的，是相對路徑，直接取是取不出來的，必須補全路徑

data-url="{{ MEDIA_URL }}{{ course_org.image }}"
MEDIA_URL = '/media/'，這個是之前settings中設定好了

要向使用{{ MEDIA_URL }}，要先在settings中TEMPLATES 裡面新增media處理器：'django.core.context_processors.media'

 然後也要新增處理圖片相應路徑的url

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                #新增圖片處理器，為了在課程列表中前面加上MEDIA_URL
                'django.template.context_processors.media',
            ],
        },
    },
]

 urls.py

from django.views.static import serve
from MxOnline.settings import MEDIA_ROOT


# 處理圖片顯示的url,使用Django自帶serve,傳入引數告訴它去哪個路徑找，我們有配置好的路徑MEDIAROOT
re_path(r'^media/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT })

四個地方

7.4.分頁功能

 （1）安裝

pip install django-pure-pagination

（2）settings裡面新增

INSTALLED_APPS = (
    ...
    'pure_pagination',
)

（3）views中使用方法

class OrgView(View):
    '''課程機構'''

    def get(self, request):
        # 所有課程機構
        all_orgs = CourseOrg.objects.all()
        # 有多少家機構
        org_nums = all_orgs.count()
        # 所有城市
        all_citys = CityDict.objects.all()
        # 對課程機構進行分頁
        # 嘗試獲取前臺get請求傳遞過來的page引數
        # 如果是不合法的配置引數預設返回第一頁
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        # 這裡指從allorg中取五個出來，每頁顯示5個
        p = Paginator(all_orgs, 5, request=request)
        orgs = p.page(page)

        return render(request, "org-list.html", {
            "all_orgs": orgs,
            "all_citys": all_citys,
            "org_nums": org_nums,
        })

（4）修改org-list.html

 這裡變成 "all_orgs.object_list"

分頁功能

<div class="pageturn">
    <ul class="pagelist">
        {% if all_orgs.has_previous %}
            <li class="long"><a href="?{{ all_orgs.previous_page_number.querystring }}">上一頁</a></li>
        {% endif %}

        {% for page in all_orgs.pages %}
            {% if page %}
                {% ifequal page all_orgs.number %}
                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                {% else %}
                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                {% endifequal %}
            {% else %}
                <li class="none"><a href="">...</a></li>
            {% endif %}
        {% endfor %}
        {% if all_orgs.has_next %}
            <li class="long"><a href="?{{ all_orgs.next_page_number.querystring }}">下一頁</a></li>
        {% endif %}
    </ul>
</div>

改成每頁顯示2個列表，如下：

7.5.列表篩選功能

（1）城市列表篩選

  • 點城市，篩選出對應的課程機構
  • 預設“全部”是‘active’狀態（綠色），如果點了某個城市，應該城市是‘active’狀態
  • 當用戶點選city時，應該把city的id傳到後臺，然後後臺在傳到模板中，是的可以知道哪個城市被選中，然後加上‘’active‘’

 後臺處理city篩選

class OrgView(View):
    '''課程機構'''

    def get(self, request):
        # 所有課程機構
        all_orgs = CourseOrg.objects.all()
        # 有多少家機構
        org_nums = all_orgs.count()
        # 所有城市
        all_citys = CityDict.objects.all()

        city_id = request.GET.get('city','')
        if city_id:
            all_orgs = all_orgs.filter(city_id=int(city_id))

        # 對課程機構進行分頁
        # 嘗試獲取前臺get請求傳遞過來的page引數
        # 如果是不合法的配置引數預設返回第一頁
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        # 這裡指從allorg中取五個出來，每頁顯示5個
        p = Paginator(all_orgs, 2, request=request)
        orgs = p.page(page)

        return render(request, "org-list.html", {
            "all_orgs": orgs,
            "all_citys": all_citys,
            "org_nums": org_nums,
            'city_id':city_id,
        })

前端頁面

<h2>所在地區</h2>
    <div class="more">更多</div>
    <div class="cont">
        <a href="?ct="><span class="{% ifequal city_id '' %}active2{% endifequal %}">全部</span></a>
        {% for city in all_citys %}
            <a href="?city={{ city.id }}"><span class="{% ifequal city.id|stringformat:'i' city_id %}active2{% endifequal %}">{{ city.name }}</span></a>
        {% endfor %}
    </div>

因為city.id是一個int型別，要轉換成字串，再作比較。

 {% ifequal city_id '' %}  如果為空，說明沒有city選中，則“全部”是“active”

（2）類別篩選

 後臺處理

　　　　 # 類別篩選
        category = request.GET.get('ct','')
        if category:
            all_orgs = all_orgs.filter(category=category)

        # 有多少家機構
        org_nums = all_orgs.count()

把org_numsf放到後面，先篩選在統計數量

模板中

<h2>機構類別</h2>
    <div class="cont">
        <a href="?city={{ city_id }}"><span
                class="{% ifequal category '' %}active2{% endifequal %}">全部</span></a>
        <a href="?ct=pxjg&city={{ city_id }}"><span
                class="{% ifequal category 'pxjg' %}active2{% endifequal %}">培訓機構</span></a>
        <a href="?ct=gx&city={{ city_id }}"><span
                class="{% ifequal category 'gx' %}active2{% endifequal %}">高校</span></a>
        <a href="?ct=gr&city={{ city_id }}"><span
                class="{% ifequal category 'gr' %}active2{% endifequal %}">個人</span></a>
    </div>
<h2>所在地區</h2>
    <div class="more">更多</div>
    <div class="cont">
    <a href="?ct={{ category }}"><span
            class="{% ifequal city_id '' %}active2{% endifequal %}">全部</span></a>
    {% for city in all_citys %}
        <a href="?city={{ city.id }}&ct={{ category }}"><span
                class="{% ifequal city_id city.id|stringformat:"i" %}active2{% endifequal %}">{{ city.name }}</span></a>
    {% endfor %}
    </div>

進行城市與分類的聯動:

  • 當選擇全部類別的時候，就只通過當前城市id。
  • 當選擇全部城市的時候，就只通過當前目錄id。
  • 當兩者都選的時候使用&連線。

 （3）課程機構排名篩選

 後臺處理

 按點選量排名，只取前三個

# 熱門課程機構排名
hot_orgs = all_orgs.order_by('-click_nums')[:3]

模板中

<div class="right companyrank layout">
    <div class="head">授課機構排名</div>
    {% for curent_org in hot_orgs %}
    <dl class="des">
        <dt class="num fl">{{ foorloop.counter }}</dt>
        <dd>
            <a href="/company/2/"><h1>{{ curent_org.name }}</h1></a>
            <p>{{ curent_org.address }}</p>
        </dd>
    </dl>
    {% endfor %}
</div>

迴圈時內建變數forloop.counter取當前迴圈到第幾次

 

 （4）學習人數和課程的篩選

在models中新增學習人數和課程數兩個欄位

students = models.IntegerField("學習人數",default=0)
course_nums = models.IntegerField("課程數",default=0)
class CourseOrg(models.Model):
    ORG_CHOICES = (
        ("pxjg", u"培訓機構"),
        ("gx", u"高校"),
        ("gr", u"個人"),
    )
    name = models.CharField('機構名稱',max_length=50)
    desc = models.TextField('機構描述')
    category = models.CharField(max_length=20, choices=ORG_CHOICES, verbose_name=u"機構類別", default="pxjg")
    click_nums = models.IntegerField('點選數',default=0)
    fav_nums = models.IntegerField('收藏數',default=0)
    students = models.IntegerField("學習人數",default=0)
    course_nums = models.IntegerField("課程數",default=0)
    image = models.ImageField('logo',upload_to='org/%Y/%m',max_length=100)
    address = models.CharField('機構地址',max_length=150,)
    city = models.ForeignKey(CityDict,verbose_name='所在城市',on_delete=models.CASCADE)
    add_time = models.DateTimeField(default=datetime.now)

    class Meta:
        verbose_name = '課程機構'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name
CourseOrg

migrate到資料庫

 後臺處理

# 學習人數和課程數篩選
sort = request.GET.get('sort', "")
if sort:
    if sort == "students":
        all_orgs = all_orgs.order_by("-students")
    elif sort == "courses":
        all_orgs = all_orgs.order_by("-course_nums")
class OrgView(View):
    '''課程機構'''

    def get(self, request):
        # 所有課程機構
        all_orgs = CourseOrg.objects.all()

        # 所有城市
        all_citys = CityDict.objects.all()
        # 城市篩選
        city_id = request.GET.get('city','')
        if city_id:
            all_orgs = all_orgs.filter(city_id=int(city_id))

        # 類別篩選
        category = request.GET.get('ct','')
        if category:
            all_orgs = all_orgs.filter(category=category)

        # 熱門課程機構排名
        hot_orgs = all_orgs.order_by('-click_nums')[:3]
        # 學習人數和課程數篩選
        sort = request.GET.get('sort', "")
        if sort:
            if sort == "students":
                all_orgs = all_orgs.order_by("-students")
            elif sort == "courses":
                all_orgs = all_orgs.order_by("-course_nums")
        # 有多少家機構
        org_nums = all_orgs.count()
        # 對課程機構進行分頁
        # 嘗試獲取前臺get請求傳遞過來的page引數
        # 如果是不合法的配置引數預設返回第一頁
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        # 這裡指從allorg中取五個出來，每頁顯示5個
        p = Paginator(all_orgs, 2, request=request)
        orgs = p.page(page)

        return render(request, "org-list.html", {
            "all_orgs": orgs,
            "all_citys": all_citys,
            "org_nums": org_nums,
            'city_id':city_id,
            "category": category,
            'hot_orgs':hot_orgs,
            'sort':sort,
        })
OrgView

前端

 <div class="head">
        <ul class="tab_header">
            <li class="{% if sort == '' %}active{% endif %}"><a href="?sort=students&ct={{ category }}&city={{ city_id }}">全部</a></li>
            <li class="{% if sort == 'students' %}active{% endif %}"><a href="?sort=students&ct={{ category }}&city={{ city_id }}">學習人數 &#8595;</a></li>
            <li class="{% if sort == 'courses' %}active{% endif %}"><a href="?sort=courses&ct={{ category }}&city={{ city_id }}">課程數 &#8595;</a></li>
        </ul>
    </div>

7.6.提交我要學習諮詢

（1）用ModelForm來實現

在organazition目錄下建立forms.py檔案

# organization/forms.py

from django import forms
from operation.models import UserAsk


class UserAskForm(forms.Form):
    '''我要諮詢'''
    class Meta:
        model = UserAsk
        fields = ['name','mobile','course_name']

（2）include路由分發

# MxOnline/urls.py

import xadmin

from django.urls import path,include,re_path

from django.views.generic import TemplateView
from users.views import LoginView,RegisterView,ActiveUserView,ForgetPwdView,ResetView,ModifyPwdView

from organization.views import OrgView
from django.views.static import serve
from MxOnline.settings import MEDIA_ROOT


urlpatterns =
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Django+xadmin打造線上教育平臺（四）

     
 目錄





程式碼

七、授課機構功能
7.1.模板繼承
（1）建立母板
把org-list.html拷貝到templates目錄下，新建base.html,剪下org-list.html內容到裡面


再修改一下靜態檔案的地址（css、就是、image和media）
（2） 



  
 

    


    
    
Django+xadmin打造線上教育平臺（一）

     
 目錄





程式碼

線上演示
 一、前言
開發環境：
　　　　python:  3.6.4
　　　　Django: 2.0.2
後臺管理：xadmin
1.1.專案介紹
系統概括：

系統具有完整的使用者登入註冊以及找回密碼功能，擁有完整個人中心。
個人中心: 修改頭 



  
 

    


    
    
Django+xadmin打造線上教育平臺（十）

     
 目錄





程式碼

十四、xadmin的進階開發
14.1.許可權管理
（1）使用者許可權
超級使用者擁有所有許可權，其它新增的使用者預設沒有任何許可權
進後臺新增一個使用者“Editor1”,勾上“職員狀態”後，這個使用者才可以登入進後臺，預設沒新增許可權的使用者登入到後臺的情 



  
 

    


    
    
Django+xadmin打造線上教育平臺（六）

     
 目錄





程式碼

九、課程章節資訊
9.1.模板和urls
 拷貝course-comments.html 和 course-video.html放入 templates目錄下
先改course-video.html，同樣繼承base.html，然後裡面有屬於自己的樣式，也要保留 



  
 

    


    
    
Django+xadmin打造線上教育平臺（八）

     
 目錄





程式碼

十一、使用者資訊
11.1.個人資訊展示
 （1）新建‘usercenter-bae.html’當母板


{% load staticfiles %}

<!DOCTYPE html>
<html>

<head&g 



  
 

    


    
    
Django+xadmin打造線上教育平臺（七）

     
 目錄





程式碼

十、授課教師
 10.1.講師列表頁
拷貝teacher-list.html和teacher-detail.html到templates目錄下
 先改teacher-list.html，同樣繼承base.html


 （1）urls配置
organaz 



  
 

    


    
    
Django+xadmin打造線上教育平臺（三）

     
 目錄





程式碼

五、使用者註冊
 主要實現功能

使用者輸入郵箱、密碼和驗證碼，點註冊按鈕
如果輸入的不正確，提示錯誤資訊
如果正確，傳送啟用郵件，使用者通過郵件啟用後才能登陸
即使註冊成功，沒有啟用的使用者也不能登陸








5.1.初步檢視
 



  
 

    


    
    
Django+xadmin打造線上教育平臺（九）

     
 目錄





程式碼

十二、首頁和全域性404，500配置
12.1.首頁功能
Course新增一個欄位

is_banner = models.BooleanField('是否輪播',default=False)

CourseOrg新增一個欄位

tag = model 



  
 

    


    
    
Django+xadmin打造線上教育平臺（二）

     
 目錄





程式碼

線上演示
三、xadmin後臺管理
3.1.xadmin的安裝
django2.0的安裝（原始碼安裝方式）：

https://github.com/sshwsfc/xadmin/tree/django2

把zip檔案放到pip目錄下，執行下面命令安裝 



  
 

    


    
    
Django+xadmin打造線上教育平臺（五）

     
 目錄





程式碼

八、課程詳情頁功能的實現
8.1.課程列表
 （1）配置urls
MxOnline/urls中

path("course/", include('course.urls', namespace="course")),

course裡面新建urls.p 



  
 

    


    
    
django+xadmin在線教育平臺（四）

     
 app   數據庫名   左右   sqlite3   pyc   win   data-   navi   前置   3-2 配置表單頁面


必要的該說的，該了解的
前置條件：

你已經學習了前面教程。將項目的文件夾目錄結構，setting配置等修改完畢與我保持一致。

本節通過Django快速的配置一個 



  
 

    


    
    
慕課網學習python+Django+xadmin打造線上教育平臺user app學習總結

     
 
                學習django這個框架也有一段時間了，一開始接觸到這個框架就對這個框架非常的感興趣，所以就去學習了慕課網上的python升級3.6強力Django+殺手級打造線上教育平臺，目前學習完了六個章節，實現了使用者登入，使用者註冊，找回密碼功能，覺得有必要先總結總結之前的學習，然後 



  
 

    


    
    
django+xadmin在線教育平臺（二）

     
 cti   .com   config   Django項目   django   官方下載   不能   ima   相關   老話總是沒錯的，工欲善其事，必先利其器
教你安裝pycharm,mysql,navicat,python相關環境。


windows下搭建開發環境
2-1 pycharm,mys 



  
 

    


    
    
django+xadmin在線教育平臺（七）

     
 fine   定義   頭像   sta   http   origin   upload   ack   naconda   
4-3 新建項目
Python2.7 創建虛擬環境。
mkvirtualenv mxonline2

安裝django
pip install django==1.9.8 


註 



  
 

    


    
    
Django+xadmin打造在線教育平臺（四）

     
 技術   hot   dfa   index   lin   height   東方   邏輯   then   Django+xadmin打造在線教育平臺（四）


 
代碼
github下載
七、授課機構功能
7.1.模板繼承
（1）創建母板
把org-list.html拷貝到templates目錄下，新 



  
 

    


    
    
Python升級3.6 強力Django+殺手級Xadmin打造線上教育平臺 收藏 P

     
  
 
 前往下載 
 
   第1章 課程介紹 介紹課程目標、通過課程能學習到的內容、和系統開發前需要具備的知識 
   
    1-1 專案演示和課程介紹 
    
   第2章 windows下搭建開發環境 介紹專案開發需要安裝的開發軟體、 python虛擬virtualenv和 virtualen 



  
 

    


    
    
Python升級3.6 強力Django+殺手級Xadmin打造線上教育平臺

     
 
                第1章 課程介紹介紹課程目標、通過課程能學習到的內容、和系統開發前需要具備的知識第2章 windows下搭建開發環境介紹專案開發需要安裝的開發軟體、 python虛擬virtualenv和 virtualenvwrapper的安裝和使用、 最後介紹pycharm和navica 



  
 

    


    
    
django+xadmin在線教育平臺（十七）

     
 在線   __date__   書寫   favor   自己   agen   cli   相同   ted   
8-1 課程列表
拷貝課程列表頁到template目錄
創建課程相關的urls.py
Mxonline2/urls.py中聲明包含到course的url中：
    # 課程app的url配置 



  
 

    


    
    
（專案）線上教育平臺（五）

     
 七、找回密碼功能 
1、找回密碼頁面配置 
　　將找回密碼頁面forgetpwd.html前端檔案拷貝到專案的templates資料夾內。 
　　然後修改註冊頁面register.html初始檔案中的靜態檔案訪問路徑，修改成{% static '靜態檔案路徑' %}的形式。 
2、後端找回密碼介面 
2.1  



  
 

    


    
    
Django+xadmin打造在線教育平臺（三）

     
 cor   靜態   實現   span   xadmin   下載   註冊頁面   用戶名   alt   Django+xadmin打造在線教育平臺（三）


 
代碼
github下載
五、用戶註冊
 主要實現功能

用戶輸入郵箱、密碼和驗證碼，點註冊按鈕
如果輸入的不正確，提示錯誤信息
如果正確，發