網站開發（周五）：項目前端頁面開發（實戰）
阿新 • • 發佈：2019-02-05
als method true ann 網站開發 sca get 1.0 ase
第一、前端基礎簡介
前端網頁：根據此前項目需求分析可知，我們需要開發網站首頁、文章分類頁、搜索頁、正文頁、標簽頁，而一個最基本網頁模版有三部分，網頁頂部導航條、網頁中部主體、網頁底部，其中頂部和底部布局固定，中部展示內容每張網頁不同。
網頁代碼:我們知道，網頁模板的基本代碼的頂部和底部相同，主要中部主體在變化。
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mysite2019</title> </head> <body> <div>頂部</div> <div>中部</div><div>底部</div> </div> </body> </html>
模板繼承：我們把所有網頁相同的代碼單獨提取出來放在 base.html頁面裏，然後在代碼不同的位置，也就是主體那裏用模板標簽{% block content %} {% endblock %}替換。
templates/base.html #父模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mystie2019</title> </head> <body> <div>頂部</div> {% block content %} {% endblock %}<div>底部</div> </div> </body> </html>
網站首頁：在實現首頁模板的時候，我們通過下面的代碼實現，組合成一個完整的首頁。{% extends "base.html" %} 的意思是繼承 base.html頁面的代碼，且這個代碼一定要放頁面的第一行。兩個頁面裏都有代碼{% block xxx %}{% endblock %} ，代碼{% block xxx %}{% endblock %} 裏的xxx可以自由命名，這個代碼意思是告訴模板引擎：這個位置我要預留給別人放東西的。一般是父模版基礎代碼被引用到子模板中，結合子模板的主體內容，形成一個網整網頁，有效解決代碼冗余、代碼重復修改。
templates/index.html #子模板 {% extends "base.html" %} {% block content %} <div>中部</div> {% endblock %}
網頁樣式：{% block %} 標簽非常有用，一般來說，基礎模板中的 {% block %} 標簽越多越好，用起來也會更靈活。例如，子模板要多引用一個CSS樣式文件，這個樣式只需要應用在當前頁面。我們可以在base.html模板裏多加一個{% block css %} {% endblock %}標簽,然後在子模板頁面裏加以引用，如此一來，這個CSS就只在當前頁面生效。
{% block css %}
#CSS樣式文件路徑
<link href=‘{% static "css/style.css" %}‘ type=‘text/css‘ />
{% endblock %}
第二、網頁需求分析
結合此前的項目需求分析，我們需要實現五個頁面的展現。網站首頁、文章分類列表頁、搜索列表頁、標簽列表頁、文章內容展示頁，這裏，我們增加一個單頁面（網站聲明）。其中，文章分類列表頁、搜索列表頁、標簽列表頁這三個頁面展示結構都一樣，我們只需要一個模板頁面即可。所以說我們真正需要實現的只有4個頁面，這四個頁面分別對應前端模板裏的首頁(index.html)、列表頁（list.html）、內容頁(show.html)、單頁(page.html)。
1、我們把前端設計師做好的靜態模板static移動到mysite2019根目錄裏，然後把index.html、list.html、show.html、page.html四個頁面復制到項目下templates目錄裏（之前做測試時templates目錄裏的index.html刪除掉）。
2、通過觀察，我們發現四個頁面的頭部和尾部相同，只有中間主體部分不同，通過繼承，我們把相同部分的代碼放到base.html。
templates/base.html #父模板
{% load staticfiles %} <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-dns-prefetch-control" content="on"/> <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-title" content="Hydra,Hacker學院"> <title>Hacker學院</title> <link rel=‘stylesheet‘ id=‘bootstrap-css‘ href=‘{% static "css/bootstrap.min.css" %}‘ type=‘text/css‘ media=‘all‘/> <link rel=‘stylesheet‘ id=‘fontawesome-css‘ href=‘{% static "css/font-awesome.min.css" %}‘ type=‘text/css‘ media=‘all‘/> <link rel=‘stylesheet‘ id=‘stylesheet-css‘ href=‘{% static "css/style.css" %}‘ type=‘text/css‘ media=‘all‘/> <link rel=‘stylesheet‘ id=‘raxus-css‘ href=‘{% static "css/raxus.css" %}‘ type=‘text/css‘ media=‘all‘/> <link rel=‘stylesheet‘ id=‘open-social-style-css‘ href=‘{% static "css/os.css" %}‘ type=‘text/css‘ media=‘all‘/> <meta name=‘robots‘ content=‘index,follow‘/> <meta name="keywords" content="網絡安全、網絡攻防、網絡滲透"> <meta name="description" content="追蹤黑客前沿咨詢,速遞最新、最猛、最價值的黑客科技資訊！"> </head> <body class="home blog site-layout-2"> <!-- 頂部 --> <header class="fix-wrap" id="fix-wrap"> <div class="fix-main clearfix pr" id="fix-main" _hover-ignore="1"><a href="/" class="index-logo"> <img src="{% static "picture/logo2.png" %}" alt="Hacker學院"></a> <nav class="nav fl"> <ul id="fix-list" class="fix-list clearfix"> <li id="menu-item-24086" class="menu-item"><a href="/">首頁</a></li> {% for category in allcategory %} <li id="menu-item-117720" class="menu-item"> <a href="{% url ‘index‘ %}list-{{ category.id }}.html">{{ category.name }}</a></li> {% endfor %} <li id="menu-item-24086" class="menu-item"><a href="/about/">網站聲明</a></li> </ul> </nav> <form method="get" class="index-search hidden-xs" action="/s/"> <input class="text" name="search" type="text" placeholder="輸入關鍵字" value=""> <button class="submit" type="submit"><i class="fa fa-search"></i></button> </form> </div> </header> {% block content %} {% endblock %} <!-- 底部 --> <footer class="footer"> <div class="copyright"> ? 2010- 2019 · All Rights Reserved · <a href="https://www.cnblogs.com/linlei1234/">博客園</a> · <a href="http://www.miibeian.gov.cn" target="_blank">粵ICP備27022490號</a> 版權所有 ? 博客園 </div> </footer> <script src="{% static "js/bundle.js" %}"></script> <script type="text/javascript" src="{% static "js/view-history.js" %}"></script> <script type=‘text/javascript‘ src="{% static "js/push.js" %}"></script> <script type=‘text/javascript‘ src=‘{% static "js/jquery.min.js" %}‘></script> <script type=‘text/javascript‘ src=‘{% static "js/bootstrap.min.js" %}‘></script> <script type=‘text/javascript‘ src=‘{% static "js/raxus-slider.min.js" %}‘></script> <script type=‘text/javascript‘ src=‘{% static "js/loader.js" %}‘></script> <script type=‘text/javascript‘ src=‘{% static "js/bj-lazy-load.min.js" %}‘></script> <script type=‘text/javascript‘ src=‘{% static "js/os.js" %}‘></script> </body> </html>
3、index.html、list.html、show.html、page.html四個頁面，刪除底部底部相同代碼，剩下中部主體代碼，再在四個子模板基礎上繼承父模板，形成完整頁面。
templates/index.html、list.html、show.html、page.html
{% extends "base.html" %}
{% block content %} #中部主體代碼 {% endblock %}
4、其中list.html和show.html這兩個頁面的右側部分和index.html右側除“熱門文章排行"部分之外，樣式布局都一樣，我們將其提取，放到right.html頁面裏，原來的位置我們用下面的代碼{% include ‘right.html‘ %}替代，代表在此位置引入right.html代碼。
{% load staticfiles %} #引入樣式文件
<section class="widget post-right-item">
<h4 class="post-right-title">熱門推薦</h4>
<ul class="post-hot clearfix">
{% for k in remen %}
<li>
<div class="img">
<a href="{% url ‘index‘ %}show-{{ k.id }}.html" title="{{ k.title }}">
<img src="{% url ‘index‘ %}media/{{ k.img }}" srcset="{% url ‘index‘ %}media/{{ k.img }}" alt="{{ k.title }}"
class="wp-post-image" width="120" height="80"/>
</a>
</div>
<div class="text">
<a href="{% url ‘index‘ %}show-{{ k.id }}.html" title="{{ k.title }}"
target="_blank">{{ k.title }}</a>
</div>
</li>
{% endfor %}
</ul>
</section>
</section>
<section class="widget post-right-item"><h4 class="post-right-title">所有標簽</h4>
<div class="tags">
{% for tag in tags %}
<a href="{% url ‘index‘ %}tag/{{ tag.name }}">{{ tag.name }}</a>
{% endfor %}
</div>
</section>
</section><!-- /關註我們 -->
<div class="post-right-item">
<h4 class="post-right-title">關註我們</h4>
<div class="wid-about">
<p>博主微信，歡迎交流！</p>
<img src="{% static "picture/weixin.jpg" %}" alt="微信二維碼" width="160" height="160">
</div>
<div class="wid-about">
<p><strong>聯系方式:</strong></p>
<p>Phone: 15622333821</p>
<p>Email：[email protected]</p>
</div>
</div>
5、修改base.html頁面，引入樣式文件，形成最終模板（點擊下載）。
第三、修改配置文件
1、在mysite2019/urls.py，給六個頁面都設置一個URL，並添加別名。
2、在blog/views.py，寫六個視圖函數，與mysite2019/urls.py文件裏的六個url一一對應。
from django.shortcuts import render from blog.models import Category,Banner, Article, Tag, Link from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger #優化代碼，減少冗余 def global_variable(request): allcategory = Category.objects.all() remen = Article.objects.filter(tui__id=2)[:6] tags = Tag.objects.all() return locals() #首頁 def index(request): banner = Banner.objects.filter(is_active=True)[0:4] tui = Article.objects.filter(tui__id=1)[:3] allarticle = Article.objects.all().order_by(‘-id‘)[0:6] hot = Article.objects.all().order_by(‘views‘)[:10] link = Link.objects.all() return render(request, ‘index.html‘, locals()) #列表頁 def list(request,lid): list = Article.objects.filter(category_id=lid) cname = Category.objects.get(id=lid) page = request.GET.get(‘page‘) paginator = Paginator(list, 5) try: list = paginator.page(page)#獲取當前頁碼的記錄 except PageNotAnInteger: list = paginator.page(1)#如果用戶輸入的頁碼不是整數時,顯示第1頁的內容 except EmptyPage: list = paginator.page(paginator.num_pages)#如果用戶輸入的頁數不在系統的頁碼列表中時,顯示最後一頁的內容 return render(request, ‘list.html‘, locals()) #內容頁 def show(request,sid): show = Article.objects.get(id=sid) hot = Article.objects.all().order_by(‘?‘)[:10] previous_blog = Article.objects.filter(created_time__gt=show.created_time,category=show.category.id).first() netx_blog = Article.objects.filter(created_time__lt=show.created_time,category=show.category.id).last() show.views = show.views + 1 show.save() return render(request, ‘show.html‘, locals()) #標簽頁 def tag(request, tag): list = Article.objects.filter(tags__name=tag) tname = Tag.objects.get(name=tag) page = request.GET.get(‘page‘) paginator = Paginator(list, 5) try: list = paginator.page(page) # 獲取當前頁碼的記錄 except PageNotAnInteger: list = paginator.page(1) # 如果用戶輸入的頁碼不是整數時,顯示第1頁的內容 except EmptyPage: list = paginator.page(paginator.num_pages) # 如果用戶輸入的頁數不在系統的頁碼列表中時,顯示最後一頁的內容 return render(request, ‘tags.html‘, locals()) # 搜索頁 def search(request): ss=request.GET.get(‘search‘) list = Article.objects.filter(title__contains=ss) page = request.GET.get(‘page‘) paginator = Paginator(list, 10) try: list = paginator.page(page) # 獲取當前頁碼的記錄 except PageNotAnInteger: list = paginator.page(1) # 如果用戶輸入的頁碼不是整數時,顯示第1頁的內容 except EmptyPage: list = paginator.page(paginator.num_pages) # 如果用戶輸入的頁數不在系統的頁碼列表中時,顯示最後一頁的內容 return render(request, ‘search.html‘, locals()) # 關於我們 def about(request): return render(request, ‘page.html‘,locals())
3、打開mysite2019/settings.py，找到TEMPLATES，在裏面添加索引代碼。
至此，網站前端後臺均創建完畢！
接下來，對網站進行運行測試。
網站開發（周五）：項目前端頁面開發（實戰）