2分鐘上手、3小時(shí)學(xué)會(huì)無(wú)代碼軟件開(kāi)發(fā)-HTML使用

TML是標(biāo)簽語(yǔ)言，瀏覽器識(shí)別網(wǎng)絡(luò)傳遞的最基本的信息就是HTML標(biāo)簽和標(biāo)簽包含的內(nèi)容，所有網(wǎng)頁(yè)信息都是這種類型的，開(kāi)發(fā)者用標(biāo)簽來(lái)標(biāo)記信息內(nèi)容傳給瀏覽器，瀏覽器識(shí)別并解釋標(biāo)簽要求的種顏色、樣式來(lái)展示內(nèi)容，這種內(nèi)容一般叫超文本或富文本

無(wú)代碼元件的TAG屬性就是為了定義是什么樣的HTML標(biāo)簽

默認(rèn)的標(biāo)簽可以在需要時(shí)修改，上圖中就是開(kāi)發(fā)區(qū)選中一個(gè)Pane元件，下部屬性中顯示其為div標(biāo)簽對(duì)象，所以我們一般其稱為顯示塊元件

以上示例是一個(gè)表格元件，默認(rèn)的表格中行元件標(biāo)簽是tr
WWW規(guī)范中，表格行元件tr中必須是td元件，不能是div或其他，所以如果我們需要放一個(gè)顯示塊元件時(shí)，需改顯示塊元件的TAG為td
同理，可以查看表格中默認(rèn)放的日期、數(shù)字TAG都是td

用第三方工具合成自定義的HTML內(nèi)容

上例是用百度UEditor在線進(jìn)行一個(gè)表格富文本生成的演示
注意生成的HTML富文本正常是有換行處理，但在輸入到HTML Display富文本（也叫超文本）顯示元件中時(shí)，需刪除換行符號(hào)
 · 刪除方式為，將富文本放入一個(gè)文本編輯查看工具中，如Notepad++
 · 用查找替換方式，查到\r\n，替換為空格，將超文本轉(zhuǎn)為一行字符串
HTML富文本可以用Create From Template模板生成字符串元件來(lái)動(dòng)態(tài)生成可變內(nèi)容
 · 如果動(dòng)態(tài)生成富文本，需將固定寫(xiě)入的a b ... 改為變量${a} ${b} ... 然后作為模板進(jìn)行處理
自定義的HTML富文本在開(kāi)發(fā)中，會(huì)常用到，作為高級(jí)技能的一部分，建議按以上方式掌握
 · 可以用以生成打印內(nèi)容，Lodop打印的HTML內(nèi)容可以用HTML富文本傳入，參考“第三方插件接入”中“Lodop專業(yè)打印”一節(jié)內(nèi)容
 · 第三方圖表中的代碼，也是由富文本生成并處理的，參考“第三方插件接入”中“Echarts數(shù)據(jù)可視化”一節(jié)內(nèi)容

建議在線使用Ueditor等專業(yè)工具處理富文本
· 請(qǐng)參考：https://ueditor.baidu.com/website/onlinedemo.html

用無(wú)代碼HTML富文本顯示元件展示要顯示的內(nèi)容

拖放一個(gè)HTML富文本顯示元件
拖入一個(gè)字符串常量元件，F(xiàn)2打開(kāi)后，字符串常量值輸入我們用第三方或自寫(xiě)的的富文本

*****

本文為T(mén)ERSUS無(wú)代碼開(kāi)發(fā)手冊(cè)文章，供參考學(xué)習(xí)使用，在有需要詳細(xì)了解對(duì)應(yīng)內(nèi)容時(shí)細(xì)看學(xué)習(xí)，敬請(qǐng)關(guān)注并轉(zhuǎn)發(fā)文章

參考我們手冊(cè)第一個(gè)文章中的2分鐘的計(jì)算器功能的拖放連線開(kāi)發(fā)演示，可學(xué)會(huì)無(wú)代碼開(kāi)發(fā)是如何開(kāi)發(fā)軟件的

想學(xué)無(wú)代碼軟件開(kāi)發(fā)的學(xué)員請(qǐng)先學(xué)習(xí)3小時(shí)免費(fèi)教學(xué)視頻，3小時(shí)內(nèi)可學(xué)會(huì)開(kāi)發(fā)并開(kāi)發(fā)出一套管理軟件系統(tǒng)，然后看手冊(cè)及其他視頻來(lái)進(jìn)階提高快速成為高級(jí)開(kāi)發(fā)人員

己這兩天也在搞 阿里云服務(wù)器 0 元購(gòu) 的活動(dòng)，其中有個(gè)環(huán)節(jié)是核驗(yàn)讀者的購(gòu)買(mǎi)資格。

此次參加的讀者有幾百個(gè)，一個(gè)一個(gè)核驗(yàn)肯定是不現(xiàn)實(shí)的，于是就想著搞一個(gè)前端頁(yè)面讓讀者可以自己查詢，雖然自己也會(huì)點(diǎn)前端，也寫(xiě)過(guò) vue ，但讓我按照標(biāo)準(zhǔn)的框架和流程去搞，總感覺(jué)太重了。

剛好昨天通過(guò) 早起同學(xué) 的一篇文章了解到，原來(lái)現(xiàn)在 Python 也可以 "寫(xiě)" 前端了，臨時(shí)應(yīng)付一下我這種簡(jiǎn)單的需求，太適合不過(guò)了，于是花了半個(gè)小時(shí)的時(shí)間熟悉了下，很快就搞了個(gè) 查詢界面，開(kāi)發(fā)效率太高了，效果如下：

接下來(lái)回歸主題，轉(zhuǎn)一下早起同學(xué)的文章，介紹一下 pywebio 的入門(mén)操作，大家可以學(xué)一手以備后用。

# 1. 安裝與基本流程

安裝 PyWebIO 和其他的第三方庫(kù)一樣使用pip install PyWebIO就行，沒(méi)有任何難度，此處不做多講。

但是在正式講解一些常見(jiàn)的操作之前，我需要解釋一下，為什么說(shuō)用 PyWebIO 寫(xiě)頁(yè)面就像數(shù)據(jù)分析一樣。

回想一下我們使用Python進(jìn)行數(shù)據(jù)分析的流程，啟動(dòng) Jupyter Notebook 導(dǎo)入數(shù)據(jù)，進(jìn)行數(shù)據(jù)預(yù)覽、篩選、拆分合并等操作，得到自己滿意的結(jié)果，最后保存方便查看，更重要的是一行代碼一個(gè)結(jié)果，方便調(diào)試。

而使用 PyWebIO 開(kāi)發(fā)頁(yè)面流程也是類似，我們不用過(guò)分關(guān)心CSS、JS等文件，全程我們只需要操作一個(gè)py腳本。

也不用關(guān)心數(shù)據(jù)庫(kù)配置、前后端交互，就像上面的數(shù)據(jù)分析一樣，創(chuàng)建一個(gè)空白頁(yè)面，然后一行代碼添加一部分內(nèi)容，內(nèi)容可以實(shí)時(shí)編譯輸出，甚至可以在 ipython 中進(jìn)行開(kāi)發(fā)

與其說(shuō)是第一個(gè)第三方庫(kù)，我更愿意稱它為一個(gè) APP ，因?yàn)橐恍写a對(duì)應(yīng)一個(gè)操作，例如可以調(diào)用 put_text() 、 put_image() 、 put_table() 等函數(shù)輸出文本、圖片、表格等內(nèi)容到瀏覽器！

當(dāng)然，之所以能這么便捷高效的開(kāi)發(fā)頁(yè)面，基于別人封裝好的，高度精準(zhǔn)定義好的功能，因此使用場(chǎng)景十分有限，例如問(wèn)卷調(diào)查、表單填寫(xiě)、數(shù)據(jù)報(bào)告展示等簡(jiǎn)單的、個(gè)人使用的，且對(duì)樣式、特效等不做太高要求的場(chǎng)景。

關(guān)于它讓人不爽的地方，我會(huì)在后面的系列文章中進(jìn)行講解，這不影響它確實(shí)是一個(gè)高效率的web開(kāi)發(fā)庫(kù)，下面讓我對(duì)其常見(jiàn)操作進(jìn)行講解。

# 2. 來(lái)！現(xiàn)在就開(kāi)發(fā)頁(yè)面！

本節(jié)我將介紹使用 PyWebIO 開(kāi)發(fā)頁(yè)面中的一些常見(jiàn)操作。

當(dāng)然，我深知閱讀文檔的枯燥與痛苦，所以我將以從 0 實(shí)現(xiàn)下面的頁(yè)面為最終目標(biāo)進(jìn)行講解！

插入文字

平時(shí)我們寫(xiě) html 會(huì)用類似<h1>標(biāo)簽來(lái)控制標(biāo)題，用<p>``<span>這樣的標(biāo)簽來(lái)輸出文字。

在 PyWebIO 中可以使用 markdown 來(lái)實(shí)現(xiàn)類似效果，語(yǔ)法是put_markdown()，將markdown添加進(jìn)去，就會(huì)自動(dòng)渲染

put_markdown(("""#  我的第一個(gè)頁(yè)面

    這是早起Python教我用Python寫(xiě)的第一個(gè)頁(yè)面！

    寫(xiě)點(diǎn)什么呢？到底寫(xiě)一點(diǎn)什么好呢？好像真的沒(méi)什么好寫(xiě)的，到底寫(xiě)什么呢？

    我也不知道該寫(xiě)點(diǎn)什么， 反正有點(diǎn)什么內(nèi)容就好了！"""), lstrip=True)

效果如下

插入圖片

靜態(tài)元素是一個(gè)網(wǎng)頁(yè)的重要組成部分，使用 PyWebIO 插入也是很簡(jiǎn)單，使用 put_image() 可以插入圖片，代碼如下

put_image(open('iShot2021-10-29 17.14.08.png', 'rb').read())

隨手用手機(jī)拍了一張圖片，效果如下

插入表格

傳統(tǒng)html使用table插入表格，這里使用類似方法

    put_table([
    ['商品', '價(jià)格'],
    ['蘋(píng)果', '5.5'],
    ['香蕉', '7'],
])

效果如下，后面如果表格內(nèi)容需要變化，可以寫(xiě)個(gè)函數(shù)讓他動(dòng)態(tài)更新

插入代碼

插入代碼也是沒(méi)有問(wèn)題的

展示效果如下

交互 - 收集信息

上面都是常規(guī)的靜態(tài)元素添加，其他一些庫(kù)也能做到，甚至手寫(xiě)原生html都行，下面來(lái)點(diǎn)更高級(jí)的！

首先是簡(jiǎn)單的交互式輸入框，開(kāi)發(fā)者已經(jīng)寫(xiě)好了，調(diào)用命令也很簡(jiǎn)單

name = input("你的名字是什么？?")

只用一行代碼，效果如下，當(dāng)然這也意味著樣式什么的不支持修改

這里我們選擇將接收到消息打印出來(lái)，當(dāng)然也是可以寫(xiě)一個(gè)函數(shù)，將數(shù)據(jù)進(jìn)行保存，這會(huì)在后面帶大家開(kāi)發(fā)問(wèn)卷系統(tǒng)講到

交互 - 隱藏輸入

如果我們?cè)陂_(kāi)發(fā)問(wèn)卷系統(tǒng)，有些選項(xiàng)希望用戶輸入時(shí)可以隱藏輸入，就像輸入密碼一樣

password = input("不想讓別人看見(jiàn)你的輸入？", type=PASSWORD)

交互 - 輸入代碼

通過(guò)交互輸入框接收代碼也是可以的，后面我講介紹如何讓代碼執(zhí)行，下面是可以實(shí)現(xiàn)的樣式

    code = textarea('Code Edit', code={
    'mode': "python",  # code language
    'theme': 'darcula',  #  Codemirror theme
}, value='import something\n# Write your python code')

交互 - 按鈕功能

其實(shí)上面說(shuō)的存儲(chǔ)數(shù)據(jù)也好，執(zhí)行代碼也好，本質(zhì)上就是給這個(gè)提交按鈕添加一個(gè)功能，我們來(lái)實(shí)現(xiàn)最簡(jiǎn)單的計(jì)算器。也就是點(diǎn)擊提交，計(jì)算兩數(shù)相加

    data = input_group("做個(gè)計(jì)算器", [
        input('第一個(gè)數(shù)字', name='num1', type=NUMBER),
        input('第二個(gè)數(shù)字', name='num2', type=NUMBER)
    ])
    put_text(f"計(jì)算結(jié)果是{data['num1']} + {data['num2']} = {data['num1'] + data['num2']}  ")

因?yàn)楹?jiǎn)單，連函數(shù)都不用定義，直接 f-string 就解決了，如果需要復(fù)雜的功能，就可以定義一個(gè)函數(shù)，點(diǎn)擊按鈕就執(zhí)行這個(gè)函數(shù)

如何渲染頁(yè)面

從上面的介紹不難看出，用 PyWebIO 就好比往一張白紙里面塞東西。

但我還沒(méi)說(shuō)，如何創(chuàng)建一張白紙以及如何渲染頁(yè)面，下面是一個(gè)本文用的最簡(jiǎn)單的框架

from pywebio import *
from pywebio.input import *
from pywebio.output import *

def myfirstpage():

    something

if __name__ == '__main__':

    start_server(myfirstpage,port=8082,auto_open_webbrowser=True)

可以看到，我們只要定義一個(gè)函數(shù)，然后往里面塞各種內(nèi)容，最后通過(guò)start_server()指定端口啟動(dòng)就行。

好了，以上就是 pywebio 的簡(jiǎn)單使用，可以覆蓋絕大多數(shù)的臨時(shí)頁(yè)面開(kāi)發(fā)需求，對(duì)于經(jīng)常有這方面需求可以先學(xué)習(xí)一波。

，同源策略：幫助在瀏覽器中隔離（協(xié)議相同，域名相同，端口相同）。

2，瀏覽器不同的域名不能訪問(wèn)對(duì)應(yīng)的cookie但是內(nèi)部的表單沒(méi)有限制。

3，同源策略限制范圍：

1）cookie，localStorage和IndexDB無(wú)法讀取。localStorage同步調(diào)去，存儲(chǔ)超過(guò)2.5m出現(xiàn)性能問(wèn)題，IndexedDB，Web SQl 50m異步調(diào)取數(shù)據(jù)

2）Dom無(wú)法獲取，

3）ajax請(qǐng)求不能發(fā)送

4，前端跨域的幾種方式（如何設(shè)置同源策略）

1，cookie：document.domain；最實(shí)用的策略；

2，img： src屬性；

 var s = new Image(); 
 var p = new Date.now();
 s.src = 'http://www.baidu.com/s.gif' ;
 s.onload = function(){ 
 var end = Date.now(),
 t = end-start,
 v = '1.1'/t + 'kb/s';
 var level = 10 - Math.flow(v/100)
 }

3，iframe：頁(yè)面異步；

4，script：src引用；

5，ajax：

6，jsonp：訪問(wèn)js文件？callback=xxx(看原理)

7，form

8，link

9，css，background屬性（css攻擊）

10，cors：跨源資源分享

11，xss，

12，window.postMessage

13，websocket

5，如何突破同源策略

html標(biāo)簽：img, iframe, script(jsonp), link(background)

6，語(yǔ)義化（使用div進(jìn)行布局，不要用div進(jìn)行無(wú)意義的包裹，span行內(nèi)常規(guī)元素）便于瀏覽器理解，便于爬蟲(chóng)。

標(biāo)簽：header，footer，nav，article，section，aside，address等經(jīng)典標(biāo)簽。

7，盡量少寫(xiě)HTML減少Dom渲染時(shí)間，浪費(fèi)整個(gè)文件大小（before，after）爭(zhēng)取一個(gè)元素顯示三個(gè)

8，高階跨域WebSocket， postMessage（iframe image），代碼壓縮成圖片

在線咨詢

上一篇：肖sir_html之基本使用（1）
下一篇：JavaScript 函數(shù)調(diào)用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商