PureStudy：學科知識分享——我的網站開發全解

時間 2021-04-04

標籤 css html 前端 python 數據庫 django 後端架構框架 ide 欄目網站開發简体版

原文原文鏈接

PureStudy：學科知識分享——我的網站開發全解

項目描述

PureStudy，學科知識分享網站。css

學生可使用這個網站，來瀏覽相應學科的知識點、學習總結，獲取相關的資料。此外，他們能夠選擇上傳文件，保存和分享自身的學習筆記。html

總之，學生們可使用這個網站，來瀏覽所學學科的相應知識點和學習筆記，以獲得加強學習成果的做用。前端

PureStudy將會有幾個核心功能：python

學科與章節的分類導航：學生們能夠在網站找到正確的學科、章節和知識點。數據庫

知識大綱與學習筆記的展現：學生們能夠瀏覽靜態的知識大綱和相應的學習筆記，獲取學科的相應知識與要點。django

知識思惟導圖的展現：學生們能夠觀看大幅的思惟導圖，獲取總體的知識脈絡，瞭解學科的知識點之間的邏輯聯繫。後端

複習總結與考試總結：學生們能夠觀看前輩們的學科複習筆記與考試總結，來加強自身對於學科考試的準備。架構

主要頁面：
框架

思惟導圖：
ide

用戶與需求概述

用戶認知

此網站的主要用戶羣體，是對於諸多學科有明確學習需求的人羣。

其中大多數爲學生，以大學生爲主。由於學生們廣泛有着明確的考試需求，須要經過學科考試或者取得高分，所以會積極的去獲取知識，提高自身的學習效果。

此網站就是爲這些人羣所服務的。網站所提供的主要功能，將致力於提高學生們對於知識點的掌握程度，連貫知識脈絡，創建知識體系。

目標用戶有着如下明確特色：

目標明確：有着肯定的目標和學習需求，不會由於一時而改變。

輔助學習：學生們廣泛有着本身的學習知識來源，好比課堂、教科書，他們並不須要大而全、事無鉅細的知識描述，由於他們在課堂或者教科書裏已經見夠這個了。他們須要的是，對知識點的掌握、對重點的把控、理解知識點之間的聯繫、創建知識體系。所以，網站的做用，主要是輔助他們學習，總結概括邏輯和知識點，幫助學生們獲取更好的學習效果，而非代替課堂和教科書，成爲學生們的一切知識來源。

用戶羣體集中且聯繫密切：學生們，以大學生爲例，集中在大學校園裏學習，平時生活、學習、交流的場所也較爲集中，而且，同一個學校、專業、班級的學生們，廣泛聯繫密切。這一點比社會上的職員們有過之而無不及。此外，學平生日裏的交流和討論，將會有很大一部分，涉及到學科、考試和學科知識。

所學知識點和學科體系重合程度大，變化較少：在大多數學校，同一個專業或相近專業，對於某一學科的學習要求與知識體系，大多重合程度高。大多隻是考試範圍、教科書版本的區別，對於同一知識點、同一學科、同一學科考題，多數區別不大，考試題型也較爲相近。於是，四川的某一大學生，和上海的某一大學生，能夠用同一套網站的學科知識分享，完成對同一學科的知識學習，閱讀知識總結與思惟導圖，並應對考試。於是，這些學科知識，對於這些用戶們而言，具備通用性。此外，大多數學科，或者大學考試科目，相應變化較少。此點能夠查閱不一樣年份的考試試卷得知。某些少數學科，學科重點知識和考試重點，將會發生變化，這點暫不做重點討論。

渴望創建單一學科以外的專業知識體系：這一點暫不是廣泛用戶的廣泛特色，暫且只是做者我的的我的體會與大學總結。但我的以爲它很重要，而且比較引人注目，因此列出來。大多數大學學生，對此有着實際的需求。以學分切割的各個課程，將各個專業的總體知識體系，切割得過於凌亂了，以致於不少學生難以創建總體專業和行業所需的知識體系。

用戶需求

如下其實是產品實際上的需求分析。第一次迭代，將首先知足用戶所須要的核心需求。

核心需求
學生們能夠在網站上展現本身的複習筆記，和一些學習資料。
知識將會以學科、知識點的形式進行構建。
！！核心需求加一：夜間模式。（晚上看，忽然以爲很亮。）

業務流程
用戶經過學科、章節、知識點的分類和標籤進行知識檢索，查找到本身想要的內容
學生經過大綱模式進行簡便、直接的閱讀，能夠在網頁上進行清晰的閱讀
學生們能夠經過大而全的知識導圖圖片，進行整體的複習

額外內容
此外，學生們要能夠經過客服郵件，發送本身的反饋，和送出想要給網站增添的內容
郵件將會由運營直接處理

功能簡要解析

emmm，再貼一遍。

如下其實是產品實際上的需求分析。第一次迭代，將首先知足用戶所須要的核心需求。

額外內容
此外，學生們要能夠經過客服郵件，發送本身的反饋，和送出想要給網站增添的內容
郵件將會由運營直接處理

使用情景

此網站將會主要有兩種使用情景。

平日學習

學生們在平日裏對學科知識進行學習。

考試複習

學生們在考試前的複習階段，對學科知識進行學習。所以，主要以：「時間緊迫，快速創建知識體系，找到重點」，來考慮。

內部代碼邏輯

接下來將會是實現部分。

網站主要以python——Django框架的MVC架構，來進行搭建。

我將內部代碼主要分爲三類：數據類，前端類，邏輯類。

在整體邏輯上，主要是：構建數據庫，構建數據與網頁之間的內部邏輯，構建前端視圖。

其實不麻煩。我也認可，這並非一個很複雜、很難的網站啦。好用就成。也只須要好用。

感興趣的讀者，能夠觀看Django官方中文文檔： https://docs.djangoproject.com/zh-hans/3.0/ ，裏面詳細介紹了我所用到的技術和框架的邏輯。

數據類：

主要創建了五張表。最重要的是Chapter表，這裏面將會存放網站的主要內容。其餘的表都是爲它而服務的。

前端類：

先寫前端類。

以下圖所見，前端主要分爲四個部分：

主要用於學科導航的導航欄；

展現當前學科名，用於章節導航的右側側邊欄；

展現主要學習筆記內容（大綱）的正文部分；

有利於學生構建知識體系，目前放置在最下方，以大圖展現的學科知識思惟導圖部分。

其中，下圖爲主要部分的前端，也就是用戶最經常使用的頁面。此外還有網站的首頁、學科頁面、製做人頁面，這些都是用於網站的導航分類，便於用戶找到本身須要的信息。這些頁面都是基於同一套模板，頁面類似，這裏暫不作討論。

前端主要使用了Bootsrtap技術。並未費太多功夫，感興趣的觀衆，能夠關注Bootstrap官方中文文檔：https://v3.bootcss.com/css/。所用技術並不複雜，都是基礎的前端知識。

前端主要以 Django 的 base.html（模板）爲主。以base.html建立模板，而後各個部分，好比首頁、章節、學科、章節等等，分別使用 {% block %}
{% endblock %} 的部分，放入本身的內容，組成相應的實際網站。

此外，參數以雙括號，相似於{{ chapter.name }}，{{chapter.img}}（chapter爲對象變量名）的方式，進行傳遞。能夠觀看下方的代碼段。

而且，在章節列表等涉及到循環展現的地方，如下列方式進行：

{% for chapter in chapter_list %}
 		<h5><a href="{% url 'chapter' chapter.id %}">{{ chapter.name }}</a></h5>
 {% endfor %}

主要頁面：

思惟導圖：

邏輯類

邏輯類代碼，這裏主要指的是先後端鏈接部分。

也就是將目標數據從數據庫取出來，分類處理，並傳遞到前端網頁。同時，收集前端的表單部分等，將之存儲入數據庫。

PureStudy的第一次迭代版本，邏輯類代碼並不複雜，其主要代碼以下：

def get_chapter(request, chapter_id):
    chapter = Chapter.objects.get(id = int(chapter_id))
    course = chapter.course
    chapter_list = Chapter.objects.filter(course = course)

    all_chapter = Chapter.objects.all()
        # 判斷chaper_id是否爲1或者最後一個
    if chapter.id == 1:
        previous_id = 1
        next_id = 2
        previous_chapter = Chapter.objects.get(id = previous_id)
        next_chapter = Chapter.objects.get(id = next_id)
        previous_text = "當前頁是第一章"
        next_text = "下一篇：" + next_chapter.name

    elif chapter.id == len(all_chapter):
        previous_id = chapter.id-1
        next_id = chapter.id
        previous_chapter = Chapter.objects.get(id = previous_id)
        next_chapter = Chapter.objects.get(id = next_id)
        previous_text = "上一篇：" + previous_chapter.name
        next_text = "當前頁是最後一章"

    # 若是不，則取到日常狀態下的前一篇和後一篇的id
    else:
        previous_id = chapter.id - 1
        next_id = chapter.id + 1
        previous_chapter = Chapter.objects.get(id = previous_id)
        next_chapter = Chapter.objects.get(id = next_id)
        previous_text = "上一篇：" + previous_chapter.name
        next_text = "下一篇：" + next_chapter.name

    # 根據id取出前一篇和後一篇章節的數據
    # previous_chapter = Chapter.objects.get(id = previous_id)
    # next_chapter = Chapter.objects.get(id = next_id)

    return render(request, 'read/chapter.html',{
        'chapter':chapter,
        'chapter_list': chapter_list,
        'course': course,
        'previous_chapter': previous_chapter,
        'next_chapter': next_chapter,
        'previous_text': previous_text,
        'next_text': next_text,
        })

def get_course(request, course_id):
    course = Course.objects.get(id = int(course_id))
    chapter_list = Chapter.objects.filter(course = course)
    leibie = course.leibie
    relat_course_list = Course.objects.filter(leibie = leibie)
    return render(request, 'read/course.html',{
        'course':course,
        'chapter_list':chapter_list,
        'relat_course_list': relat_course_list
        })

關鍵代碼解析

定義數據庫（models.py）:

from django.db import models

# Create your models here.

class Course(models.Model):
    name = models.CharField(max_length = 40, verbose_name = '課程名')
    about = models.CharField(max_length = 1000, default='', blank=True,
        null=True, verbose_name='課程描述')
    leibie = models.CharField(max_length = 40, verbose_name='課程類別')

    def __str__(self):
        return self.name

class Maker(models.Model):
    name = models.CharField(max_length = 40, verbose_name = '製做者')
    school = models.CharField(max_length = 40, default='', blank=True,
        null=True, verbose_name='所屬學校')

    def __str__(self):
        return self.name

class Chapter(models.Model):
    name = models.CharField(max_length = 40, verbose_name = '章節名')
    about = models.CharField(max_length = 1000, default='', blank=True,
        null=True, verbose_name='章節描述')
    text = models.TextField(verbose_name='章節文本')
    link = models.TextField(default='', blank=True,
        null=True, verbose_name='章節連接')
    course = models.ForeignKey(Course, on_delete = models.CASCADE)
    maker = models.ForeignKey(Maker, on_delete = models.CASCADE)
    img = models.ImageField(upload_to='img', verbose_name='思惟導圖')
    img_name = models.CharField(max_length = 40,  default='', blank=True,
        null=True, verbose_name='導圖名')

    def __str__(self):
        return self.name

class Img(models.Model):
    img = models.ImageField(upload_to='img', verbose_name='圖像')
    name = models.CharField(max_length = 40,  default='', blank=True,
        null=True, verbose_name='圖像名')
   

    def __str__(self):
        return self.name

邏輯處理（views.py）:

from django.shortcuts import render
from read.models import Chapter, Course
# Create your views here.
def index(request):
    return render(request, 'read/index.html')

def read(request):
    return render(request, 'read/read.html')


def get_chapter(request, chapter_id):
    chapter = Chapter.objects.get(id = int(chapter_id))
    course = chapter.course
    chapter_list = Chapter.objects.filter(course = course)

    all_chapter = Chapter.objects.all()
        # 判斷chaper_id是否爲1或者最後一個
    if chapter.id == 1:
        previous_id = 1
        next_id = 2
        previous_chapter = Chapter.objects.get(id = previous_id)
        next_chapter = Chapter.objects.get(id = next_id)
        previous_text = "當前頁是第一章"
        next_text = "下一篇：" + next_chapter.name

    elif chapter.id == len(all_chapter):
        previous_id = chapter.id-1
        next_id = chapter.id
        previous_chapter = Chapter.objects.get(id = previous_id)
        next_chapter = Chapter.objects.get(id = next_id)
        previous_text = "上一篇：" + previous_chapter.name
        next_text = "當前頁是最後一章"

    # 若是不，則取到日常狀態下的前一篇和後一篇的id
    else:
        previous_id = chapter.id - 1
        next_id = chapter.id + 1
        previous_chapter = Chapter.objects.get(id = previous_id)
        next_chapter = Chapter.objects.get(id = next_id)
        previous_text = "上一篇：" + previous_chapter.name
        next_text = "下一篇：" + next_chapter.name

    # 根據id取出前一篇和後一篇章節的數據
    # previous_chapter = Chapter.objects.get(id = previous_id)
    # next_chapter = Chapter.objects.get(id = next_id)

    return render(request, 'read/chapter.html',{
        'chapter':chapter,
        'chapter_list': chapter_list,
        'course': course,
        'previous_chapter': previous_chapter,
        'next_chapter': next_chapter,
        'previous_text': previous_text,
        'next_text': next_text,
        })

def get_course(request, course_id):
    course = Course.objects.get(id = int(course_id))
    chapter_list = Chapter.objects.filter(course = course)
    leibie = course.leibie
    relat_course_list = Course.objects.filter(leibie = leibie)
    return render(request, 'read/course.html',{
        'course':course,
        'chapter_list':chapter_list,
        'relat_course_list': relat_course_list
        })

chapter.html網頁代碼：

{% extends 'read/base.html' %}

{% block title %}{{course.name}}{% endblock title %}
{% block page_header %}
    <h2>使用PureStudy，學習{{course.name}}
    </h2>
{% endblock page_header %}

{% block main %}
       <h2>{{course.name}}</h2>
       <p>{{course.about}}</p>
       <h3>課程章節</h3>
            
            {% for chapter in chapter_list %}
            <h5><a href="{% url 'chapter' chapter.id %}">{{ chapter.name }}</a></h5>
            {% endfor %}
{% endblock main %}

{% block side %}
       <h3>與之相關的課程：</h3>
       {% for relat_course in relat_course_list %}
       <h4><a href="{% url 'course' relat_course.id %}">{{ relat_course.name }}</a></h4>
       {% endfor %}
{% endblock side %}