自動化測試實戰技巧:「用例失敗重試機制」實現方案分享

1. 背景說明

在開展自動化測試工作時,經常會由於一些外在原因(如網絡中斷、返回超時)導致自動化測試用例運行失敗,而這些失敗並不是用例本身驗證或被測程序存在Bug而引起的,更可氣的是這些失敗場景有可能還是偶發的,為了保證測試用例運行的穩定性驗證有效性,我們需要一種針對失敗用例重試的運行機制。

今天給大家分享的主題:自動化測試工作中,用例腳本失敗重試機制的實現方式。

結合自動化測試框架來講,用例運行失敗重試機制,通常有三種形式來實現:

  • 藉助依賴框架自身是否有用例失敗重試運行機制。

  • 從用例腳本自身邏輯處入手,實現失敗運行重試。(適用於被特殊處理過的用例邏輯)

  • 從擴展框架源碼,自定義失敗重試運行機制。(通常適合於所有失敗用例)

接下來,我們以Robot Framework框架為例,以具體的實戰示例項目介紹如何實現用例失敗重試機制。

2. 示例項目環境搭建

為了便於演示,重新創建一套新的虛擬隔離環境,用於搭建Robot Framework框架,操作步驟如下。

1、創建虛擬環境robotframework_env

python3 -m venv robotframework_env

2、激活虛擬環境

cd robotframework_env
source bin/activate

3、在虛擬環境中,安裝robotframework、robotframework-ride庫(安裝最新即可)。

pip install robotframework
pip install robotframework-ride

如下圖所示:

4、 輸入命令:bin ./ride.py啟動RIDE,如下圖所示。

PS: 其它三方庫演示項目中,暫不需要,讀者可根據實際需求,自行安裝。

3. 創建實戰示例項目

1、 創建trainning演示項目,並在項目下,創建失敗重試機制實戰目錄,並依次創建測試套件、測試用例,示例結構如下:

2、 編寫測試用例,測試用例邏輯如下:

*** Settings ***
Library           Collections

*** Test Cases ***
Class_01_隨機取數,模擬隨機出現失敗場景
    @{list}=    create list    1    2    3
    ${random_num}=    Evaluate    random.choice(${list})    random
    log    ${random_num}
    should be true    ${random_num}==2
  • 在測試用例中,先通過create list關鍵字創建了一個名稱為${list}的列表變量,並依次存入1、2、3三個元素。
  • 再通過Evaluate萬能關鍵字,結合random.chocie方法,從${list}列表中隨機取出一個整型元素,保存到名稱為${random_num}變量中。
  • 最後,通過should be true關鍵字,斷言${random_num}變量等於2,由於第二步的隨機取值,會讓${random_num}變量值具有隨機性(可能等於2,也可能是1或3),從而實現模擬一條隨機失敗的用例場景。

運行成功結果:

運行失敗結果:

4. 用例失敗重試機制實現

Robot Framework 官方並沒有提供類似retry等參數來配置失敗用例重執行。僅僅提供了--rerunfailed參數對基於結果文件output.xml來選擇重新執行失敗的用例。

4.1 基於RF框架自身的重試機制

1、 以第3節中新建的示例項目為例,為了便於演示,以命令行來操作,在命令行中輸入執行用例命令,並且將輸出文件保存到original.xml文件中。

robot --output original.xml .

2、 重新運行測試用例,並將第二次運行的結果文件輸出保存到rerun.xml文件中。

robot --output rerun.xml --rerunfailed original.xml .

3、合併兩次運行的結果輸出文件。

rebot --merge original.xml rerun.xml

在Robot Framework中除了有--rerunfailed參數針對失敗的測試用例外,也有針對測試套件的--rerunfailedsuites,參數詳細說明如下:

-R --rerunfailed output  Select failed tests from an earlier output file to be
                          re-executed. Equivalent to selecting same tests
                          individually using --test option.

------------------------------------------------
 -S --rerunfailedsuites output  Select failed suite from an earlier output file
                          to be re-executed. New in RF 3.0.1.

  • -R--rerunfailed參數非常有用,它的作用是從output file中選擇失敗的用例重跑。但是有個問題,如果上一次運行時用例全部成功,此時加上-R參數再去運行用例時會報錯: failed: All tests passed ,這導致我沒辦法在jenkins job中使用這個參數。

  • -S--rerunfailedsuites參數和-R參數的作用類似,它的作用是從output file中選擇失敗的用例套件重跑。

4.2 基於用例腳本邏輯重試機制

第二種方法,我們介紹,如何基於用例腳本邏輯特殊改造,實現用例失敗后的重試機制。

基於用例邏輯增加重試機制,核心實現思路:基於RF內置變量${TEST_STATUS}獲取用例運行結果,再結合Teardown運行改造后的關鍵字邏輯即可。

操作如下:

1、對示例1中的Class_01 測試用例進行改造,抽取用例邏輯部分,存放到單獨的關鍵字下,名稱如測試用例關鍵字

*** Keywords ***
測試用例關鍵字
    @{list}=    create list    1    2    2
    ${random_num}=    Evaluate    random.choice(${list})    random
    log    ${random_num}
    should be true    ${random_num}==2

2、 添加關鍵字用例重試機制,增加用例重試機制的處理邏輯:

*** Keywords ***
用例重試機制
    [Arguments]    ${times}
    ${status}=    set variable    ${TEST STATUS}
    FOR    ${index}    IN RANGE    ${times}
        log    第${index+1}運行結果: ${status}
        Exit For loop if    '${status}'=='PASS' or '${status}'=='True'
        log    第${index+1}次重試運行
        ${status}=    Run keyword And Return Status    測試用例關鍵字
    END

用例重試機制關鍵字中,先通過${TEST STATUS}內置變量,獲取用例執行結果,並且接收變量${times}用於控制重試次數,如果用例執行狀態等於PASS則直接退出重試,否則調用Run keyword And Return Status關鍵字繼續運行測試用例。

3、為了便於演示,增加一條名稱為Class_02測試用例,內容如下:

Class_02_隨機取數,模擬隨機出現失敗場景
    測試用例關鍵字
    [Teardown]    run keyword    用例重試機制    5

到此, 我們已經在用例邏輯層面實現了用例失敗重試機制了。

PS: 針對用例邏輯層面實現重試機制,也可以採用關鍵字: Wait Until Keyword Succeeds,讀者可根據自身需求進行改造,本文的用例重試機制並不是唯一的方法。

4.3 基於框架源碼實現重試機制

除了上述兩種方法,最後一種方法是基於框架層面進行改造,增加全局重試機制,

通過改寫Robot Framework源代碼增加--retry選項,實現test級別的失敗用例自動再執行,比如用例失敗后,會重新運行N次,直至成功or 耗盡重試次數,生成的日誌和報告文件中只會體現最後一次執行的結果。

類似如下命令格式:

robot --retry 3 trainning

具體實現:

1、修改文件 : robotframework_env/lib/python3.7/site-packages/robot/run.py,在USAGE變量里添加retry參數。

 -F --extension value     Parse only files with this extension when executing
                          a directory. Has no effect when running individual
                          files or when using resource files. If more than one
                          extension is needed, separate them with a colon.
                          Examples: `--extension txt`, `--extension robot:txt`
                          New in RF 3.0.1. Starting from RF 3.2 only `*.robot`
                          files are parsed by default.
 -N --name name           Set the name of the top level suite. By default the
                          name is created based on the executed file or
                          directory.
 -H --retry retry     Set the retry times if test failed.

2、在run.py文件,RobotFramework類增加make方法,並在開始之前導入庫from xml.dom import minidom

def make(self, outxml):
        xmldoc = minidom.parse(outxml)
        suiteElementList = xmldoc.getElementsByTagName('suite')
        mySuite = []
        for suiteElement in suiteElementList:
            if suiteElement.childNodes is not None:
                for element in suiteElement.childNodes:
                    if element.nodeName == 'test':
                        mySuite.append(suiteElement)
                        break
        for suite in mySuite:
            testElements = {}
            for element in suite.childNodes:
                if element.nodeName == 'test':
                    name = element.getAttribute('name')
                    if testElements.get(name) == None:
                        testElements.update({name: [element]})
                    else:
                        testElements.get(name).append(element)
            for n, el in testElements.items():
                for i in el[0:-1]:
                    textElement = i.nextSibling
                    suite.removeChild(i)
                    suite.removeChild(textElement)
        savefile = open(outxml, 'w')
        root = xmldoc.documentElement
        root.writexml(savefile)
        savefile.close()

3、RobotFramework類的main方法,加入紅色內容 self.make(settings.output)

4、 打開robot/conf/setting.py文件,修改_cli_opts字典,增加'Retry': ('retry', 3),,如下所示:

5、打開robot/model/itemlist.py文件,修改visit方法:

    def visit(self, visitor):
        for item in self:
            if self.__module__ == 'robot.model.testcase' and hasattr(visitor, "_context"):
                testStatus = ''
                for i in range(0, int(visitor._settings._opts['Retry'])):
                    if testStatus != 'PASS':
                        if item.name in visitor._executed_tests:
                            visitor._executed_tests.pop(item.name)
                        item.visit(visitor)
                        testStatus = visitor._context.variables['${PREV_TEST_STATUS}']
                    else:
                        break
            else:
                item.visit(visitor)

6、做完如上配置之後,我們來驗證一下參數是否配置成功了,輸入robot —help查看一下配置參數項。

7、 輸入如下命令,結合Class_01用例,驗證用例失敗重試機制:

robot --test Class_01_隨機取數,模擬隨機出現失敗場景 --retry 3 .

如果測試用例運行結果為PASS,運行一次即正常結束,如果用例運行失敗,則會重試3次執行。

5. 小結

本文以Robot Framework框架為例,介紹了在自動化測試過程中,如何實現用例腳本失敗重試機制,並且分享了三類實現思路:

  • 藉助依賴框架自身是否有用例失敗重試運行機制。

  • 從用例腳本自身邏輯處入手,實現失敗運行重試。(適用於被特殊處理過的用例邏輯)

  • 從擴展框架源碼,自定義失敗重試運行機制。(通常適合於所有失敗用例)

認真品味本文的讀者,會發現,雖然本文內容是以Robot Framework框架為例,但其實任何自動化測試框架,要實現測試用例腳本重試機制,都繞不開本文所提到的三類實現方式思路。學會變通、靈活運用才是王道

希望對大家在實施自動化測試工作當中有所幫助或啟發!如果覺得有用,不用以身相許,關注一下就行

原文傳送門: 原文閱讀

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

新北清潔公司,居家、辦公、裝潢細清專業服務

※別再煩惱如何寫文案,掌握八大原則!

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※超省錢租車方案

※教你寫出一流的銷售文案?

網頁設計最專業,超強功能平台可客製化

德國傳統電廠熱浪中掙扎 整體供電仍穩定

環境資訊中心綜合外電;姜唯 編譯;林大利 審校

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司"嚨底家"!

新北清潔公司,居家、辦公、裝潢細清專業服務

※推薦評價好的iphone維修中心

用樹的高度來建築  弗班社區找回古城區的感覺

環境資訊中心特約記者 陳文姿報導

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

台北網頁設計公司這麼多該如何選擇?

※智慧手機時代的來臨,RWD網頁設計為架站首選

※評比南投搬家公司費用收費行情懶人包大公開

※幫你省時又省力,新北清潔一流服務好口碑

※回頭車貨運收費標準

危及蜜蜂存亡 加國漸禁2款類尼古丁農藥

摘錄自2018年8月16日中央社報導

加拿大政府今天(16日)表示,將逐步限用和水生昆蟲及蜜蜂死亡有關連的2款類尼古丁農藥。環保人士認為這是一大勝利,但對販售殺蟲劑的企業而言卻是最新挫敗。

加拿大衛生署(Health Canada)病蟲害管制局(PMRA)表示,未來三到五年之間將逐步禁止在戶外使用賽速安(Thiamethoxam)及可尼丁(Clothianidin)。

加拿大衛生署這項措施將有90天諮詢期,最後在2019年底做出決定。

加拿大衛生署也計畫在今年底之前做出最終決定,是否逐步禁止第3種的類尼古丁農藥,拜耳生產的益達胺(imidacloprid)。

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

南投搬家公司費用需注意的眉眉角角,別等搬了再說!

新北清潔公司,居家、辦公、裝潢細清專業服務

※教你寫出一流的銷售文案?

擔心成為新的傾倒場 泰國將禁止電子垃圾進口

摘錄自2018年8月16日中央社報導

環境部一名官員今天(16日)說,泰國將在6個月內禁止進口432種廢棄電子用品。中國今年禁止高科技廢棄物進口以來,泰國成為最新呼應的國家。

泰國下達禁令數週前,區域鄰國越南表示,將停止核發新執照給廢棄物進口,並將取締非法運送廢紙、塑膠和金屬。

泰國環境部一名高級官員今天告訴路透社,禁令涵蓋432種電子廢棄物,從電路板到老舊電視機和收音機零件等等,將在6個月內生效。

他並說,禁令是環境部長素拉薩(Surasak Kanchanarat)昨天主持會議時做成決定。

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※想知道最厲害的網頁設計公司"嚨底家"!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!

※產品缺大量曝光嗎?你需要的是一流包裝設計!

救蜂群的替代殺蟲劑 結果也對蜜蜂有害

摘錄自2018年8月16日中央社報導

研究人員今天(16日)警告,一種用於替代危害蜜蜂的「新類尼古丁」(neonicotinoid)殺蟲藥的新型殺蟲劑,可能與新類尼古丁殺蟲藥一樣,還是對作物授粉的蜜蜂有害。

研究人員在「自然」(Nature)期刊表示,實驗中,大黃蜂的繁殖能力和牠們蜂群成長速度,都會受到新的鵳基亞胺類(sulfoximine)殺蟲劑所影響。

研究主筆、倫敦大學皇家哈洛威學院(Royal Holloway, University of London)研究人員席維特(Harry Siviter)說:「我們研究結果顯示,新型殺蟲劑之一的速殺氟(sulfoxaflor)會對大黃蜂繁殖量產生負面影響。」

與新類尼古丁相似,速殺氟不會直接殺死蜜蜂,但卻顯示會影響蜜蜂的免疫系統或生殖能力。

不過覓食行為和個別蜜蜂採集花粉量在實驗中保持不變。

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

新北清潔公司,居家、辦公、裝潢細清專業服務

※別再煩惱如何寫文案,掌握八大原則!

※教你寫出一流的銷售文案?

※超省錢租車方案

FB行銷專家,教你從零開始的技巧

買綠電團購力量大 蘋果等四企業簽290MW訂單

環境資訊中心綜合外電;姜唯 編譯;林大利 審校

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

新北清潔公司,居家、辦公、裝潢細清專業服務

※別再煩惱如何寫文案,掌握八大原則!

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※超省錢租車方案

※教你寫出一流的銷售文案?

網頁設計最專業,超強功能平台可客製化

ODBC 常見數據源配置整理

目錄

  • 1. 簡介
    • 1.1 ODBC和JDBC
    • 1.2 ODBC配置工具
    • 1.3 ODBC 數據源連接配置
  • 2. MySQL 數據源配置
    • 2.1 配置步驟
    • 2.2 鏈接參數配置
  • 3. SQLServer 數據源配置
    • 3.1 配置步驟
    • 3.2 鏈接參數配置
  • 4. ACCESS 數據源配置
    • 4.1 配置步驟
    • 4.2 鏈接參數配置

1. 簡介

我們用golang做odbc驅動開發的任務並不多,隔段時間可能會來一個。每次開發會忘記如何配置數據源和對應的數據源鏈接參數配置。這裏做一個整理。

1.1 ODBC和JDBC

ODBC(Open Database Connectivity)是一組對數據庫訪問的標準API,其最大的優點是以統一的方式處理所有的數據庫。

JDBC(Java Database Connectivity)是Java與數據庫的接口規範,允許Java程序發送SQL指令並處理結果。比較常見JdbcTemplate

1.2 ODBC配置工具

打開控制面板找到管理工具,當前目錄有兩個ODBC的配置工具。分別是:ODBC Data Sources (32-bit)、ODBC 數據源(64 位)。顧名思義一個是32位,一個是64位。在配置ACCESS數據源時需要選擇32位。

我們也可以直接在系統目錄下找到對應的可執行文件。

1)32位:%windir%\syswow64\odbcad32.exe

2)64位:%windir%\system32\odbcad32.exe

題外話:syswow64 目錄存放的是32位的程序,system32目錄存放的是64位的程序,在註冊dll的時候需要注意下。ITDragon 在接觸驅動開發之前一直都弄反了。這篇文章做了通俗易懂地解釋https://www.cnblogs.com/hbccdf/p/dllchecktoolandsyswow64.html

1.3 ODBC 數據源連接配置

網上收集整理,不保證正確性,僅供參考。

數據庫 連接參數
MySQL driver={mysql};database=數據庫;uid=賬號;pwd=密碼;
MSSQL Server driver={sql server};server=服務器;database=數據庫;uid=ITDragon;pwd=密碼;
Access driver={microsoft access driver (*.mdb)};dbq=mdb文件全路徑;uid=ITDragon;pwd=密碼;
SQLite driver={SQLite3 ODBC Driver};database=db文件全路徑
PostgreSQL driver={PostgreSQL ANSI};server=服務器;uid=賬號;pwd=密碼;database=數據庫;
DBase driver={microsoft dbase driver (*.dbf)};driverid=277;dbq=dbf文件全路徑;
Oracle driver={microsoft odbc for oracle};server=服務器;uid=ITDragon;pwd=密碼;
MS text driver={microsoft text driver (* .txt; *.csv)};dbq=文件全路徑;extensions=asc,csv,tab,txt;PersistSecurityInfo=false;
Visual Foxpro driver={microsoft Visual Foxpro driver};sourcetype=DBC;sourceDB=*.dbc;Exclusive=No;

2. MySQL 數據源配置

2.1 配置步驟

第一步:雙擊ODBC 數據源(64 位),可以選擇用戶DSN(系統只對當前用戶生效),也可以選擇系統DSN(能登錄當前系統的用戶都生效)

第二步:點擊添加,選擇事先安裝好的MySQL ODBC xx Driver 驅動後點擊完成。注意不同版本之間對某些sql語法的支持略有不同(之前吃過這個虧,我的環境有問題,客戶環境沒問題)。

第三步:完善基本鏈接信息後點擊Test,提示鏈接成功後點擊OK完成配置。

2.2 鏈接參數配置

因為ODBC驅動配置已經將數據庫的連接地址、賬號、密碼、數據庫都已經配置完成,連接參數只需要指定驅動名稱即可:DSN=ITDragon_MySQL

Golang偽代碼:

import (
	"database/sql"
	_ "github.com/alexbrainman/odbc"
)

db, err := sql.Open("odbc", "DSN=ITDragon_MySQL")
if err != nil {
    panic(err)
}
defer db.Close()

3. SQLServer 數據源配置

3.1 配置步驟

第一步:雙擊ODBC 數據源(64 位),可以選擇用戶DSN(系統只對當前用戶生效),也可以選擇系統DSN(能登錄當前系統的用戶都生效)

第二步:點擊添加,選擇SQL Server。這一項我ITDragon 並沒有手動安裝,應該是安裝SQL Server數據庫的時候自動安裝上去的。

第三步:鍵盤輸入需要連接的SQLServer服務器,如果是本機,就輸入計算機名。如果是遠程主機就需要輸入IP,Port 。不要點擊下拉框,會卡死。

第四步:選擇SQL Server驗證方式

第五步:選擇默認數據庫,也可以在寫sql語句時將表名的全路徑寫全(我ITDragon 習慣用寫全)

第六步:可以考慮修改SQL Server的系統消息語言,數據的加密,執行字符數據翻譯,修改日誌保存路徑等。也可以默認。

第七步:點擊完成,彈出“按照以下配置創建新的ODBC數據源”,點擊測試數據源,提示測試成功。點擊確定完成創建。

3.2 鏈接參數配置

Golang偽代碼:

import (
	"database/sql"
	_ "github.com/alexbrainman/odbc"
)

db, err := sql.Open("odbc", "driver={sql server};server=DESKTOP-HKC2IA3;DSN=ODBCName;uid=xxx;pwd=xxx;")
if err != nil {
    panic(err)
}
defer db.Close()

4. ACCESS 數據源配置

4.1 配置步驟

第一步:雙擊ODBC Data Sources (32-bit),而不是64位。可以選擇用戶DSN(系統只對當前用戶生效),也可以選擇系統DSN(能登錄當前系統的用戶都生效)

第二步:選擇Microsoft Access Driver (*.mdb)。點擊數據庫下發的選擇按照,選擇mdb文件,點擊確定完成配置。

4.2 鏈接參數配置

我們其實可以不用配置Access的數據源,直接用DBQ指定mdb的文件路徑,再用pwd輸入密碼訪問。

Golang偽代碼:

import (
	"database/sql"
	_ "github.com/alexbrainman/odbc"
)

db, err := sql.Open("odbc", "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=全路徑.MDB;pwd=xx;")
if err != nil {
    panic(err)
}
defer db.Close()

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司"嚨底家"!

新北清潔公司,居家、辦公、裝潢細清專業服務

※推薦評價好的iphone維修中心

專家解讀:利用Angular項目與數據庫融合實例

摘要:面對如何在現有的低版本的框架服務上,運行新版本的前端服務問題,華為雲前端推出了一種融合方案,該方案能讓獨立的Angular項目整體運行在低版本的框架服務上,通過各種適配手段,讓Angular項目也能獲取到外層框架服務的資源。

華為雲前端服務前期採用AngularJs作為框架技術棧,技術較為老舊,性能較差,在華為雲快速發展的今天,顯然不能滿足要求。因此我們必須要升級前端技術棧,使用Angular2+來承載我們的前端服務。GeminiDB作為新服務,也是數據庫乃至華為雲未來的重點服務,作為前端部分,必須在技術上使用最前沿的框架,以最大地提高用戶體驗。

但是技術棧的升級不是一蹴而就的,尤其是在華為雲,所有的雲服務必須在框架服務的底座上運行,而框架服務承載了所有的雲服務,如果要進行技術棧升級,必然是一個緩慢的過程。GeminiDB作為華為雲服務里的一員,也不可能脫離框架服務而存在。因此存在一個問題,就是如何在現有的低版本的框架服務上,運行新版本的前端服務。

為了解決以上問題,華為雲前端推出了一種融合方案,該方案能讓獨立的Angular項目整體運行在低版本的框架服務上,通過各種適配手段,讓Angular項目也能獲取到外層框架服務的資源。

底層項目

底層項目使用webpack打包,打包后通過在index.html里引入businessAll.js文件,以該文件為入口啟動整個框架服務。

<script type="text/javascript" src="businessAll.js"></script>

在底層框架服務啟動后,再渲染出具體雲服務內容。

<div class="service-content-view" ui-view ng-animate="{enter:'fade-enter'}"></div>

Angular項目

Angular項目支持獨立運行,有單獨的index.html,也有單獨的main.ts入口。但是如果希望Angular項目運行在底層框架服務上,就必須把Angular項目看作是一個獨立的模塊,把項目整體引入到底層項目中。因此,我們可以預先把Angular項目編譯好,放到底層項目的一個目錄下。在運行底層項目時,在index.html里將Angular項目引進來,獨立運行。

<link rel="stylesheet" type="text/css" href="{底層項目中Angular項目的路徑}/styles.css" />
<script type="text/javascript" src="{底層項目中Angular項目的路徑}/runtime.js"></script>
<script type="text/javascript" src="{底層項目中Angular項目的路徑}/polyfills.js"></script>
<script type="text/javascript" src="{底層項目中Angular項目的路徑}/main.js"></script>

項目融合

底層項目和Angular項目均能獨立,但是要讓兩者融合起來,會遇到以下幾個問題:

1.底層項目中如何渲染出Angular項目。

2.Angular項目依賴底層項目的資源,如何保證Angular項目在底層項目運行起來后再運行。

3.如何解決底層項目和Angular項目的路由衝突問題。

渲染Angular項目

底層項目分為兩部分,一部分是底層框架服務,另一部分是具體雲服務。現在我們要做的是把老的雲服務項目替換成新的Angular項目,因此我們可以直接在渲染老的雲服務的地方替換成新的Angular項目的渲染容器。

<div class="service-content-view" ui-view ng-animate="{enter:'fade-enter'}"></div>
<app-root></app-root>

底層框架服務對頁面渲染上做了一些體驗上的優化,因此必須保留原模板中的ui-view,使底層項目正常運行起來,實際上老的雲服務項目的渲染內容已經轉發到新的Angular項目上面。

Angular項目對底層項目的依賴

底層框架服務給雲服務提供了很多公共變量與服務,這些變量和服務是各個雲服務必須要使用的,否則雲服務將不能正常運作。

啟動順序問題

對於Angular項目來說,要使用底層框架服務提供的內容,首先要求Angular項目在底層項目運行起來之後再運行。這裏採用Augular中的APP_INITIALIZER令牌來解決這個問題。APP_INITIALIZER是一個函數,在程序初始化的時候被調用。這裡在根模塊的providers中以factory的形式來配置。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppInitService } from './services/app-init.service';
import { AppComponent } from "./app.component";

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule],
 providers: [
     AppInitService,
    {
         provide: APP_INITIALIZER,
         useFactory: initializeApp,
         deps: [AppInitService],
         multi: true
    }
],
 bootstrap: [AppComponent]
})
export class AppModule {}

export function initializeApp(appInitService: AppInitService) {
   return (): Promise<any> => {
       return appInitService.Init();
  };
}

在appInitService里,先獲取到底層框架的資源,再進行Angular項目的初始化。

import { Injectable } from '@angular/core';

@Injectable()
export class AppInitService {
   constructor() {}

   Init() {
       return new Promise<void>((resolve, reject) => {
           // 獲取到底層框架服務的資源
           resolve();
      });
  }
}

資源依賴問題

底層項目使用的是AngularJs,Angular項目獲取底層框架服務提供的資源不能通過Angular的方式引入,因此需要藉助AngularJS的注入器獲取在底層框架中註冊的服務組件:

static get(inject: string): any {
return (window as any).angular.element('html').injector().get(inject);}
如,要獲取 $rootScope:
 rootScope = (window as any).angular.element('html').injector().get(‘$rootScope’);

路由衝突問題

Angular項目本身有自己的路由,但是Angular項目是運行在底層框架之上的,Angular項目的路由將會被底層框架所攔截。因此,我們也需要在底層框架的項目中配置相同的路由,以免Angular項目中的有效路由被底層框架識導向為404。

Angular項目路由:

{
   path: '',
   redirectTo: 'ng2app1',
   pathMatch: 'full'
},
{
   path: 'ng2app1',
   loadChildren: './ng2app1/ng2app1.module#Ng2app1Module',
},
{
   path: 'ng2app2',
   loadChildren: './ng2app2/ng2app2.module#Ng2app2Module',
}
 
底層框架路由:
var configArr = [
  {
       name: 'ng2app1',
       url: '/ng2app1'
  },
  {
       name: 'ng2app2',
       url: '/ng2app2'
  }
];

另外,由於底層項目使用的是hash路由,Angular項目中也要做相應的配置,默認是使用的是PathLocationStrategy,需要切換到hash模式。

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

...
providers: [
  {
       provide: LocationStrategy,
       useClass: HashLocationStrategy
  }
]

總結

以上方案是在底層框架升級周期長的前提下的一個臨時方案,實際上還是存在着不少的問題。比如底層框架對於老的雲服務容器是有統一管理的,老的雲服務容器會針對不同的場景能夠自適應,而融合方案中的Angular項目則不能;每次啟動整個項目時,必須要預先編譯好裏面的Angular項目,再去啟動外層的底層框架,開發效率比較低。因此,後續GeminiDB服務應該在底層框架升級后,儘快適應到新的底層框架體系中,提高服務的可用性和穩定性。

 

點擊關注,第一時間了解華為雲新鮮技術~

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

台北網頁設計公司這麼多該如何選擇?

※智慧手機時代的來臨,RWD網頁設計為架站首選

※評比南投搬家公司費用收費行情懶人包大公開

※幫你省時又省力,新北清潔一流服務好口碑

※回頭車貨運收費標準

向強大的SVG邁進

作者:凹凸曼 – 暖暖

SVG 即 Scalable Vector Graphics 可縮放矢量圖形,使用XML格式定義圖形。

一、SVG印象

SVG 的應用十分廣泛,得益於 SVG 強大的各種特性。

1.1、 矢量

可利用 SVG 矢量的特點,描出深圳地鐵的輪廓:

1.2、iconfont

SVG 可依據一定的規則,轉成 iconfont 使用:

1.3、 foreignObject

利用 SVG 的 foreignObject 標籤實現截圖功能,原理:foreignObject 內部嵌入 HTML 元素:

<svg xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="120" height="60">
		<p style="font-size:20px;margin:0;">凹凸實驗室 歡迎您</p>
	</foreignObject>
</svg>

截圖實現流程:

  1. 首先聲明一個基礎的 svg 模版,這個模版需要一些基礎的描述信息,最重要的,它要有 <foreignObject></foreignObject> 這對標籤;
  2. 將要渲染的 DOM 模版模版嵌入 foreignObject 即可;
  3. 利用 Blob 構建 svg 對象;
  4. 利用 URL.createObjectURL(svg) 取出 URL。

1.4、SVG SMIL

由於微信編輯器不允許嵌入 <style><script><a> 標籤,利用SVG SMIL 可進行微信公眾號極具創意的圖文排版設計,包括動畫與交互。
但是也要注意,標籤里不允許有id,否則會被過濾或替換掉。

點擊 “凹凸實驗室” 后,圍繞 “凹凸實驗室” 中心旋轉 360度,點擊0.5秒后 出現 https://aotu.io/ ,動畫只運行一次。

下圖為 GIF循環演示:

代碼如下:

<svg width="360" height="300" xmlns="http://www.w3.org/2000/svg">
    <g>
        <!-- 點擊后 運行transform旋轉動畫,restart="never"表示只運行一次 -->
        <animateTransform attributeName="transform" type="rotate" begin="click" dur="0.5s" from="0 100 80" to="360 100 80"  fill="freeze" restart="never" />
        <g>
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">
                凹凸實驗室
            </text>
        </g>
        <g style="opacity: 0;">
            <!-- 同一個初始位置以及大致的寬高,觸發點擊事件 -->
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">https://aotu.io/</text>
            <!-- 點擊后 運行transform移動動畫,改變文本的位置 -->
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.1s" to="0 40"  fill="freeze" restart="never" />
            <!-- 點擊0.5秒后 運行opacity显示動畫 -->
            <animate attributeName="opacity" begin="click+0.5s" from="0" to="1" dur="0.5s" fill="freeze" restart="never" />
        </g>
    </g>
</svg>

以上是鄙人對SVG的大致印象,最近的需求開發再次刷新了我的認知,那就是 SVG實現非比例縮放 以及 小程序不支持SVG標籤的處理,下面容我來講述一番。

二、SVG 實現非比例縮放

我們熟知的 iconfont,可通過改變字體大小縮放,但是這是 比例縮放,那如何實現 SVG 的非比例縮放呢?
如下圖所示,如何將 一隻兔子 非比例縮放?

划重點:實現非比例縮放主要涉及三個知識點:viewport、viewBox和preserveAspectRatio,viewport 與viewBox 結合可實現縮放的功能,viewBox 與 preserveAspectRatio 結合可實現非比例的功能。

2.1、viewport

viewport 表示SVG可見區域的大小。
viewport 就像是我們的显示器屏幕大小,超出區域則隱藏,原點位於左上角,x 軸水平向右,y 軸垂直向下。

通過類似CSS的屬性 widthheight 指定視圖大小:

<svg width="400" height="200"></svg>

2.2、viewBox

viewBox值有4個数字:x, y, width, height 。
其中 x:左上角橫坐標,y:左上角縱坐標,width:寬度,height:高度。
原點默認位於左上角,x 軸水平向右,y 軸垂直向下。

<svg width="400" height="200" viewBox="0 0 200 100"></svg>

显示器屏幕的畫面,可以特寫,可以全景,這就是 viewBox
viewBox 可以想象成截屏工具選中的那個框框,和 viewport 作用的結果就是 把框框中的截屏內容再次在 显示器 中全屏显示。

(圖片來源:SVG 研究之路 (23) – 理解 viewport 與 viewbox)

2.3、preserveAspectRatio

上圖的紅色框框和藍色框框,恰好和显示器的比例相同,如果是下圖的綠色框框,怎樣在显示器屏幕中显示呢?

2.3.1、 定義

preserveAspectRatio 作用的對象是 viewBox,使用方法如下:

preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
// 例如 preserveAspectRatio="xMidYMid meet"

其中 defer 此時不是重點,暫且忽略,主要了解 alignmeetOrSlice 的 用法:

  • align:由兩個名詞組成,分別代表 viewbox 與 viewport 的 x 方向、y方向的對齊方式。
含義
xMin viewport 和 viewBox 左邊對齊
xMid viewport 和 viewBox x軸中心對齊
xMax viewport 和 viewBox 右邊對齊
YMin viewport 和 viewBox 上邊緣對齊。注意Y是大寫。
YMid viewport 和 viewBox y軸中心點對齊。注意Y是大寫。
YMax viewport 和 viewBox 下邊緣對齊。注意Y是大寫。
  • meetOrSlice:表示如何維持高寬的比例,有三個值 meet、slice、none。
    • meet – 默認值,保持縱橫比縮放 viewBox 適應 viewport,可能會有餘留的空白。
    • slice – 保持縱橫比同時比例小的方向放大填滿 viewport,超出的部分被剪裁掉。
    • none – 扭曲縱橫比以充分適應 viewport。
2.3.2、 例子

例子1:preserveAspectRatio="xMidYMid meet" 表示 綠色框框 與 显示器的 x 方向、y方向的 中心點 對齊;

例子2:preserveAspectRatio="xMidYMin slice" 表示 綠色框框 與 显示器的 x 方向 中心點 對齊,Y 方向 上邊緣對齊,保持比例放大填滿 显示屏 后超出部分隱藏;

例子3:preserveAspectRatio="xMidYMid slice" 表示 綠色框框 與 显示器的 x 方向、y方向的 中心點 對齊,保持比例放大填滿显示屏 后超出部分隱藏;

例子4:preserveAspectRatio="none" 不管三七二十一,隨意縮放綠色框框,填滿 显示屏即可;這就是非比例縮放的答案了。

三、小程序不支持svg標籤怎麼辦

微信小程序官方不支持 SVG 標籤的,但是決定曲線救國,相當於自己實現了一個SVG標籤:使用小程序內置的 Canvas 渲染器, 在 Cax 中實現 SVG 標準的子集,使用 JSX 或者 HTM(Hyperscript Tagged Markup) 描述 SVG 結構行為表現。

但是今天我想講講其他的。
我們知道,小程序雖然不支持 SVG 標籤,但是支持 svg 轉成 base64 後作為 background-imageurl,如 background-image: url("data:image/svg+xml.......)

但是我這邊還有個需求,隨時更改 SVG 每個路徑的顏色,即 顏色可配置:

來迴轉 Base64 肯定是比較麻煩的,有沒有更好的方式呢?
直接貼答案:對於SVG圖形,還有更好的實現方式,就是直接使用SVG XML格式代碼,無需進行base64轉換。

3.1、URL 編碼

直接使用 SVG XML 格式代碼,首先要了解 Data URI的格式。
划重點:base64非必選項,不指定的時候,後面的 <data> 將使用 URL編碼。

3.1.1、入門

百分號編碼(Percent-encoding), 也稱作URL編碼(URL encoding),是特定上下文的統一資源定位符 (URL)的編碼機制。

原理:ASCII 字符 = % + 兩位 ASCII 碼(十六進制)。
例如,字符 a 對應的 ASCII 碼為 0x61,那麼 URL 編碼后得到 %61 。

3.1.2、URL 編碼壓縮

前言:

Data URI 的格式中的 <data> 完全使用URL 編碼也是可以的,如 encodeURIComponent('<svg version="1.1" viewBox= …</svg>')
但是和轉義前原始SVG相比,可讀性差了很多,而且佔用體積也變大了。
如果深入了解URL 編碼的話,<data> 沒必要全部編碼的。

正文:

RFC3986文檔規定,URL中只允許包含 未保留字符 以及 所有保留字符。

  • 未保留字符:包含英文字母(a-zA-Z)、数字(0-9)、-_.~ 4個特殊字符。對於未保留字符,不需要百分號編碼。
  • 保留字符:具有特殊含義的字符 :/?#[]@ (分隔Url的協議、主機、路徑等組件) 和 !$&'()*+,;= (用於在每個組件中起到分隔作用的,如&符號用於分隔查詢多個鍵值對)。
  • 受限字符或不安全字符:直接放在Url中的時候,可能會引起解析程序的歧義,因此這部分需要百分號編碼,如%空格雙引號"尖號 <>等等。

綜上所述,只需要對 受限字符或不安全字符 進行編碼即可。

  • JS 處理比較簡單,利用 replace 將 需要編碼的字符 替換掉 即可,基本替換 以下的符號 就夠用了:
svgToUrl (svgData) {
    encoded = encoded
      .replace(/<!--(.*)-->/g, '') // 親測必須去掉註釋
      .replace(/[\r\n]/g, ' ') // 親測最好去掉換行
      .replace(/"/g, `'`) // 單引號是保留字符,雙引號改成單引號減少編碼
      .replace(/%/g, '%25')
      .replace(/&/g, '%26')
      .replace(/#/g, '%23')
      .replace(/{/g, '%7B')
      .replace(/}/g, '%7D')
      .replace(/</g, '%3C')
      .replace(/>/g, '%3E')
    return `data:image/svg+xml,${encoded}`
  }
  • 如果使用在 CSS 中,可利用 SASS版本3.3以上 的 三個API 對 SVG字符串做替換處理。

    1. str_insert(string, insert, index): 從 $string$index 插入字符 $insert
    2. str_index(string, substring): 返回 $substring$string 中第一個位置;
    3. str_slice(string, start_at, end_at = nil): 返回從字符 $string 中第 $start_at 開始到 $end_at 結束的一個新字符串。

    前人已有總結,可前往 https://github.com/leeenx/sass-svg/blob/master/sass-encodeuri.scss 查看完整代碼。

3.2、SVG 壓縮

一般從 Sketch 導出 SVG ,冗餘代碼比較多,有條件的話建議使用 SVGO 壓縮SVG的原本體積,比如清除換行、重複空格;刪除文檔聲明;刪除註釋;刪除desc描述等等。

四、總結

SVG強大的地方在於,出其不意,炫酷,與眾不同。

無論是微信公眾號花式排版,foreignObject 標籤實現截圖,實現非比例縮放,或者 背景圖直接使用 SVG XML 格式代碼,還是上文沒有提及的路徑動畫、描邊動畫、圖形裁剪、濾鏡等等,都可以玩出新的花樣。

SVG 一個屬性可成就一篇文章,學習 SVG 可以說是在挑戰自己,歡迎加入 SVG 的學習隊列。

五、參考內容 · 推薦閱讀

三看 SVG Web 動效
URL編碼的奧秘
學習了,CSS中內聯SVG圖片有比Base64更好的形式
超級強大的SVG SMIL animation動畫詳解
詳細教你微信公眾號正文頁SVG交互開發
SVG 簡介與截圖等應用

歡迎關注凹凸實驗室博客:aotu.io

或者關注凹凸實驗室公眾號(AOTULabs),不定時推送文章:

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

南投搬家公司費用需注意的眉眉角角,別等搬了再說!

新北清潔公司,居家、辦公、裝潢細清專業服務

※教你寫出一流的銷售文案?