管理信息系統 課程設計

 1.系統概要說明

本論壇網站系統使用Pycharm開發工具利用flask框架進行開發。

使用AJAX技術進行頁面前端數據傳輸，後臺根據獲取數據進行json判斷，並在頁面進行彈框提示。

在項目文件中創建py後臺文件進行json返回不一樣參數。

提示框使用sweetalert封裝好的架構。在前端js文件判斷使用不一樣的提示框進行提示。

發佈與評論文本框採用ueditor封裝架構，能夠將文本內容以html語言進行包裝、能夠進行換行、擴大字體、添加圖片、表情包等等操做。。。

本系統：

用戶註冊、用戶登陸、用戶我的中心、上傳頭像、用戶修改密碼、用戶修改我的信息。

用戶發佈帖子、評論帖子、點贊、收藏。

板塊分類查詢、加精熱門文章、搜索、文章分頁一系列功能。

2.網站結構設計

網站前端採用DIV+CSS佈局並少許添加bootstrap框架

整體簡潔大方、以白色、橙色、與藍色爲主。

字體採用默認字體或微軟雅黑、

父模板以導航條爲模板、首頁有導航條、板塊分類、大量帖子進行列表佈局、底部有分頁效果：具體樣式爲：

登陸和註冊頁面中使用div+css樣式將登陸和註冊表單放置在頁面中心，具體樣式爲：

 

我的中心在繼承父模板的基礎上進行我的首頁的美化加工，再以我的中心爲父模板進行，個人發佈、個人收藏進行繼承。實現列表佈局。具體樣式：

 

 

加精頁面採起bootstrap表格進行列表循環、並用按鈕進行加精操做。具體樣式爲：

 

 

 

3.模塊詳細設計

 

爲了使Python文件結構更加清晰和易於優化，文件採用了模型分離的結構，將數據庫模型和數據庫使用語句代碼，分別放置在models.py和exts.py 文件，再將數據庫的管理使用又單獨放置在manage.py的文件中。

數據庫的建立再也不是在系統運行以後自動創建而是須要在cmd命令窗口進行映射。

其三行語句分別爲:

Python manage.py db init

Python manage.py db migrate

Python manage.py db upgrade

這樣添加數據庫表的好處是，在你想添加新的表或者在表中添加新的列屬性時，不須要從新刪除數據庫從新創建，只須要再次在命令窗口輸出後兩行代碼進行映射就能夠的。這樣添加進的數據就不用從新添加。

在本次系統編寫中再也不是以上次大做業將全部功能視圖代碼和全部的裝飾器功能放在一個文件中而是放置在不一樣的目錄下，進行分組後臺視圖操做，首先創建apps爲全部後臺功能文件，在apps裏面添加front和comment文件分爲前臺用戶視圖和共用視圖。同理在static前端樣式和js也是一樣操做

在front文件中分裝將後臺視圖功能、裝飾器功能、表單功能、判斷功能分別放入不一樣的文件當中。

本次論壇網站是在上學期的基礎上功能添加，因此這次論文將再也不說起上學期的的功能。而重點說起這次新添加的功能

3.1修改密碼功能

系統概述中以及說起本次全部數值傳輸都是利用Ajax技術進行頁面傳值。因此數值的傳輸的代碼編寫複雜了許多，並且容易犯錯，打錯一個單詞就須要大量時間。

具體代碼以下：

後臺views視圖：

#用戶修改密碼

@bp.route('/resetpwd/',methods=['GET','POST'])

@login_required

def resetpwd():

    if request.method == 'GET':

        return render_template('front/front_resetpwd.html')

    else:

        form = ResetpwdForm(request.form)

        if form.validate():

            oldpwd = form.oldpwd.data

            newpwd = form.newpwd.data

            user = g.front_user

            if user.check_password(oldpwd):

                user.password = newpwd

                db.session.commit()

                # {"code":200,message=""}

                # return jsonify({"code":200,"message":""})

                return restful.success()

            else:

                return restful.params_error("舊密碼錯誤！")

        else:

            return restful.params_error(form.get_error())

3.2分類與分頁功能

其中分類功能須要咱們添加一個版塊分類的模型和數據庫，其中記錄版塊id版塊的名稱和時間，再在帖子表中加入其版塊id的外鍵，在發佈帖子中記錄下版塊的id。

在首頁後臺視圖中再根據頁面是否獲取到版塊id來進行if判斷如獲取到版塊id返回對應版塊id 的帖子

其中分頁功能咱們須要添加flask_paginate庫，根據Pagination,get_page_parameter

的方法進行判斷和分頁效果。

再將分類和分頁功能進行結合實現出能夠根據展出版塊類別的數量進行分頁效果：

具體代碼爲：

後臺views視圖代碼

@bp.route('/')
def index():
     board_id = request.args.get('bd',type=int,default=None)
     page = request.args.get(get_page_parameter(),type=int, default=1)
     boards = BoardModel.query.all()
     start =(page-1)*config.PER_PAGE
     end = start + config.PER_PAGE
     posts=None
     total = 0

     query_obj=PostModel.query.order_by(PostModel.create_time.desc())
     if board_id:
         query_obj = query_obj.filter_by(board_id=board_id)
         posts = query_obj.slice(start,end)
         total = query_obj.count()
     else:
         posts = query_obj.slice(start,end)
         total = query_obj.count()
     pagination = Pagination(bs_version=3,page=page,total=total,outer_window=0,inner_window=2)
     context={
         'boards': boards,
         'posts':posts,
         'pagination':pagination,
         'current_board':board_id
     }
     return render_template('front/front_index.html',**context)

前臺HTML代碼：

<div class="main1">
    <!--<span style="margin-left: 20px; background: #ccc; font-size:28px ; color: royalblue">熱搜TOP10!!</span>-->
    <ol>
        {% for foo in posts %}
            <li><a href="{{ url_for("front.post_detail",post_id=foo.id) }}">{{ foo.title }}</a> {% if foo.highlight%}<span style="background: red;color: #fff;">加精貼</span>
            {% else %}
                <span style="background: #ccc">普通貼</span>
            {% endif %}<br><span>{{ foo.create_time }}</span> <span>做者：{{ foo.author.username }}</span> </li>
        {% endfor %}
    </ol>
{{ pagination.links }}
</div>

<div class="main3">

    <ul>
    {% if current_board %}
      <a href="/" class="list-group-item "><li>全部版塊</li></a>
    {% else %}
       <a href="/" class="list-group-item active"><li>全部版塊</li></a>
    {% endif %}

        {% for board in boards %}
            {% if board.id == current_board %}
               <a href="{{ url_for("front.index",bd=board.id)  }}" class="list-group-item active"><li>{{ board.name }}</li></a>
            {% else %}
                <a href="{{ url_for("front.index",bd=board.id) }}" class="list-group-item "><li>{{ board.name }}</li></a>
            {% endif %}


        {% endfor %}


    </ul>
</div>

3.3帖子加精與取消加精功能

其中加精功能須要咱們添加一個加精的模型和數據庫，其中進行帖子id的添加，只要記錄在加精的數據庫中這篇帖子就是加精貼，再根據加精貼模型的使用對後臺視圖函數進行排序就能夠將加精的帖子作到置頂、放置熱門的操做。基本的操做就是將帖子添加進加精數據中。

在前端html執行加精操做便可。

具體代碼爲：

後臺views視圖代碼

@bp.route('/hignlight')
def hignlight():
    post = PostModel.query.all()
    return render_template('front/front_allpost.html',post=post)

@bp.route('/hpost',methods=['POST'])
def hpost():
    post_id = request.form.get("post_id")
    if not post_id:
        return restful.params_error('請傳入帖子id')
    post=PostModel.query.get(post_id)
    if not post:
        return restful.params_error("沒有這篇帖子！")
    hignlight = HighlightPostModel()
    hignlight.post = post
    db.session.add(hignlight)
    db.session.commit()
    return restful.success()

@bp.route('/upost',methods=['POST'])
def upost():
    post_id = request.form.get("post_id")
    if not post_id:
        return restful.params_error('請傳入帖子id')
    post=PostModel.query.get(post_id)
    if not post:
        return restful.params_error("沒有這篇帖子！")
    hignlight = HighlightPostModel.query.filter_by(post_id=post_id).first()
    db.session.delete(hignlight)
    db.session.commit()
    return restful.success()

前臺html代碼：

<div style="width: 1000px; margin: 50px auto; ">
<table class="table table-bordered" style="text-align: center">
<thead>
<tr>
    <th>帖子標題</th>
    <th>做者</th>
    <th>發佈時間</th>
    <th>所屬板塊</th>
    <th>操做</th>
</tr>
</thead>
     {% for foo in post %}
    <tr data-id="{{ foo.id }}" data-highlight="{{ 1 if foo.highlight else 0}}">

        <th><a target="_blank" href="{{ url_for("front.post_detail",post_id=foo.id) }}">{{ foo.title }}</a></th>
        <th>{{ foo.author.username }}</th>
        <th>{{ foo.board.name }}</th>
        <th>{{ foo.create_time }}</th>
        <th>
            {% if foo.highlight %}
                <button type="button" class="btn btn-default highlight-btn">取消加精</button>
            {% else%}
                <button type="button" class="btn btn-danger highlight-btn">加精</button>
            {% endif %}

        </th>



    </tr>
    {% endfor %}
</table>

3.4點贊收藏功能

點贊收藏功能都是須要創建點贊表和收藏表，其原理大體相同，都是獲取到用戶的id與帖子的id再進行是否在數據庫中有此數據進行判斷是否能夠進行點贊和收藏的操做。點擊贊或者收藏就在數據庫中添加數據達到效果。

具體代碼爲：

後臺views視圖代碼：

#點贊功能
@bp.route('/dianzan/',methods=['GET','POST'])
@login_required
def dianzan():
    user_id=g.front_user.id
    post_id=request.form.get('post_id')
    dianzan=DianzanModel(user_id=user_id,post_id=post_id)
    db.session.add(dianzan)
    db.session.commit()
    return redirect(url_for('front.post_detail',post_id=post_id))
#收藏功能
@bp.route('/collection/',methods=['GET','POST'])
@login_required
def collection():
    user_id=g.front_user.id
    post_id=request.form.get('post_id')
    collection=CollectionModel(user_id=user_id,post_id=post_id)
    db.session.add(collection)
    db.session.commit()
    return redirect(url_for('front.post_detail',post_id=post_id))

前臺html數據傳輸：

<form action="{{ url_for('front.collection') }}" method="post">
            <input type="hidden" name="post_id" value="{{ post.id }}">
                {% if collection %}
                    <button type="button" class="btn btn-danger highlight-btn">已收藏</button>
                {% else %}
                    <button type="submit" class="btn btn-default highlight-btn" id="collection_btn">收藏</button>

                {% endif %}


            </form>
            <form action="{{ url_for('front.dianzan') }}" method="post">
                <input type="hidden" name="post_id" value="{{ post.id }}">
{#                <input type="hidden" name="post_id" value="{{ g.front_user }}">#}
                {% if dzyes %}
                    <button type="button" class="btn btn-default btn-xs pull-right"><span
                            class="glyphicon glyphicon-heart">{{ post.dianzan |length }}</span></button>
                {% else %}
                    <button type="submit" class="btn btn-success btn-xs pull-right"><span
                            class="glyphicon glyphicon-heart-empty">贊</span></button>
                {% endif %}
            </form>

3.5上傳頭像功能

在原來用戶表的基礎上添加了一個存儲頭像路徑的列，其中咱們將頁面上傳的圖片的具體圖片的內容存儲到後臺給的路徑中存儲，而數據庫的列屬性則是存儲路徑的連接文本，並在頁面中根據其具體路徑顯示頭像，而在用戶沒有上傳頭像的時候則放置默認的頭像。

具體代碼爲

後臺views視圖代碼

#用戶上傳頭像
@bp.route('/avatar/<user_id>',methods=['POST'])
@login_required
def updata_acatar(user_id):
    user = FrontUser.query.filter(FrontUser.id == user_id).first()
    f = request.files['img']
    basepath = os.path.dirname(__file__)  # 當前文件所在路徑
    upload_path = os.path.join('E:/godlike/static/img', f.filename)  # 注意：沒有的文件夾必定要先建立，否則會提示沒有該路徑
    f.save(upload_path)
    user.avatar = 'img/' + f.filename
    db.session.commit()
    return redirect(url_for('front.usercenter',user_id=user.id,tag=1))

前臺html傳輸

{% if user.avatar is none %}
    <img src="/static/img/icon_base.jpg" width="120px" height="120px" alt=""/>
{% else %}

    <img src="/static/{{ user.avatar }}" alt=""
         width="110px" height="110px">
{% endif %}

 

<form action="{{ url_for('front.updata_acatar',user_id=user.id) }}" method="post"
      enctype="multipart/form-data">
    <input type="file" name="img" required  style="opacity: 0 ; width: 80px;height: 30px; position: relative;top:30px;left: 5px;">
    <label for="" class="ui_button ui_button_primary" style="border: 1px solid #00a5e0; border-radius:5px;  background-color: #00a5e0;color: #fff; width: 80px;height: 32px;text-align: center;padding: 5px">上傳頭像</label>
    <button type="submit" class="btn btn-default highlight-btn">確認上傳</button>

</form>

4.數據庫設計

數據庫分爲用戶與整體帖子數據表

分爲：

用戶表

id：用戶id（主鍵、自增加、默認值爲shortuuid）

username：用戶名（列屬性、String類型、不可爲空）

_password：用戶密碼（列屬性、String類型、不可爲空，設置哈希加密）

email：郵箱（列屬性、String類型、不可重複、不可爲空）

realname：真實姓名（列屬性、String類型）

avatar：用戶頭像（列屬性、String類型）

signature：個性簽名（列屬性、String類型）

join_time：加入時間（列屬性、DateTime類型，默認值爲添加時間）

帖子表

id：帖子id（主鍵、Int類型、自增加）

title：帖子標題（列屬性、String類型、不可爲空）

content:內容（列屬性、Text類型、不可爲空）

create_time:建立時間（列屬性、DateTime類型、默認值爲建立時間）

board_id:板塊id（外鍵、Int類型、外鍵爲border.id）

author_id:做者id（外鍵、String類型、外鍵爲front_user.id）

評論表

id：帖子id（主鍵、Int類型、自增加）

content：內容（列屬性、Text類型、不可爲空）

create_time：建立時間（列屬性、DataTime類型、默認值爲建立時間）

post_id：帖子id（外鍵、Int類型、外鍵爲post.id）

author_id:用戶id（外鍵、String類型、外鍵爲front_user.id）

板塊表

id：板塊id（主鍵、Int類型、自增加）

name:板塊名稱（列屬性、String類型、不可爲空）

create_time：建立時間（列屬性、DataTime、默認值爲建立時間）

點贊表

id：板塊id（主鍵、Int類型、自增加）

post_id：帖子id（外鍵、Int類型、外鍵爲post.id）

user_id：用戶id（外鍵、String類型、外鍵爲front_user.id）

收藏表

id：板塊id（主鍵、Int類型、自增加）

user_id ：用戶id（外鍵、String類型、外鍵爲front_user.id）

post_id：帖子id（外鍵、Int類型、外鍵爲post.id）

create_time：建立時間（列屬性、DateTime，默認值建立時間）

數據庫的鏈接關係：

 

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

關鍵算法是if根據前端傳到的數據在後臺進行比對，再根據傳輸的code的值進行判斷，再根據js文件的判斷，在頁面上展現出不一樣的效果。

其中其code值是如何傳輸的？這就須要調用其中resful文件中，不一樣類的定義了。

具體代碼爲：

class HttpCode(object):
    ok = 200
    unautherror = 401
    paramserror = 400
    servererror = 500

def restful_result(code,message,data):
    return jsonify({"code":code,"message":message,"data":data or {}})

def success(message="",data=None):
    return restful_result(code=HttpCode.ok,message=message,data=data)

def unauth_error(message=""):
    return restful_result(code=HttpCode.unautherror,message=message,data=None)

def params_error(message=""):
    return restful_result(code=HttpCode.paramserror,message=message,data=None)

def server_error(message=""):
    return restful_result(code=HttpCode.servererror,message=message or '服務器內部錯誤',data=None)

其中後臺視圖會根據表單驗證判斷結果返回出不一樣種類的方法回調，輸出不一樣的code值。例如return restful.success()，就是執行操做成功返回成功，這時就返回code值爲200表明成功。再在js文件中調用，根據其成功的傳值返回不一樣的提示框。如message爲返回的文本提示。

以註冊功能的代碼爲例子：

後臺view視圖：

#註冊功能後臺視圖

class SignupView(views.MethodView):

    def get(self):

        return_to = request.referrer

        if return_to and return_to != request.url and safeutils.is_safe_url(return_to):

            return  render_template('front/front_signup.html',return_to=return_to)

        else:

            return render_template('front/front_signup.html')

    def post(self):

        form = SignupForm(request.form)

        if form.validate():

            email = form.email.data

            username = form.username.data

            password = form.password1.data

            user = FrontUser(email=email,username=username,password=password)

            db.session.add(user)

            db.session.commit()

            return restful.success()

        else:

            print(form.get_error())

            return restful.params_error(message=form.get_error())

後臺表單判斷：

class SignupForm(BaseForm):

    email = StringField(validators=[Email(message='請輸入正確的郵箱格式'), InputRequired(message='請輸入郵箱')])

    username = StringField(validators=[Regexp(r".{2,20}", message='請輸入正確格式的用戶名！')])

    password1 = StringField(validators=[Regexp(r"[0-9a-zA-Z_\.]{6,20}", message='請輸入正確格式的密碼！')])

    password2 = StringField(validators=[EqualTo("password1", message='兩次輸入的密碼不一致！')])

前端js文件傳輸判斷：

$(function () {

    $("#submit-btn").click(function (event) {

        event.preventDefault();

        var email_input = $("input[name='email']");

        var username_input = $("input[name='username']");

        var password1_input = $("input[name='password1']");

        var password2_input = $("input[name='password2']");

 

        var email = email_input.val();

        var username = username_input.val();

        var password1 = password1_input.val();

        var password2 = password2_input.val();

 

         zlajax.post({

            'url': '/signup/',

            'data': {

                'email':email,

                'username': username,

                'password1': password1,

                'password2': password2

 

            },

            'success': function(data){

                if(data['code'] == 200){

                    var return_to = $("#return-to-span").text();

                    if(return_to){

                        window.location = return_to;

                    }else{

 

                        window.location = '/';

                    }

                }else{

                    zlalert.alertInfo(data['message']);

                }

            },

            'fail': function(){

                zlalert.alertNetworkError();

            }

        });

    })

})

前臺多重條件判斷，裏面包括板塊分類、分頁功能的結合。不止根據分類獲取帖子內容，不會出現換頁而出現板塊分類消失的狀況

具體代碼爲：

@bp.route('/')
def index():
     board_id = request.args.get('bd',type=int,default=None)
     page = request.args.get(get_page_parameter(),type=int, default=1)
     boards = BoardModel.query.all()
     start =(page-1)*config.PER_PAGE
     end = start + config.PER_PAGE
     posts=None
     total = 0

     query_obj=PostModel.query.order_by(PostModel.create_time.desc())
     if board_id:
         query_obj = query_obj.filter_by(board_id=board_id)
         posts = query_obj.slice(start,end)
         total = query_obj.count()
     else:
         posts = query_obj.slice(start,end)
         total = query_obj.count()
     pagination = Pagination(bs_version=3,page=page,total=total,outer_window=0,inner_window=2)
     context={
         'boards': boards,
         'posts':posts,
         'pagination':pagination,
         'current_board':board_id
     }
     return render_template('front/front_index.html',**context)

在這次系統中咱們放棄了上下文處理器的選擇，而從新選擇了一種新的函數方法，g函數，g函數是指每次用戶登陸都會記錄和調用其本用戶的的數據內容，不須要在後臺從新定義一個視圖函數在繼承在頁面中，減小了代碼的冗餘。提升了數值傳遞效率。很是的好用，先後臺均可以進行使用，只需在hooks文件中添加：

@bp.before_request
def my_before_request():
    if config.FRONT_USER_ID in session:
        user_id = session.get(config.FRONT_USER_ID)
        user = FrontUser.query.get(user_id)
        if user:
            g.front_user = user

並在views視圖和前臺html文件調用方法便可

 

6.成品展現

用戶註冊與登陸

註冊與登陸限制

 

 

註冊成功跳轉過快截不到圖就不放置圖片了。

用戶發佈帖子

 

 

帖子詳情頁

 

 

發佈評論

 

點贊與收藏

 

 

版塊分類

 

 

分頁功能

 

 

加精功能

 

 

我的中心

 

 

個人發佈

 

 

個人收藏

 

 

上傳頭像

 

 

 

 

修改密碼

 

 

7.我的總結

本次論壇網站系統的設計和開發中我學習到了許多flask開發的技巧，瞭解到了一個系統的開發是多麼的不容易，每個代碼的編寫都不可有一點錯誤，牽一髮動全身，尤爲是ajax傳值進行添加修改操做更是即繁瑣又須要耐心。

並在此感謝黃老師的教導，讓我在短短的一個月中有了很大的進步。