階段三前端開發：HTTP協議和靜態Web服務器一02

階段三前端開發：HTTP協議和靜態Web服務器一029

TTP 協議

學習目標

能夠知道 HTTP 協議的作用

1. HTTP 協議的介紹

HTTP 協議的全稱是(HyperText Transfer Protocol)，翻譯過來就是超文本傳輸協議。

超文本是超級文本的縮寫，是指超越文本限制或者超鏈接，比如:圖片、音樂、視頻、超鏈接等等都屬于超文本。

HTTP 協議的制作者是蒂姆·伯納斯-李，1991年設計出來的，HTTP 協議設計之前目的是傳輸網頁數據的，現在允許傳輸任意類型的數據。

傳輸 HTTP 協議格式的數據是基于 TCP 傳輸協議的，發送數據之前需要先建立連接。

2. HTTP 協議的作用

它規定了瀏覽器和 Web 服務器通信數據的格式，也就是說瀏覽器和web服務器通信需要使用http協議。

3. 瀏覽器訪問web服務器的通信過程

通信效果圖:

4. 小結

HTTP協議是一個超文本傳輸協議
HTTP協議是一個基于TCP傳輸協議傳輸數據的
HTTP協議規定了瀏覽器和 Web 服務器通信數據的格式

URL

學習目標

能夠知道URL的組成部分

1. URL的概念

URL的英文全拼是(Uniform Resoure Locator),表達的意思是統一資源定位符，通俗理解就是網絡資源地址，也就是我們常說的網址。

2. URL的組成

URL的樣子:

https://news.163.com/18/1122/10/E178J2O4000189FH.html

URL的組成部分:

協議部分: https://、http://、ftp://
域名部分: news.163.com

資源路徑部分: /18/1122/10/E178J2O4000189FH.html

域名:

域名就是IP地址的別名，它是用點進行分割使用英文字母和數字組成的名字，使用域名目的就是方便的記住某臺主機IP地址。

URL的擴展:

https://news.163.com/hello.html?page=1&count=10

查詢參數部分: ?page=1&count=10

參數說明:

? 后面的 page 表示第一個參數，后面的參數都使用 & 進行連接

3. 小結

URL就是網絡資源的地址，簡稱網址，通過URL能夠找到網絡中對應的資源數據。
URL組成部分
協議部分
域名部分
資源路徑部分
查詢參數部分 [可選]

查看HTTP協議的通信過程

學習目標

能夠使用谷歌瀏覽器的開發者工具查看HTTP協議的通信過程

1. 谷歌瀏覽器開發者工具的使用

首先需要安裝Google Chrome瀏覽器，然后Windows和Linux平臺按F12調出開發者工具, mac OS選擇視圖 -> 開發者 -> 開發者工具或者直接使用 alt+command+i 這個快捷鍵，還有一個多平臺通用的操作就是在網頁右擊選擇檢查。

開發者工具的效果圖:

開發者工具的標簽選項說明:

元素（Elements）：用于查看或修改HTML標簽
控制臺（Console）：執行js代碼
源代碼（Sources）：查看靜態資源文件，斷點調試JS代碼
網絡（Network）：查看http協議的通信過程

開發者工具使用效果圖:

開發者工具的使用說明:

點擊Network標簽選項
在瀏覽器的地址欄輸入百度的網址，就能看到請求百度首頁的http的通信過程
這里的每項記錄都是請求+響應的一次過程

2. 查看HTTP協議的通信過程

查看http請求信息效果圖:

查看http響應信息效果圖:

3. 小結

谷歌瀏覽器的開發者工具是查看http協議的通信過程利器，通過Network標簽選項可以查看每一次的請求和響應的通信過程，調出開發者工具的通用方法是在網頁右擊選擇檢查。
開發者工具的Headers選項總共有三部分組成:
General: 主要信息
Response Headers: 響應頭
Request Headers: 請求頭
Response選項是查看響應體信息的

HTTP 請求報文

學習目標

能夠知道HTTP請求報文的結構

1. HTTP 請求報文介紹

HTTP最常見的請求報文有兩種:

GET 方式的請求報文
POST 方式的請求報文

說明:

GET: 獲取web服務器數據
POST: 向web服務器提交數據

2. HTTP GET 請求報文分析

HTTP GET 請求報文效果圖:

GET 請求報文說明:

---- 請求行 ----
GET / HTTP/1.1  # GET請求方式 請求資源路徑 HTTP協議版本
---- 請求頭 -----
Host: www.itcast.cn  # 服務器的主機地址和端口號,默認是80
Connection: keep-alive # 和服務端保持長連接
Upgrade-Insecure-Requests: 1 # 讓瀏覽器升級不安全請求，使用https請求
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36  # 用戶代理，也就是客戶端的名稱
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 # 可接受的數據類型
Accept-Encoding: gzip, deflate # 可接受的壓縮格式
Accept-Language: zh-CN,zh;q=0.9 #可接受的語言
Cookie: pgv_pvi=1246921728; # 登錄用戶的身份標識

---- 空行 ----

GET 請求原始報文說明:

GET / HTTP/1.1\r\n
Host: www.itcast.cn\r\n  
Connection: keep-alive\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\n
Accept-Encoding: gzip, deflate\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
Cookie: pgv_pvi=1246921728; \r\n
\r\n  (請求頭信息后面還有一個單獨的’\r\n’不能省略)

說明：

每項數據之間使用:\r\n

3. HTTP POST 請求報文分析

HTTP POST 請求報文效果圖:

請求體效果圖:

POST 請求報文說明:

---- 請求行 ----
POST /xmweb?host=mail.itcast.cn&_t=1542884567319 HTTP/1.1 # POST請求方式 請求資源路徑 HTTP協議版本
---- 請求頭 ----
Host: mail.itcast.cn # 服務器的主機地址和端口號,默認是80
Connection: keep-alive # 和服務端保持長連接
Content-Type: application/x-www-form-urlencoded  # 告訴服務端請求的數據類型
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 # 客戶端的名稱
---- 空行 ----
---- 請求體 ----
username=hello&pass=hello # 請求參數

POST 請求原始報文說明:

POST /xmweb?host=mail.itcast.cn&_t=1542884567319 HTTP/1.1\r\n
Host: mail.itcast.cn\r\n
Connection: keep-alive\r\n
Content-Type: application/x-www-form-urlencoded\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\n
\r\n(請求頭信息后面還有一個單獨的’\r\n’不能省略)
username=hello&pass=hello

說明：

每項數據之間使用:\r\n

4. 小結

一個HTTP請求報文可以由請求行、請求頭、空行和請求體4個部分組成。
請求行是由三部分組成:請求方式請求資源路徑HTTP協議版本
GET方式的請求報文沒有請求體，只有請求行、請求頭、空行組成。

POST方式的請求報文可以有請求行、請求頭、空行、請求體四部分組成，注意:POST方式可以允許沒有請求體，但是這種格式很少見。

GET和POST請求對比效果圖:

HTTP響應報文

學習目標

能夠知道HTTP響應報文的結構

1. HTTP響應報文分析

HTTP 響應報文效果圖:

響應報文說明:

--- 響應行/狀態行 ---
HTTP/1.1 200 OK # HTTP協議版本 狀態碼 狀態描述
--- 響應頭 ---
Server: Tengine # 服務器名稱
Content-Type: text/html; charset=UTF-8 # 內容類型
Transfer-Encoding: chunked # 發送給客戶端內容不確定內容長度，發送結束的標記是0\r\n, Content-Length表示服務端確定發送給客戶端的內容大小，但是二者只能用其一。
Connection: keep-alive # 和客戶端保持長連接
Date: Fri, 23 Nov 2018 02:01:05 GMT # 服務端的響應時間
--- 空行 ---
--- 響應體 ---
<!DOCTYPE html><html lang=“en”> …</html> # 響應給客戶端的數據

原始響應報文說明:

HTTP/1.1 200 OK\r\n
Server: Tengine\r\n
Content-Type: text/html; charset=UTF-8\r\n
Transfer-Encoding: chunked\r\n
Connection: keep-alive\r\n
Date: Fri, 23 Nov 2018 02:01:05 GMT\r\n
\r\n(響應頭信息后面還有一個單獨的’\r\n’不能省略)
<!DOCTYPE html><html lang=“en”> …</html>

說明:

每項數據之間使用:\r\n

2. HTTP 狀態碼介紹

HTTP 狀態碼是用于表示web服務器響應狀態的3位數字代碼。

狀態碼	說明
200	請求成功
307	重定向
400	錯誤的請求，請求地址或者參數有誤
404	請求資源在服務器不存在
500	服務器內部源代碼出現錯誤

3. 小結

一個HTTP響應報文是由響應行、響應頭、空行和響應體4個部分組成。
響應行是由三部分組成：HTTP協議版本狀態碼狀態描述，最常見的狀態碼是200

搭建Python自帶靜態Web服務器

學習目標

能夠知道搭建Python自帶Web服務器

1. 靜態Web服務器是什么？

可以為發出請求的瀏覽器提供靜態文檔的程序。

平時我們瀏覽百度新聞數據的時候，每天的新聞數據都會發生變化，那訪問的這個頁面就是動態的，而我們開發的是靜態的，頁面的數據不會發生變化。

2. 如何搭建Python自帶的靜態Web服務器

搭建Python自帶的靜態Web服務器使用 python3 -m http.server 端口號, 效果圖如下:

-m選項說明:

-m表示運行包里面的模塊，執行這個命令的時候，需要進入你自己指定靜態文件的目錄，然后通過瀏覽器就能訪問對應的 html文件了，這樣一個靜態的web服務器就搭建好了。

3. 訪問搭建的靜態Web服務器

通過瀏覽器訪問搭建的靜態Web服務器，效果圖如下:

4. 查看瀏覽器和搭建的靜態Web服務器的通信過程

查看http的通信過程,效果圖如下:

5. 小結

靜態Web服務器是為發出請求的瀏覽器提供靜態文檔的程序，
搭建Python自帶的Web服務器使用python3 –m http.server 端口號這個命令即可，端口號不指定默認是8000

hp開發問題日志——selectpage 使用

最近修改fastadmin的selectpage，想用js動態修改選中值，查找文檔，百度搜索都沒有結果，有知道的大神可以留言，告訴我方法，不勝感謝。

在找解決方法時，看到一個屬性searchField：查詢關鍵字字段。fastadmin中，并沒有這個屬性，但是原生的有，我找了一下fastadmin的selectpage.js文件，搜索了詞條searchField，找到這個地方

SelectPage.prototype.setOption=function (option) {

修改了里面的內容：

SelectPage.prototype.setOption=function (option) {
    //use showField to default

    //option.searchField=option.searchField || option.showField;
    let search_field=option.searchfield || option.searchField || option.showField;
    if(Array.isArray(search_field)){
        var arr=['searchField'];
        for (var i=0; i < arr.length; i++) {
            option[arr[i]]=this.strToArray(option[arr[i]]);
        }
    }else{
        option.searchField=search_field.split(',');
    }
    console.log(option);
    option.andOr=option.andOr.toUpperCase();
    if (option.andOr !=='AND' && option.andOr !=='OR') option.andOr='AND';

    //support multiple field set

然后在view中html中添加了data-searchField="mobile,username,nickname"，這樣的效果就是可以輸入一個關鍵詞，用or搜索三個字段；html代碼：

<input id="c-user_id" data-rule="required" data-source="user/user/index" data-params='{"custom[agent_type]":0}' data-field="username"
      data-searchField="username,nickname,mobile" class="form-control selectpage" name="row[user_id]" type="text" value="">

控制器的selectpage方法的相關代碼：

$logic=$andor=='AND' ? '&' : '|';
$searchfield=is_array($searchfield) ? implode($logic, $searchfield) : $searchfield;
$searchfield=str_replace(',', $logic, $searchfield);
$word=array_filter(array_unique($word));
if (count($word)==1) {
    $query->where($searchfield, "like", "%" . reset($word) . "%");
} else {
    $query->where(function ($query) use ($word, $searchfield) {
        foreach ($word as $index=> $item) {
            $query->whereOr(function ($query) use ($item, $searchfield) {
                $query->where($searchfield, "like", "%{$item}%");
            });
        }
    });

從控制器中的代碼看，searchfield是可以為數組的；

參數傳遞的效果：

earchField[]: username
searchField[]: nickname
searchField[]: mobile

同時發送三個搜索字段

下是一個使用C# WinForms中的TabControl控件的簡單示例：

using System;
using System.Drawing;
using System.Windows.Forms;

public class MainForm : Form
{
    private TabControl tabControl;
    private TabPage tabPage1;
    private TabPage tabPage2;
    private TextBox textBox1;
    private TextBox textBox2;

    public MainForm()
    {
        // 創建主窗體
        Text="TabControl示例";
        Size=new Size(400, 300);

        // 創建TabControl控件
        tabControl=new TabControl();
        tabControl.Dock=DockStyle.Fill;

        // 創建第一個選項卡頁
        tabPage1=new TabPage();
        tabPage1.Text="選項卡1";

        // 創建第一個選項卡頁中的文本框
        textBox1=new TextBox();
        textBox1.Multiline=true;
        textBox1.Dock=DockStyle.Fill;
        textBox1.Text="選項卡1的內容";

        // 將文本框添加到第一個選項卡頁
        tabPage1.Controls.Add(textBox1);

        // 創建第二個選項卡頁
        tabPage2=new TabPage();
        tabPage2.Text="選項卡2";

        // 創建第二個選項卡頁中的文本框
        textBox2=new TextBox();
        textBox2.Multiline=true;
        textBox2.Dock=DockStyle.Fill;
        textBox2.Text="選項卡2的內容";

        // 將文本框添加到第二個選項卡頁
        tabPage2.Controls.Add(textBox2);

        // 將選項卡頁添加到TabControl控件
        tabControl.TabPages.Add(tabPage1);
        tabControl.TabPages.Add(tabPage2);

        // 將TabControl控件添加到主窗體
        Controls.Add(tabControl);
    }

    [STAThread]
    static void Main()
    {
        Application.Run(new MainForm());
    }
}

在示例中，創建了一個名為MainForm的主窗體，并在窗體上添加了一個名為tabControl的TabControl控件。還創建了兩個選項卡頁tabPage1和tabPage2，并將它們分別添加到TabControl控件中。

在每個選項卡頁中創建了一個文本框textBox1和textBox2，并將它們分別添加到對應的選項卡頁中。

最后，將TabControl控件添加到主窗體的控件集合中。

運行此示例，您將看到一個具有TabControl控件和兩個選項卡頁的窗體。您可以切換選項卡來顯示不同的內容。

在線咨詢

上一篇：159人！部分事業編！江西多家單位招人
下一篇：學習SEO 要懂代碼嗎？清楚這幾點即可

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

階段三前端開發：HTTP協議和靜態Web服務器一02

TTP 協議

1. HTTP 協議的介紹

2. HTTP 協議的作用

3. 瀏覽器訪問web服務器的通信過程

4. 小結

URL

1. URL的概念

2. URL的組成

3. 小結

查看HTTP協議的通信過程

1. 谷歌瀏覽器開發者工具的使用

2. 查看HTTP協議的通信過程

3. 小結

HTTP 請求報文

1. HTTP 請求報文介紹

2. HTTP GET 請求報文分析

3. HTTP POST 請求報文分析

4. 小結

HTTP響應報文

1. HTTP響應報文分析

2. HTTP 狀態碼介紹

3. 小結

搭建Python自帶靜態Web服務器

1. 靜態Web服務器是什么？

2. 如何搭建Python自帶的靜態Web服務器

3. 訪問搭建的靜態Web服務器

4. 查看瀏覽器和搭建的靜態Web服務器的通信過程

5. 小結

您的項目需求