期末做品檢查

 

1、Python+Flask+MySQL介紹

工具篇（內含插件）

本模塊分別敘述三種開發工具和相關插件：

                       

（1）Pycharm是Python語言的載體，具備智能代碼編輯器，能理解 Python 的特性並提供卓越的生產力推動工具：自動代碼格式化、代碼完成、重構、自動導入和一鍵代碼導航等。截止目前的學習爲止，筆者發現它的各類提示很強，好比說沒用的變量顏色會變灰，用錯了的變量下面會有紅色波浪線、有書寫提示，另外它的索引功能也很強。這些在開發時能大大提升效率，減小查找Bug和編寫的麻煩。能夠說PyCharm是Python 專業開發人員和剛起步人員使用的有力工具。它的缺點是佔用空間略大，比較笨重。但和它的優勢相比，缺點微不足道，筆者也期待更加深刻的學習。

（2）裝好Pycharm後，選擇使用Flask框架搭建Web項目。Flask做爲面向小型應用的微框架，靈活性伸縮性很好。

（3）安裝flask_sqlalchemy插件：該插件定義了一些方法，使建立models和輸出query更方便。

（4）MySQL是一種關係數據庫管理系統，關係數據庫將數據保存在不一樣的表中，並根據請求讀取數據。另外，它能夠設置密碼以保證用戶信息不外漏。

（5）Navicat是強大的可視化數據庫管理工具,用於開發和管理MySQL|SQL Server|SQLite|Oracle等數據庫，而且支持多重鏈接，讓數據庫管理更加方便直觀。

 

2、創建Flask項目

新建Flask項目後，自動生成如下文件：

1. static               
2. templates
3. 主py文件

筆者在static文件夾下創建css（存放css文件）文件夾、js（存放js文件）文件夾和img文件夾（存放圖片，可要可不要，具體看需求），在templates下創建須要用到的html5文件（製做網頁模板）。

  

CSS+JS+HTML5

CSS

（1）學好CSS是網頁外觀的重要一點，CSS能夠幫助把網頁外觀作得更加美觀。

（2）圖片展現

文件名

.page-header{

    width: 500px;

    height: 500px;

    padding: 50px;     /*設置內邊距*/

    position:   absolute;   /*絕對定位*/

    left: 50%;

    top:50%;

    line-height: 30px;

    border: 2px;  /*邊框*/

    border-radius: 50px;    /*圓角風格*/

    margin-left: -200px;

    margin-top: -250px;

 

頁面展現

（3）問題：筆者對CSS的應用不熟練，分不清邊距線條格式（border-style）、內邊距(padding)、外邊距(margin)等格式的應用。好比說，外邊距又分爲靠左外邊距（margin-left）、靠右外邊距(margin-right)、margin-top(上浮外邊距）等更加細節性的樣式，這些我目前還要一邊作一邊看網上教程，沒達到駕輕就熟的程度。

html文件必須使用<link>標籤把css文件連接進來，而css文件有三種選擇器：

1. HTML 選擇器（直接使用html文件中的標籤名）
2. CLASS 類選擇器（在html文件中定義class屬性，並在css文件中使用" . class名 "的方式）
3. ID 選擇器（在html文件中定義class屬性，並在css文件中使用使用" #class名 "的方式）

 

總結：若是把項目當作一我的，CSS至關於漂亮的衣服，起着修飾和打扮的做用，讓頁面看起來更賞心悅目。

 

JS

學習要求：學習JavaScript的基本語法，以及如何使用JavaScript編程將會提升開發人員的我的技能。

用處：定義function函數，並在html網頁中調用它，便可實現JS中寫入的邏輯處理和動做執行，在本項目中的登陸、註冊和密碼驗證等功能都用了JS語法。

function fnLogin() {

    var usern =   document.getElementById("usern");

    var passw =   document.getElementById("passw");

    var oError =   document.getElementById("error_box");

    var isError = true;

    oError.innerHTML =   "<br>";

    // 驗證用戶名

    if (usern.value.length < 6 ||   usern.value.length > 20) {

        oError.innerHTML   = "用戶名只能6-20位";

        isError   = false;

        return isError;

    } else if ((usern.value.charCodeAt(0)   >= 48) && (usern.value.charCodeAt(0) <= 57)) {

        oError.innerHTML   = "用戶名首字母不能是數字";

        isError   = false;

        return isError;

    } else for (var i = 0; i <   usern.value.length; i++) {

        if ((usern.value.charCodeAt(i)   < 48) || (usern.value.charCodeAt(i) > 57) && (usern.value.charCodeAt(i)   < 97) || (usern.value.charCodeAt(i) > 122)) {

            oError.innerHTML   = "用戶名只能由數字和字母組成";

            isError   = false;

            return isError;

        }

    }

 

    // 驗證密碼

    if (passw.value.length < 6 ||   passw.value.length > 20) {

        oError.innerHTML   = "密碼只能6-20位";

        isError   = false;

        return isError;

    }

    // 驗證彈框

    window.alert("登陸成功！");

    return true;

}

 

 

function fnRegistration() {

    var usern =   document.getElementById("usern");

    var passw =   document.getElementById("passw");

    var circle =   document.getElementById("circle");

    var oError =   document.getElementById("error_box");

    var isError = true;

    oError.innerHTML =   "<br>";

    // 驗證用戶名

    if (usern.value.length < 6 ||   usern.value.length > 20) {

        oError.innerHTML   = "用戶名只能6-20位";

        isError   = false;

        return isError;

    } else if ((usern.value.charCodeAt(0)   >= 48) && (usern.value.charCodeAt(0) <= 57)) {

        oError.innerHTML   = "用戶名首字母不能是數字";

        isError   = false;

        return isError;

    } else for (var i = 0; i <   usern.value.length; i++) {

        if ((usern.value.charCodeAt(i)   < 48) || (usern.value.charCodeAt(i) > 57) &&   (usern.value.charCodeAt(i) < 97) || (usern.value.charCodeAt(i) > 122))   {

            oError.innerHTML   = "用戶名只能由數字和字母組成";

            isError   = false;

            return isError;

        }

    }

 

    // 驗證密碼

    if (passw.value.length < 6 ||   passw.value.length > 20) {

        oError.innerHTML   = "密碼只能6-20位";

        isError   = false;

        return isError;

    }

 

    // 驗證再次輸入的密碼

    if (circle.value != passw.value) {

        oError.innerHTML   = "密碼不一致";

        isError   = false;

        return isError;

    }

    // 驗證彈框

    window.alert("註冊成功！");

    return true;

}

 

html技術：各標籤樣式（其中div的靈活運用：class id等屬性）

各類標籤發揮不一樣的做用，

<div></div>分塊標籤

<h1></h1>

<p></p>

<span></span>

還有很是多的標籤可供選擇，看着整潔又美觀。

 

 

Py文件（  config.py關聯到數據庫MySql，建表，利用可視化工具Navicat Mysql查看數據）

（1）數據庫建表問題

• 安裝與配置python3.6+flask+mysql數據庫
  • 下載安裝MySQL數據庫
  • 下載安裝MySQL-python 中間件
  • pip install flask-sqlalchemy （Python的ORM框架SQLAlchemy）
  • mysql建立數據庫
  • 數據庫配置信息config.py
  • 創建mysql和app的鏈接
  • 建立用戶模型

（2）導航設置（JS實現夜間模式）

（3）圖片連接（經過a標籤內的href屬性跳轉到相應html頁面）

（4）註冊、登陸（用session記住用戶名）、註銷（session.clear()）、重定向頁面（redirect）

（5）登陸後更新導航

用上下文處理器app_context_processor定義函數

1. 獲取session中保存的值
2. 返回字典

在父模板中更新導航，插入登陸狀態判斷代碼。

1. 注意用{% ... %}表示指令。
2. {{ }}表示變量

（6）發佈功能完成

• 編寫要求登陸的裝飾器

         from functools import wraps

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

@wraps(func)

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

          #要求登陸

          return func(*args, ** kwargs)

      return wrapper #返回一個函數

• 應用裝飾器，要求在發佈前進行登陸，登陸後可發佈（@loginFirst）

@app.route('/question/',methods=['GET','POST'])
@loginFirst
def question():
（7）首頁列表顯示所有問答，完成問答詳情頁佈局，在首頁點擊問答標題，連接到相應詳情頁。
（8）評論列表循環，我的中心展現和我的中心標籤導航（點擊文章標題發佈者Id和評論Id能鏈進我的中心）

• 顯示全部評論 {% for foo in ques.comments %}
• 全部評論排序 uquestion = db.relationship('Question', backref=db.backref('comments', order_by=creat_time.desc))
• 顯示評論條數 {{ ques.comments|length }}

（9）從首頁問答標題到問答詳情頁

（10）完成搜索功能

（11）完成密碼保護（設置對內的_password）

 

===================================================================================================================

期末做品代碼（代碼部分太多，因此補貼上來，貼了運行圖）

 

 

 

 

登陸前導航條↑

 

登陸中，因爲先前註冊過，並用session留下了用戶記錄：

 

 

 

 登陸成功↑

 

註銷後

 

點擊發布，會由於先前定義了@loginFirst登陸裝飾器而跳到登陸頁

 

 從新登陸後點擊發布，進入文章編輯區：

 

 

 點擊發布跳到文章詳情頁

 

 評論列表

 

 點擊進入我的中心

 

3、我的總結

 若是說網頁是一我的，html至關於他的骨架，他的架構清晰分明，但他只是靜態的頁面，不具備交互性。JS是他的神經肌肉，用來進行動做處理。CSS是他身上的衣服，提高我的的顏值和睦質。py文件是他的大腦，經過各類視圖函數給身體其餘部位發佈、調動各類號令，是主心骨。

python是這個孕育這個「人」的容器，它的代碼清晰簡潔，調試起來比Java簡單的多，很適合初學編程者。初學者能夠把精力集中在編程對象和思惟方法上，而不用去擔憂語法、類型等等外在因素。並且Python標準庫確實很龐大，它有可定義的第三方庫可使用。能夠幫助你處理各類工做，包括正則表達式、文檔生成、單元測試、線程、數據庫、網頁瀏覽器、CGI、FTP、電子郵件、XML等等。做爲編程小白，我仍是很期待深刻的學習的。