引言
1.1編寫目的
本階段完成網頁的大致設計並明確網站的數據庫設計與功能。本概要設計說明書的目的就是進一步細化網頁設計階段得出的網頁概貌,並把它展示在瀏覽器中。
預期讀者:網頁設計工程師、網站開發員
1.2背景
任務提出者:杜雲梅
開發者:李明惠
用戶:網站交流平台用戶
1.3定義
1.3.1 Python+Flask框架
Flask是當下流行的Web框架,它是用Python實現的。Flask顯著的特點是:它是一個“微”框架。”微”意味着Flask旨在保持核心的簡單,但同時又易於擴展。默認情況下,Flask 不包含數據庫抽象層、表單驗證,或是其它任何已有多種庫可以勝任的功能。然而,Flask 支持用擴展來給應用添加這些功能。眾多的擴展提供了數據庫集成、表單驗證、上傳處理、各種各樣的開放認證技術等功能。Flask的這些特性,使得它在Web開發方面變得非常流行。
1.3.2 MYSQL
MySQL是一個關系型數據庫管理系統,由瑞典MySQL AB 公司開發,目前屬於 Oracle 旗下產品。MySQL 是最流行的關系型數據庫管理系統之一,在 WEB 應用方面,MySQL是最好的 RDBMS (Relational Database Management System,關系數據庫管理系統) 應用軟件。
MySQL是一種關系數據庫管理系統,關系數據庫將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,這樣就增加了速度並提高了靈活性。
- 網站結構設計
2.1開發背景
本網站主要是面向動漫愛好者的交流網站。如今,有許多愛好動漫的宅男宅女們,他們缺少一個能夠暢所欲言的平台,此網站可以為該用戶群提供一個交流的平台。
2.2基本設計概念
本網站是一個面對所有已注冊用戶的交流平台,本平台未登錄用戶可以看到首頁,其他功能需要登錄才能進行操作
2.2.1 業務流程
本流程圖是一個可以描述各個作者發布的帖子、評論、以及用戶自身的信息等等的圖表。這個圖可以直觀的看出流程中有哪里有錯誤,可以更好的改正。他只是物理的概念沒有數據的概念。他呈現的是完整的順序。
網站的功能流程定義如圖2-1網站功能流程圖所示:
|
3. 模塊設計
3.1 數據庫概念設計
(1)用戶信息E-R圖
(2)發布答題E-R圖
(3)評論信息E-R圖
(4)帖子分類E-R圖
(5) 點贊信息E-R圖
3.2數據庫邏輯設計
邏輯設計階段是將概念模式轉化為數據模型,得到數據庫的邏輯模式。本網站的數據模型為關系模型。在這里主要介紹涉及的5個關系模型,以下是E-R模型向關系模型的轉換:
(1) 用戶信息表(用戶ID,用戶名,密碼,用戶頭像)
(2) 問題信息表(問題編號,作者編號,標題,詳情,類別,瀏覽次數,點擊次數,添加時間)
(3) 評論信息表(評論編號,問題編號,作者編號,添加時間,評論詳情)
(4) 分類信息表(類別,詳細類別)
(5) 點贊信息表(點贊編號,點贊問題,點贊次數,添加時間)、
表2-1 user表(用戶信息表)
列名 |
含義 |
數據類型 |
約束 |
id |
編號 |
int |
非空 |
username |
用戶名 |
nchar(20) |
非空 |
_password |
密碼 |
nchar(200) |
非空 |
say |
評論 |
nchar(50) |
非空 |
icon |
頭像 |
nchar(64) |
非空 |
表2-2 question表(問題信息表)
列名 |
含義 |
數據類型 |
約束 |
id |
編號 |
int |
非空 |
author_id |
作者 |
int |
|
title |
標題 |
varchar(225) |
非空 |
detail |
詳情 |
text |
非空 |
cf |
類別 |
int |
|
look |
瀏覽次數 |
int |
|
click |
點擊次數 |
int |
|
time |
添加時間 |
datatime |
|
表2-3 comment表(評論信息表)
列名 |
含義 |
數據類型 |
約束 |
id |
編號 |
int |
非空 |
author_id |
作者 |
int |
|
question_id |
問題編號 |
int |
|
detail |
詳情 |
text |
非空 |
time |
評論時間 |
datetime |
|
表2-4 cf表(分類信息表)
列名 |
含義 |
數據類型 |
約束 |
id |
編號 |
int |
非空 |
name |
類別 |
varchar(30) |
|
context |
詳細類別 |
text |
|
表2-5 collection表(點贊信息表)
列名 |
含義 |
數據類型 |
約束 |
id |
編號 |
int |
非空 |
book_id |
點贊問題 |
int |
|
collection |
點贊次數 |
int |
|
createdate |
時間 |
datetime |
|
4.系統實現的關鍵算法
在整個網站的設計中,數據庫與前台鏈接是必不可少的,將配置文件寫成了一個config.py文件對數據庫進行配置。
import os
SECRET_KEY = os.urandom(24)
SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:738312@localhost:3306/data1?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS = False
為了讓未登錄用戶無法訪問除首頁以外的頁面,我寫了一個登陸前裝飾器:
def loginFrist(func):
@wraps(func)
def wrappers(*args, **kwargs):
if session.get('user'):
return func(*args, **kwargs)
else:
return redirect(url_for('login'))
return wrappers
用戶可以對自己的頭像和密碼進行修改,我單獨為修改頭像和修改密碼添加了一個新的頁面,修改頭像代碼以及修改密碼代碼如下:
@app.route('/setPassword/<id>', methods=['GET', 'POST'])
@loginFirst
def setPassword(id):
if request.method == 'GET':
return render_template('setPassword.html')
else:
user = User.query.filter(User.id == id).first()
if user:
if user.check_password(request.form.get('old')):
user.password = request.form.get('new1')
db.session.commit()
info = '修改成功'
else:
info = '原密碼錯誤'
else:
info = '未知錯誤'
return redirect(url_for('index', info=info))
# 上傳頭像
@app.route('/uploadLogo/<user_id>', methods=['GET', 'POST'])
def uploadLogo(user_id):
user = User.query.filter(User.id == user_id).first()
f = request.files['logo']
basepath = os.path.dirname(__file__) # 當前文件所在路徑
upload_path = os.path.join(basepath, 'static/uploads', f.filename) # 注意:沒有的文件夾一定要先創建,不然會提示沒有該路徑
f.save(upload_path)
user.icon = 'uploads/' + f.filename
db.session.commit()
return redirect(url_for('setPassword', id=user_id));
5.成品展示
本網站界面采用DIV+CSS布局以及Bookstraps布局的方式,使網頁給用戶舒適的視覺感受,並用JavaScript腳本語言對網頁進行修飾,給用戶一種良好的用戶體驗。
5.1 用戶注冊、登錄頁面的實現
用戶注冊后,跳轉到登錄頁面,登錄成功后跳轉到首頁,首頁會出現用戶名。
修改頭像以及修改密碼功能
用戶的全部問答,全部評論,個人資料頁面
首頁有輪播圖,還有搜索框,可以模糊查詢,分類查詢,可以點贊
固定的底部導航
頂部導航
可以顯示頭像
發布帖子