flume日誌收集
阿新 • • 發佈：2021-12-23
目錄
一:form表單
1.form表單功能
表單用於向伺服器傳輸資料，從而實現使用者與Web伺服器的互動 表單能夠包含input系列標籤，比如文字欄位、複選框、單選框、提交按鈕等等。 表單還可以包含textarea、select、fieldset和 label標籤。 form表單:獲取使用者的資料併發送給後端(服務端) eg:網站的登入、註冊、驗證碼等...
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（預設：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（預設：開啟）。 |
| enctype | 規定被提交資料的編碼（預設：url-encoded）。 |
| method | 規定在提交表單時所用的 HTTP 方法（預設：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（預設：_self）。 |
2.表單元素
基本概念：
HTML表單是HTML元素中較為複雜的部分，表單往往和指令碼、動態頁面、資料處理等功能相結合，因此它是製作動態網站很重要的內容。
表單一般用來收集使用者的輸入資訊
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕提交。這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理，如果有錯誤會返回錯誤資訊，並要求糾正錯誤。當資料完整無誤後，伺服器反饋一個輸入完成的資訊。
二:form表單搭建(註冊頁面)
- 簡易版註冊頁面
<h2>註冊頁面</h2> <form action=""> <p> <!--<lable包裹input並繫結id>--> <label for="d1">username:</label> <!--<使用者註冊框>--> <input type="text" id="d1"> </p> <p> <!--<使用者註冊密碼>--> <label for="d2">password:</label> <input type="password" id="d2"> </p> <!--<日曆展示>--> <p>birthday:<input type="date"></p>
1.編寫input會出現黃色陰影問題
- 解決方法
直接編寫input會出現黃色陰影，原因在於input需要結合lable一起使用
方式1:lable包裹input並繫結id
<label for='input標籤id值'>input標籤</label>
方式2:label與input單獨出現並繫結id
<label for="d1">username:</label>
<input type="text" id="d1">
三:完整版，前端程式碼(註冊頁面)
</head>
<body>
<h2>註冊頁面</h2>
<form action="">
<p>
<label for="d1">username:</label>
<input type="text" id="d1">
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2">
</p>
<p>birthday:<input type="date"></p>
<p>
<input type="radio" name="gender" checked="checked">male
<input type="radio" name="gender">female
<input type="radio" name="gender">others
</p>
<p>hobby:
<input type="checkbox" checked>籃球
<input type="checkbox" checked>足球
<input type="checkbox" checked>雙色球
</p>
<p>email:
<input type="email">
</p>
<p>province
<select name="" id="">
<option value="">北京</option>
<option value="">深圳</option>
<option value="">上海</option>
</select>
</p>
<p>明星
<select name="" id="">
<option value="">蒼老師</option>
<option value="">明老師</option>
<option value="">三上老師</option>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>
<input type="submit" value="註冊">
<input type="button" value="幫助">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
四:type屬性介紹
- 獲取使用者資料最為常用的標籤就是input標籤並且該標籤是行內標籤
1.input(type屬性)
<input> 元素會根據不同的 type 屬性，變化為多種形態。
通過type引數的不同變換不同的表現形式
| type屬性 | 表現形式 |
|---|---|
| text | 普通文字 |
| password | 密碼展示 |
| date | 日曆展示 |
| radio | 單選>>>:多個選項標籤需要有相同的name屬性才能(單選) |
| checked='checked' | （預設選中）需要額外配置checked='checked' 當屬性名與屬性值相等的時候可以簡寫checked |
| checkbox | 多選>>>:預設選中也是checked屬性 |
| 郵箱格式 | |
| file | 上傳檔案>>>:預設只支援單個檔案 如果需要一次性上傳多個需要額外配置 multiple |
| select | 標籤是下拉框選項單選(地址) 一個個選項就是一個個option標籤 預設是單選也可以變為多選 |
| multiple | 下拉框多選 |
| textarea | 標籤個人簡介(多行文字 )獲取大段文字內容 |
| submit | 提交按鈕>>>:點擊出發提交資料的動作(註冊) (按鈕組的提示資訊可以通過value屬性自定義， 如果不自定義那麼不同的瀏覽器可能會展示出不同的提示資訊 尤其是submit按鈕) |
| button | 普通按鈕>>>:本身沒有任何功能 需要繫結(JS) (按鈕組的提示資訊可以通過value屬性自定義， 如果不自定義那麼不同的瀏覽器可能會展示出不同的提示資訊 尤其是submit按鈕) |
| reset | 重置按鈕 (按鈕組的提示資訊可以通過value屬性自定義， 如果不自定義那麼不同的瀏覽器可能會展示出不同的提示資訊 尤其是submit按鈕) |
五:form表單提交資料
- 方法1
資料的提交地址由form表單的action引數來控制
action="URL"
不寫預設朝當前頁面所在的地址提交
- 方法2
method="資料的提交方式"
資料的提交方式有很多種 這裡先忽略(後續框架更新)
get post put delete patch...
- 方法3
form表單在提交資料的時候 如果含檔案則需要指定兩個固定引數
method='post'
enctype="multipart/form-data"
六:前後端互動
- 只看效果即可
- 後端框架TCP服務端
以flask框架為例>>>:第三方框架 pip3 install flask
1.搭建簡易版服務端
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/', methods=['GET', 'POST'])
def index():
print(request.form)
print(request.form)
return 'flask框架真簡單'
app.run()
2.前端設定(提交資料網址引數)
form表單在提交資料的時候 如果含檔案則需要指定兩個固定引數
method='post'
<form action="http://127.0.0.1:5000/index/" method="post">
3.網址測試
4.服務端(後端)
測試伺服器接收客戶端資料，不顯示使用者資料
5.服務端不顯示客戶端資料原因
1.前端通過標籤獲取使用者資料傳送給後端的過程中 標籤需要有name屬性
相當於字典的key
2.使用者輸入的資料會儲存到標籤的value屬性中 相當於字典的value
如果是選擇型標籤需要自行加上name和value 才能將使用者資料傳送到後端
七:完整版 前後端互動
- 服務端
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 獲取普通資料
print(request.files) # 獲取檔案資料
file_obj = request.files.get('file') # 獲取檔案物件
file_obj.save('xxx.md') # 儲存檔案
return 'flask框架真簡單'
app.run()
1.前端解決方法
前端使用者輸入的資料會儲存到標籤的value屬性中
相當於字典的value如果是選擇型標籤需要自行加上name和value
k:v鍵值對 才能將使用者資料傳送到後端
2.form如果包含檔案則需要指定兩個固定引數
enctype="multipart/form-data"
- 前端
</head>
<body>
<h2>註冊頁面</h2>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="d1">username:</label>
<input type="text" id="d1" name="name">
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="pwd">
</p>
<p>birthday:<input type="date" name="birth"></p>
<p>
<input type="radio" name="gender" checked="checked" value="男">male
<input type="radio" name="gender" value="女">female
<input type="radio" name="gender" value="其他">others
</p>
<p>hobby:
<input type="checkbox" checked value="basketball">籃球
<input type="checkbox" checked value="football">足球
<input type="checkbox" checked value="doublecolorball">雙色球
</p>
<p>email:
<input type="email" name="meail">
</p>
<p>province
<select name="全國地址" id="">
<option value="bj">北京</option>
<option value="sz">深圳</option>
<option value="sh">上海</option>
</select>
</p>
<p>明星
<select name="明星" id="">
<option value="cang">蒼老師</option>
<option value="ming">明老師</option>
<option value="sanshang">三上老師</option>
</select>
</p>
<p>info:
<textarea name="簡介" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file" name="files">
</p>
<p>files:
<input type="file" multiple name="files">
</p>
<p>
<input type="submit" value="註冊">
<input type="button" value="幫助">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>