期末做品檢查

1、我的學期總結

       經過一學期的學習，我學會了使用Flask框架搭建一個web service，並在其中加上一些簡單的css，js，html等。爲數18周的信息管理系統的學習讓我感覺頗深，每學一點新內容，老師都發布做業給咱們完成，這對於咱們是一種知識鞏固的好方法，讓咱們及時發現沒有理解的地方，並及時問老師和同窗，及時掌握好新內容。學習過程當中我也會本身經過網絡學習簡單的css的設計，一點一點修改本身頁面的樣式等等。

 

2、總結Python+Flask+MysqL的web建設技術過程

   一、使用軟件

         Python3.5+mysql5.7+pycharm2017.2

   二、數據庫

        (1)、鏈接數據庫

 

import os

SQLALCHEMY_DATABASE_URI='mysql+pymysql://root:@127.0.0.1:3306/hog?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATTONS = False

SECRET_KEY = os.urandom(24)

 

       (2)、建立數據庫

app = Flask(__name__)
app.config.from_object(config)
db = SQLAlchemy(app)

#建立用戶模型
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)  #內部使用

    @property
    def password(self):#外部使用，取值
        return self._password

    @password.setter
    def password(self, row_password):
        self._password = generate_password_hash(row_password)

    def check_password(self, row_password):#外部使用，賦值
        result = check_password_hash(self._password, row_password)
        return result

class Question(db.Model):
    __tablename__ = 'question'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    question = db.Column(db.String(100), nullable=False)
    questionDetail = 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'))#User類添加question屬性，定義反向關係，這一屬性能夠訪問Question模型

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'))
    detail=db.Column(db.Text,nullable=False)
    creat_time=db.Column(db.DateTime,default=datetime.now)
    question=db.relationship('Question',backref=db.backref('comments',order_by=creat_time.desc))
    author=db.relationship('User',backref=db.backref('comments'))

db.create_all()

   三、頁面設計

       （1）註冊&登陸界面

               js文件： onclick函數return True時才提交表單，return False時不提交表單。

              html文件：

1. 1. <form>中設置 action和method="post"
   2. <input> 中設置 name
   3. onclick="return fnLogin()"

               主py文件中：

1. 1. from flask import  request, redirect, url_for
   2. @app.route('/regist/', methods=['GET', 'POST’])
   3. 設置`SECRET_KEY`
   4. `session`：增長用戶名`session['username']=`username

   

主要代碼：

html:

 <div class="box">
        <h3>歡迎註冊</h3>
        <form action="{{ url_for("sign_in") }}" method="post">
            <div class="input_box">
               輸入用戶名： <input id="name"  name="username" type="text" placeholder="請輸入用戶名" class="b1">
        </div>
             <div class="input_box">
                輸入密碼： <input id="password" name="password" type="password" placeholder="請輸入密碼" class="b1">
             </div>
            <div class="input_box">
                確認密碼： <input id="passwordagain" name="passwordagain" type="password" placeholder="請確認密碼" class="b1">
             </div>
        <div id="error_box" class="error_box"><br></div>
        <div class="button">
            <button  class="login" onclick="fnLogin()">登陸</button>
            <button  class="cancel" onclick=window.alert("是否確認離開，您輸入的數據可能不會被保存")>取消</button></div>
    </div>


  <div class="box">
        <h3>歡迎登錄</h3>
        <form action="{{ url_for('sign_up') }}" method="post">
            <div class="input_box">
               用戶名： <input id="name" name='username' type="text" placeholder="請輸入用戶名" class="b1">
        </div>
             <div class="input_box">
                密碼： <input id="password" name="password" type="password" placeholder="請輸入密碼" class="b1">
             </div>
        <div id="error_box" class="error_box"><br></div>
        <div class="button">
            <button  class="login" onclick="fnLogin()">登陸</button>
            <button  class="cancel" onclick=window.alert("是否確認離開，您輸入的數據可能不會被保存")>取消</button>
        </div>
    </div>

js:

function fnLogin() {
    var uname=document.getElementById("name");
    var upassword=document.getElementById("password");
    var uError=document.getElementById("error_box");
    var upasswordagain = document.getElementById("passwordagain");
    var isError = true;
    uError.innerHTML="<br>";
    if(uname.value.length<6||uname.value.length>20){
        uError.innerHTML="用戶名的長度需爲6-20位";
        isError = false;
        return isError;
    }else if((uname.value.charCodeAt(0)>=48)&&(uname.value.charCodeAt(0)<=57)){
        uError.innerHTML="首字母不能是數字。";
        isError = false;
        return isError;
    }else for(var i=0;i<uname.value.length;i++){
        if((uname.value.charCodeAt(i)<48||uname.value.charCodeAt(i)>57)&&(uname.value.charCodeAt(i)<97||uname.value.charCodeAt(i)>122)){
            uError.innerHTML="只能包含字母或數字。";
            isError = false;
            return isError;
        }
    }
    if (upassword.value.length<6||upassword.value.length>20){
        uError.innerHTML="密碼的長度需爲6-20位";
        isError = false;
        return isError;
    }
    if(upasswordagain.value!=upassword.value){
        uError.innerHTML="輸入密碼不一致。";
        isError = false;
        return isError;
    }else if(upasswordagain.value==""){
        uError.innerHTML="未確認密碼。";
        isError = false;
        return isError;
    }
    return isError;
    window.alert("登陸成功！")
}

py:

@app.route('/sign_up/',methods=['GET','POST'])#登陸
def sign_up():
    if request.method == "GET":
        return render_template("sign_up.html")
    else:
        username = request.form.get("username")
        password = request.form.get("password")
        user = User.query.filter(User.username == username).first()
        if user:
            if user.check_password(password):
                session['user'] = username
                session['userid'] = user.id
                session.permanent = True
                return redirect(url_for('first'))
            else:
                return 'password error'
        else:
           return 'username is not existed'


@app.route('/sign_in/',methods=['GET','POST'])#註冊
def sign_in():
    if request.method == "GET":
        return render_template("sign_in.html")
    else:
        username = request.form.get("username")
        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)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('sign_up'))

（2）父模板，首頁

主要代碼：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}Hogwarts</title>
    <base  target="_blank">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}">
    <script src="{{ url_for('static',filename='js/base.js') }}"></script>
{% block head %}
{% endblock %}

</head>
<body class="body" id="myBody">


<header>

    <nav class="nav">
        <ul>
            <li><img id="on_off" onclick="mySwitch()" src="{{ url_for('static',filename='images/bulboff.jpg') }}" width="40px"></li>
            <li><a href="{{ url_for('first') }}">首頁</a></li>
            <li><a href="">校園新聞</a></li>
            <li><a href="{{ url_for('question') }}">討論交流</a></li>


            <form action="{{ url_for('search') }}" method="get">
                <li><input type="text"id="search" class="form-control" name="search"placeholder="請輸入搜索內容" ></li>
                <li><button id="button1"type="submit">搜索</button></li>
            </form>
            {% if username %}
                <li>[<a href="{{ url_for('usercenter',user_id =session.get('userid'),tag=1) }}" id="aaa">{{ username }}</a>·<a href="{{ url_for('logout') }}">註銷</a>]</li>
            {% else %}
                <li>[<a href="{{ url_for('sign_up') }}">登陸</a>·<a href="{{ url_for('sign_in') }}">註冊</a>]</li>
            {% endif %}
        </ul>
    </nav>
</header>
<div class="title">
    <h1>霍格沃茲論壇</h1>
    <h2>Hogwarts'BBS</h2>
</div>


{% block main %}

{% endblock %}

<div id="bottom">
    <a href="">聯繫咱們</a>
    <a href="">加入咱們</a>
    <a href="">校長室</a>
    <a href="">幫助中心</a>
    <a href="">合做夥伴</a>
</div>

<div class="copyright">
    <p>Copyright &copy; 2017. Created by <a href="#" target="_blank">Judy_L</a></p>
</div>

</body> </html>




<p class="slogan">歡迎你，{{username}}</p>
    {% for foo in question %}
        <ul class="list-group" >
        <li class="list-group-item">
            <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
            <a href="{{ url_for('usercenter',user_id = foo.author_id,tag=1) }}">ｉｄ：{{ foo.author.username }}</a>
            <br>
            <a href="{{ url_for('question_detail' ,question_id=foo.id)}}">標題：{{ foo.question }}</a>
            <br>
            <a >詳情：{{ foo.questionDetail }}</a>
            <br>
       　　 <span class="badge">{{ foo.creat_time }}</span>
        </li>
        </ul>

py:

@app.route('/')
def first():
    context = {
        'question': Question.query.order_by('creat_time').all()
    }
    return render_template('first.html',**context)

（3）登錄後更新導航條

• 用上下文處理器app_context_processor定義函數
  1. 獲取session中保存的值
  2. 返回字典
• 在父模板中更新導航，插入登陸狀態判斷代碼。
  1. 注意用{% ... %}表示指令。
  2. {{ }}表示變量
• 完成註銷功能。
  1. 清除session
  2. 跳轉

html:

{% if username %}
    <li>[<a href="{{ url_for('usercenter',user_id =session.get('userid'),tag=1) }}" id="aaa">{{ username }}</a>·<a href="{{ url_for('logout') }}">註銷</a>]</li>
{% else %}
    <li>[<a href="{{ url_for('sign_up') }}">登陸</a>·<a href="{{ url_for('sign_in') }}">註冊</a>]</li>
{% endif %}

py:

@app.context_processor
def mycontext():
    usern=session.get('user')
    if usern:
        return {'username':usern}
    else:
        return {}

@app.route('/logout/')
def logout():
    session.clear()
    return render_template("first.html")

（4）發佈功能 並在首頁顯示

• 編寫要求登陸的裝飾器

from functools import wraps

def loginFirst(func): #參數是函數

@wraps(func)

      def wrapper(*args, ** kwargs): #定義個函數將其返回

          #要求登陸

          return func(*args, ** kwargs)

      return wrapper #返回一個函數

• 應用裝飾器，要求在發佈前進行登陸，登陸後可發佈。

@app.route('/question/',methods=['GET','POST'])
@loginFirst
def question():

 

• 創建發佈內容的對象關係映射。

class Question(db.Model):

• 完成發佈函數。

保存到數據庫。

重定向到首頁：

• 在首頁添加顯示問答的列表，並定義好相應的樣式。
• 用字典向index.html傳遞參數。

     

html:

<p class="slogan">歡迎你，{{username}}</p>
    {% for foo in question %}
        <ul class="list-group" >
        <li class="list-group-item">
            <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
            <a href="{{ url_for('usercenter',user_id = foo.author_id,tag=1) }}">ｉｄ：{{ foo.author.username }}</a>
            <br>
            <a href="{{ url_for('question_detail' ,question_id=foo.id)}}">標題：{{ foo.question }}</a>
            <br>
            <a >詳情：{{ foo.questionDetail }}</a>
            <br>
       　　 <span class="badge">{{ foo.creat_time }}</span>
        </li>
        </ul>


 <div class="box1" >
    <form action="{{ url_for('question') }}" method="post">
    <h3 > 發帖</h3>
        <div class="TT">
            <label for="question">標題：</label><br>
            <textarea id="question" name="question" cols="100" rows="1"></textarea><br>
            <label for="questionDetail">內容：</label><br>
            <textarea  id="questionDetail" name="questionDetail" cols="100" rows="10"></textarea>
        </div>
       <br>
        <div class="ja">
            <button  class="sent" onclick="fnchat">發佈</button>
        </div>
    </div>

py:

def loginFirst(func): #參數是函數
    @wraps(func)
    def wrapper(*args, **kwargs): #定義個函數將其返回
        if session.get('user'):
            return func(*args, **kwargs)
        else:
            return redirect(url_for('sign_up'))
    return wrapper #返回一個函數

@app.route('/question/', methods=['GET' , 'POST'])
@loginFirst
def question():
    if request.method == 'GET':
        return render_template('question.html')
    else:
        question = request.form.get('question')
        questionDetail = request.form.get('questionDetail')
        author_id = User.query.filter(User.username == session.get('user')).first().id
        question = Question(question = question, questionDetail = questionDetail, author_id = author_id)
        db.session.add(question) #保存數據庫
        db.session.commit() #提交
        return redirect(url_for('first'))

（5）、首頁連接到問答詳情頁

主PY文件寫視圖函數，帶id參數。 

@app.route('/question_detail/<question_id>')
def question_detail(question_id):
    quest = Question.query.filter(Question.id == question_id).first()
    return render_template('question_detail.html',ques=quest)

首頁標題的標籤作帶參數的連接。

{{ url_for('question_detail' ,question_id=foo.id)}}

在詳情頁將數據的顯示在恰當的位置。

<div class="detail">
    <div class="detail_left">
       <h3>{{ ques.question }}</h3>
        <a href="{{ url_for('usercenter',user_id=session.get('userid'),tag=1) }}" style="font-size: 18px">{{ ques.author.username }} <span class="badge">{{ ques.creat_time }}</span></a>
        <hr>
        <a>{{ ques.questionDetail }}</a>
        <hr>
        <form action="{{ url_for('comment') }}" method="post">
            <textarea  name="new_comment" class="form-control1" rows="3" id="new_comment" placeholder="請寫下你的評論..."></textarea>
            <input name="question_id" type="hidden" value="{{ ques.id }}"/>
            <br><button type="submit" class="btn-default">發佈</button>
        </form>
        <h4>評論：({{ ques.comments|length }})</h4>
        <ul class="list-group">
        {% for foo in ques.comments %}
            <li class="list-group-item">
                <span class="glyphion-heart-empty" aria-hidden="true"></span>
                ❤<a href="{{ url_for('usercenter',user_id=session.get('userid'),tag=1) }}">{{ foo.author.username }}</a>
                <span class="badge">{{ foo.creat_time }}</span>
                <p class="comdetail">{{ foo.detail }}</p>

            </li>

（6）完成評論功能

定義評論的視圖函數
@app.route('/comment/',methods=['POST'])
def comment()：
讀取前端頁面數據，保存到數據庫中

@app.route('/comment/', methods=['POST'])
@loginFirst
def comment():
    comment = request.form.get("new_comment")
    question_id = request.form.get("question_id")
    author_id = User.query.filter(User.username == session.get('user')).first().id
    comm = Comment(author_id=author_id,question_id=question_id,detail=comment)
    db.session.add(comm)
    db.session.commit()
    context = {
        'question': Question.query.order_by('creat_time').all(),
        'comments': Comment.query.order_by('creat_time').all()
    }
    question = Question.query.filter(Question.id == question_id).first()
    return render_template('question_detail.html', ques=question, **context)

用<input type="hidden" 方法獲取前端的"question_id" 

<input name="question_id" type="hidden" value="{{ ques.id }}"/>

顯示評論次數

<h4>評論：({{ ques.comments|length }})</h4>

要求評論前登陸

@loginFirst

嘗試實現詳情頁面下的評論列表顯示

<ul class="list-group">
{% for foo in ques.comments %}
    <li class="list-group-item">
        <span class="glyphion-heart-empty" aria-hidden="true"></span>
        ❤<a href="{{ url_for('usercenter',user_id=session.get('userid'),tag=1) }}">{{ foo.author.username }}</a>
        <span class="badge">{{ foo.creat_time }}</span>
        <p class="comdetail">{{ foo.detail }}</p>
    </li>
{% endfor %}
</ul>

（7）我的中心

新頁面userbase.html,用<ul ><li role="presentation"> 實現標籤頁導航。
<ul class="nav nav-tabs">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<ul class="nav_ul">
    <h4>{{ user.username }}'s zone</h4>
    <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag=1) }}">所有問答</a> </li>
    <li role="presentation"><a href="{{url_for('usercenter',user_id=user.id,tag=2) }}">所有評論</a> </li>
    <li role="presentation"><a href="{{url_for('usercenter',user_id=user.id,tag=3) }}">我的信息</a> </li>
    <br><br><br><br><br>
</ul>
    {% block user %}
    {% endblock %}

製做我的中心的三個子頁面，重寫userbase.html中定義的user塊，分別用於顯示問答、評論、我的信息

   <div class="col-md-8 column" style="margin:0 auto;width:1000px;height:auto;border-style:groove; background-color:black;
    opacity: 0.7;">
     <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}} 發佈的問題<span class="badge"></span> </h3>
        <ul class="list-unstyled">
            {% for foo in questions %}
                <li class="list-group-item" style="list-style: none;">
                    <br><p>文章標題：<a href="{{ url_for('question_detail',question_id=foo.id)}}">{{ foo.question}}</a></p>
                    <p>主要內容：{{ foo.questionDetail }}</p>
                    <small><a>{{ foo.author.username }}</a></small>
                    <span class="badge">{{foo.creat_time}}</span>
                    <hr>
                </li>
            {% endfor %}
        </ul>
    </div>


    <div class="col-md-8 column" style="margin:0 auto;width:1000px;height:auto;border-style:groove; background-color:black;
    opacity: 0.7;">
        <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            {{username}} 發佈的評論<span class="badge"></span> </h3>
        <ul class="list-unstyled">
            {% for foo in comments %}
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                    <a href="#">{{foo.author.username }}</a>
                    <span class="badge">{{foo.creat_time}}</span>
                    <p style="">{{foo.detail}}</p>
                    <br>
                </li>
            {% endfor %}
        </ul>
    </div>


    <div class="col-md-8 column"style="margin:0 auto;width:1000px;height:auto;border-style:groove; background-color:black;
    opacity: 0.7;" >
        <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            {{username}}<small>我的信息<span class="badge"></span> </small></h3>
        <ul class="list-unstyled" >
            <li class="list-group-item">用戶：{{username}}<a href="{{ url_for('ModifyPassword') }}">修改密碼</a></li>
            <li class="list-group-item">文章篇：{{ user.question|length }}</li>
            <li class="list-group-item">評論數：{{ user.comments|length }}</li>
        </ul>
    </div>

py定義視圖函數

@app.route('/usercenter/<user_id>/<tag>')
@loginFirst
def usercenter(user_id,tag):
    user=User.query.filter(User.id==user_id).first()
    mycontext={
        'user':user,
        'questions': user.question,
        'comments': user.comments,
    }
    if tag == '1':
        return render_template('user1.html',**mycontext)
    elif tag == '2':
        return render_template('user2.html', **mycontext)
    else:
        return render_template('user3.html', **mycontext)

（8）搜索功能

1. 準備視圖函數search()
完成視圖函數search()
1. 獲取搜索關鍵字q = request.args.get('q’)
2. 條件查詢qu = Question.query.filter(Question.title.contains(q)).order_by('-creat_time’)
3. 加載查詢結果：return render_template('index.html', question=qu）

@app.route('/search/')
def search():
    qu = request.args.get('search')
    ques = Question.query.filter(
        or_(
             Question.question.contains(qu),
             Question.questionDetail.contains(qu)
         )
    ).order_by('creat_time')
    return render_template('base.html',questions = ques)

1. 修改base.html 中搜索輸入框所在的
   1. <form action="{{ url_for('search') }}" method="get">
   2.    <input name="q" type="text" placeholder="請輸入關鍵字">
      

      <form action="{{ url_for('search') }}" method="get">
                      <li><input type="text"id="search" class="form-control" name="search"placeholder="請輸入搜索內容" ></li>
                      <li><button id="button1"type="submit">搜索</button></li>
                  </form>

2. 組合條件查詢
   from sqlalchemy import or_, and_ 

 （9）密碼保護

①更新User對象，設置對內的_password

_password = db.Column(db.String(200), nullable=False)  #內部使用

②編寫對外的password

from werkzeug.security import generate_password_hash, check_password_hash

③密碼驗證的方法：

    def check_password(self, row_password): #密碼驗證

     result = check_password_hash(self._password,row_password)

      return result

@property
    def password(self):#外部使用，取值
        return self._password

    @password.setter
    def password(self, row_password):
        self._password = generate_password_hash(row_password)

    def check_password(self, row_password):#外部使用，賦值
        result = check_password_hash(self._password, row_password)
        return result

  if user.check_password(password):

 

以上內容爲我期末做品的大體制做過程，代碼仍存在缺陷，我會繼續努力的。