web開發-Django博客系統

項目界面圖片預覽

項目代碼github地址

項目完整流程

項目流程：

1 搞清楚需求（產品經理）

  (1) 基於用戶認證組件和Ajax實現登陸驗證(圖片驗證碼)

  (2) 基於forms組件和Ajax實現註冊功能

  (3) 設計系統首頁（文章列表渲染）

  (4) 設計我的站點頁面
        主要是orm查詢

  (5) 文章詳情頁

  (6) 實現文章點贊功能

  (7) 實現文章的評論
      －－－文章的評論
      －－－評論的評論

  (8) 富文本編輯框和防止xss攻擊

  (9) 密碼修改

2 設計表結構
    用戶信息表
    我的站點表
    我的文章分類表
    文章標籤
    文章表
    點贊表
    評論表

    文章和標籤多對多關係表

  

3 按着每個功能分別進行開發
  
4 功能測試

5 項目部署上線

1、建立項目和數據遷移

步驟

一、由於user_info表繼承了Django的user，須要在setting裏面加入AUTH_USER_MODEL=‘blog.user_info’

二、設置數據庫

三、開始數據遷移

相關命令

數據庫

管理員運行cmd

net start mysql

建立數據庫

create database blog；

python

python  manage.py  makemigrations

python  manage.py migrate

2、登錄功能

基於用戶認證組件和Ajax實現登陸驗證(圖片驗證碼)

要點總結：

一、利用PIL模塊生成驗證碼圖片

二、利用IO模塊調用內存空間，提升驗證碼圖片的生成和獲取效率

三、保存當前驗證碼，存入session

四、刷新驗證碼，在請求連接末尾加？，即刷新

建立超級用戶命令，以便於操做

python36  manage.py  createsuperuser

優化代碼和用戶體驗

一、清空上次錯誤信息，

二、解耦驗證碼函數，單首創建工具包utils，放置獲取驗證碼函數

提升要求，插入滑動驗證碼

利用SDK模塊 www.geetest.com   極驗滑動驗證碼官網

須要social-auth-app-django模塊配合

3、註冊功能

基於forms的註冊頁面

一、建立myforms組件

二、forms組件渲染註冊頁面，auto_id，頭像另外添加

四、默認頭像設置，點擊頭像打開選擇圖片框（即點擊input）隱藏input框

5--頭像預覽：
   1 獲取用戶選中的文件對象 $()[0].files[0]

        change事件

   2 獲取文件對象的路徑 new FileReader（）
   3 修改img的src屬性 ，src=文件對象的路徑

怎麼設置頭像選擇路徑？

       render異步---因此要這樣處理（reader.onload=function(){   顯示圖像的代碼    }）

Ajax發送註冊信息

一、按鈕點擊事件

二、須要傳輸文件對象，要用new FormData

FormData對象處理數據

三、優化formData的數據sarializeArray 提取form表單的數據，整理成一個數組

四、顯示錯誤信息，$.each循環錯誤msg，1先清空，2錯誤的變成紅色框

五、錯誤信息改成中文

六、局部鉤子和全局鉤子

七、__all__的錯誤信息的處理

error_messages 的字段大全？

八、數據校驗經過後，1模板中，直接location跳轉、二、在視圖中，生成用戶記錄，

九、filefield字段和imagefield字段

media配置

一、關於對靜態文件的區分

/static/            JS css img

/media/         用戶上傳的文件

二、media配置

使用media的好處----

默認頭像路徑若是是空的判斷，設置成默認頭像

三、media_url配置

瀏覽器如何能直接訪問到media中的數據


settings.py:
   MEDIA_URL="/media/"

urls.py:

from django.views.static import serve

   # media配置:
   re_path(r"media/(?P<path>.*)$",serve,{"document_root":settings.MEDIA_ROOT})

註冊用戶代碼優化

去除重複代碼邏輯

利用extar={}傳入頭像值

        

4、系統首頁

頁面設計

頭部導航

登錄以後顯示用戶名

添加登錄頭像

主頁文章的渲染

admin的使用，

admin（不是必需的）:
    Django內部的一個組件：後臺數據管理組件（web頁面）

    超級用戶登錄才能使用

python manage.py createsuperuser    針對用戶認證組件對應的用戶表

admin註冊：

    在app下的admin.py中
   admin.site.register(models.UserInfo)

錄入文章

注意：在用戶註冊後，就應該生成相應的站點博客，須要一個頁面來註冊博客站點

遺留：沒有設置帳戶登錄有效時間

渲染

一、從數據庫去除數據

二、標題，直接取出title

      頭像，文章對應的user的avatar ，路徑前加上media，限制圖片大小

      摘要，直接取出desc，bootstrap用法  media-left  和media-right

      發佈信息，發佈者    &nbsp:  發佈時間（修改時區）  &nbsp；評論；點贊   設置樣式

提醒：樣式文件依然不能徹底加載，把文件內容複製到了另外一個文件中，從新引入，才生效了

緣由：瀏覽器首先會加載以前嚇到到本地的緩存，若是修改的樣式文件沒有生效，要首先去瀏覽器的設置---->高級---->清除瀏覽數據---->清除數據

體會：感受數據庫存儲，前端的搭配，Django的渲染，是如此的美妙，

5、我的站點頁面

1，我的站點url，視圖

二、判斷是否存在user，用來跳轉到用戶站點

三、orm查詢，跨表和分組查詢

分類

標籤

日期

注意：Django數據查詢好渣，要練

日期的分組查詢  extra 和date_format 和   TruncMonth

四、渲染

五、過濾跳轉

路由設置有名分組，

模板根據分組設置路徑

視圖從路徑獲得的分組名， 查詢數據庫數據

渲染到主頁

6、文章詳情頁

代碼優化，函數複用，模板繼承，模板能直接接受字典數據context

templatetags自定義標籤

register.inclusion_tag   樣式和數據結合成一個總體

文章的渲染

        文章字符串轉義（排版）

       safe

       xss攻擊

7、點贊

綁定事件，經過判斷類名得到布爾值

ajax發送的後臺

去除文章ID、布爾值、在request.user.pk 中獲得登錄用戶，即點贊者的id

添加到點贊記錄表中

在文章表中同步點贊或者反對值，用到 F查詢自加

根據返回狀態，前端顯示提示消息

點贊代碼優化

8、評論

根評論：對文章的評論

            子評論：對評論的評論
            

            111
                444
                   555
            222
            333


            Comment

            nid   user_id  article_id    content      parent_comment_id(null=True)
             1      1          1            111              null
             2      2          1            222              null
             3      3          1            333              null
             4      4          1            444                1 
             5      5          1            555                4

實現流程

60、搭建樣式

6一、填寫評論--->ajax事件提交到後端---->提取---->建立到數據庫---->清空評論框

6二、顯示評論 ---render顯示---->提取數據對象--->文章詳情頁的視圖中提取----->渲染樣式forloop.counter計數顯示樓層

6三、顯示評論---ajax顯示---->提交後，視圖中提取，並返回--->從響應返回值裏面拿數據----> 視圖中提取建立時間（格式化）、評論內容、評論人、--->創建字符串標籤(要用ex6語法，不用加號)---->添加到ul中

6四、回覆按鈕事件---獲取焦點---賦文本值（@此評論的評論者）

6五、提交子評論---pid賦值---自定義屬性值（此評論的ID）--->處理content（換行符，切片）----重置pid

6六、render顯示子評論---

6七、ajax顯示子評論----

6八、評論樹---遞歸，效率低----- >新方式----->

7四、事務操做，模塊transaction

7五、發送郵件----模塊------優化速度---開線程

9、後臺管理

7六、後臺設計----文版編輯器kindediditor---文件上傳----uploadJson----extraFileUploadParams（帶cs_token參數）---filePostName (指定傳輸的文件名字)---下載到本地服務器---視圖返回路徑，放在編輯器裏

80、文章摘要的保存

---一、列表截取----->二、有樣式以後，亂套---截取純文本才能夠---三、bs4—beautifulSoup------四、獲取文本

---五、防護xss攻擊---過濾標籤

10、修改密碼

利用auth模塊的user對象的方法check_password驗證密碼，set_password修改密碼

11、要點記錄（按照文件目錄的順序）

         一、templates下的mytags--->自定義標籤
             # inclustion_tag中引入模板，將數據和模板綁定在了一塊兒
             效果：左側和頂部樣式和我的站點同樣，使用模板繼承，自定義標籤來複用代碼，而且使樣式和數據一體
        
         二、獲取隨機驗證碼
             一、相關模塊
                 from PIL import Image, ImageDraw, ImageFont  生成圖片和在圖片上添加文字，噪點噪線
                 from io import BytesIO 調用內存空間
                 import random
             二、生成的驗證碼保存在session中，防止各個瀏覽器用戶衝突
                 request.session['valid_code_str'] = valid_code_str
         三、模型層
             一、定義用戶表，給系統自帶的auth表添加本身的字段
                 相關模塊from django.contrib.auth.models import AbstractUser 須要繼承這個類

            二、打印真個對象時，顯示標題名，可自定義
                 def __str__(self):
                     return self.title
             三、聯合惟一
                     class Meta:
                         unique_together = [
                             ('article', 'tag'),
                         ]
         四、forms組件
             一、檢驗字段
             二、鉤子
                 cleaned_data 校驗完的數據
                 __all__全局錯誤名

                全局鉤子
                 局部鉤子
             三、相關模塊
                 from django.forms import widgets  添加渲染到class
                 from django.core.exceptions import ValidationError  用來生成 提示錯誤
         五、分頁器
             一、from django.core.paginator import Paginator
             二、獲取要處理的列表--->生成分頁器對象--->當前頁碼--->當前頁--->頁碼列表
                 返回調用者，當前頁和頁碼列表
             三、根據請求頁碼，會有不一樣的頁碼列表展現邏輯，以確保頁碼不會超寬致使頁碼編程兩行
                 確保不會出現負數的邏輯
         六、路由層的設置
             path
                
             re_path
                 處理須要匹配的格式
                     ^  $  |
             有名分組
                 <int:name>
                 (?P<name>)
             有的路由會會被覆蓋的問題
                 放在上面，防止被覆蓋
         七、視圖函數
             一、插入數據仍是用的笨方法
                 文本獲取字符串，而後切割
             二、主要模塊
                     from django.shortcuts import render, HttpResponse, redirect
                     from django.http import JsonResponse   直接json返回內容
                     from django.contrib import auth
                     from django.db.models import Count, F, Sum 數據庫方法
                     from django.db.models.functions import TruncMonth 時間達到月份
                     from django.db import transaction 事務操做
                     from django.core.mail import send_mail 發送郵件
                     from django.contrib.auth.decorators import login_required
                     from bs4 import BeautifulSoup 過濾非法標籤
                     import json
                     import os
                     import random
                     from threading import Thread  線程用於發送郵件，提升程序速度
             三、添加新文章
                 一、ajax發送數組
                     前端定traditional:True
                     後臺：array = request.POST.getlist('ids')  #django接收數組
                 二、bs4用來獲取html的文本內容
                     過濾非法字符串
                 三、kinded編輯器發送圖片文件
                    
                 四、獲取編輯器內容
                     同步編輯器和標籤
                     html = editor.html();
                     editor.sync();

                    editor.html()
                 五、圖片上傳
                     前端
                         uploadJson:'/upload/' 設置上傳路由
                         filePostName:'up_load_img' 文件的別名
                     後端
                         視圖函數
                         獲取到對象--img = request.FILES.get('up_load_img')
                         保存
                         返回方式，錯誤和保存在服務器的
                             response = {
                                 'error': 0,
                                 'url': '/media/add_article_img/%s' % img.name
                             }
                         return JsonResponse(response)
             四、評論
                 一、事務，由於涉及到多個表
                 二、發送郵件到做者郵箱
                     多線程處理郵件發送，不影響前端體驗
                     setting的設置
                         郵件服務器，受權碼
                 三、返回本條消息內容到瀏覽器，瀏覽器添加本條評論到頁面
                     由於插入數據庫後返回就是數據庫對象，能夠直接獲取其中的字段，用來返回
                 四、前端評論樹樣式
                     一、每條消息設置一條虛線背景圖片
                     二、子評論單獨添加一張透明的圖片定位在左上角，只要下面的虛線邊框
                     三、調整位置，使其像一個樹結構
                     四、還不夠完整，多出了虛線尚未處理
                     核心：
                         子評論利用有父評論ID，找到父級，添加在父級以後
                         再利用css，magin-left獲得基本評論樹的框架
                 五、沒有評論邏輯判斷
            
             五、點贊和踩滅
                 true 是贊 False 是踩
                 一、登錄者便是點贊人
                     不能操做本身文章的邏輯，判斷是否是本身的文章，返回狀態
                     判斷記錄表中是否有該用戶對該文章的操做
                 二、事務操做
                 三、判斷是點在仍是踩滅
                     前端html中
                         核心--取值判斷是否有digg(贊圖標所在的標籤)類，獲得布爾值
                         取值時用了json--->is_up = json.loads(request.POST.get('is_up'))
                 四、前端數字的自加
                 五、如果不能操做
                     返回is_up,和失敗標誌，前端根據is_up,顯示相應的消息
                         var val=data.handle? '您已經推薦過了': '您已經反對過了';
             六、我的站點
                 一、使用自定義標籤
                 二、複用函數，返回字典--->獲得返回字典·以context字典傳入數據，-->前端直接調用key
                 三、路由匹配，查詢文章分類，標籤，以及歸檔日期
                     re_path(r'^(?P<username>\w+)/(?P<conditon>tag|category|archive)/(?P<param>.*)/$', views.home_site),

            七、註銷
                 用戶認證模塊auth.logout(request)
             八、註冊
                 一、forms組件
                 二、頭像
                     取頭像在FILES中avatar_obj = request.FILES.get('avator')
                     當用戶沒有傳頭像的判斷
                         extra,若取到了，加到這個字典中，插入時用extra
                     前端頭像預覽
                         獲取頭像路徑，覆蓋原頭像
                             reader=new FileReader()
                             reader.readAsDataURL(file_obj);
                             // 修改img的src的屬性,覆蓋原圖片
                             reader.onload=function () {
                             $('#avator_img').attr('src',reader.result)
         };
                 三、提交註冊數據
                    須要 form_data=new FormData();而後append
                         var requset_data=$('#form').serializeArray();
                         $.each(requset_data,function (index,data) {
                             form_data.append(data.name,data.value)
                     // 編碼類型兩個參數
                     contentType:false,
                     processData:false,
                 四、全局錯誤的展現

            九、登錄
                 auth模塊
                 從session中取出驗證碼與前端對比
                 user = auth.authenticate(username=user, password=pwd)
                 註冊session
                 auth.login(requset, user)
         八、media文件夾
             settings的設定
                 MEDIA_URL = '/media/'
                 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
             路由設置

            做用：放置用戶上傳的媒體文件，頭像等         九、settings             一、添加APP             二、配置數據庫信息             三、時區的設置             四、USE_TZ設置成False             五、static             六、media             七、郵箱配置             八、session的過時時間         十、路由補充             include 路由分支             在路由中註冊media            ** re_path(r"media/(?P<path>.*)$",serve,{"document_root":settings.MEDIA_ROOT})         十一、static             靜態文件分開單獨放         十二、templates，模板層             base模板繼承             include引用模板         1三、其餘             多選下拉框組件                 引入css和js                     class加入selectpicker                     多選multiple                     輸入框標題title="--請選擇"                     取值，和普通標籤相同                     刷新option，$('.selectpicker').selectpicker('refresh');                      1四、css和js             彈出模態框bootstrap             添加cstoken，才能經過post發送ajax數據                 csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val()             form使用form-group、form-control             時間格式的處理                 <td>{{ article.create_time|date:'Y-m-d H:i' }}</td>                 文檔的安全safe         1五、文本編輯器             引入             參數配置                 文件上傳             同步數據到輸入框             獲取數據             賦值