Web開發學習

Web入門：

教程資源

• 學習目的：設定簡單網頁所需的工具併發布你自己的簡易程式碼

建立第一個網站

1. 軟體安裝
2. 做好規劃，將展示什麼資訊，將使用什麼樣的字型和顏色：網站看起來是什麼樣的

繪製草圖：內容主題，影像，字型

3. 處理檔案

網站應該儲存在何處：本地網站，相關檔案放入一個單獨資料夾中，可以對映出伺服器端站點檔案結構。首先確定網站專案儲存位置，存放所有網站專案。

4. 網站應該使用什麼結構？

最基本、最常見的結構：一個主頁index.html、一個圖片資料夾image、一個樣式表資料夾styles和一個指令碼資料夾scripts

5. HTML,CSS, JS基礎

• JS：動態程式語言，當應用於HTML文件時，可為網站提供動態互動特性
• 應用場合：極其廣泛；簡單到幻燈片、照片庫、浮動佈局和響應按鈕點選，複雜到遊戲、2D/3D動畫，大型資料庫驅動程式等。

6. 釋出網站：Github

寫好了程式碼並且整理好了網站的全部檔案後，需要將它們全部上線，這樣別人才能看到。

• 獲取主機服務和域名：這種方法接入網際網路，本地檔案與伺服器檔案傳輸
• 線上工具釋出網站：

1. Github社交程式設計網站，允許上傳程式碼庫並儲存在Git版本控制系統裡，然後可以協作程式碼專案。一個特點：GitHub pages，允許將程式碼放在網上
2. Google App Engine：可從頭開始構建多級web應用，或是託管一個靜態網站

7. 網站如如何執行的：全球資訊網的工作
   

《Flask Web開發實戰》

1. 章節概括
   

---

---

---

flask框架學習實戰：Web開發

課程資源

記錄知識點：blog
總結回顧腦子裡的框架：note

整體思路

聯合專案：

• h5頁面：展示
• 後端處理：前端傳送請求給後端，後端處理，前後端分離實現前後端呼應：vue實現
• 實現邏輯（python）
  
  

三個框架：

1. flask：輕量級，靈活
2. tornado：c10k
3. Django：重量級

虛擬環境

1. 為什麼使用虛擬環境：多個專案（app開發）：滿足不同版本的包的需求就使用不同的虛擬環境（不同的house放不同的包，開發不同的app就進入不同的house（安裝包到這個house/虛擬環境）進行開發）
2. 如何建立虛擬環境

windows下：首先virtualenv，然後管理虛擬環境virtualenvwrapper

開發Web程式：針對伺服器端

• b/s：browser/server 瀏覽器（PC端瀏覽器作為客戶端）/伺服器
• c/s：client/server 客戶端（手機上app應用）/伺服器

WSGI伺服器

是Python語言定義的Web伺服器和Web應用程式或框架之間一種簡單通用的介面（遵循規則）

• 框架有多種，保證很好的融合：app.run()自動遵循WSGI跟伺服器進行融合
  

app的豐富

• 404：請求的東西沒有
• 裝飾器：路由定義與檢視函式

• 輸入域名進行瀏覽器訪問：根據路徑進行訪問指定的server埠號
  

• run(host = ‘ip地址’， port=‘埠號’)
• ip地址，一個埠號對應一個程式

預設情況下是本機訪問，如果想讓外網（雲伺服器下）都能訪問必須在run()中修改ip地址0.0.0.0的形式

• debug預設off

debug是為開發人員準備的：開發的程式碼改變，debug=true，伺服器實時改變（reload重新載入最新的程式碼）

• 設定配置檔案

app載入配置檔案即可
配置資訊擁有字典資料的類

• 請求與響應

包含三樣東西：請求/響應行，請求/響應頭，請求/響應體

post擁有請求體

response：響應，狀態碼：200ok，404not found，http狀態碼大全
響應頭：headers
響應體：響應一堆標籤：返回的內容，瀏覽器翻譯標籤

• 路由

• 給路由預設繫結檢視函式
  路由是一個裝飾器，裝飾一個函式add_url_rule()
• 路由的變數規則：路由部分出現變數，且返回型別的確定：uuid的使用（用作標識）
  
• 路由的處理：/的新增與不新增。路由是自上而下而匹配的。

• 請求和響應

返回：

• 字典瀏覽器以js格式進行翻譯；
• 其餘按照html的語法翻譯，處理成網頁形式；
• response：是類物件，其中可以有屬性、方法（可以進行呼叫）
  
• request：類物件，其中封裝了請求頭和請求體；獲取頁面引數交個後端-

request.args.get(‘username’) //get的獲取方式
request.form.get(‘username’) //post的獲取方式

• 重定向redirect()：有兩次響應，第一次那個302狀態碼，第二次立馬改變瀏覽器位址列內容為location地址，向伺服器再次發請求
  
• url_for(endpoint， values)：裝飾器中包含endpoint引數，作用：當路徑過長時，進行重定向時根據url_for()進行對映，即路由的反向解析。

• 模板：（網頁）

• 模板引擎：底層jinjia2來處理的（最終是返回成字串的）

函式已經由裝飾器app裝飾過，此函式會預設從規定好的資料夾來找東西。

• 模板語法：

1. 變數：list（列表）、dict（字典）、object（物件）
2. 程式碼控制塊：for ， if-else，loop
   {% for girl in girls %}
   。。。
   {% end for %}
3. 模板的繼承、block、include、巨集
4. js程式碼：前端動作響應

• 藍圖

• 目的：將專案分成不同功能，apps包（定義初始化函式用來建立一個app物件，）中存放不同的功能包（自己單獨定義自己的路由：匯入藍圖，註冊藍圖，裝飾器路由與繫結函式定義）
• 藍圖也是路由的不同表示方式，將app進行分解，藍圖承擔聯絡的任務

定義藍圖、註冊對應藍圖（聯絡到一個app中）

now：view、template、藍圖

接下來：model-資料庫：增刪改查

• flask-script：讓命令列支援自定義命令的工具——runserver：通過命令對其進行操作
• manager的config配置

• 目的：進行命令的管理和使用
• 公共配置類，開發環境下的配置類，生產環境下的配置類
  配置：

1. 連線路徑
2. 建立對映物件db，實現app與第三方對映工具（資料庫）之間的關聯
3. 建立命令，交給manager管理
4. 建立模型類：models.py檔案——類繼承model
   
5. 使用命令：

• 在終端執行python app.py db init，產生資料夾migrations
• 在終端執行python app.py db migtrate，生成了alembic_version版本表（升級/降級更新）

• 資料庫準備（配置資訊）：

flask app與資料庫：

• flask-sqlalchemy（第三方擴充）基於SQLAlchemy，並讓程式設計師使用起來更加方便：實現ORM對映
• flask-migrate：釋出命令工具

兩者都要掛到app上，migrate實現對映
flask的專案結構對資料庫的搭建：（見上3條配置）

• model類：

繼承db
書寫model
執行命令，生成表

查詢Query

• filter
• filter_by