1. 引言

在這個信息技術發展飛快的時代，信息也不再是像從前那麽單一，具體的形式來存在的，所以我們對於信息也不能以以前的態度去面對，我們要有更好的方法去管理信息，利用Python+Flask+MysqL和HTML+CSS去制作一個屬於自己的網站，把信息進行統一的管理，才會跟上時代，不斷進步。

在網絡技術不斷的發展之下，一些網頁布局與後端鏈接有了更多的模式，特別是在網絡上的管理信息系統的不斷優化，這一模型概念也有了緊跟大局的改變。我們要學會挖掘其中的功能和優點。本次課程設計我主要是設計一個方便大眾瀏覽娛樂圈中明星的一些新聞，對自己感興趣的新聞進行評論，發表感興趣的文章等來滿足他們的好奇心。

2. 系統

概要說明

1. 需求分析

該文檔目的在於明確系統的總體網頁結構設計和相應的算法及數據結構，設計外部軟件和內部軟件的接口，說明各個網站模塊的功能實現，網頁間後臺代碼的實現，數據結構的細節等。

要求實現以下功能：

a) 網站父模板統一布局：頭部導航條、底部圖片導航、中間主顯示區域布局

b) 註冊、登錄、註銷

c) 發布、列表顯示

d) 詳情頁

e) 評論、列表顯示

f) 個人中心

g) 搜索，條件組合搜索

h) 文章分類、顯示

i) 點贊、收藏

j) 修改密碼、頭像、上傳頭像

k) 我的發布、點贊、收藏、評論

l) 高級搜索

m) 熱門文章、推薦文章

2. 概要設計

軟件系統的總體邏輯結構，按照不同的設計方法，有不同的總體邏輯結構。本指南以結構化設計方法為主，畫出系統總體結構圖，列出系統的功能模塊清單編號、名稱、功能，並盡可能描繪出功能模塊之間的關系。數據庫概念設計最常用的方法是以實體-聯系方法，該方法是用E-R圖來描述，它可以很清晰地表示出實體之間的關系，網頁系統涉及了用戶表、問題表、內容表、收藏表、熱文表等三個數據庫。其E-R圖如圖

用戶表

圖2-1

問題表

圖2-2

內容表

圖2-3

熱門新聞表

圖2-4

收藏表

圖2-5

總體數據庫如2-6所示

圖2-6

3. 網頁結構設計

1. 總體結構圖設計

軟件系統的總體邏輯結構，按照不同的設計方法，有不同的總體邏輯結構。本指南以結構化設計方法為主，畫出系統總體結構圖，列出系統的功能模塊清單名稱、功能、效果，並盡可能描繪出功能模塊之間的關系。關於總體結構圖明如圖3-1所示

圖3-1

2. 運行環境設計

a) Python環境變量配置

程序和可執行文件可以在許多目錄，而這些路徑很可能不在操作系統提供可執行文件的搜索路徑中。path(路徑)存儲在環境變量中，這是由操作系統維護的一個命名的字符串。這些變量包含可用的命令行解釋器和其他程序的信息。把安裝好的python路徑置於環境變量中。進行這一步時需要特別註意的是路徑copy的路徑是否是正確，以免在終端窗口輸入時，總是顯示：不是內部或外部文件，這個是許多人會犯的錯誤。C:\Python 是Python的安裝目錄。可以通過以下方式設置：

• 右鍵點擊"計算機"，然後點擊"屬性"
• 然後點擊"高級系統設置"
• 選擇"系統變量"窗口下面的"Path",雙擊即可！
• 然後在"Path"行，添加python安裝路徑即可(我的C:\Users\Acer\AppData\Local\Programs\Python\Python36\Scripts\;），所以在後面，添加該路徑即可。 ps：記住，路徑直接用分號"；"隔開！
• 最後設置成功以後，在cmd命令行，輸入命令"python"，就可以有相關顯示。

b) 運行Python

我是通過命令行窗口進入python並開在交互式解釋器中開始編寫Python代碼。

c) 集成開發環境：PyCharm

老師為了方便學生學習，老師把整個PyCharm 文件提供給我們，我們只需要進去bin目錄中選擇pychranmy64.exe即可，但用了時間之後就過過期，所以個人建議到網站重新下載。PyCharm 下載地址 : https://www.jetbrains.com/pycharm/download/；下載完即可打開：

4. 模塊詳情設計

該系統的實現主要是以每個模塊賴設計的，模塊與模塊之間的詳細設計是有相聯系的，寫模塊之前要進行後臺一些包的導入和數據庫的設置、本系統有三個表需要在後端進行展示。而模塊詳情劃主要分為12個模塊，設計的核心代碼如下所示：

(1) 包的導入與數據庫設置

包的導入：

數據庫的設置：

1、用戶表

class User(db.Model):
__tablename__ = ‘user‘
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
username = db.Column(db.String(20), nullable=False)
_password = db.Column(db.String(200), nullable=False)# 密碼加密內部使用
user_image = db.Column(db.String(252), nullable=True,default=None)

@property # 定義函數，需要用屬性時可以用函數代替
def password(self):#外部使用
return self._password
@password.setter
def password(self,row_password): # 密碼進來時進行加密,generate_password_hash是一個密碼加鹽哈希函數，生成的哈希值可通過check_password_hash()進行驗證。
self._password=generate_password_hash(row_password)
def check_password(self,row_password): # check_password_hash函數用於驗證經過generate_password_hash哈希的密碼。若密碼匹配，則返回真，否則返回假。
result=check_password_hash(self._password,row_password)
return result

2、問答表
class Question(db.Model):
__tablename__ = ‘question‘
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
fenlei = db.Column(db.String(100), nullable=False)
title = db.Column(db.String(100), nullable=False)
detail = db.Column(db.Text, nullable=False)
creat_time = db.Column(db.DateTime, default=datetime.now)
author_id = db.Column(db.Integer, db.ForeignKey(‘user.id‘))
author = db.relationship(‘User‘, backref=db.backref(‘question‘))#問答對象的創建

3、內容表
class Comment(db.Model):
__tablename__ = ‘comment‘
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
author_id = db.Column(db.Integer, db.ForeignKey(‘user.id‘))
question_id = db.Column(db.Integer, db.ForeignKey(‘question.id‘))
creat_time = db.Column(db.DateTime, default=datetime.now)
detail = db.Column(db.Text, nullable=False)
question = db.relationship(‘Question‘, backref=db.backref(‘comments‘,order_by=creat_time.desc))
author = db.relationship(‘User‘, backref=db.backref(‘comments‘))

4、收藏表

class Collection(db.Model):
__tablename__ = ‘collection‘
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
user_id = db.Column(db.Integer, db.ForeignKey(‘user.id‘))
question_id = db.Column(db.Integer, db.ForeignKey(‘question.id‘)) # 評論對應的文章的id
creat_time = db.Column(db.DateTime, default=datetime.now)
question = db.relationship(‘Question‘, backref=db.backref(‘collection‘))# 收藏用戶的id
user = db.relationship(‘User‘, backref=db.backref(‘collection‘))

(2) 父模板 前端核心代碼：頂部導航欄、中間模塊和底部導航欄

頂部導航欄中有條件、組合搜索、高級搜索、登錄、註冊、註銷

父模板 後端代碼：

@app.route(‘/‘)
def base():
return render_template(‘base.html‘)

首頁 前端核心代碼：

(3) 首頁 前端核心代碼：進入前要先進行登錄，登錄成功澤可以進入首頁，否則返回登錄；首頁中還可以發表文章的作者、時間、詳情。

首頁 後端核心代碼：

@app.route(‘/shouye/‘)
def shouye():
context = {
‘questions‘: Question.query.order_by(‘-creat_time‘).all() }
return render_template(‘shouye.html‘, **context)

(4) 註冊頁 前端核心代碼：給用戶提供註冊，輸入有效的用戶名，即用戶名為6-12位，只能是字母與數字，首位不能是數字。密碼須為6-20位。可成功註冊並把數據存儲到數據庫當中，若失敗則會出現相應的提示。

註冊頁後端核心代碼：

@app.route(‘/regist/‘, methods=[‘GET‘, ‘POST‘]) # methods定義它有兩種請求方式,因為它在表單的請求是post，類似我們在idea中的sava請求模式
def regist():
if request.method == ‘GET‘:
return render_template(‘regist.html‘)
else:
username = request.form.get(‘username‘) # post請求模式，安排對象接收數據
password = request.form.get(‘password‘)
user = User.query.filter(User.username == username).first() # 作查詢，並判斷
if user:
return ‘username existed‘
else:
user = User(username=username, password=password) # 將對象接收的數據賦到User類中,即存到數據庫
db.session.add(user) # 執行操作
db.session.commit()
return redirect(url_for(‘login‘)) # redirect重定向

(5) 登錄頁 前端核心代碼：用戶註冊成功後方可進行登錄，利用js技術，用戶在登錄時對用戶名和密碼進行約束與設置，成功登錄即可跳轉到首頁。

登錄頁 後端核心代碼：

@app.route(‘/login/‘, methods=[‘GET‘, ‘POST‘]) # methods定義它有兩種請求方式
def login():
if request.method == ‘GET‘:
return render_template(‘login.html‘)
else:
usern = request.form.get(‘username‘) # post請求模式，安排對象接收數據
passw = request.form.get(‘password‘)
user = User.query.filter(User.username == usern).first() # 作查詢，並判斷
if user: # 判斷用戶名
if user.check_password(passw): # 判斷密碼
session[‘user‘] = usern # 利用session添加傳回來的值username
session[‘userid‘]=user.id
session.permannet = True
return redirect(url_for(‘shouye‘))
else:
return ‘密碼錯誤‘
else:
return ‘用戶名不存在,請先註冊‘

(6) 用戶詳情頁 前端核心代碼：由三個部分組成：問題中心、評論中心和個人詳情

用戶詳情頁 後端核心代碼：為了把頁面分開，我們在html頁面傳了一個tag參數，根據tag的不同去到不同頁面，一個請求跳轉3個不同頁面。

@app.route(‘/usercenter/<user_id>/<tag>‘) # 為了把頁面分開，我們在html頁面傳了一個tag參數
@loginFirst
def usercenter(user_id,tag):
user=User.query.filter(User.id==user_id).first()
context={
‘number‘: user.id,
‘user‘:user,
‘question‘: user.question,
‘comments‘: user.comments,
‘img‘:user.user_image
} # 根據tag的不同去到不同頁面，一個請求跳轉3個不同頁面
if tag==‘1‘:
return render_template(‘usercenter1.html‘,**context)
elif tag==‘2‘:
return render_template(‘usercenter2.html‘,**context)
else:
return render_template(‘usercenter3.html‘,**context)

(7) 問題中心頁

(8) 評論中心頁

(9) 個人詳情頁

(10) 問答詳情頁 前端核心代碼：

問答詳情頁 後端核心代碼：

@app.route(‘/xiangqing/<question_id>‘)
def xiangqing(question_id):
quest = Question.query.filter(Question.id == question_id).first()# 根據主頁帶回來的id查詢出整條元組記錄，丟進question
comments = Comment.query.filter(Comment.question_id==question_id).all() # 根據帶回來的question的id在Comment查詢出所有評論
return render_template(‘xiangqing.html‘, ques=quest,comments=comments) # 把值question傳到question，在xiangqing.html頁面調用

(11) 發布區 前端核心代碼：提高用戶提出問題和對文章進行評論的功能

發布區 後端核心代碼：獲取後根據條件組搜索和分類功能進入相應的文章頁面，發表的評論和問題會以數據庫形式保存下來，提交後回到首頁。

@app.route(‘/question/‘, methods=[‘GET‘, ‘POST‘])
@loginFirst
def question():
if request.method == ‘GET‘:
return render_template(‘question.html‘)
else:
title = request.form.get(‘title‘)
detail = request.form.get(‘detail‘)
fenlei = request.form.get(‘fenlei‘)
author_id = User.query.filter(User.username == session.get(‘user‘)).first().id # 將session get到的user進行查詢並取出id放到外鍵author_id中
question = Question(title=title, detail=detail, author_id=author_id,fenlei=fenlei)
db.session.add(question)#保存到數據庫
db.session.commit()
return redirect(url_for(‘shouye‘)) # 重定向到登錄頁

(12) 修改密碼 前端核心代碼：為了用戶賬號安全起見，本系統為此設置了修改密碼功能，對舊的密碼進行重新設置。

修改密碼 後端核心代碼:

@app.route(‘/edit_password/‘, methods=[‘GET‘, ‘POST‘])
def edit_password():
if request.method == ‘GET‘:
return render_template("edit_password.html")
else:
newpassword = request.form.get(‘password‘)
user = User.query.filter(User.id == session.get(‘userid‘)).first()
user.password = newpassword
db.session.commit()
return redirect(url_for(‘shouye‘))

(13) 組合條件搜索 前端核心代碼:在搜索框中輸入你需要的關鍵詞同時在另一個分類的下拉列表選擇你需要的類型即可查詢到結果。

組合條件搜索 後端核心代碼:

@app.route(‘/search/‘)
def search():
qu=request.args.get(‘q‘) # args獲取關s鍵字,區別form
fenlei = request.args.get(‘fenlei‘)
ques=Question.query.filter(
and_( # 兩種查詢條件
Question.title.contains(qu), # 通過模糊查詢，查找問題的標題
Question.detail.contains(qu), # 通過模糊查詢，查找問題的詳細內容
Question.fenlei.contains(fenlei) ) ).order_by(‘-creat_time‘)
return render_template(‘shouye.html‘,questions=ques) # question要和原首頁數據模型一樣

(14) 分類功能：對你發布的評論或文章進行星類分類

<form action="{{ url_for(‘search‘) }}" class="navbar-form navbar-right" role="search" method="get">
<select class="form-control" name="fenlei" id="fenlei">
<option value="">星類分類</option>
<option value="男明星">男明星</option>
<option value="女明星">女明星</option>
<option value="童星">童星</option>
</select>
<div class="form-group"><input type="text" name="q" class="form-control" placeholder="輸入您感興趣...">
</div>
<button type="submit" class="btn btn-default" style="width: 50px">查詢</button>
</form>

(15) 點藏功能：對自己喜歡的文章或評論進行點藏。

(16) 上傳頭像 前端核心代碼：在用戶表中定義一個用戶頭像的直，後臺寫上傳頭像函數，從後臺傳值到前端頁面，新建一個upload文件放上傳頭像的文件。

上傳頭像 後端核心代碼：
@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.user_image = ‘uploads/‘ + f.filename
db.session.commit()
return redirect(url_for(‘usercenter‘, user_id=user_id,tag=3));

(17) 高級搜索：利用模糊搜索進行設置

@app.route(‘/search‘)
def search():
qu = request.args.get(‘q‘)
c = ‘‘ if request.args.get(‘c‘) == ‘‘ else request.args.get(‘c‘)
y = ‘‘ if request.args.get(‘y‘) == ‘‘ else request.args.get(‘y‘)
query = Question.query.filter(
or_(
Question.title.contains(qu),
Question.detail.contains(qu),
),
Question.cf.like(‘%‘ + c + ‘%‘),
Question.creat_time.like(‘%‘ + y + ‘%‘),
).order_by(‘-creat_time‘).all()
context = {
‘questions‘: query,
‘cf‘: Cf.query.all(),
‘hot‘: Question.query.order_by(‘-click‘).all()[0:5]
}
return render_template(‘shouye.html‘, **context)

(18) 收藏功能 前端核心代碼：在詳情頁中鏈接到後臺，個人中心頁面增加一個收藏功能的按鈕，把自己喜歡的文章收藏在個人信息當中並展現出來，存入數據庫。

收藏功能 後端核心代碼：

Collection = db.Table(

‘collection‘,

db.Column(‘id‘, db.Integer, primary_key=True, autoincrement=True),

db.Column(‘book_id‘, db.Integer, db.ForeignKey(‘question.id‘)), # 評論對應的文章的id

db.Column(‘collection‘, db.Integer, db.ForeignKey(‘user.id‘)), # 收藏用戶的id

db.Column(‘createdate‘, db.DATETIME) # 發布時間)

(19) 熱門文章 前端核心代碼：

熱門新聞 後端核心代碼：把熱門新聞儲存在數據庫當中

@app.route(‘/remen/‘,methods=[‘GET‘,‘POST‘])
def remen():
question = Question.query.all()
return render_template(‘remen.html‘,question=question)

5. 系統實現的關鍵算法與數據結構

1. 邏輯結構設計

邏輯結構設計階段的任務是將概念結構設計階段所得到的概念模型轉換為具體DBMS所能支持的數據模型（即邏輯結構），並對其進行優化。邏輯結構設計一般分為三步進行：

(1) 將概念結構轉換為一般的關系、網狀、層次模型；

(2) 將轉換的關系、網狀、層次模型向特定的DBMS支持下的數據模型轉換；

(3) 對數據模型進行優化；如下圖所示：

1. 物理結構設計

（1）數據庫的物理設計通常分為兩步：確定數據庫的物理結構 ；
（2）對物理結構進行評價,評價的重點是時間和空間效率；如下所示；

用戶名：用戶表中的username是用戶的要瀏覽網站前登錄的姓名。

密碼：是以加密的形式存放的於數據庫。

數值：所有id的數值類型都為int。其他為varchar、文本或時間類型。

註冊：所有人要瀏覽本網站前都要註冊一個屬於自己的賬號。

登錄：每個已註冊過的用戶則可通過賬號和密碼登錄。

發布評論：使用者可以對自己感興趣的新聞進行評論並儲存在數據庫中。

發表熱門文章：使用者可以發表自己感興趣的文章並儲存在數據庫中。

查詢個人信息：用戶點擊自己頭像或用戶名則可以進入個人信息網站，查看自己的昵稱、頭像、發布問題、發布評論等。

修改密碼：可以重新設置新的密碼來保護自己的賬號。

上傳頭像：用戶可以根據自己的喜好改變自己頭像並儲存和展示在頁面當中，還保存在數據庫中。

高級搜索：采用模糊查詢方式進行設置。

1. 數據結構與程序的關系

本系統進行用戶身份驗證時，首先通過註冊界面後再進入登錄頁面獲得用戶輸入賬號和密碼，網站通過訪問數據庫的用戶表，若不匹配，返回結果到登錄窗口提示錯誤，相反登錄成功。

本系統進行登錄後轉到首頁，然後可以進行搜索你要的相關娛樂新聞，發表評論，發表文章等；還可以對信息進行查看和修改。如果查詢不到指定信息，則系統提示錯誤。

6. 成品展現

①　父模版（base.html）

②　首頁（shouye.html）

③　註冊頁（regist.html）

④　登錄頁（regist.html）

⑤　用戶詳情頁（usercenter.html）

⑥　發布詳情頁（xiangqing.html）

⑦　問題發布頁（question.html）

⑧　評論頁（usercenter2.html）

⑨　個人信息（usercenter3.html）

⑩　修改密碼（edit_password.html）

?　組合搜索：在下拉列表框中選擇“男明星”選項，同時在搜索框中查找“李”字，會出現相應的我發表過的男明星為李易峰的相應內容出現

?　分類功能：對自己發布的問題及文章進行分類，以明星進行分類，按照相應的分類，點擊後展示出在頁面。

?　點贊功能

?　上傳頭像功能

上傳完成後，會出現相應的文件和頭像：

?　高級搜索功能：是用模糊查找來實現的，通過在搜索框中輸入關鍵詞即可出現相應文章。

?　收藏功能：在發表文章那裏增加一個收藏的按鈕，並傳值在個人中心頁面也可看到。

?　熱門新聞發表功能：把自己發布的東西中一些熱門新聞通過“添加熱門”這個按鈕展現在頁面。還可以在首頁看到自己發布的熱門新聞。

7. 結束語

本系統采用pycharnm框架構建，主要使用web前端設計+後臺設計+MySql數據庫技術來開發，用web技術來開發界面，實現前後臺的數據就交互；用當前主流開源數據庫MySql作為數據庫服務器。我們不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

此娛樂網站系統能夠方便讀者瀏覽娛樂圈的最新新聞，還有搜索自己感興趣的新聞，進行評論和表發自己的看法，還可以發表熱文等功能。這些功能都需要前端和後端代碼相結合實現的。整個系統功能算是挺多的，自己在花費了不少時間去完善它，雖然還存在不足，希望在接下來的實踐或者課堂中能深究學習並把它做到更好。

8. 參考文獻

[1]黃瑋雯.網頁界面設計[J].人民郵電出版社，2013-02-01

[2]朱利安·丹喬 .Python高手之路[J].法國，2016-07-15

[3]赫特蘭(MagnusLieHetland)﹒Python基礎教程[J]﹒北京：人民郵電出版社，2010-07-01

[4]謝瑛俊﹒Python全棧開發實踐入門[J]﹒北京：電子工業出版社，2017-03月

管理信息系統 課程設計（2018-6-16）