Web開發學習

Change Wfafa發表於2020-10-21

Web入門:

教程資源

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

建立第一個網站

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

繪製草圖:內容主題,影像,字型

  1. 處理檔案

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

  1. 網站應該使用什麼結構?

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

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

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

  • 獲取主機服務和域名:這種方法接入網際網路,本地檔案與伺服器檔案傳輸
  • 線上工具釋出網站:
  1. Github社交程式設計網站,允許上傳程式碼庫並儲存在Git版本控制系統裡,然後可以協作程式碼專案。一個特點:GitHub pages,允許將程式碼放在網上
  2. Google App Engine:可從頭開始構建多級web應用,或是託管一個靜態網站
  1. 網站如如何執行的:全球資訊網的工作
    在這裡插入圖片描述

《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

相關文章