第10章PythonWeb開發(fā)Web概述一Web前端開發(fā)技術(shù)二Web前端開發(fā)工具三瀏覽器工具四Web前端開發(fā)必知標(biāo)準(zhǔn)五Web前端開發(fā)框架六第10章PythonWeb開發(fā)PythonWeb開發(fā)環(huán)境搭建七FastAPI框架八Web前端開發(fā)工具九Web服務(wù)器和部署十ChatGLMWeb應(yīng)用開發(fā)實(shí)例十一一10.1.1Web定義Web是World

Wide

Web（全球廣域網(wǎng)）的簡(jiǎn)稱，也稱為WWW、3W或W3。Web（WorldWideWeb）即全球廣域網(wǎng)，也稱為萬(wàn)維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動(dòng)態(tài)交互的、跨平臺(tái)的分布式圖形信息系統(tǒng)。10.1.2Web起源1990年初期

蒂姆·伯納斯-李在CERN提出Web概念，旨在通過(guò)超文本鏈接共享科研文檔。1993年

伊利諾伊大學(xué)厄巴納-香檳分校的NCSA組織開發(fā)了第一個(gè)瀏覽器Mosaic。1994年NetscapeNavigator（網(wǎng)景瀏覽器）發(fā)布，標(biāo)志著新一代瀏覽器的誕生。TimBerners-Lee創(chuàng)建W3C理事會(huì)，確立了Web標(biāo)準(zhǔn)的發(fā)展路徑。1995年JavaScript由BrendanEich發(fā)明，為動(dòng)態(tài)Web內(nèi)容提供支持。1998年Ajax技術(shù)出現(xiàn)，推動(dòng)Web從靜態(tài)內(nèi)容向動(dòng)態(tài)交互的轉(zhuǎn)變。JQuery等跨瀏覽器JavaScript工具庫(kù)的出現(xiàn)，簡(jiǎn)化了Web開發(fā)。Web的發(fā)展過(guò)程10.1.3Web的特點(diǎn)跨平臺(tái)：用戶可以使用各種不同的設(shè)備（如計(jì)算機(jī)、手機(jī)、平板電腦）訪問(wèn)Web。多媒體支持：Web不僅支持文本內(nèi)容，還可以包含圖片、視頻、音頻等多種媒體類型。開放標(biāo)準(zhǔn)：Web的技術(shù)標(biāo)準(zhǔn)由W3C（萬(wàn)維網(wǎng)聯(lián)盟）等組織制定，保證了不同平臺(tái)之間的互操作性和發(fā)展的穩(wěn)定性。分布式：Web是由分布在全球各地的服務(wù)器組成，用戶通過(guò)互聯(lián)網(wǎng)訪問(wèn)這些服務(wù)器上的資源。10.1.4Web的工作原理1.客戶端（通常是Web瀏覽器）發(fā)送HTTP請(qǐng)求到服務(wù)器。2.服務(wù)器接收到請(qǐng)求后，處理請(qǐng)求并返回相應(yīng)的資源，如HTML、CSS、JavaScript文件等。3.客戶端收到資源后，進(jìn)行解析和渲染，最終呈現(xiàn)給用戶。10.1.5URL統(tǒng)一資源定位符定義:用于定位互聯(lián)網(wǎng)上的資源地址。唯一性:每個(gè)網(wǎng)頁(yè)具有唯一的URL?；菊Z(yǔ)法:統(tǒng)一的基本語(yǔ)法結(jié)構(gòu)。示例:/URL的一般格式-協(xié)議類型（protocol）:如http、https、ftp。-主機(jī)名（hostname）:服務(wù)器的域名或IP地址。-端口號(hào)（port）:默認(rèn)或指定的端口。-路徑（path）:主機(jī)上的目錄或文件地址。-參數(shù)（parameters）:特殊參數(shù)的指定。-查詢（query）:動(dòng)態(tài)網(wǎng)頁(yè)的參數(shù)傳遞。-信息片斷（fragment）:定位網(wǎng)絡(luò)資源中的特定部分。URL的特點(diǎn)10.1.6HTTP超文本傳輸協(xié)議定義：HTTP（超文本傳輸協(xié)議）:一種用于傳輸超文本（如HTML）的協(xié)議，是Web通信的基礎(chǔ)。超文本傳輸協(xié)議可以進(jìn)行文字分割：超文本（Hypertext）、傳輸（Transfer）、協(xié)議（Protocol）。第10章PythonWeb開發(fā)Web概述一Web前端開發(fā)技術(shù)二Web前端開發(fā)工具三瀏覽器工具四Web前端開發(fā)必知標(biāo)準(zhǔn)五Web前端開發(fā)框架六10.2.1HTML

HTML是一種超文本標(biāo)記語(yǔ)言，用于描述網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容信息。HTML的基本組成單位是標(biāo)記，不同的標(biāo)簽用于定義不同的文檔接口，如：段落、標(biāo)題、圖像等。實(shí)例：10.2.1HTML標(biāo)記作用<h1></h1>標(biāo)題字標(biāo)記，實(shí)際有h1到h6，h1等級(jí)最高<font></font>文本標(biāo)記<b></b>和<strong></strong>加粗標(biāo)記<i></i>，<em></em>，<cite></cite>斜體標(biāo)記上角標(biāo)標(biāo)記，如x5中的指數(shù)部分下標(biāo)標(biāo)記，如a1中的下角標(biāo)部分<p></p>段落標(biāo)記，用于標(biāo)注文本構(gòu)成的一個(gè)段落<br>在不另起一段的前提下強(qiáng)制換行，該標(biāo)簽單個(gè)出現(xiàn)，無(wú)結(jié)束標(biāo)志<nobr></nobr>強(qiáng)制不換行標(biāo)記<hr>在頁(yè)面中展示一條水平線，該標(biāo)簽單個(gè)出現(xiàn)，無(wú)結(jié)束標(biāo)志<img></img>圖像標(biāo)記<ol></ol>有序列表標(biāo)記，每一行會(huì)有一個(gè)序號(hào)<ul></ul>無(wú)序列表標(biāo)記，無(wú)序號(hào)<li></li>列表項(xiàng)標(biāo)記，用于<ol>或<ul>中，用于標(biāo)記一行表項(xiàng)<table></table>表格標(biāo)記<tr></tr>行標(biāo)記<td></td>單元格標(biāo)記HTML常用標(biāo)記CSS（Cascading

Style

Sheet，層疊樣式表）是一種樣式表語(yǔ)言，它允許開發(fā)者對(duì)網(wǎng)頁(yè)的布局、顏色、字體以及其他視覺(jué)要素進(jìn)行控制，并能實(shí)現(xiàn)內(nèi)容與表現(xiàn)形式分離。CSS將HTML文檔從內(nèi)容中解耦，使得開發(fā)者能夠更好地控制頁(yè)面的外觀和樣式。10.2.2CSSCSS的語(yǔ)法結(jié)構(gòu)

在HTML樣式中有4種CSS引用方式，分別為：行內(nèi)樣式（行間樣式、內(nèi)聯(lián)樣式、行嵌樣式）、內(nèi)部樣式、鏈入外部樣式、導(dǎo)入外部樣式。10.2.2CSS行內(nèi)樣式內(nèi)部樣式

在HTML樣式中有4種CSS引用方式，分別為：行內(nèi)樣式（行間樣式、內(nèi)聯(lián)樣式、行嵌樣式）、內(nèi)部樣式、鏈入外部樣式、導(dǎo)入外部樣式。10.2.2CSS鏈接外部樣式導(dǎo)入外部樣式樣式屬性作用font-family設(shè)置字體，如常見(jiàn)的宋體、楷體font-size設(shè)置字體大小，如24pxfont-style設(shè)置字體風(fēng)格，如normal（正常）、italic（斜體）font-weight設(shè)置字體粗細(xì)，范圍在100~900，一般為整百數(shù)字，或采用保留值如：normal、bold（粗體）、bolder（特粗體）、lighter（特細(xì)體）color設(shè)置字體顏色background-color設(shè)置文字的背景顏色10.2.2CSSCSS常見(jiàn)字體屬性10.2.2JavaScript

JavaScript是一種被廣泛使用在網(wǎng)頁(yè)中的腳本語(yǔ)言，可以幫助網(wǎng)頁(yè)開發(fā)者完成網(wǎng)頁(yè)的動(dòng)態(tài)交互效果，也能完成復(fù)雜的邏輯驗(yàn)證。JavaScript必須結(jié)合HTML和CSS共同使用，單獨(dú)存在的JavaScript代碼是沒(méi)辦法執(zhí)行的。代碼示例JavaScript常用事件及其描述事件描述onClick鼠標(biāo)單擊組件時(shí)產(chǎn)生該事件onchangetext或textarea元素中的字符值出現(xiàn)改變時(shí)產(chǎn)生該事件onSelect選中文本框中的內(nèi)容時(shí)產(chǎn)生該事件onFocus將光標(biāo)放到文本框時(shí)產(chǎn)生該事件onLoad網(wǎng)頁(yè)開始加載時(shí)產(chǎn)生該事件onUnload退出網(wǎng)頁(yè)時(shí)產(chǎn)生該事件onBlur失去焦點(diǎn)時(shí)發(fā)生該事件，與onFocus相對(duì)應(yīng)，例如text、textarea或select元素不在擁有焦點(diǎn)時(shí)產(chǎn)生該事件onMouseOver鼠標(biāo)移動(dòng)到某個(gè)元素上方區(qū)域時(shí)產(chǎn)生該事件onMouseOut鼠標(biāo)指針離開某對(duì)象范圍時(shí)產(chǎn)生該事件onDblClick鼠標(biāo)雙擊組件時(shí)產(chǎn)生該事件，與onClick相對(duì)應(yīng)10.2.2JavaScriptAJAX（AsynchronousJavascriptAndXML，異步JavaScript和XML）是一種用于創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的技術(shù)。它通過(guò)在后臺(tái)與服務(wù)器進(jìn)行異步數(shù)據(jù)交換，可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下更新頁(yè)面的部分內(nèi)容。使用AJAX，可以提高網(wǎng)頁(yè)的響應(yīng)速度和用戶體驗(yàn)。10.2.2AJAX工作原理第10章PythonWeb開發(fā)Web概述一Web前端開發(fā)技術(shù)二Web前端開發(fā)工具三瀏覽器工具四Web前端開發(fā)必知標(biāo)準(zhǔn)五Web前端開發(fā)框架六

WebStorm是JetBrains推出的一款商業(yè)的JavaScript開發(fā)工具，它提供了豐富的功能和工具，包括代碼提示、調(diào)試器、版本控制等，適用于大型前端項(xiàng)目的開發(fā)和管理。

HBuilder是一款HTML5開發(fā)工具，集成了代碼編輯器、調(diào)試器、構(gòu)建工具等功能，支持多平臺(tái)開發(fā)，包括Web、移動(dòng)端和桌面應(yīng)用程序的開發(fā)，10.3Web前端開發(fā)工具WebStorm

HBuilder第10章PythonWeb開發(fā)Web概述一Web前端開發(fā)技術(shù)二Web前端開發(fā)工具三瀏覽器工具四Web前端開發(fā)必知標(biāo)準(zhǔn)五Web前端開發(fā)框架六10.4瀏覽器工具M(jìn)icrosoftEdge是由微軟開發(fā)的網(wǎng)頁(yè)瀏覽器，它是Windows操作系統(tǒng)的默認(rèn)瀏覽器。Edge采用了EdgeHTML引擎和Chromium引擎，支持最新的Web標(biāo)準(zhǔn)和技術(shù)，并提供了許多實(shí)用的功能，如集成的閱讀模式、沉浸式閱讀體驗(yàn)等。GoogleChrome是由Google開發(fā)的網(wǎng)頁(yè)瀏覽器，它以其簡(jiǎn)潔、快速和穩(wěn)定而廣受歡迎。Chrome采用了V8JavaScript引擎和Blink渲染引擎，支持多平臺(tái)（包括Windows、macOS和Linux）使用，并提供了豐富的擴(kuò)展和應(yīng)用程序生態(tài)系統(tǒng)。MozillaFirefox是一款開源的網(wǎng)頁(yè)瀏覽器，由Mozilla基金會(huì)和數(shù)百名志愿者共同開發(fā)和維護(hù)。Firefox采用了Gecko渲染引擎，支持多平臺(tái)，并注重用戶隱私和安全。Firefox提供了豐富的擴(kuò)展和主題，用戶可以根據(jù)自己的需求定制瀏覽器。第10章PythonWeb開發(fā)Web概述一Web前端開發(fā)技術(shù)二Web前端開發(fā)工具三瀏覽器工具四Web前端開發(fā)必知標(biāo)準(zhǔn)五Web前端開發(fā)框架六10.5Web前端開發(fā)必知標(biāo)準(zhǔn)HTTP（HypertextTransferProtocol）是一種用于傳輸超文本的協(xié)議，是Web通信的基礎(chǔ)。了解HTTP協(xié)議的工作原理、請(qǐng)求方法、狀態(tài)碼、報(bào)文格式等內(nèi)容，對(duì)于Web開發(fā)人員來(lái)說(shuō)至關(guān)重要。常見(jiàn)的HTTP請(qǐng)求方法包括GET、POST、PUT、DELETE等，常見(jiàn)的狀態(tài)碼包括200、404、500等。W3C（WorldWideWebConsortium）是制定Web技術(shù)標(biāo)準(zhǔn)的組織，它負(fù)責(zé)制定和推廣HTML、CSS、XML等技術(shù)規(guī)范。了解并遵循W3C標(biāo)準(zhǔn)可以確保網(wǎng)頁(yè)在不同瀏覽器上的一致性和兼容性，提高用戶體驗(yàn)。ECMAScript是JavaScript的語(yǔ)言標(biāo)準(zhǔn)，定義了語(yǔ)言的語(yǔ)法、類型、語(yǔ)義等內(nèi)容。了解最新的ECMAScript標(biāo)準(zhǔn)可以幫助開發(fā)人員更好地使用和理解JavaScript語(yǔ)言，提高代碼的質(zhì)量和效率。第10章PythonWeb開發(fā)Web概述一Web前端開發(fā)技術(shù)二Web前端開發(fā)工具三瀏覽器工具四Web前端開發(fā)必知標(biāo)準(zhǔn)五Web前端開發(fā)框架六10.6Vue

Vue.js是一款輕量級(jí)、易用的JavaScript框架，用于構(gòu)建交互式的Web界面。它采用了MVVM模式，提供了響應(yīng)式的數(shù)據(jù)綁定和組件化的開發(fā)方式。在MVVM架構(gòu)下，View和Model之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互。Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)的變化會(huì)同步到Model中，而Model數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View上。View和Model交互圖10.6Vue安裝1.下載所需要安裝包2.雙擊上一步下載的安裝程序，選擇【Next】，進(jìn)行下一步，完成安裝。3.檢測(cè)安裝是否成功。通過(guò)快捷鍵【W(wǎng)in+R】打開系統(tǒng)【運(yùn)行】，輸入【cmd】后單擊回車，打開命令行界面。輸入命令【node-v】查看node.js的版本號(hào)，檢測(cè)是否安裝成功安裝程序頁(yè)面第10章PythonWeb開發(fā)PythonWeb開發(fā)環(huán)境搭建七FastAPI框架八Web服務(wù)器和部署九ChatGLMWeb應(yīng)用開發(fā)實(shí)例十1、安裝Python解釋器:首先需要從Python官方網(wǎng)站下載并安裝Python解釋器。在安裝過(guò)程中，可以選擇將Python添加到系統(tǒng)環(huán)境變量中，以便在命令行中直接使用Python解釋器。2、設(shè)置虛擬環(huán)境（可選）:為了管理不同項(xiàng)目所需的不同Python包依賴，可以使用虛擬環(huán)境工具（如virtualenv、venv）創(chuàng)建獨(dú)立的Python環(huán)境。3、安裝pip:pip是Python的包管理工具，用于安裝和管理Python包。在安裝Python解釋器后，pip通常會(huì)自動(dòng)安裝。如果沒(méi)有安裝，可以手動(dòng)安裝pip。10.7Python開發(fā)環(huán)境的安裝10.7數(shù)據(jù)庫(kù)的安裝安裝PostgreSQL：訪問(wèn)PostgreSQL官網(wǎng)：/，根據(jù)自己的操作系統(tǒng)和需求下載對(duì)應(yīng)的軟件安裝包。運(yùn)行上一步下載的軟件安裝包，按照提示安裝。（1）設(shè)置賬號(hào)和密碼2.設(shè)置端口3.設(shè)置地區(qū)10.7數(shù)據(jù)庫(kù)使用安裝MySQL

按照PostgreSQL的安裝步驟，訪問(wèn)MySQL官方網(wǎng)站，并下載適用于操作系統(tǒng)的MySQL安裝程序。

在安裝完成后，MySQL服務(wù)可能會(huì)自動(dòng)啟動(dòng)，如果沒(méi)有自動(dòng)啟動(dòng)，可以手動(dòng)啟動(dòng)MySQL服務(wù)。在Windows上，您可以在服務(wù)管理器中找到MySQL服務(wù)并啟動(dòng)它。啟動(dòng)MySQL連接MySQL服務(wù)器第10章PythonWeb開發(fā)PythonWeb開發(fā)環(huán)境搭建七FastAPI框架八Web服務(wù)器和部署九ChatGLMWeb應(yīng)用開發(fā)實(shí)例十10.8FastAPI框架

1.創(chuàng)建FastAPI應(yīng)用

2.定義路由

在FastAPI應(yīng)用中定義路由，使用不同的HTTP方法（如GET、POST、PUT、DELETE）來(lái)處理不同的請(qǐng)求。

return{"message":"Hello,World"}:這是read_root函數(shù)的返回語(yǔ)句。在這里，我們返回一個(gè)包含一個(gè)名為"message"的鍵和字符串值"Hello,World"的字典。由于FastAPI默認(rèn)會(huì)將返回值轉(zhuǎn)換為JSON格式，因此在這種情況下，響應(yīng)將是一個(gè)包含JSON數(shù)據(jù)