ThingJS 基于 HTML5 和 WebGL 技術(shù)，可方便地在主流瀏覽器上進行瀏覽和調(diào)試，支持 PC 和移動設(shè)備。
ThingJS 為可視化應(yīng)用提供了簡單、豐富的功能，只需要具有基本的 Javascript 開發(fā)經(jīng)驗即可上手。
ThingJS 提供了場景加載、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度云圖、界面數(shù)據(jù)展示、粒子效果等各種可視化功能網(wǎng)頁鏈接。
谷歌人工智能寫作項目：小發(fā)貓
如果可視化平臺還覺得太難了，那真的沒有簡單的了，程序員還得寫代碼，全靠經(jīng)驗判定呢typescript是用來干什么的，為什么要用typescript。
軟件是由程序員編寫的代碼出現(xiàn)的，一般開發(fā)軟件需要有UI前端，后臺程序員，還有數(shù)據(jù)庫人員等來一起完成一個項目，一般沒有專業(yè)知識的是沒有辦法去獨立開發(fā)一個軟件平臺的哦。首先要開發(fā)軟件，需要知道要什么功能？
達到什么效果？最終實現(xiàn)目的。這幾個問題搞清楚之后，就可以考慮自己的預(yù)算，考慮好了預(yù)算之后，才好結(jié)合自己的需求，提供給軟件開發(fā)公司進行溝通，溝通之后，確定價格，這樣就可以簽合同開始制作啦。
如果有疑問，可以在下面補充，我們一起討論吧。
HEC-DSSVue是一個基于Java的可視化實用程序，允許用戶在HEC-DSS數(shù)據(jù)庫文件中繪制，制表，編輯和操作數(shù)據(jù)。
HEC-DSSVue生成的圖形是高度可定制的，可以以各種格式保存，包括“jpeg”和“png”（便攜式網(wǎng)絡(luò)圖形），或者打印或復(fù)制到剪貼板以包含在報告中。HEC-DSSVue包含六十多個數(shù)學(xué)函數(shù)。
除了這些函數(shù)之外，HEC-DSSVue還提供了幾個實用程序函數(shù)，這些函數(shù)提供了一種將數(shù)據(jù)集輸入到HEC-DSS數(shù)據(jù)庫中、重命名數(shù)據(jù)集名稱、將數(shù)據(jù)集復(fù)制到其他HEC-DSS數(shù)據(jù)庫文件以及刪除數(shù)據(jù)集的方法。
一、AdobeEdge目前還處于預(yù)覽階段的AdobeEdge是用HTML5、CSS、JavaScript開發(fā)動態(tài)互動內(nèi)容的設(shè)計工具。內(nèi)容可以同時兼容移動設(shè)備和桌面電腦。
Edge的一個重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構(gòu)一致性，此外Edge還將整合T...。
。
前端需要掌握的技術(shù)還是很多的1.熟練掌握前端開發(fā)技術(shù)(HTML5、CSS3、JS、JSON、XHTML)，了解各項技術(shù)的相關(guān)標(biāo)準(zhǔn)；2.掌握Ajax異步編程，能夠?qū)懗龈咝阅?、可?fù)用的前端組件；3.對OO、MVC、MVVM等編程思想、前端框架有深刻理解，熟練掌握至少一個前端框架了解其原理（常用前端框架Vuejs，AngularJS，React，Bootstrap，QUICKUI，移動端有：FrozenUI，weUI，SUI，MUI，AUI）；4.善于Web性能優(yōu)化，可訪問性、對SEO等有良好的體驗；理解表現(xiàn)層與數(shù)據(jù)層分離的概念、Web語義化；5.了解前端安全機制，熟悉HTTP協(xié)議以及瀏覽器緩存策略；6.熟悉常見JS開發(fā)框架源碼實現(xiàn)（如：prototype、jQuery、Mootools，Ext，Dojo，underscore、YUI、Kissy）；7.擁有良好的代碼編寫，設(shè)計文檔撰寫的經(jīng)驗，熟練使用Git等版本控制工具；8.對常見的瀏覽器兼容問題有清晰的理解，并有可靠的解決方案；如IE6/7/8/9、Firefox、Safari、Chrome。
。
可往3D開發(fā)工程師轉(zhuǎn)型，前提要熟練掌握js，熟悉webgl，這里你可以練練手網(wǎng)頁鏈接ThingJS基于HTML5和WebGL技術(shù)，可方便地在主流瀏覽器上進行瀏覽和調(diào)試，支持PC和移動設(shè)備。
ThingJS為可視化應(yīng)用提供了簡單、豐富的功能，只需要具有基本的Javascript開發(fā)經(jīng)驗即可上手。
ThingJS提供了場景加載、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度云圖、界面數(shù)據(jù)展示、粒子效果等各種可視化功能。
ThingJS提供如下相關(guān)組件和工具供用戶使用：CityBuilder：聚焦城市的3D地圖搭建工具，打造你的3D城市地圖。CamBuilder：簡單、好用、免費的3D場景搭建工具。
ThingPano：全景圖制作工具，輕松制作并開發(fā)全景圖應(yīng)用，實現(xiàn)3D宏觀場景和全景微觀場景的無縫融合。ThingDepot：上萬種模型，數(shù)十個行業(yè)，自主挑選，一次制作多次復(fù)用。
初學(xué)者必看干貨web前端學(xué)習(xí)路線圖，隨著移動互聯(lián)網(wǎng)的發(fā)展，web前端逐漸受到企業(yè)的重視，前端開發(fā)人員的薪資也水漲船高，越來越多的人看好前端行業(yè)的發(fā)展，想要轉(zhuǎn)行加入。
下面，給大家分享一份web前端學(xué)習(xí)路線圖，希望對初學(xué)者有所幫助。Web前端行業(yè)的發(fā)展，讓前端人員能完成比以前更多的職責(zé)范圍，所以未來前端可以寬口徑就業(yè)，前景非常好。
除此之外，目前web前端工程師日均崗位缺口超50000，平均薪資10820元/月。對于零基礎(chǔ)的人而言，要怎么學(xué)習(xí)web前端呢？1、前端頁面重構(gòu)。
主要內(nèi)容為PC端網(wǎng)站布局、Photoshop工具及切圖、H5移動端網(wǎng)頁布局、HTML5+CSS3新特性與交互。學(xué)習(xí)目標(biāo)是完成PC端網(wǎng)站布局，可實現(xiàn)響應(yīng)式布局，一套代碼適配PC端、移動端、平板設(shè)備等。
2、前后端網(wǎng)頁交互。
主要內(nèi)容為JavaScript語法全面進階、ES6到ES10新語法實踐、jQuery應(yīng)用及插件使用、設(shè)計模式及插件編寫、封裝JS工具庫及WebAPIS、AJAX+PHP+MySQL前后端交互、前端工程化與模塊化應(yīng)用以及PC端全棧開發(fā)項目等。
學(xué)習(xí)目標(biāo)是可以掌握前端工程化工具，如git、gulp、webpack等，搭建項目及開發(fā)項目。3、+前端框架。
主要內(nèi)容為全面進階、Koa2+MongoDB搭建服務(wù)、框架、框架、小程序云開發(fā)與小程序框架、原生APP與混合APP、數(shù)據(jù)可視化與桌面應(yīng)用等。
學(xué)習(xí)目標(biāo)是掌握桌面應(yīng)用及可視化大數(shù)據(jù)，實現(xiàn)復(fù)雜數(shù)據(jù)展示類項目，能夠獨立完成前后臺相關(guān)功能，勝任HTML5全棧開發(fā)工程師職位。
很多學(xué)習(xí)web前端的朋友都希望在學(xué)成后能找到一份滿意的工作，所以我們在學(xué)習(xí)過程中一定要注意實戰(zhàn)經(jīng)驗的積累，如果你所學(xué)的東西對企業(yè)沒有用，那你所做的一切都是無用功。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
1、安裝插件—時間格式化插件
npm i silly-datetime --save 2、Main.js文件引用
-
import Time from "silly-datetime"; //時間格式化處理插件
-
Vue.prototype.$Time = Time; //全局使用
3、頁面中使用
this.$Time.format(new Date(), 'YYYY-MM-DD HH:mm:ss'); 1.安裝插件
npm i silly-datetime --save 2.在node中引入
const timeQs = require('silly-datetime'); // 事件格式化控件3.在后端路由中
obj.time = timeQs.format(new Date(), 'YYYY-MM-DD HH:mm:ss');4、參數(shù)說明
| 格式 | 類型 | 說明 | 實例 |
|---|---|---|---|
| YYYY | 年 | 年份 | YYYY ：2019 |
| MM | 月 | 月份，補0 | MM：07 |
| M | 月 | 月份，不補0 | M：7 |
| DD | 日 | 日，補0 | DD：07 |
| D | 日 | 日，不補0 | D：7 |
| HH | 小時 | 24小時，補0 | HH：07 |
| H | 小時 | 24小時，不補0 | H：7 |
| hh | 小時 | 12小時，補0 | hh：07 |
| h | 小時 | 12小時，不補0 | h：7 |
| A | am | 上午 | mm：07 |
| a | pm | 下午 | m：7 |
| mm | 分鐘 | 分鐘，不補00 | mm：07 |
| m | 分鐘 | 分鐘，不補0補0 | m：7 |
| s | 秒鐘 | 秒鐘，不補00 | s：07 |
| s | 秒鐘 | 秒鐘，不補0補0 | s：7 |
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
在 Node.js 中，您可以使用該fs.readdir()方法列出目錄中的所有可用文件。.此方法異步工作以讀取給定目錄的內(nèi)容，并返回目錄中不包括和的文件名數(shù)組..。
這是一個讀取目錄中所有可用文件并在控制臺上打印它們的名稱的示例：
-
const fs = require('fs');
-
-
// directory path
-
const dir = './node_modules/';
-
-
// list all files in the directory
-
fs.readdir(dir, (err, files) => {
-
if (err) {
-
throw err;
-
}
-
-
// files object contains all files names
-
// log them on console
-
files.forEach(file => {
-
console.log(file);
-
});
-
});
fs.readdir()如果給定目錄不存在，該方法將拋出錯誤。
該fs模塊還提供了 call 的同步變體，readdir()它readdirSync()同步工作并返回文件名數(shù)組：
-
const fs = require('fs');
-
-
// directory path
-
const dir = './node_modules/';
-
-
// list all files in the directory
-
try {
-
const files = fs.readdirSync(dir);
-
-
// files object contains all files names
-
// log them on console
-
files.forEach(file => {
-
console.log(file);
-
});
-
-
} catch (err) {
-
console.log(err);
-
}
查看本指南以了解有關(guān)在 Node.js 應(yīng)用程序中讀取和寫入文件的更多信息
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
web自動化測試作為軟件自動化測試領(lǐng)域中繞不過去的一個“香餑餑”，通常都會作為廣大測試從業(yè)者的首選學(xué)習(xí)對象，相較于C/S架構(gòu)的自動化來說，B/S有著其無法忽視的諸多優(yōu)勢，從行業(yè)發(fā)展趨、研發(fā)模式特點、測試工具支持，其整體的完整生態(tài)已經(jīng)遠遠超過了C/S架構(gòu)方面的測試價值。接上一篇文章，我們將繼續(xù)深入探討Selenium的相關(guān)使用方法與技巧。
此篇中所用的技術(shù)棧為Selenium+Python，因其本身編程難度不高，總體思想都是基于面向?qū)ο蟮木幊汤砟?，故只要大家的編碼語言基礎(chǔ)不弱，就完全可以做到平替。
在正式啟動瀏覽器之前，這里還需要說說上一篇沒有提及的一個問題，后臺有同學(xué)私信說在對應(yīng)驅(qū)動網(wǎng)站上完全找不到自己瀏覽器對應(yīng)版本的驅(qū)動，關(guān)于瀏覽器驅(qū)動的版本，大家都知道驅(qū)動的版本應(yīng)該是要與瀏覽器的版本完全對應(yīng)上的。但往往日常工作中因為環(huán)境或者其他客觀因素會導(dǎo)致瀏覽器的版本五花八門，也會出現(xiàn)驅(qū)動網(wǎng)站上完全沒有你目前工作環(huán)境中對應(yīng)的瀏覽器版本，這里我們大可使用中版本號一致的驅(qū)動來進行嘗試，沒有必要將版本進行完全的匹配。比如你的Chrome瀏覽器的版本號為107.0.5304.107，如果這時對應(yīng)網(wǎng)站只有107.0.5304.62與108.0.5359.22的前后兩個版本的驅(qū)動比較相近，這里就有兩個選擇，第一就是卸掉原有的瀏覽器，安裝對應(yīng)的版本；第二則是選擇107.0.5304.62來進行嘗試；相信大家在成本耗時的判斷下，一般都會選擇第二個選項來進行嘗試對吧？那么我可以很負責(zé)任的告訴你，第二個判斷是完全行的通的。不必太過糾結(jié)驅(qū)動的小版本號是否完全匹配。
我們將一切準(zhǔn)備就緒后就可以開始我們的selenium之旅了，首先我們需要將使用selenium進行瀏覽器的啟動（訪問百度）。
from selenium import webdriver
browser = webdriver.Chrome() browser.get('https://www.baidu.com')
如果對應(yīng)的瀏覽器驅(qū)動沒有進行環(huán)境變量的設(shè)置，可以在代碼中直接進行程序的路徑指定來進行后續(xù)的瀏覽器操作。
from selenium import webdriver
path = r'C:\Program Files\Google\Chrome\Application\chromedriver.exe' browser = webdriver.Chrome(path) browser.get('https://www.baidu.com')
使用Selenium打開后的瀏覽器都會標(biāo)識出正在受到自動化測試軟件控制的相關(guān)提示。
Selenium本身提供給了我們非常多的各類瀏覽器與頁面的操作函數(shù)，方便我們根據(jù)所需測試業(yè)務(wù)來進行自由搭配使用甚至是二開。
對于瀏覽器窗口的尺寸進行控制與獲取，如最大化、最小化、指定窗口大小等。
窗口全屏
browser.fullscreen_window()
窗口最大化
browser.maximize_window()
窗口最小化
browser.minimize_window()
自定義窗口大?。▽扻高）
browser.set_window_size(1080, 720)
自定義窗口坐標(biāo)位置與大?。▁坐標(biāo)，y坐標(biāo)，寬X高）
browser.set_window_rect(100, 200, 1080, 720)
獲取窗口的大小（寬X高）
browser.get_window_size()
獲取窗口的坐標(biāo)位置，返回一個字典對象
browser.get_window_position()
獲取窗口的坐標(biāo)與大?。▁坐標(biāo)，y坐標(biāo)，寬X高）
browser.get_window_rect()
獲取當(dāng)前窗口的句柄
browser.current_window_handle
獲取當(dāng)前所有窗口的句柄
browser.window_handles
對于瀏覽器當(dāng)前頁面的一些操作，如前進、后退、刷新等。
前進（下一頁面）
browser.forward()
后退（上一頁面）
browser.back()
刷新（當(dāng)前頁面）
browser.refresh()
截圖并保存為test.png（當(dāng)前頁面）
browser.save_screenshot('test.png')
截圖并保存為png文件（當(dāng)前頁面）
browser.get_screenshot_as_file('test_02.png')
截圖并將信息轉(zhuǎn)為base64編碼的字符串
browser.get_screenshot_as_base64()
對于瀏覽器當(dāng)前一些信息的獲取與操作。
獲取頁面URL（當(dāng)前頁面）
browser.current_url
獲取日志類型，會返回一個列表對象
browser.log_types
獲取瀏覽器操作日志，注意函數(shù)內(nèi)的參數(shù)為固定值類型’browser’
browser.get_log('browser')
獲取設(shè)備操作日志，參數(shù)原理同上
browser.get_log('driver')
獲取當(dāng)前頁面標(biāo)題
browser.title
獲取當(dāng)前瀏覽器的名字
browser.name
Selenium中最基礎(chǔ)也是最重要的一環(huán)，基本上對于頁面的業(yè)務(wù)操作大多數(shù)都集中與此。另外需要注意的是元素定位所使用的find_element_by的方法在很早之前就已經(jīng)被廢棄，這里同樣也會使用最新的find_element方法進行講解。
如何查看頁面中的元素與其相關(guān)屬性，這里以Chrome為例，我們只需按F12或者右鍵頁面選擇“檢查”，再點擊調(diào)試窗口的左上角的箭頭標(biāo)志或者使用快捷鍵Ctrl+Shift+C來進行元素的選取，此時Elements標(biāo)簽頁中會將焦點對應(yīng)跳轉(zhuǎn)至該元素的html代碼行中，接下來我們就可以針對不同的元素和不同的屬性來進行定位操作。
通過一個元素的name屬性來進行定位。
比如定位百度中的搜索欄，我們通過name屬性來進行定位。該元素的html構(gòu)造如下：
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
我們只需將name屬性后面的值拿出，賦予給find_element方法即可。新的By方法我們只需要導(dǎo)入selenium.webdriver.common.by下的By方法即可。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.NAME, 'wd')
通過一個元素的class屬性來進行定位。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CLASS_NAME, 's_ipt')
通過一個元素的id屬性來進行定位。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.ID, 'kw')
css selector也被成為選擇器定位，它通過頁面內(nèi)的元素的id、name、tag三個屬性來進行定位，根據(jù)元素屬性的重復(fù)程度，可以單獨屬性定位也可組合屬性來進行定位。而且相較于xpath定位方式來說，博主更推薦使用此方法來進行定位，無論是易用度還是維護性來說比xpath定位好的多。
單屬性定位–tag屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input')
單屬性定位–id屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '#kw')
單屬性定位–class屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '.s_ipt')
多屬性定位–tag+id屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input#kw')
多屬性定位–tag+class屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input.s_ipt')
同樣的，其他的組合方式大家可以舉一反三，不斷嘗試，比如模糊匹配input[class ~= "局部關(guān)鍵字"]、層級定位#form > span > input等等等等。
這種定位方式適用于頁面中帶有超鏈接的元素，直接通過超鏈接標(biāo)簽內(nèi)的文字進行元素定位。
我們以百度首頁為例，可以看到該頁面中有很多的超鏈接標(biāo)簽，如果我們想模擬點擊跳轉(zhuǎn)至新聞對應(yīng)頁面的操作，就可以用link text的元素定位方法來進行實現(xiàn)。
使用超鏈接標(biāo)簽對中的“新聞”一詞來進行定位。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.LINK_TEXT, '新聞').click()
這個定位方式與link text定位十分相像，實際上也就是link text的模糊查找定位方式，對象也是超鏈接內(nèi)的文字，只不過他匹配的不是全部文字而是局部。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.PARTIAL_LINK_TEXT, '新').click()
tag定位的效率總體來說不高，也不太推薦單獨使用，html頁面中一般也是由很多相同或不同的標(biāo)簽對組成。就tag而言標(biāo)簽重復(fù)的越多，定位的效率其實也就越低。
比如我們想在百度的搜索欄中輸入“selenium”關(guān)鍵字，那么光使用tag其實就很難達到我們的目的，甚至無法準(zhǔn)確定位到我們想要的元素。如果運氣好，搜索欄的input標(biāo)簽在html頁面中排在第一位那還好，只要不是第一位，我們就需要編寫其他的代碼邏輯來輔助我們繼續(xù)定位這個元素。
所以下面的代碼實在是不能稱之為高效的執(zhí)行代碼
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.TAG_NAME, 'input').send_keys('selenium')
一般來說無法通過以上的這些元素定位方法定位的情況下，我們會使用xpath定位方法。但這里需要特別注意，xpath方法分為絕對路徑和相對路徑兩種定位方式，博主只推薦如果真要使用xpath就使用相對路徑+正則表達式的方式來進行元素定位。不推薦絕對路徑的原因就不用博主多說了吧，只要你敢用，后期的腳本維護與復(fù)用絕對會讓你抓狂的。
還是老樣子，我們使用xpath的相對路徑寫法來定位百度首頁的搜索欄。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium')
另外與find_element方法相對應(yīng)的find_elements方法這里就不多做介紹了，該種方法是將當(dāng)前頁面中所有能匹配上對應(yīng)元素定位方法的元素全部獲取。大家可以根據(jù)自己的需求來進行選取和使用。
我們加載頁面時通常會因為網(wǎng)絡(luò)環(huán)境等各方面的客觀因素而導(dǎo)致元素加載的速度各不相同，如果此時我們沒有對業(yè)務(wù)操作進行一定的延時執(zhí)行，那么大概率業(yè)務(wù)操作會出現(xiàn)各類的no such element報錯。
那么我們就需要在頁面元素加載完成之后再對相應(yīng)的元素進行業(yè)務(wù)操作來規(guī)避上面說的這個問題。Selenium內(nèi)可以使用三種延時的函數(shù)來進行對應(yīng)的延時業(yè)務(wù)操作。
隱式等待的作用是在頁面加載是隱性的進行特定時長的等待，如果在規(guī)定的等待時長內(nèi)頁面加載完畢，則會繼續(xù)進入下一個業(yè)務(wù)操作，如果沒有加載完畢，則會拋出一個超時的異常。這里其實有兩個問題，第一，隱式等待是全局性質(zhì)的，也就是說一旦你設(shè)置了個5秒，那整個程序都會使用這個等待時間類進行配置，靈活性較低；第二，如果碰到了有些頁面中的元素是局部加載的話，那整個頁面的加載是否完成也就沒有了其意義，隱式加載無法針對這樣的情況作出調(diào)整，智能度較低。所以一般來說只要是對于頁面的整體加載要求不高或者元素的加載比較穩(wěn)定的程序，都可以使用隱式等待來進行延時操作。
from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.baidu.com') browser.implicitly_wait(5) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium')
顯式等待的作用則是使用特定的等待時長來進行某些業(yè)務(wù)邏輯判斷，如果判斷（比如元素是或否加被定位）在時間完成那繼續(xù)執(zhí)行下一個業(yè)務(wù)操作，如果判斷失敗也會拋出no such element的異常，而顯式等待的默認檢查元素周期為0.5秒。乍一看好像與隱式等待差不多，其實不然，首先顯式等待是針對頁面中某個或某組特定元素而執(zhí)行的，隱式則是全局，對所有的元素都生效；其二，顯式等待可以通過自定義條件來進行元素的定位和選取，隱式則不行。
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC
browser = webdriver.Chrome() browser.get('https://www.baidu.com') ele = WebDriverWait(browser, 10, 0.5).until(EC.presence_of_element_located((By.XPATH, '//*[@id="kw"]'))) ele.send_keys('selenium')
這個應(yīng)該是平時大家代碼中用的最多的等待方式了吧，sleep是針對線程進行掛起的一種等待方式，等待時長根據(jù)指定的參數(shù)來進行決定。最大的好處就是簡單粗暴，無任何邏輯在里面，所以也被稱為強制等待。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium')
那么以上的三種等待方式其實各有各的特點與缺點，三者之間沒有絕對的好用和不好用，而在我們的日常工作場景中也希望大家可以根據(jù)實際的情況有選擇性的使用。
元素加載超時我們可以使用以上三種延時方式來進行處理，那么頁面超時了又該如何操作呢？selenium也為我們準(zhǔn)備了兩個函數(shù)來對應(yīng)這樣的局面。
頁面加載超時
browser.set_page_load_timeout(30)
這里推薦將超時的時間有效的拉長，不宜過短。過短的超時時間容易導(dǎo)致整體頁面出現(xiàn)未加載html代碼情況下直接令驅(qū)動無法工作的情況。
頁面異步j(luò)s或ajax操作超時
browser.set_script_timeout(30)
這個函數(shù)是用于execute_async_script()相關(guān)的異步j(luò)s操作超時報錯，由于是異步操作，等待時間同理也不易過短。
瀏覽器中鍵盤與鼠標(biāo)的操作也是不可或缺的重要一環(huán)，在被測對象的業(yè)務(wù)要求中往往占有不少的戲份。
文字輸入
browser.find_element(By.ID, 'kw').send_keys('selenium')
點擊
browser.find_element(By.ID, 'kw').click()
點擊并按住不放（左鍵長按），這些模擬鼠標(biāo)操作需要導(dǎo)入ActionChains包
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.click_and_hold(ele).perform()
右鍵點擊
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.context_click(ele).perform()
雙擊
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.double_click(ele).perform()
拖拽元素至另一個元素處，ele_a 為source，ele_b 為target
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele_a = browser.find_element(By.ID, 'btn_a') ele_b = browser.find_element(By.ID, 'btn_b') act.drag_and_drop(ele_a, ele_b).perform()
拖拽元素至指定位置后松開，元素后為x，y坐標(biāo)值
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.drag_and_drop_by_offset(ele, 200, 100).perform()
鼠標(biāo)移動至指定元素
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.move_to_element(ele).perform()
按下指定的鍵位（示例代碼中是回車鍵）
from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER).perform()
松開指定的鍵位，這里也可以用鏈?zhǔn)綄懛?/span>
from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER) act.key_up(Keys.ENTER) # 鏈?zhǔn)綄懛?/span> act.key_down(Keys.ENTER).act.key_up(Keys.ENTER).perform()
移動鼠標(biāo)到指定坐標(biāo)位置
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_by_offset(100, 200).perform()
移動到距離指定元素多少距離的位置（從左上角0， 0開始計算）
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_to_element_with_offset(ele, 100, 200).perform()
在指定元素位置松開鼠標(biāo)
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.click_and_hold(ele).release(ele).perform()
發(fā)送指定的鍵或者內(nèi)容至指定元素
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.send_keys_to_element(ele, 'selenium').perform()
暫停所有操作，默認單位為秒
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.context_click(ele).pause(5).double_click(ele).perform()
頁面中也存在著很多不同種類的組件，比如單選框、多選框、下拉列表、選項卡等。這些操作也可以通過selenium提供的函數(shù)進行實現(xiàn)。
清除指定元素中的內(nèi)容（輸入框等）
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.clear()
提交確認（類似于Keys.ENTER的效果）
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.submit()
下拉列表，我們就可以使用Select方法來實現(xiàn)選取操作
使用Select方法需要從selenium.webdriver.support.select導(dǎo)入該方法
例如下圖中某網(wǎng)站的下拉列表對象
html構(gòu)造如下
select_by_index()方法
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 需要注意下標(biāo)要從0開始，選擇1%那一項 Select(ele).select_by_index('0')
select_by_value()方法
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的value屬性值，選擇1%那一項 Select(ele).select_by_value('0.01')
select_by_value()方法
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的文本值，選擇1%那一項 Select(ele).select_by_visible_text('1%')
框架切換（Frame）
如果在頁面中定位某一個元素失敗并檢查其屬性并沒有問題時，就該考慮是否在祖先節(jié)點中是否存在frame或者iframe標(biāo)簽。這樣的頁面就表名存在多層框架嵌套，這時我們就需要進行框架切換的操作，來準(zhǔn)確定位到指定元素。
例如某頁面存在兩層frame嵌套，內(nèi)部框架的xpath為：//*[@id="mainDiv"]/iframe，此時如果定位某個輸入框失敗之后，我們就應(yīng)該轉(zhuǎn)而跳入該frame內(nèi)進行元素定位。
from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') # 定位到指定的frame path = browser.find_element(By.XPATH, '//*[@id="mainDiv"]/iframe') # 切換至該frame內(nèi) browser.switch_to_frame(path) ele = browser.find_element(By.CLASS_NAME, 'input') ele.send_keys('selenium')
標(biāo)簽頁切換
我們?yōu)g覽器在使用中一般會打開多個瀏覽窗口，也就是多個標(biāo)簽頁。此時我們就可以通過每個標(biāo)簽頁的句柄來進行定位和互相切換。
switch_to_window()
我們利用瀏覽器窗口的句柄來進行標(biāo)簽頁的切換
from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 第一個窗口的句柄下標(biāo)為0，打開第二個就是1 browser.switch_to_window(browser.window_handles[1]) # 此時就會使用第二個標(biāo)簽頁去訪問淘寶 browser.get('https://www.taobao.com')
彈窗處理
頁面中時常也存在著各類的彈窗，比如警告、確認、提示等等，那么對于這些彈窗我們也有著相應(yīng)的業(yè)務(wù)處理方法。
首先我們需要明確的是每種類型的彈窗中元素也是各不相同，所以我們針對不同的彈窗使用不同的屬性來定位和操作。
警告彈窗
一般來說就是告知到使用者執(zhí)行某些操作與頁面之后將要注意的事項，這種窗口只需確認。
from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_tg_title').click() sleep(1) # 在警告彈窗中點擊確認按鈕 browser.switch_to_alert().accept()
確認彈窗
多用于在用戶執(zhí)行提交操作后的動作確認，有確認和取消兩個選項。
from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_submit').click() sleep(1) #確認二選一 browser.switch_to_alert().accept() #取消二選一 browser.switch_to_alert().dismiss()
提示彈窗
這個通常用來處理用戶信息交互的場景，用戶可以通過彈窗輸入一些文字信息，來傳遞與進行后續(xù)的業(yè)務(wù)處理。
from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_info_inquiry').click() sleep(1) # 這里傳遞信息到提示彈窗，警告與確認兩類彈窗不可使用，會報錯 browser.switch_to_alert().send_keys('20100909')
既然是web自動化測試，那我們又怎么能少了Cookie的相關(guān)操作呢？用戶的狀態(tài)和業(yè)務(wù)請求都的需要用他來進行鑒權(quán)。在selenium中對Cookie進行操作其實也很簡單，首先我們需要手動的登錄被測網(wǎng)站一次，待網(wǎng)站Cookie存入本地后即可使用Selenium自帶的函數(shù)對齊進行業(yè)務(wù)操作。
首先我們獲取對應(yīng)網(wǎng)站的Cookie值
import json from selenium import webdriver
browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 寫入保存為文件還是直接打印至控制臺，各取所需 with open('cookies.txt', 'w') as f: f.write(json.dumps(browser.get_cookies())) cookies = browser.get_cookies() print(cookies)
接下來我們簡單的對獲得的Cookie進行處理
# 刪除所有的cookies browser.delete_all_cookies() # 循環(huán)打印cookie中的name和value for c in cookies: # 查看打印出的cookie對應(yīng)的鍵值對 print("%s : %s" % (c['name'], c['value'])) # 根據(jù)自己的業(yè)務(wù)需求進行cookie的增刪改 cookie = {"name": "xxxx", "value": "xxxx"} # 最后添加即可 driver.add_cookie(cookie)
Selenium也為我們提供了可執(zhí)行js腳本相關(guān)的函數(shù)，他們的作用是在某些頁面中模擬一些業(yè)務(wù)動作（畫面滑動，選擇日期等）。在一些僅靠webdriver無法實現(xiàn)的業(yè)務(wù)場景中，我們就可以依靠此函數(shù)來輔助測試目的的達成。
js的查找元素方法(ID)
document.getElementById("id")
js的查找元素方法(name)
document.getElementsByName('name')
js的查找元素方法(class)
document.getElementsByClassName("class_name")
js的查找元素方法(tag)
document.getElementsByTagName('tag_name')
js的查找元素方法(css)
document.querySelector("css selector")
js的查找元素方法(css_list)
document.querySelectorAll("css selector")
execute_script()
從上可以看出其實js的定位元素方法和selenium中的差不多，接下來我們就可以將需要執(zhí)行的js語句放入到執(zhí)行函數(shù)中使用。
from selenium import webdriver
browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 定位后修改指定元素的value屬性 js_script_exec = 'document.getElementById("form_motion").value="list_modify";' browser.execute_script(js_script_exec)
對于某些動態(tài)div標(biāo)簽（窗口），一般的方法不太奏效的情況下，可以嘗試下switch_to_default_content()方法，跳轉(zhuǎn)到最外層；
使用模擬鍵鼠操作的時候，無論是單獨使用還是鏈?zhǔn)綄懛?，記得在結(jié)尾加上perform()方法進行執(zhí)行；
如果元素定位時報錯element click intercepted，記得檢查界面上是否有其他元素進行覆蓋，元素有可能也是具有隱藏屬性的；
元素過期報錯element is not attached to the page document，可以嘗試重新刷新頁面，這里不推薦直接使用refresh方法，還是養(yǎng)成好習(xí)慣先懟上try…except…捕捉到異常后在進行刷新或重置操作；
對于屬性值為動態(tài)的元素，墻裂推薦使用CSS selector或者xpath方法來進行元素定位，正則表達式也推薦大家最好能掌握；
如果前期對xpath的相對路徑寫法比較頭疼，推薦使用F12調(diào)試工具自帶的元素復(fù)制功能，在你想要復(fù)制的元素所在的標(biāo)簽對這行右鍵，選擇copy —— Copy XPath選項即可；
輸入框默認存在內(nèi)容想要刪除再輸入信息的話，不推薦模擬鍵盤操作Ctrl+A，然后模擬退格鍵，試試clear()方法吧；
抓不到元素可以使用延時方法，輸入文字也是一樣的道理，業(yè)務(wù)場景中需要大量輸入文字的，無論是從文件中還是提取又或者是遍歷，出現(xiàn)少字漏字的話，同樣也可以使用延時的方法，適當(dāng)?shù)姆怕幚淼乃俣龋?
在頁面中總會有些不可見的元素，這種情況使用is_displayed()方法即可快速定位找到；
有些被測頁面需要驗證碼，無論是手機的還是圖片驗證，和開發(fā)同學(xué)溝通一下，留個萬能的就行了，其本身的功能手工回歸一下即可，不必太過糾結(jié)；
三方登錄功能也是如此，不推薦直接使用web自動化去搞，三方的一般是不開源的，有這折騰的時間還不如跑跑接口和黑盒，自動化的話繞過去即可；
自動化測試用例這塊的話博主還是推薦不要有依賴，和功能測試用例同理，每次的執(zhí)行順序或者數(shù)量都會根據(jù)需求與業(yè)務(wù)場景發(fā)生變化，一旦依賴了會大大增加測試同學(xué)的維護成本，后面有空我會單獨出一期自動化測試用例的文章來為大家介紹。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
目錄
搞明白前端開發(fā)人員在企業(yè)中的占比，你才可以在學(xué)?；蛘呒磳厴I(yè)的時候選擇出自己將要深入學(xué)習(xí)的開發(fā)語言。很多學(xué)校既要教C語言，又教單片機，既教java，也教前端開發(fā)知識，但老師的課是有限的，給留了作業(yè)，也許都不檢查，下一課老師就要繼續(xù)往下講，因為這是他的工作，老師們也有生活，不可能圍著某些人轉(zhuǎn)，學(xué)不會就不往下開課了。
而搞懂前端開發(fā)在企業(yè)中的占比呢，能夠更好的讓你覺得如果自己比較平凡，得到什么等級可以卷得過別人，可以在這么多職位中占有一席之地。
很可喜的是，目前傳統(tǒng)行業(yè)已經(jīng)信息化改造完成，不管他們是內(nèi)部系統(tǒng)，或者外部聯(lián)合系統(tǒng)，都需要前端開發(fā)；我們每天看見大街上跑的汽車企業(yè)，某些電子企業(yè)，手機廠商，都需要前端開發(fā)的職位；更別提電商，直播這些我們生活所不可缺少的行業(yè)。但你還需要知道的是，如果你想學(xué)的一門服務(wù)端語言，java phython .net 或者其他，很可能這家公司就不會用，無形中給自己減少了很多工作機會。
以上的圖，是從過去幾年一直到今年（2022）年的各大公司的占比，畢竟是大廠嘛，對用戶體驗，前端接觸到瀏覽器，最接近用戶的要求肯定會高一些。
但是通過對多家中小公司的逐步了解發(fā)現(xiàn)，出去UI , 項目，產(chǎn)品，DBA， 運維等職位外，服務(wù)端開發(fā)與前端開發(fā)的比例幾乎是1:1 ，甚至有的外包性質(zhì)的公司，他們一旦產(chǎn)品成型后，新的客戶換皮膚，更換界面的需求會更多，所以前端開發(fā)會需求更多一些。
此前有人戲稱，是開發(fā)語言受歡迎，并非你受歡迎。但不得不說，某個開發(fā)語言受歡迎程度如果更加靠前，說明市場需求更大，更受歡迎，而將來準(zhǔn)備從事某一種開發(fā)語言，也是非常關(guān)鍵的信息來源。
通過以上往年到今年的開發(fā)語言受歡迎程度發(fā)現(xiàn)，javascript這門前端必備的開發(fā)語言名列前茅，甚至在眾多服務(wù)端開發(fā)語言中也不甘示弱，當(dāng)然這之中并沒有表明HTML CSS是一門開發(fā)語言，如果是的話，HTML CSS 也必將榜上有名，因為各行各業(yè)都不要網(wǎng)頁對外公式自己的產(chǎn)品，但服務(wù)端開發(fā)語言五花八門，而前端必備javascript。
從web1.0時代，頁面簡單的只讀時代，到web2.0時代，不斷的交互，前端開發(fā)這個職位也在不斷的進步。那么在未來的web3.0時代，很多人疑惑，可能PC的網(wǎng)頁用處會越來越少，甚至不客氣的說H5的頁面也會少很多，據(jù)推測APP也會減少，未來將會有更多的數(shù)據(jù)整合產(chǎn)品出現(xiàn)。那么未來前端還會大有可為嗎？
答案是肯定的，偉大的《紅寶書》開頭便說：javascript能做所有的事情，如果他能。而且nodejs的流行，也使前端可以更多的滲透到服務(wù)端開發(fā)，flutter的最新發(fā)布，WPA的使用，也使APP得到了更大的挑戰(zhàn)，CSS3的不斷進步，前端游戲引擎的盛行，也使前端有了更大的發(fā)展前景與選擇，那么即便未來的元宇宙世界，相信前端javascript也一定能夠勇往直前
如果這只是當(dāng)下技術(shù)領(lǐng)域的一個縮影，可見比較活躍的的開發(fā)語言有java phython c mysql 然后才是javascript。從開發(fā)開發(fā)技術(shù)職位區(qū)分還是服務(wù)端和前端，但前端活躍度卻比較靠后，不管是提問，回答，數(shù)量等維度上
說明什么問題呢？從事前端開發(fā)人數(shù)少嗎？前端開發(fā)在學(xué)習(xí)，工作中沒有問題嗎？前端開發(fā)比較懶惰，不愿意上社區(qū)來參與活動嗎？
我們知道nodejs可以做服務(wù)端開發(fā)，但是有多少企業(yè)敢于讓從開始就搭上node serve的架子，不斷讓前端同學(xué)去嘗試，不斷在node領(lǐng)域發(fā)光發(fā)熱，為整個行業(yè)添磚加瓦呢，很少吧。而幾乎大部分公司，還是比較守舊的，從最開始的jSP時代，甚至不需要前端，服務(wù)端寫完服務(wù)端代碼，然后開始寫JSP。JSP里再套java代碼，順帶著添加一些javascript事件，樣式怎么辦，那個時候extjs jquery還非常盛行，easyui jqueryui 等，可以讓服務(wù)端開發(fā)人員快速生產(chǎn)頁面。
但隨著提升用戶體驗的欲望越來越強烈，《國富論》開篇也講分工帶來的好處，前端才逐漸有了一席之地，甚至在一些大公司，前端的話語權(quán)可以超越服務(wù)端，他們通過技術(shù)驅(qū)動業(yè)務(wù)向前。
按照比例學(xué)可知，一旦某些事物達到一個數(shù)量后，某些細節(jié)世界也可以大體展現(xiàn)整體的宏觀判斷。那么我的理解是，在眾多開發(fā)語言中，盡管javascript那么受歡迎，目前企業(yè)中前端占比還算不錯，但總的來說，跟其他服務(wù)端開發(fā)語言總和來比，前端人員還是少。如果服務(wù)端語言像前端一樣僅有javascript的話，我相信csdn問答模塊這個業(yè)界縮影將不會是這種狀態(tài)，甚至?xí)笥胁煌?
其實很多老師，很多培訓(xùn)機構(gòu)的老師教前端，大家各有各自的工作，各有各自的生活， 他知道來了一批學(xué)生，這是自己分內(nèi)的工作，其實很多學(xué)生也只是停留在前端開發(fā)做網(wǎng)頁的意識上，未來我想找到一份共走，可以養(yǎng)活自己。這無可厚非
其實日產(chǎn)工作還真就是做網(wǎng)頁，做了C端做B端，做了PC做H5，嵌套到webview里，嵌套的APP的殼子里，這些都是工作。
小程序，各種各樣的小程序；各種手機屏幕尺寸的適配；各種APP內(nèi)部的嵌套；
做完了前端，開發(fā)點node層的工作吧，卷一卷，棒服務(wù)端同學(xué)減輕點工作壓力；
再來點代碼優(yōu)化吧，如果將自己的代碼調(diào)的代碼量更少，如何不寫注釋也可以清晰明了，如何不得不寫注釋，可以寫的更清楚；
來一點性能優(yōu)化吧，現(xiàn)在出去面試，沒做過性能優(yōu)化都不好意思說自己做過工作。沒辦法，整體的需求纏身，但你卻很少從中吸取知識，日復(fù)一日，到找工作那天發(fā)現(xiàn)，自己做的工作，其實都是勞動力。如何驅(qū)動自己，再尋求解決方案，再將性能指標(biāo)不斷提升。
卷一卷，讀書破萬卷。將自己的點子，自己的做法不斷形成方法論，對內(nèi)輸出，乃至對外輸出，提升影響力。
還要啥理想，向公共組件團隊滲透，向技術(shù)棧所在團隊滲透？
小插曲：這里加一個小插曲，promise解決了什么問題？這道題是不是必考題，千篇一律的答案是什么？解決了回調(diào)地獄？異步的工作我們當(dāng)同步的來執(zhí)行？
這算不算進步？這算不算創(chuàng)新？那么我就問問你，有回調(diào)地獄你的項目跑步起來了？用同步的寫法來搞異步的事情降本增效了？
那么我就問問你，是你把之前的寫法用上現(xiàn)在的promise節(jié)省的時間多，還是你每天摸魚的時間多。說白了異步是一個需要花費時間的事情，因為有了異步，有了時間差，才使我們的工作出現(xiàn)了更多的可能性，不確定性。你更應(yīng)該解決的是不是這個問題。
個人觀點啊，沒說promise不好，挺好的。
不管是在?；蛘呙悦５募磳㈦x校，一旦決定要學(xué)，不管是學(xué)哪種開發(fā)語言，都要堅定信心，切記不可三天打魚，兩天曬網(wǎng)；
這要看個人家庭的生活水平，一個家庭攻讀出一個大學(xué)生實屬不易，畢業(yè)后念培訓(xùn)班需要一定的資本支持。但對于很多人來說，沒有學(xué)習(xí)方向，念培訓(xùn)班也是個選擇，至少可以入個門；但大部分的培訓(xùn)課程對于目前的就業(yè)形勢掌握不足，就像楊過剛?cè)ョ娔仙揭粯?，練不夠基本功，詞匯一大堆，實戰(zhàn)沒多少，最后說啥名詞都是666，一干活就撓頭；
其實我根據(jù)自己的經(jīng)驗，也在籌備規(guī)劃一套更卷，更適合入門到守門再到卸門的課程，我的目標(biāo)就是更實用，更卷，更有助于大多數(shù)想學(xué)習(xí)的同學(xué)們，你需要的只是一句：我想學(xué)習(xí)，我要學(xué)習(xí)，我能學(xué)習(xí)，而不是馬內(nèi)。
現(xiàn)在網(wǎng)絡(luò)上文章多的是，雖然很多不夠系統(tǒng)，但正好夠大家鞏固當(dāng)日知識點所用。學(xué)一定要用，用后一定要鞏固，鞏固后一定要舉一反三形成自己的知識點，方法論，記錄個博客啦，筆記啦，分享到身邊的人，這樣足可鞏固無憂
知識點掌握的好不叫好，可以把知識點貫穿起來，做出一個市面上的東西，這算超越自我，切記不可自滿，學(xué)完知識點就說自己精通，那只會在面試或者在工作的時候讓自己更加煩惱，掉頭發(fā)，熬夜。
做為初級開發(fā)，最重要的就是對于解決問題，有自己的一套手段，這樣至少可以保證快速的完成需求。但如果想繼續(xù)往上走，必須得有一些別人所沒有的東西。這里說到舉一反三，記得當(dāng)時學(xué)習(xí)的時候，學(xué)完js基礎(chǔ)需要寫一個99乘法表，當(dāng)時本來上課就少，硬生生把js的嵌套循環(huán)99乘法表寫出來。晚上睡覺的時候想，如果純用HTML CSS 是不是也能寫出來，就這樣，HTML的倒是好寫，但CSS的又憋了很久，總算是寫出來了。你就說，這樣下去，誰能有我卷。現(xiàn)在我總結(jié)出了怎么利用純HTML CSS JS 寫出3版99乘法表，并且總結(jié)出了自己的文章，希望可以讓初學(xué)者能夠更快的入門。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
Web 開發(fā)是指在互聯(lián)網(wǎng)上創(chuàng)建網(wǎng)站或 Web 應(yīng)用程序。它涉及一系列任務(wù)，從開發(fā)網(wǎng)站的整體結(jié)構(gòu)和設(shè)計到編寫使網(wǎng)站栩栩如生的代碼。Web 開發(fā)可能是一個復(fù)雜的過程，它通常涉及使用各種不同的技術(shù)，包括 HTML、CSS 和 JavaScript，以及服務(wù)器端語言，如 PHP、Ruby、Nodejs 和 Python。Web 開發(fā)人員可能在前端工作網(wǎng)站的一部分，這是用戶與之交互的部分，或者在后端，這是處理網(wǎng)站幕后功能的部分。Web 開發(fā)是一個快速發(fā)展的領(lǐng)域，Web 開發(fā)人員需要跟上最新的技術(shù)和最佳實踐，才能創(chuàng)建有效且引人入勝的網(wǎng)站和 Web 應(yīng)用程序。
可以肯定地說，Web 開發(fā)將繼續(xù)是一個重要且充滿活力的領(lǐng)域。隨著 Internet 的不斷發(fā)展和演變，對 Web 開發(fā)人員的需求也可能會增加。Web 開發(fā)中使用的技術(shù)和工具也將繼續(xù)發(fā)展和改進，這將使 Web 開發(fā)人員能夠創(chuàng)建更先進、更復(fù)雜的網(wǎng)站和應(yīng)用程序。此外，人工智能、虛擬現(xiàn)實和增強現(xiàn)實以及物聯(lián)網(wǎng)等新技術(shù)的興起可能會為網(wǎng)絡(luò)開發(fā)人員帶來新的機遇和挑戰(zhàn)。Web 開發(fā)的未來看起來一片光明，對于那些對技術(shù)充滿熱情的人來說，它將繼續(xù)是一個令人興奮和有益的領(lǐng)域。
Web 開發(fā)是一個快速發(fā)展和動態(tài)的領(lǐng)域，由于 Web 應(yīng)用程序開發(fā)的復(fù)雜性和多樣性不斷增加，因此對 Web 開發(fā)人員的需求量很大。
Web 開發(fā)人員有什么好的工作機會嗎？答案是肯定的。互聯(lián)網(wǎng)改變了我們的生活方式。如果您想加入一個令人興奮的新行業(yè)來開發(fā)新技術(shù)，我們建議您這樣做并成為一名網(wǎng)絡(luò)開發(fā)人員。該技術(shù)不僅“防 covid”，而且相對抗衰退。
人們每天都越來越多地參與網(wǎng)絡(luò)，并使用他們的智能手機和平板電腦訪問互聯(lián)網(wǎng)，因此對于網(wǎng)絡(luò)開發(fā)人員來說，創(chuàng)建針對這些智能設(shè)備優(yōu)化的網(wǎng)站和網(wǎng)絡(luò)應(yīng)用程序非常重要。
對于網(wǎng)站和應(yīng)用程序而言，提供用戶會喜歡的令人難忘的用戶體驗將變得更加重要。具有提供引人入勝的用戶體驗天賦的開發(fā)人員應(yīng)該研究這些趨勢帶來的機會。
總之，每項 Web 技術(shù)的背后都有一支經(jīng)驗豐富、才華橫溢的開發(fā)人員團隊，他們負責(zé)更新、開發(fā)和維護它。技術(shù)每天都在發(fā)展，因此有才華的 Web 開發(fā)人員始終可用并存在非常重要。
網(wǎng)頁開發(fā)和網(wǎng)頁設(shè)計是兩個經(jīng)?；煜莫毩㈩I(lǐng)域。雖然它們是相關(guān)的，但它們是具有不同重點和目標(biāo)的不同學(xué)科。
網(wǎng)頁設(shè)計側(cè)重于網(wǎng)站的美學(xué)和功能方面，涉及用戶界面和用戶體驗的規(guī)劃和創(chuàng)建。網(wǎng)頁設(shè)計師負責(zé)網(wǎng)站的布局、配色方案和整體外觀，以及網(wǎng)站的導(dǎo)航和用戶流程。
另一方面，Web 開發(fā)側(cè)重于構(gòu)建網(wǎng)站的技術(shù)方面。這包括編寫代碼來創(chuàng)建網(wǎng)站的各種組件，例如前端和后端，并將它們集成以創(chuàng)建功能強大且可用的網(wǎng)站。Web 開發(fā)人員負責(zé)網(wǎng)站的實施和維護，并且可能會使用各種編程技能和框架來實現(xiàn)。
Web 開發(fā)人員是專門開發(fā)可通過 Web 瀏覽器訪問 Internet 的應(yīng)用程序和服務(wù)的程序員。Web 開發(fā)人員使用各種技術(shù)和語言（例如 HTML、CSS 和 JavaScript）來創(chuàng)建網(wǎng)站或 Web 應(yīng)用程序的結(jié)構(gòu)、布局和設(shè)計。
Web 開發(fā)人員負責(zé)構(gòu)建和維護 Web 應(yīng)用程序的各種組件，包括用戶界面、服務(wù)器端邏輯和數(shù)據(jù)庫。他們還可能負責(zé)將 Web 應(yīng)用程序與其他系統(tǒng)和 API 集成，并負責(zé)實現(xiàn)增強用戶體驗的特性和功能。
總之，網(wǎng)頁設(shè)計關(guān)注網(wǎng)站的視覺和面向用戶的方面，而網(wǎng)頁開發(fā)則關(guān)注網(wǎng)站的技術(shù)實現(xiàn)和功能。
前端開發(fā)人員是專門從事 Web 開發(fā)客戶端的 Web 開發(fā)人員。他們負責(zé)構(gòu)建和維護 Web 應(yīng)用程序的用戶界面和用戶體驗，包括布局、設(shè)計和交互性。
前端開發(fā)人員通常精通前端技術(shù)和語言，例如 HTML、CSS 和 JavaScript。他們負責(zé)實施 Web 應(yīng)用程序的視覺設(shè)計，包括布局、排版和配色方案。他們還可能負責(zé)實現(xiàn)交互元素，例如按鈕、表單和菜單，以及將 Web 應(yīng)用程序與后端系統(tǒng)和 API 集成。
除了技術(shù)技能，前端開發(fā)人員還需要對用戶體驗和設(shè)計原則有深刻的理解。他們應(yīng)該能夠創(chuàng)建直觀、用戶友好且美觀的 Web 應(yīng)用程序。
前端開發(fā)是 Web 開發(fā)的重要組成部分，前端開發(fā)人員在創(chuàng)建 Web 應(yīng)用程序的外觀方面發(fā)揮著關(guān)鍵作用。
后端開發(fā)人員是專門從事 Web 開發(fā)服務(wù)器端的 Web 開發(fā)人員。他們負責(zé)構(gòu)建和維護 Web 應(yīng)用程序的底層邏輯和基礎(chǔ)設(shè)施，包括服務(wù)器端邏輯、數(shù)據(jù)庫和 API。
后端開發(fā)人員通常具有服務(wù)器端語言和技術(shù)方面的專業(yè)知識，例如 PHP、Python、Ruby 和 Node.js。他們負責(zé)實現(xiàn) Web 應(yīng)用程序的服務(wù)器端邏輯，包括業(yè)務(wù)規(guī)則、數(shù)據(jù)驗證和用戶身份驗證。他們還可能負責(zé)設(shè)計和實施數(shù)據(jù)庫模式，以及將 Web 應(yīng)用程序與其他系統(tǒng)和 API 集成。
除了技術(shù)技能，后端開發(fā)人員還需要具備強大的問題解決、溝通和協(xié)作能力。他們應(yīng)該能夠批判性和邏輯性地思考，并能夠設(shè)計和實施可擴展、可維護且高效的解決方案。
后端開發(fā)是 Web 開發(fā)的重要組成部分，后端開發(fā)人員在構(gòu)建和維護 Web 應(yīng)用程序的功能和性能方面發(fā)揮著關(guān)鍵作用。
全棧開發(fā)人員是在前端和后端開發(fā)方面都具有專業(yè)知識的 Web 開發(fā)人員。他們負責(zé)構(gòu)建和維護整個 Web 應(yīng)用程序，從用戶界面和用戶體驗到底層服務(wù)器端邏輯和數(shù)據(jù)庫。
全棧開發(fā)人員通常對用于構(gòu)建 Web 應(yīng)用程序的技術(shù)和語言有深入的了解，包括 HTML、CSS、JavaScript 和服務(wù)器端語言（如 PHP、Python 和 Ruby）。他們能夠處理 Web 應(yīng)用程序的所有層，從用戶界面和用戶體驗到數(shù)據(jù)庫和服務(wù)器端邏輯。
除了技術(shù)技能，全棧開發(fā)人員還需要具備強大的問題解決、溝通和協(xié)作能力。他們應(yīng)該能夠創(chuàng)造性和批判性地思考，并能夠適應(yīng)不斷變化的技術(shù)和要求。
全棧開發(fā)是一個充滿挑戰(zhàn)和回報的領(lǐng)域，由于 Web 應(yīng)用程序的復(fù)雜性和多樣性不斷增加，對全棧開發(fā)人員的需求量很大。
網(wǎng)站管理員負責(zé)構(gòu)建、維護和更新網(wǎng)站。他們還可能負責(zé)將網(wǎng)站與其他系統(tǒng)或云服務(wù)集成，例如數(shù)據(jù)庫和內(nèi)容管理系統(tǒng) (CMS)，以及實施增強用戶體驗的特性和功能。
網(wǎng)站管理員通常與開發(fā)團隊的其他成員（包括圖形設(shè)計師、內(nèi)容創(chuàng)建者和項目經(jīng)理）密切合作，以創(chuàng)建和維護滿足企業(yè)或組織需求的網(wǎng)站。他們還可以與客戶合作以了解他們的要求并提供滿足他們需求的解決方案。
如果你是 Web 開發(fā)的新手并且想知道從哪里開始以及第一步是什么，這里有一些建議：
學(xué)習(xí) HTML 和 CSS 等 Web 開發(fā)基礎(chǔ)知識——這些是 Web 的核心技術(shù)，良好的這些語言基礎(chǔ)對于任何 Web 開發(fā)人員來說都是必不可少的。您可以從學(xué)習(xí) HTML 和 CSS 的基礎(chǔ)知識開始，例如網(wǎng)頁的結(jié)構(gòu)、如何添加內(nèi)容和樣式以及如何創(chuàng)建簡單的靜態(tài)網(wǎng)頁。
選擇開發(fā)環(huán)境——開發(fā)環(huán)境是一組用于構(gòu)建和測試 Web 應(yīng)用程序的工具和資源。這通常包括用于編寫代碼的文本編輯器或集成開發(fā)環(huán)境 (IDE)、用于測試網(wǎng)頁的 Web 瀏覽器以及用于運行 Web 應(yīng)用程序的本地 Web 服務(wù)器。帶有大量插件的 vscode 編輯器肯定需要引起您的注意。
構(gòu)建一個簡單的網(wǎng)頁——學(xué)習(xí)了 HTML 和 CSS 的基礎(chǔ)知識后，嘗試構(gòu)建一個包含一些文本、圖像和基本樣式的簡單網(wǎng)頁。這將使您有機會練習(xí)所學(xué)的技能，并了解不同技術(shù)如何協(xié)同工作。然后更進一步，開始復(fù)制一些最流行的網(wǎng)絡(luò)應(yīng)用程序，然后 memic 嘗試重新創(chuàng)建它，我指的只是這里的設(shè)計。
探索 Web 開發(fā)框架和庫– 有許多可用的 Web 開發(fā)框架和庫可以更輕松地構(gòu)建 Web 應(yīng)用程序。一些流行的選項包括 React、Angular、Vue.js 和 Django。一旦你確定了一個框架，立即開始學(xué)習(xí)它并堅持下去直到你掌握它。
HTML或超文本標(biāo)記語言是一種用于創(chuàng)建和構(gòu)建網(wǎng)頁內(nèi)容的編程語言。HTML使用一系列元素或標(biāo)簽來定義網(wǎng)頁的結(jié)構(gòu)和布局，包括標(biāo)題、段落、列表和鏈接。HTML 還允許開發(fā)人員向網(wǎng)頁添加圖像、視頻和其他多媒體內(nèi)容，使其成為構(gòu)建 Web 應(yīng)用程序的強大且通用的語言。
定義帶有標(biāo)題、段落和圖像的簡單網(wǎng)頁的 HTML 代碼：
<!DOCTYPE html> <html> <head> <title>我的 Web 頁面</title> </head> <body> <h1>Hello, World!</h1> <p>這是我的第一個 Web 頁面</p> <img src="https://www.example.com/image.jpg" alt="A beautiful landscape"> </body> </html>
在此示例中，<html>和<body>標(biāo)簽定義了網(wǎng)頁的結(jié)構(gòu)，而<h1>、<p>和<img>標(biāo)簽定義了頁面的內(nèi)容。<img>標(biāo)簽的src屬性指定要顯示的圖像的 URL，而alt屬性為無法看到圖像的用戶提供圖像的文本描述。所以你需要了解 HTML 標(biāo)簽和它們的屬性。
CSS或?qū)盈B樣式表是一種樣式表語言，用于描述以標(biāo)記語言編寫的文檔的外觀和格式。在 Web 開發(fā)環(huán)境中，CSS 用于控制以 HTML 或其他標(biāo)記語言編寫的網(wǎng)頁的外觀和布局。CSS 允許開發(fā)人員為網(wǎng)頁上的內(nèi)容定義顏色、字體、大小和其他樣式，使其成為構(gòu)建現(xiàn)代響應(yīng)式 Web 應(yīng)用程序的重要組成部分。
可用于設(shè)置上述網(wǎng)頁內(nèi)容樣式的 CSS 代碼：
body { font-family: Arial, sans-serif; background-color: #f1f1f1; } h1 { color: #333; text-align: center; margin: 30px 0; } p { color: #777; font-size: 18px; line-height: 1.5; padding: 0 20px; } img { width: 100%; height: auto; }
在此示例中，body選擇器將樣式應(yīng)用于網(wǎng)頁的<body>元素， h1選擇器將樣式應(yīng)用于所有<h1>元素，p和img選擇器將樣式應(yīng)用于所有<p>和<img>元素， 分別。此 CSS 代碼中定義的樣式指定頁面及其元素的字體系列、背景顏色、文本對齊方式和其他屬性。顯示此示例演示了選擇 HTML 元素的重要性以及需要使用哪些屬性來設(shè)置它的樣式。因此，了解所有類型的選擇器以及它們需要的屬性。
你可以使用 CSS 框架讓您的生活更輕松。最受歡迎的是Bootstrap和Tailwind CSS，它們都是用于構(gòu)建響應(yīng)式、移動優(yōu)先的 Web 應(yīng)用程序的前端框架。這兩個框架都提供了一組預(yù)定義的 CSS 類和組件，可以輕松地將它們合并到網(wǎng)頁中，以創(chuàng)建一致的、具有專業(yè)外觀的設(shè)計。Bootstrap 和 Tailwind CSS 是構(gòu)建現(xiàn)代響應(yīng)式 Web 應(yīng)用程序的強大工具。這兩個框架之間的選擇將取決于您的個人喜好和項目的具體需求。
有許多不同的框架可用于 Web 開發(fā)，每個框架的流行程度取決于項目的具體需求以及開發(fā)人員、團隊或公司的偏好。一些最流行的 Web 開發(fā)框架包括：
React： React 是用于構(gòu)建用戶界面的最多的javascript 框架之一。 許多公司都在使用它，并且擁有龐大的開發(fā)人員社區(qū)。
Angular： Angular 是一個基于 TypeScript 的開源 Web 應(yīng)用程序框架，由 Google 的 Angular 團隊以及個人和公司社區(qū)領(lǐng)導(dǎo)。
Vue.js： Vue.js 是一個用于構(gòu)建用戶界面的漸進式 JavaScript 框架。它旨在逐步采用并可以集成到現(xiàn)有項目中。
Ember.js： Ember.js 是一個用于構(gòu)建大型 Web 應(yīng)用程序的開源 JavaScript Web 框架。它以其約定優(yōu)于配置方法和強調(diào)開發(fā)人員生產(chǎn)力而聞名。
以下編程語言列表可幫助您了解在成為 Web 開發(fā)人員的過程中您想要學(xué)習(xí)和追求的語言。大多數(shù)時候，選擇將取決于您選擇的框架或其他方式：
JavaScript——讓我們從顯而易見的最流行的 Web 開發(fā)編程語言開始，它是 JavaScript，它是一種用于構(gòu)建前端 Web 應(yīng)用程序的通用語言。它是一種客戶端語言，這意味著它在用戶的網(wǎng)絡(luò)瀏覽器中運行，并允許開發(fā)人員創(chuàng)建交互式和動態(tài)網(wǎng)頁。JavaScript 還通過 Node.js 等技術(shù)用于服務(wù)器端開發(fā)，它允許開發(fā)人員構(gòu)建可擴展的高性能 Web 應(yīng)用程序。
Python – Python 是一種高級解釋型編程語言，廣泛用于 Web 開發(fā)。它具有簡單易學(xué)的語法，是初學(xué)者的絕佳選擇。Python 還以其強大的庫和框架而聞名，例如 Flask 和 Django，這使得快速構(gòu)建復(fù)雜的 Web 應(yīng)用程序變得容易。
Java – Java 是一種流行的面向?qū)ο蟮木幊陶Z言，廣泛用于構(gòu)建可擴展的高性能 Web 應(yīng)用程序。它是一種通用語言，可用于為各種平臺（包括桌面、移動和 Web）構(gòu)建 Web 應(yīng)用程序。
Ruby – Ruby 是一種高級解釋型編程語言，通常用于 Web 開發(fā)。它以簡單和優(yōu)雅著稱，使其成為想要快速輕松地構(gòu)建 Web 應(yīng)用程序的開發(fā)人員的熱門選擇。
PHP – PHP 是一種流行的腳本語言，廣泛用于構(gòu)建動態(tài)網(wǎng)站和 Web 應(yīng)用程序。它是一種服務(wù)器端語言，這意味著它在網(wǎng)絡(luò)服務(wù)器上運行并生成發(fā)送到用戶網(wǎng)絡(luò)瀏覽器的 HTML 頁面。
C# – C# 是一種流行的面向?qū)ο蟮木幊陶Z言，通常用于構(gòu)建 Web 應(yīng)用程序。它是一種通用語言，可用于為各種平臺（包括桌面、移動和 Web）構(gòu)建 Web 應(yīng)用程序。
Swift – Swift 是一種現(xiàn)代的編譯型編程語言，通常用于構(gòu)建 Web 應(yīng)用程序。它是一種功能強大的語言，以其安全性和性能著稱，使其成為構(gòu)建需要處理大量數(shù)據(jù)或執(zhí)行復(fù)雜計算的 Web 應(yīng)用程序的絕佳選擇。
Go – Go 是一種現(xiàn)代的編譯型編程語言，通常用于構(gòu)建 Web 應(yīng)用程序。它是一種快速、高效的語言，以并發(fā)性和可擴展性著稱，使其成為構(gòu)建需要處理大量流量或數(shù)據(jù)的 Web 應(yīng)用程序的絕佳選擇。
TypeScript – TypeScript 是一種流行的類型化編程語言，通常用于構(gòu)建大型、復(fù)雜的 Web 應(yīng)用程序。它是 JavaScript 的超集，這意味著它包含 JavaScript 的所有功能，以及可以更輕松地構(gòu)建大型、可維護的 Web 應(yīng)用程序的附加功能。
Kotlin – Kotlin 是一種現(xiàn)代的編譯型編程語言，通常用于構(gòu)建 Web 應(yīng)用程序。它是一種簡潔、強大的語言，以其安全性和與 Java 的互操作性而著稱，使其成為構(gòu)建需要與現(xiàn)有 Java 代碼集成的 Web 應(yīng)用程序的絕佳選擇。
追求網(wǎng)絡(luò)開發(fā)職業(yè)道路可能是一個不錯的選擇，原因有很多。Web 開發(fā)職業(yè)的一些好處包括：
對 Web 開發(fā)人員的高需求：對 Web 開發(fā)人員的需求一直很高，并且預(yù)計在未來幾年將繼續(xù)增長。這意味著那些擁有技能和經(jīng)驗的人將有很多機會在這個領(lǐng)域取得成功。
高薪： Web 開發(fā)人員的薪水很高，薪水因經(jīng)驗、地點和其他因素而異。總的來說，Web 開發(fā)人員可以期望獲得豐厚的薪水，并且成長和進步的潛力很大。
靈活性： Web 開發(fā)可以在工作地點和日程安排方面提供很大的靈活性。許多 Web 開發(fā)人員遠程工作，并且能夠設(shè)置自己的時間并按照靈活的時間表工作。
學(xué)習(xí)和成長的機會： Web 開發(fā)是一個不斷變化的領(lǐng)域，新技術(shù)和工具不斷涌現(xiàn)。這意味著作為 Web 開發(fā)人員，始終有學(xué)習(xí)和成長的機會，并保持在行業(yè)的前沿。
創(chuàng)造有形事物的滿足感：作為一名 Web 開發(fā)人員，您將有機會創(chuàng)造有形且有用的事物。這可以令人難以置信地滿足，并且可以為您的工作提供成就感和自豪感。
Web 開發(fā)的未來看起來一片光明，許多激動人心的發(fā)展和趨勢即將出現(xiàn)。一些可能影響 Web 開發(fā)未來的最新 Web 開發(fā)趨勢包括：
人工智能和機器學(xué)習(xí)的興起：人工智能和機器學(xué)習(xí)在網(wǎng)絡(luò)開發(fā)中變得越來越重要，出現(xiàn)了許多新的工具和框架來幫助開發(fā)人員構(gòu)建人工智能驅(qū)動的應(yīng)用程序。
物聯(lián)網(wǎng)的發(fā)展：物聯(lián)網(wǎng) (IoT) 是一個由可以收集和共享數(shù)據(jù)的連接設(shè)備組成的網(wǎng)絡(luò)，預(yù)計在未來幾年將顯著增長。這將為網(wǎng)絡(luò)開發(fā)人員創(chuàng)造新的機會來構(gòu)建可以連接這些設(shè)備并與之交互的應(yīng)用程序。
移動設(shè)備的重要性日益增加：隨著越來越多的人使用智能手機和其他移動設(shè)備訪問網(wǎng)絡(luò)，網(wǎng)絡(luò)開發(fā)人員創(chuàng)建適合移動設(shè)備的應(yīng)用程序和網(wǎng)站將變得越來越重要。
漸進式 Web 應(yīng)用程序的興起：漸進式 Web 應(yīng)用程序 (PWA) 是外觀和感覺都像本機移動應(yīng)用程序的 Web 應(yīng)用程序，并且有望在未來變得更加流行。這將為 Web 開發(fā)人員創(chuàng)造新的機會來構(gòu)建可跨不同設(shè)備和平臺提供無縫用戶體驗的 PWA。
云計算的發(fā)展：云計算在網(wǎng)絡(luò)開發(fā)中變得越來越重要，許多公司將他們的應(yīng)用程序和數(shù)據(jù)轉(zhuǎn)移到云中。這將為 Web 開發(fā)人員創(chuàng)造新的機會來構(gòu)建云原生應(yīng)用程序并將它們與現(xiàn)有的云服務(wù)集成。
Web 開發(fā)仍然值得學(xué)習(xí)，因為它是構(gòu)建和維護作為現(xiàn)代 Internet 支柱的網(wǎng)站和 Web 應(yīng)用程序的基本技能。隨著世界變得越來越緊密，對 Web 開發(fā)人員的需求不斷增長，對于那些擁有構(gòu)建和維護未來 Web 應(yīng)用程序的技能和專業(yè)知識的人來說，有許多激動人心的機會。
Web 開發(fā)也是一個回報豐厚且具有挑戰(zhàn)性的領(lǐng)域，它允許開發(fā)人員利用他們的創(chuàng)造力和解決問題的技能來構(gòu)建供全球數(shù)百萬人使用的應(yīng)用程序。有了合適的工具和資源，任何人都可以學(xué)習(xí) Web 開發(fā)并開始構(gòu)建自己的 Web 應(yīng)用程序，從而打開一個充滿可能性和機遇的世界。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
Vuex 和 Pinia 是用于管理 Vue.js 應(yīng)用程序狀態(tài)的標(biāo)準(zhǔn) Vue.js 庫。讓我們比較一下他們的代碼、語言、功能和社區(qū)支持。
如果沒有合適的庫，開發(fā)人員管理應(yīng)用程序的狀態(tài)可能會很困難。Vuex 和 Pinia 是標(biāo)準(zhǔn)的 Vue.js 庫，用于處理應(yīng)用程序中的條件。這兩個庫都非常適合狀態(tài)管理，但是由于它們出色的特性和功能，選擇哪個庫用于你的項目需要時間并且令人沮喪。好吧，我們將在本文中看看為什么一個是最好的。
在本文中，我們將通過實際代碼示例查看代碼比較、它們的變體、功能，以及推薦使用哪一個來管理你的狀態(tài)應(yīng)用程序，以便更好地理解。我們還將考慮每個產(chǎn)品的語言、功能和社區(qū)支持。
我將簡要總結(jié) Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 文檔和Pinia 文檔。
Pinia是一個新的狀態(tài)管理庫，可幫助你在 Vue.js 應(yīng)用程序中跨組件管理和存儲響應(yīng)數(shù)據(jù)和狀態(tài)。Pinia 由 Vue 核心團隊成員之一 Eduardo San Martin Morote 創(chuàng)建。
Pinia 使用新的反應(yīng)系統(tǒng)來構(gòu)建一個直觀且完全類型化的狀態(tài)管理系統(tǒng)。
庫中引入的新特性是促成 Pinia 推薦的因素之一?？傮w而言，Pinia 顯得輕巧、簡單且易于掌握。它擁有可以使 Vue 3 和 Vue 2 中的編程變得通用的一切。因此，這是試用 Pinia 的理想機會。
Vuex是一種狀態(tài)管理模式和庫，構(gòu)建為集中式存儲，可幫助你維護 Vue 應(yīng)用程序中存在的所有組件的狀態(tài)。Vuex 遵循確保你的狀態(tài)突變?yōu)轭A(yù)測標(biāo)準(zhǔn)的規(guī)則。
使 Vuex 更強大的一個因素是組件從 Vuex store 中獲取它們的狀態(tài)，并且可以快速有效地響應(yīng) store 狀態(tài)的變化。
Vuex雖然是維護你store的狀態(tài)管理庫，但建議你熟悉或搭建過大型SPA。如果你沒有經(jīng)驗，Vuex 可能會冗長且令人生畏。
如果你的應(yīng)用程序很廣泛，你需要管理復(fù)雜的數(shù)據(jù)流，并且你有嵌套的組件，你可以使用 Vuex。查看官方文檔以獲取有關(guān)何時使用 Vuex 的更多信息。
Pinia 和 Vuex 之間的區(qū)別之一是 Pinia 是“模塊化設(shè)計”，換句話說，它被構(gòu)建為擁有多個商店，而 Vuex 只有一個商店。在這些商店中，您可以擁有子模塊。除此之外，Pinia 允許將這些模塊中的每一個從他們的商店直接導(dǎo)入到需要的組件中。
如果您是一名 Vue 開發(fā)人員并且曾使用 Vuex 管理應(yīng)用程序的狀態(tài)，您會注意到 Vuex 只有一個商店。在該商店中，您可以在其中包含多個模塊。使用 Pinia，您可以將這些模塊中的每一個都存儲在一個地方，并在需要時將它們直接導(dǎo)入到組件中。
此方法允許捆綁器自動對它們進行代碼拆分，并提供更好的 TypeScript 推理。
Pinia 提供開發(fā)工具支持，以幫助您使用該庫構(gòu)建和輕松調(diào)試。當(dāng)我們安裝 Pinia 時，它會自動掛接到我們的 Vue.js 開發(fā)工具，并讓我們跟蹤對我們的商店所做的更改，這讓我們在 Vue.js 版本（Vue 2 和 Vue3）中獲得流暢的開發(fā)人員體驗。
Pinia 提供了一個簡單的 API，使您的商店的編寫變得簡單且井井有條，就像創(chuàng)建組件一樣。這意味著與 Vuex 解決方案相比，需要掌握的樣板文件和概念更少。
Pinia 還提供了一個完整的插件系統(tǒng)，具有交易和本地存儲同步等功能，適用于 Pinia 默認行為不足的情況。
Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自動完成功能，這使得開發(fā)過程變得簡單。
Pinia 的重量只有 1 KB，因此很容易融入您的項目。這可能會提高您的應(yīng)用程序性能。
當(dāng)您的應(yīng)用程序擴展時，遍歷變得很困難。但是，使用 Vuex 模塊，您可以根據(jù)領(lǐng)域功能將您的商店拆分為多個文件，并從該特定命名空間中的模塊訪問狀態(tài)循環(huán)。
Vue devtools 中的 Vuex 選項卡允許我們查看狀態(tài)并跟蹤我們的變化。這使我們能夠快速評估我們的程序如何執(zhí)行和調(diào)試錯誤。
Vuex支持熱重載功能，它使用 webpack 的熱模塊替換 API，可以在您開發(fā)時快速重載您的 mutations、modules、action 和 getters。
如果你想編寫一個 TypeScript 存儲定義，Vuex 可以提供它的類型并且更容易實現(xiàn)。它有一個默認的 TypeScript 配置，不需要額外的設(shè)置。
Pinia 是一個輕量級庫，可幫助您管理整個應(yīng)用程序的反應(yīng)狀態(tài)。與 Vuex 相比，Pinia API 易于學(xué)習(xí)，使您的代碼更易于閱讀。
讓我們看一下使用 Pinia 和 Vuex 管理我們的狀態(tài)的代碼比較：
Vuex
在此示例中，我們將查看一個簡單的 Vuex 存儲，它跟蹤待辦事項列表項的狀態(tài)：
import { createStore } from 'vuex' const TodoListstore = createStore({ state() { return { todoListItems: [] } }, actions: { addNewList({ commit }, item) { { commit('createNewItem', item) } }, mutations: { createNewItem(state, item) { state.todoListItems.push(item) } } })
如果你看上面的代碼，你可以看到 Vuex 存儲中的三個動作：狀態(tài)、 動作和突變。狀態(tài)返回當(dāng)前的todoListItems，動作提交一個突變來創(chuàng)建一個新項目，最后，突變創(chuàng)建新項目并將其添加到列表中。當(dāng)你構(gòu)建一個更大的應(yīng)用程序時，你可能會意識到動作和突變相對相似，導(dǎo)致冗余代碼，因為每個狀態(tài)變化都需要一個樣板。
Pinia
使用 Pinia 簡單 API，您可以消除突變和冗余代碼。讓我們查看一個代碼示例，了解當(dāng)您使用 Pinia 實現(xiàn)之前的代碼時的樣子：
import { defineStore } from 'pinia' Export const useListStore = defineStore('list', { state() => ({ return { todoListItems: [] } }), actions: { addNewList() { this.todoListItems.push(item) } }})
上面的示例是 Pinia API 在管理應(yīng)用程序狀態(tài)時如何工作的簡單代碼。使用 Pinia，我們刪除了突變并將其直接更新到我們的動作中。
注意：在上面的代碼示例中，當(dāng)我們將項目直接提交給我們的操作時，我們不需要跟蹤我們的項目。
Pinia 和 Vuex 是控制應(yīng)用程序狀態(tài)的優(yōu)秀工具，但其中一個必須具有另一個所沒有的某些功能。讓我們來看看它們是什么。
好吧，這就是它變得更具挑戰(zhàn)性的地方，因為仍然有一些項目需要使用 Vuex 來處理狀態(tài)應(yīng)用程序，即使 Pinia 是新推薦的狀態(tài)管理庫。它有幾個 Vuex 沒有的有價值的功能。
Vuex 仍然是構(gòu)建大型 SPA 的理想解決方案，因為對于構(gòu)建中小型應(yīng)用程序的人來說，它相當(dāng)冗長。
Pinia 也一樣。盡管如此，如果你需要所有列出的功能，例如 devtool 支持、TypeScript 支持和狀態(tài)應(yīng)用程序的輕松管理，那么 Pinia 是最好的解決方案——它為你提供流暢的開發(fā)體驗。
如果你正在構(gòu)建一個不太復(fù)雜的應(yīng)用程序，無論是中等到廣泛的應(yīng)用程序，你都可以使用 Pinia，因為它的重量約為 1 KB。
由于功能多樣，在管理應(yīng)用程序狀態(tài)時，在 Vuex 和 Pinia 之間進行選擇可能會造成混淆。不過，這兩個框架都非常適合管理狀態(tài)應(yīng)用程序。本文簡要比較了它們的特性、功能和對代碼的影響。讀完這篇文章后，也許你將能夠找到適合你的庫。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
本文轉(zhuǎn)載至 : Mac解壓壓縮 rar文件
RAR 5.60 for Mac OS Xwww.rarlab.com
cd ~/Downloads/rar
sudo install -c -o $USER rar /usr/local/bin/
sudo install -c -o $USER unrar /usr/local/bin
1，解壓命令
//解壓到當(dāng)前目錄
unrar x a.rar //解壓到指定目錄
unrar x a.rar ~/Downloads //解壓文件到當(dāng)前目錄
unrar e test.rar //查看rar中的文件
unrar l test.rar //更詳細?
unrar v test.rar //測試是否可以成功解壓
unrar t test.rar
2，壓縮命令
// 將file文件壓縮到text.rar
rar a text.rar file
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
我們會看到很多頁面帶有水印，但是怎么實現(xiàn)呢？當(dāng)然可以有多種實現(xiàn)方式，本文主要講解在vue項目中基于DOM或者Cavans實現(xiàn)水印效果，當(dāng)然還有其他的實現(xiàn)方式，比如在原圖片的基礎(chǔ)上加上水印生成新的圖片，但是這需要后端處理。因為要在vue項目中使用，所以我使用自定義指令可以直接對掛載的dom實現(xiàn)水印效果。
本文實現(xiàn)水印的項目環(huán)境為：vue + vite + ts
前面專門有一篇講解vue2.x與vue3.x中自定義指令詳解
將水印的指令放到標(biāo)簽上，設(shè)置標(biāo)簽的寬高。水印可以放大div標(biāo)簽上，也可以是img標(biāo)簽上。注意：img才有onload方法，div標(biāo)簽么有。
<script setup lang="ts"> import { ref } from "vue"; </script> <template> <div class="index-content" > <div class="watermaker" v-watermark ></div> <!-- <img v-watermark style="width:400px;height:400px" src="../assets/vue.svg" alt=""> --> </div> </template> <style scoped> .watermaker { width: 400px; height: 400px; } .index-content{ width: 100%; height: 100%; } </style>
directives文件
在directives文件下創(chuàng)建waterMark.ts 文件，具體內(nèi)容實現(xiàn)如下：
import waterImg from "@/assets/vue.svg" const directives: any = { mounted(el: HTMLElement) { //如果el元素是img，則可以用el.onload將下面包裹 const { clientWidth, clientHeight, parentElement } = el; console.log(parentElement, 'parentElement') const waterMark: HTMLElement = document.createElement('div'); const waterBg: HTMLElement = document.createElement('div'); //設(shè)置waterMark的class和style waterMark.className = `water-mark`; waterMark.setAttribute('style', ` display: inline-block; overflow: hidden; position: relative; width: ${clientWidth}px; height: ${clientHeight}px;`); // 創(chuàng)建waterBg的class和style waterBg.className = `water-mark-bg`;// 方便自定義展示結(jié)果 waterBg.setAttribute('style', ` position: absolute; pointer-events: none;`在這里插入代碼片` transform: rotate(45deg); width: 100%; height: 100%; opacity: 0.2; background-image: url(${waterImg}); background-repeat: repeat; `); // 水印元素waterBg放到waterMark元素中 waterMark.appendChild(waterBg); //waterMark插入到el之前，即插入到綁定元素之前 parentElement?.insertBefore(waterMark, el); // 綁定元素移入到包裹水印的盒子 waterMark.appendChild(el); } } export default { name: 'watermark', directives }
directives文件下創(chuàng)建 index.ts文件
import type { App } from 'vue' import watermark from './waterMark' export default function installDirective(app: App) { app.directive(watermark.name, watermark.directives); }
main.ts中全局引入
import { createApp } from 'vue' import App from './App.vue' import directives from './directives' const app = createApp(App); app.use(directives); app.mount('#app');
MutationObserver對水印元素進行監(jiān)聽，刪除時，我們再立即生成一個水印元素就可以了，具體方面在下面講解。
position：relative
position：absolute ，實現(xiàn)這個水印元素覆蓋到原始元素的上層，以實現(xiàn)水印的效果。
通過將圖片繪制在cavans中，然后通過cavans的toDataURL方法，將圖片轉(zhuǎn)為base64編碼。
// 全局保存 canvas 和 div ，避免重復(fù)創(chuàng)建（單例模式） const globalCanvas = null; const globalWaterMark = null; // 獲取 toDataURL 的結(jié)果 const getDataUrl = ( // font = "16px normal", // fillStyle = "rgba(180, 180, 180, 0.3)", // textAlign, // textBaseline, // text = "請勿外傳", ) => { const rotate = -10; const canvas = globalCanvas || document.createElement("canvas"); const ctx = canvas.getContext("2d"); // 獲取畫布上下文 ctx.rotate((rotate * Math.PI) / 180); ctx.font = "16px normal"; ctx.fillStyle = "rgba(180, 180, 180, 0.3)"; ctx.textAlign = "left"; ctx.textBaseline = "middle"; ctx.fillText('請勿外傳', canvas.width / 3, canvas.height / 2); return canvas.toDataURL("image/png"); };
使用MutationObserver監(jiān)聽dom變化，MutationObserver詳細用法之前已經(jīng)講過了，詳細可見作為前端你還不懂MutationObserver？那Out了
具體監(jiān)聽邏輯如下：
// watermark 樣式 let style = ` display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: repeat; pointer-events: none;`; //設(shè)置水印 const setWaterMark = (el: HTMLElement, binding: any) => { const { parentElement } = el; // 獲取對應(yīng)的 canvas 畫布相關(guān)的 base64 url const url = getDataUrl(binding); // 創(chuàng)建 waterMark 父元素 const waterMark = globalWaterMark || document.createElement("div"); waterMark.className = `water-mark`; // 方便自定義展示結(jié)果 style = `${style}background-image: url(${url});`; waterMark.setAttribute("style", style); // 將對應(yīng)圖片的父容器作為定位元素 parentElement.setAttribute("style", "position: relative;"); // 將圖片元素移動到 waterMark 中 parentElement.appendChild(waterMark); }; // 監(jiān)聽 DOM 變化 const createObserver = (el: HTMLElement, binding: any) => { console.log(el, 'el') console.log(style, 'style') // console.log(el.parentElement.querySelector('.water-mark'),'el.parentElement') const waterMarkEl = el.parentElement.querySelector(".water-mark"); const observer = new MutationObserver((mutationsList) => { console.log(mutationsList, 'mutationsList') if (mutationsList.length) { const { removedNodes, type, target } = mutationsList[0]; const currStyle = waterMarkEl.getAttribute("style"); // console.log(currStyle, 'currStyle') // 證明被刪除了 // （1）直接刪除dom // 1.先獲取設(shè)置水印的dom // 2.監(jiān)聽到被刪除元素的dom // 如果他兩相等的話就停止觀察，初始化（設(shè)置水印+啟動監(jiān)控） // (2) 刪除style中的屬性 // 1 判斷刪除的是否是標(biāo)簽的屬性 （type === "attributes") // 2.判斷刪除的標(biāo)簽屬性是否是在設(shè)置水印的標(biāo)簽上 // 3.判斷修改過的style和之前的style對比，不等的話，重新賦值 if (removedNodes[0] === waterMarkEl) { console.log(removedNodes[0]) // 停止觀察。調(diào)用該方法后，DOM 再發(fā)生變動，也不會觸發(fā)觀察器。 observer.disconnect(); //初始化（設(shè)置水印，啟動監(jiān)控） init(el, binding); } else if ( type === "attributes" && target === waterMarkEl && currStyle !== style ) { console.log(currStyle, 'currStyle') console.log(style, 'style') waterMarkEl.setAttribute("style", style); } } }); observer.observe(el.parentElement, { childList: true, attributes: true, subtree: true, }); }; // 初始化 const init = (el: HTMLElement, binding: any = {}) => { // 設(shè)置水印 setWaterMark(el, binding.value); // 啟動監(jiān)控 createObserver(el, binding.value); }; const directives: any = { mounted(el: HTMLElement, binding: any) { //注意img有onload的方法，如果自定義指令注冊在html標(biāo)簽的話，只需要init(el, binding.value) el.onload = init.bind(null, el, binding.value); }, };
刪除水印標(biāo)簽依然還在，除非刪除水印注冊的標(biāo)簽才能刪除水印，但是這樣做毫無意義，因為這樣做內(nèi)容也會全部刪除掉。
toDataURL(type, encoderOptions)，接收兩個參數(shù)：
image/png、image/jpeg、image/webp等等，默認為image/png格式
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
1. <!-- 彈出框 --> <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="商品名稱" prop='goodsName' style="width:40%"> <el-input v-model="form.goodsName" auto-complete="off" placeholder="請輸入商品名稱" size="medium"></el-input> </el-form-item> <el-form-item label="商品圖片" prop='goodsImg'> <el-upload action="uploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="1" :show-file-list="true" name="img" ref="upload" :data="form" accept="image/png,image/gif,image/jpg,image/jpeg" :headers="headers" :on-exceed="handleExceed" :auto-upload="false" :on-error="uploadError" :before-upload="handleBeforeUpload" :on-change="changeFile"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="50px" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> <el-form-item label="商品對應(yīng)積分" prop='goodsIntegral'> <el-input v-model="form.goodsIntegral" auto-complete="off" placeholder="請輸入積分" size="medium" type="number"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="uploadFileFun('form')">確 定</el-button> "注意uploadFileFun('form') 括號內(nèi)記得帶引號不然可能會報validate is not defined" </div> </el-dialog>
2.data部分
data() { return { //新增和編輯彈框標(biāo)題 titleMap: { addStore: '新增商品', editStore: "修改商品" }, dialogStatus: "", //新增編輯彈出框 dialogFormVisible: false, dialogVisible: false, //表格數(shù)據(jù) tableData: [], form: { id: '', goodsName: '', goodsImg: '', goodsIntegral: '', }, rules: { goodsName: [{ required: true, message: '請輸入商品名稱', trigger: 'blur' }], goodsIntegral: [{ required: true, message: '請輸入商品積分', trigger: 'blur' }], }, headers: { Authorization: 'Bearer ' + window.localStorage.getItem("token") }, dialogImageUrl: '', //圖片回顯 uploadFiles: '', //formData img 文件 goodsId: '', //判斷是新增還是編輯 }，
// 上傳文件之前的鉤子 handleBeforeUpload(file) { console.log('按鈕', this.titleMap) if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) { this.$notify.warning({ title: '警告', message: '請上傳格式為image/png, image/gif, image/jpg, image/jpeg的圖片' }) } let size = file.size / 1024 / 1024 / 2 if (size > 2) { this.$notify.warning({ title: '警告', message: '圖片大小必須小于2M' }) } }, //圖片上傳超過數(shù)量限制 handleExceed(files, fileList) { this.$message.error("上傳圖片不能超過1張!"); }, handleRemove(file, fileList) { this.$message.error("刪除成功!"); }, // 圖片上傳失敗時 uploadError() { this.$message.error("圖片上傳失敗!"); }, //預(yù)覽圖片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //文件改變時 on-change方法 ，fileList[0].raw 就是傳給后端的值 //filelist這個對象里面有很多屬性，我們上傳文件時，實際上傳的是filelist列表中每一項的raw,只有raw可以正常上傳， 獲取到文件后，需要定義變量保存文件。所以需要獲取filelist中的raw進行保存。 //這里我用的formdata上傳多文件，console打印formdata，文件在控制臺中顯示的格式為binary。 changeFile(file, fileList) { this.uploadFiles = fileList[0].raw }, uploadFileFun(formName) { this.$refs[formName].validate((valid) => { let fd = new FormData(); fd.append('id', this.form.id); fd.append('goodsName', this.form.goodsName); fd.append('goodsIntegral', this.form.goodsIntegral); fd.append('img', this.uploadFiles); let config = { headers: { 'Content-Type': 'multipart/form-data' } } 根據(jù)goodsID判斷是編輯提交還是新增提交，主要針對新增編輯使用同一個彈框 if (valid && !this.goodsId) { this.$axios.post("接口地址", fd, config).then(res => { if (res.data.success == true) { this.dialogFormVisible = false this.$message({ message: res.data.msg, type: 'success' }); //新增完清空表單內(nèi)容 setTimeout(() => { this.$refs.form.resetFields(); }, 200) this.reload() } else { this.$message.error(res.data.msg); } }).catch(res => { console.log(res) }) } else { this.$axios.post("接口地址", fd, config).then(res => { if (res.data.success == true) { this.dialogFormVisible = false this.$message({ message: res.data.msg, type: 'success' }); //編輯完清空表單內(nèi)容 setTimeout(() => { this.$refs.form.resetFields(); }, 200) this.reload() } else { this.$message.error(res.data.msg); } }).catch(res => { console.log(res) }) } }) }, add() { this.dialogStatus = "addStore" this.dialogFormVisible = true this.goodsId = "" //新增商品是商品ID為空 }, // 取消 cancel() { this.dialogFormVisible = false this.$refs[formName].resetFields() }, //編輯 handleEdit(index, row) { this.form = this.tableData[index] this.dialogStatus = "editStore" this.goodsId = row.id this.currentIndex = index this.dialogFormVisible = true },
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://sillybuy.com