期末做品檢查

 

一、我的學習心得

這學期是是第一次接觸python,咱們首先學的是簡單的輸出輸入計算，到引入 turtle庫，繪製多種多樣的圖形，接着學習了字符串基本操做，進行了中英文詞頻統計，直到最後咱們學習了Python+Flask+MysqL的web建設，作出了本身的網頁。咱們由淺入深，一步一步的學習python語言，在一些小細節上有遇到過不少問題，但也在努力的解決各類問題。認識web，認識了URL是Uniform Resource Locator的簡寫，統一資源定位符。一個URL由如下幾部分組成：scheme://host:port/path/?query-string=xxx#anchor11；scheme：表明的是訪問的協議，通常爲http或者https以及ftp等。host：主機名，域名，好比www.baidu.com。port：端口號。瀏覽器默認http使用80端口,https使用443端口。path：查找路徑。如：www.jianshu.com/trending/now，後面的trending/now就是path。query-string：查詢字符串，好比：www.baidu.com/s?wd=python，後面的wd=python就是查詢字符串。anchor：錨點，後臺通常不用管，前端用來作頁面定位的。注意：URL中的全部字符都是ASCII字符集，若是出現非ASCII字符，好比中文，瀏覽器會進行編碼再進行傳輸。認識了html、js、css等，我寫了一個包含了導骯頁面、登陸註冊頁面、發佈問答頁面，在後端建設過程當中咱們引入了flask庫中的Flask, render_template，用於建立一個Flask對象以及頁面的跳轉，引入flask_sqlalchemy庫進行數據庫的關聯映射等，在後端設計過程咱們學了對數據的增刪改查等操做，利用對數據庫的查詢添加功能實現了頁面的登錄、註冊以及發佈功能的項目。在css中能定義本身滿意的風格樣式，在這期間其實會遇到許多問題，總會由於一小點的地方就會出現整個項目不能進行下去，這期間個人狀態就是不斷的遇到錯誤也不斷的找到錯誤改掉錯誤不斷的學習。因此這也使我學習了更多的不一樣的知識，也會認識到不少的錯誤。收穫的是很大的。

二、

期末做品檢查：必須完成：

1. 網站父模板統一佈局：頭部導航條、底部圖片導航、中間主顯示區域佈局
2. 註冊、登陸、註銷
3. 發佈、列表顯示
4. 詳情頁
5. 評論、列表顯示
6. 我的中心
7. 搜索，條件組合搜索
8. 一篇完整的博客
   1. 我的學期總結
   2. 總結Python+Flask+MysqL的web建設技術過程，標準以下：
      1. 便是對本身所學知識的梳理
      2. 也可做爲初學入門者的簡單教程
      3. 也可做爲本身之後複習的嚮導
      4. 也是一種向外展現能力的途徑

父模板的圖片

註冊的部分代碼及圖片

html:

 

{% extends 'base.html' %}
{% block title %}註冊{% endblock %}
{% block head %}
    <link href="../static/css/zhuce.css" rel="stylesheet" type="text/css">
    <script src="../static/js/zhuce.js"></script>
{% endblock %}
{% block body %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column">

        </div>
        <div class="col-md-6 column">
            <form class="form-horizontal" role="form" action="{{ url_for('zhuce')}}"method="post">
                <div class="form-group">
                     <label for="inputEmail3" class="col-sm-2 control-label">賬號：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" name="username" />
                    </div>
                </div>
                <div class="form-group">
                     <label for="inputEmail3" class="col-sm-2 control-label">暱稱：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="nickname" name="nickname" />
                    </div>
                </div>
                <div class="form-group">
                     <label for="inputPassword3" class="col-sm-2 control-label">密碼：</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="password" />
                    </div>
                </div>
                <div class="form-group">
                     <label for="inputPassword3" class="col-sm-2 control-label">確認密碼：</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                         <button type="submit" class="btn btn-default">註冊</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3 column">
        </div>
    </div>
</div>

{% endblock %}

css

 

h1{
    margin: auto;
    width: 50%;
    font-weight: bold;
    font-size: 20px;
    font-family: "宋體";
    color: purple;
    padding-top: 0;}
.box{
    margin: auto;
    width: 50%;
    font-family: "宋體";
    color:deeppink;
    }
.input-area{
    margin: auto;
    width: 50%;
    font-family: "宋體";

    }

js

 

function fnLogin() {
    var oUname = document.getElementById("uname");
    var oError = document.getElementById("error_box");
    var oUiphone = document.getElementById("uiphone");
    var oUpass = document.getElementById("upass");
    var oUpass1 = document.getElementById("upass1");

    oError.innerHTML="<br>"

    if(oUname.value.length<6 || oUname.value.length >20){
        oError.innerHTML="用戶名6-20";
        return;
    }else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="first number";
        return;
    } else for (var i=0 ; i<oUname.value.length;i++){
        if (oUname.value.charCodeAt(i)<48 || (oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)|| oUname.value.charCodeAt(i)>122){
            oError.innerHTML="only letter or number";
            return;
        }
    }
    if(oUpass.value.length<6 || oUpass.value.length>20){
        oError.innerHTML="密碼6-20位";
        return;
    }
    if (oUpass1.value!=oUpass.value ) {
        oError.innerHTML = "rewrite your PIN";
        return;
    }

    window.alert("註冊成功")
}

登錄的部分代碼及截圖

html:

{% extends 'base.html' %}
{% block title %}登陸{% endblock %}
{% block head %}
    <link href="../static/css/denglu.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../static/js/denglu.js"></script>
{% endblock %}
{% block body %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column">

        </div>
        <div class="col-md-6 column">
            <form class="form-horizontal" role="form" action="{{ url_for('denglu')}}"method="post">
                <div class="form-group">
                     <label for="inputEmail3" class="col-sm-2 control-label">賬號:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" name="username" />
                    </div>
                </div>
                <div class="form-group">
                     <label for="inputPassword3" class="col-sm-2 control-label">密碼:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="pass" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                             <label><input type="checkbox" />Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                         <button type="submit" class="btn btn-default" onclick=" return login()">登陸</button>
                    </div>
                </div>
                <div align="center">
         <div id="error_box"></div><br>
    </div>
            </form>
        </div>
        <div class="col-md-3 column">
        </div>
    </div>
</div>

{% endblock %}

js

function myLogin() {
             var oUname = document.getElementById("uname");
             var oError = document.getElementById("error_box");
             var oUpass=document.getElementById("upass");
             oError.innerHTML="<br>";
             //uname
             if (oUname.value.length<6 || oUname.value.length>20){
                  oError.innerHTML="用戶名6-20位";
                  return;
                 }else if((oUname.value.charCodeAt(0)>48) && (oUname.value.charCodeAt(0)<=57)){
                      oError.innerHTML = "first number";
                      return;
             }else for(var i=0;i<oUname.value.length;i++){
                  if (oUname.value.charCodeAt(i)<48 || (oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)|| oUname.value.charCodeAt(i)>122) {
                      oError.innerHTML = "only letter or number";
                      return;
                  }
             }
             //upass
             if(oUpass.value.length<6||oUpass.value.length>20){
                  oError.innerHTML="密碼6-20位"
                  return;
             }
             if((oUname.value.length<6||oUname.value.length>20)&&(oUpass.value.length<6||oUpass.value.length>20)){
                 oError.innerHTML="用戶名密碼要求6-20位"
                 return;
             }
                window.alert("登錄成功！")
             }

 

3.發佈問答界面

1.編寫要求登陸的裝飾器

from functools import wraps

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

@wraps(func)

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

          #要求登陸

          return func(*args, ** kwargs)

      return wrapper #返回一個函數

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

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

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

class Question(db.Model):

4.完成發佈函數。

保存到數據庫。

重定向到首頁

@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')
        author_id = User.query.filter(User.username == session.get('user')).first().id  # 判斷用戶名是否存在
        question = Ques(title=title, detail=detail, author_id=author_id)
        db.session.add(question)
        db.session.commit()
        return redirect(url_for('index'))

 

4.發佈評論

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

 

@app.route('/comment',methods=['GET','POST'])
@loginFirst
def comment():
        comment = request.form.get('detail')
        auth_id = User.query.filter(User.username == session.get('user')).first().id  # 判斷用戶名是否存在
        question_id = Ques.query.filter(User.username == session.get('user')).first().id
        comm = Comment(author_id=auth_id, question_id=question_id, detail=comment)
        db.session.add(comm)
        db.session.commit()
        return redirect(url_for('detail',question_id=question_id))

 

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

3.顯示評論次數

4.要求評論前登陸

 

{% extends 'base.html' %}
{% block title %}發佈問答{% endblock %}

{% block head %}{% endblock %}
{% block body %}
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-3 column">

            </div>
            <div class="col-md-6 column">

                <form role="form" action="{{ url_for('question')}}"method="post">
                    <div class="form-group">
                        <label for="exampleInputEmail1">標題</label><input type="text" class="form-control"
                                                                                    id="title" name="title"/>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">內容</label><textarea type="text" class="form-control"
                                                                                     id="detail" name="detail"
                                                                                     cols="50" rows="10"/></textarea>
                    </div>

                    <div class="checkbox">
                        <label><input type="checkbox"/>Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
            <div class="col-md-3 column">
            </div>
        </div>
    </div>


{% endblock %}

 

5.首頁

1. 在首頁添加顯示問答的列表，並定義好相應的樣式。

無序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

2. 用字典向index.html傳遞參數。

1. 首頁列表顯示所有問答：
   1. 將數據庫查詢結果傳遞到前端頁面 Question.query.all()
   2. 前端頁面循環顯示整個列表。
   3. 問答排序
2. 完成問答詳情頁佈局：
   1. 包含問答的所有信息
   2. 評論區
   3. 以往評論列表顯示區。
3. 在首頁點擊問答標題，連接到相應詳情頁。

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

   @app.route('/detail/<question_id>') def detail(question_id):     quest =      return render_template('detail.html', ques = quest) 

2. 首頁標題的標籤作帶參數的連接。       {{ url_for('detail',question_id = foo.id) }}
3. 在詳情頁將數據的顯示在恰當的位置。 

   {{ ques.title}} {{ ques.id  }}{{  ques.creat_time }}

   {{ ques.author.username }}  {{ ques.detail }}

4. 創建評論的對象關係映射：

   class Comment(db.Model):     __tablename__='comment'  

 

{% extends 'base.html' %}
{% block title %}首頁{% endblock %}
{% block head %}


{% endblock %}
{% block body %}

<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">

        </div>
        <div class="col-md-4 column">
            {% for foo in question %}

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="{{ url_for('detail',question_id=foo.id)}}">標題：{{foo.title }}</a>
                        <a href="{{ url_for('usercenter',user_id=foo.author.id,tag='1') }}">做者：{{ foo.author.nickname }}</a>
                    </h3>
                </div>

                <div class="panel-body">
                    內容：{{foo.detail }}
                </div>
                <div class="panel-footer">
　　　　　　　　    時間：{{ foo.create_time }}
                </div>

            {% endfor %}
        </div>

        <div class="col-md-4 column">
        </div>
    </div>
</div>
</div>



{% endblock %}

 

@app.route('/detail/<question_id>',methods=['GET','POST'])
def detail(question_id):
    quest = Ques.query.filter(Ques.id == question_id).first()
    comments= Comment.query.filter(Comment.question_id == question_id).all()
    return render_template('detail.html',quest=quest,comments=comments)

6.我的中心

1. 我的中心—視圖函數帶標籤頁面參數tag
2. @app.route('/usercenter/<user_id>/<tag>') def usercenter(user_id, tag):    if tag == ‘1':        return render_template('usercenter1.html', **context)

 

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

3.我的中心—導航標籤連接增長tag參數
　　　　　　<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 = username_id,tag='1') }}">所有問答</a>
                    </li>
                    <li  role="presentation">
                         <a href="{{ url_for('usercenter',user_id = username_id,tag='2') }}">所有評論</a>
                    </li>
                    <li role="presentation">
                         <a href="{{ url_for('usercenter',user_id = username_id,tag='3')}}" >我的中心</a>
                    </li>

7.實現導航條中的搜索功能

1.修改base.html 中搜索輸入框所在的

1. <form action="{{ url_for('search') }}" method="get">
2.    <input name="q" type="text" placeholder="請輸入關鍵字">

2.完成視圖函數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/',methods=['GET','POST'])
def search():
    search = request.args.get('search')
    question = Ques.query.filter(
        or_(
            Ques.title.contains(search),
            Ques.detail.contains(search)
        )

    ).order_by('-create_time')

    return render_template('index.html',question=question)