使用django開發一個上線標準的mooc網站（十一）

02-05

1.HttpResponseRedirect

from django.http import HttpResponseRedirectnnclass LogoutView(View):n """n 用戶登出n """n def get(self, request):n logout(request)n return HttpResponseRedirect(reverse("index"))n # 參數既可以使用完整的url，也可以是絕對路徑。所以需要通過reverse()將命名空間轉換成絕對路徑n

2.補全首頁功能

前端頁面

{% extends base.html %}n{% block title %}公開課列表 - MOOC在線網{% endblock %}n{% load staticfiles %}nn{% block custom_bread %}n{% endblock %}nn{% block custum_js %}n <script type="text/javascript" src="{% static js/index.js %}"></script>n{% endblock %}nn{% block content %}nn <div class="banner">nttt<div class="wp">ntttt<div class="fl">nttttt<div class="imgslide">ntttttt<ul class="imgs">n {% for banner in all_banners %}n <li>n <a href="{{ banner.url }}">n <img width="1200" height="478" src="{{ MEDIA_URL }}{{ banner.image }}" />n </a>n </li>n {% endfor %}ntttttt</ul>nttttt</div>nttttt<div class="unslider-arrow prev"></div>nttttt<div class="unslider-arrow next"></div>ntttt</div>nntttt</div>nnnttt</div>nnnt<section>ntt<div class="wp">nttt<ul class="feature">ntttt<li class="feature1">nttttt<img class="pic" src="{% static images/feature1.png %}"/>nttttt<p class="center">專業權威</p>ntttt</li>ntttt<li class="feature2">nttttt<img class="pic" src="{% static images/feature2.png %}"/>nttttt<p class="center">課程最新</p>ntttt</li>ntttt<li class="feature3">nttttt<img class="pic" src="{% static images/feature3.png %}"/>nttttt<p class="center">名師授課</p>ntttt</li>ntttt<li class="feature4">nttttt<img class="pic" src="{% static images/feature4.png %}"/>nttttt<p class="center">數據真實</p>ntttt</li>nttt</ul>ntt</div>nt</section>nnnt<section>ntt<div class="module">nttt<div class="wp">ntttt<h1>公開課程</h1>ntttt<div class="module1 eachmod">nttttt<div class="module1_1 left">ntttttt<img width="228" height="614" src="{% static images/module1_1.jpg %}"/>ntttttt<p class="fisrt_word">名師授課<br/>專業權威</p>ntttttt<a class="more" href="{% url course:course_list %}">查看更多課程 ></a>nttttt</div>nttttt<div class="right group_list">ntttttt<div class="module1_2 box">nttttttt<div class="imgslide2">ntttttttt<ul class="imgs">n {% for banner_course in banner_courses %}n <li>n <a href="{% url course:course_detail banner_course.id %}">n <img width="470" height="300" src="{{ MEDIA_URL }}{{ banner_course.image }}" />n </a>n </li>n {% endfor %}nntttttttt</ul>nttttttt</div>nttttttt<div class="unslider-arrow2 prev"></div>nttttttt<div class="unslider-arrow2 next"></div>ntttttt</div>n {% for course in courses %}n <div class="module1_{{ forloop.counter|add:2 }} box">n <a href="{% url course:course_detail course.id %}">n <img width="233" height="190" src="{{ MEDIA_URL }}{{ course.image }}"/>n </a>n <div class="des">n <a href="{% url course:course_detail course.id %}">n <h2 title="{{ course.name }}">{{ course.name }}</h2>n </a>n <span class="fl">難度：<i class="key">{{ course.get_degree_display }}</i></span>n <span class="fr">學習人數：{{ course.students }}</span>n </div>n <div class="bottom">n <span class="fl" title="{{ course.course_org.name }}">{{ course.course_org.name }}</span>n <span class="star fr">{{ course.fav_nums }}</span>n </div>n </div>n {% endfor %}nn </div>ntttt</div>nttt</div>ntt</div>nt</section>nt<section>ntt<div class="module greybg">nttt<div class="wp">ntttt<h1>課程機構</h1>ntttt<div class="module3 eachmod">nttttt<div class="module3_1 left">ntttttt<img width="228" height="463" src="/static/images/module3_1.jpg"/>ntttttt<p class="fisrt_word">名校來襲<br/>權威認證</p>ntttttt<a class="more" href="org-list.html">查看更多機構 ></a>nttttt</div>nttttt<div class="right">ntttttt<ul>n {% for org in course_orgs %}n <li class="{% if forloop.counter|divisibleby:5 %}five{% endif %}">n <a href="{% url org:org_home org.id %}">n <div class="company">n <img width="184" height="100" src="{{ MEDIA_URL }}{{ org.image }}"/>n <div class="score">n <div class="circle">n <h2>{{ org.tag }}</h2>n </div>n </div>n </div>n <p><span class="key" title="{{ org.name }}">{{ org.name }}</span></p>n </a>n </li>n {% endfor %}ntttttt</ul>nttttt</div>ntttt</div>nttt</div>ntt</div>nt</section>nn{% endblock %}n

後台代碼

class IndexView(View):n # 網站首頁n def get(self, request):n # 取出輪播圖n # print 1/0 # 500錯誤測試語句n all_banners = Banner.objects.all().order_by(index)n courses = Course.objects.filter(is_banner=False)[:6]n banner_courses = Course.objects.filter(is_banner=True)[:3]n course_orgs = CourseOrg.objects.all()[:15]n return render(request, index.html, {n all_banners:all_banners,n courses:courses,n banner_courses:banner_courses,n course_orgs:course_orgs,n })n

3.注意新學習到的幾個Django模板中的用法：

{% for org in course_orgs %}n <li class="{% if forloop.counter|divisibleby:5 %}five{% endif %}">n ...n{% endfor %}nn{% for course in courses %}n <div class="module1_{{ forloop.counter|add:2 }} box">n ...n{% endfor %}n

4.修改LoginView

class LoginView(View):n def get(self, request):n return render(request, "login.html", {})n def post(self, request):n login_form = LoginForm(request.POST)n # 這裡要注意LoginForm中的username,password定義要與request.POST中的一致,與html中的name一致n if login_form.is_valid():n user_name = request.POST.get("username", "")n pass_word = request.POST.get("password", "")n user = authenticate(username=user_name, password=pass_word)n if user is not None:n if user.is_active:n login(request, user)n return HttpResponseRedirect(reverse("index"))n # 原來是return render(request, "login.html", {})頁面會出錯n else:n return render(request, "login.html", {"msg": "用戶未激活!"})n else:n return render(request, "login.html", {"msg": "用戶名或密碼錯誤!"})n else:n return render(request, "login.html", {"login_form":login_form})n

5.404和500頁面

前端

404.htmln<!DOCTYPE html>n<html>n{% load staticfiles %}n<head>nt<meta charset="UTF-8">nt<title>404</title>nt<link rel="stylesheet" type="text/css" href="{% static css/reset.css %}">nt<link rel="stylesheet" type="text/css" href="{% static css/animate.css %}">nt<link rel="stylesheet" type="text/css" href="{% static css/style.css %}">nt<script type="text/javascript" src="{% static js/jquery.min.js %}"></script>n</head>n<body class="bg404 errorpage">n<section>nt<div class="wp">ntt<div class="cont">nttt<img src="{% static images/pic404.png %}"/>nttt<br/><br/><br/><br/>nttt<p>wow~這個頁面被外星人搶走了~</p>nttt<br/>nttt<span>Wow~ this page was the alien took ~</span>ntt</div>nt</div>n</section>n</body>n</html>nn500.htmln<!DOCTYPE html>n<html>n{% load staticfiles %}n<head>nt<meta charset="UTF-8">nt<title>500</title>nt<link rel="stylesheet" type="text/css" href="{% static css/reset.css %}">nt<link rel="stylesheet" type="text/css" href="{% static css/animate.css %}">nt<link rel="stylesheet" type="text/css" href="{% static css/style.css %}">nt<script type="text/javascript" src="{% static js/jquery.min.js %}"></script>n</head>n<body class="bg503 errorpage">n<section>nt<div class="wp">ntt<div class="cont">nttt<div class="fl error_cut"><img src="{% static images/pic503.png %}"/></div>nttt<div class="fr error_cut">ntttt<img src="{% static images/word503.png %}"/>ntttt<br/><br/><br/><br/><br/><br/>ntttt<p>伺服器錯誤，請稍後重新刷新。</p>nttt</div>ntt</div>nt</div>n</section>n</body>n</html>n

後台配置：

（1）url

...nurlpatterns = [n...n]nn# 全局404頁面配置nhandler404 = users.views.pag_not_foundn# 全局500頁面配置nhandler500 = users.views.page_errorn

（2）視圖類

def pag_not_found(request):n # 全局404處理函數n from django.shortcuts import render_to_responsen response = render_to_response(404.html, {})n response.status_code = 404n return responsennndef page_error(request):n # 全局500處理函數n from django.shortcuts import render_to_responsen response = render_to_response(500.html, {})n response.status_code = 500n return responsen

（3）settings

...nDEBUG = FalsennALLOWED_HOSTS = [*]n...nnSTATIC_ROOT = os.path.join(BASE_DIR, static)n# DEBUG = False時STATICFILES_DIRS失效，靜態路徑由http伺服器負責解析，解決方法為增加上邊的STATIC_ROOTn

測試：

class IndexView(View):n # 網站首頁n def get(self, request):n # 取出輪播圖n print 1/0 # 500錯誤測試語句n all_banners = Banner.objects.all().order_by(index)n courses = Course.objects.filter(is_banner=False)[:6]n banner_courses = Course.objects.filter(is_banner=True)[:3]n course_orgs = CourseOrg.objects.all()[:15]n return render(request, index.html, {n all_banners:all_banners,n courses:courses,n banner_courses:banner_courses,n course_orgs:course_orgs,n })n