首頁

062024-3

B端設(shè)計——組件庫—數(shù)據(jù)錄入&反饋&導(dǎo)航

B端設(shè)計的文章和資料參考，缺少系統(tǒng)性的說明，這是我總結(jié)第五篇。本文主要闡述——數(shù)據(jù)錄入&反饋&導(dǎo)航

本文為B端設(shè)計組件庫的第五篇、也是組件庫系列的最后一篇，下一篇將更新B端設(shè)計中常見的問題合集來結(jié)束本系列。

一、引言

隨著企業(yè)對于數(shù)字化轉(zhuǎn)型的需求日益強烈，B端產(chǎn)品的發(fā)展也在加速。而B端組件庫，作為產(chǎn)品設(shè)計與開發(fā)的基礎(chǔ)構(gòu)建模塊，其重要性不言而喻。在眾多的組件中，“數(shù)據(jù)錄入”、“反饋”和“導(dǎo)航”是三個關(guān)鍵的組成部分，它們在很大程度上決定了產(chǎn)品的用戶體驗和工作效率。本文將對這三個組件進行深入的研究，探索其最佳的設(shè)計與實施策略。

二、B端組件庫中的數(shù)據(jù)錄入類組件應(yīng)該如何搭建？如何進行多樣化設(shè)計？

2.1“數(shù)據(jù)錄入”類組件搭建過程

2.1.1搭建步驟：

需求分析：首先明確數(shù)據(jù)錄入的需求，包括需要錄入的數(shù)據(jù)類型、數(shù)據(jù)量、頻率等。

設(shè)計表單：根據(jù)需求設(shè)計合適的表單，包括輸入項的類型（文本、數(shù)字、日期等）、布局、標(biāo)簽等。

添加驗證：為了確保數(shù)據(jù)的準(zhǔn)確性，需要為表單添加合適的驗證規(guī)則，如必填項、格式驗證等。

考慮用戶體驗：為了提高數(shù)據(jù)錄入的效率，可以考慮添加一些方便用戶的功能，如自動填充、批量導(dǎo)入等。

測試與迭代：完成設(shè)計后，進行用戶測試，根據(jù)反饋進行必要的調(diào)整和優(yōu)化。

2.1.2注意事項：

明確性：確保每個輸入項的目的和要求都是清晰的，避免用戶產(chǎn)生困惑或誤解。

友好性：盡量簡化錄入流程，減少不必要的步驟和輸入。提供友好的提示信息和反饋，幫助用戶順利完成錄入。

響應(yīng)速度：數(shù)據(jù)錄入過程中，系統(tǒng)的響應(yīng)速度也是一個重要的考慮因素。確保系統(tǒng)在處理大量數(shù)據(jù)或復(fù)雜操作時仍能保持流暢。

安全性：對于敏感數(shù)據(jù)的錄入，需要確保系統(tǒng)的安全性，如使用加密技術(shù)、防止SQL注入等。

2.1.3常用場景：

用戶注冊：在注冊新用戶時，需要收集用戶的基本信息，如姓名、郵箱、密碼等。

商品管理：在電商或庫存管理系統(tǒng)中，添加或編輯商品信息時需要進行數(shù)據(jù)錄入。

訂單處理：處理訂單時，需要錄入訂單的相關(guān)信息，如客戶信息、商品信息、支付方式等。

數(shù)據(jù)導(dǎo)入：對于一些已經(jīng)存在的數(shù)據(jù)，提供批量導(dǎo)入的功能可以大大提高數(shù)據(jù)錄入的效率。

報表生成：生成報表時，用戶可能需要輸入一些參數(shù)或篩選條件，這也涉及到數(shù)據(jù)錄入的操作。

2.3如何進行多樣化設(shè)計？

進一步提升B端組件庫中“數(shù)據(jù)錄入”類組件的設(shè)計和擴展能力：

1. 增強交互與動效設(shè)計使用明顯的交互動效，如微動畫、過渡效果等，提升用戶輸入時的體驗。設(shè)計清晰的輸入狀態(tài)，如聚焦、失焦、有效、無效等，使用戶明確知道當(dāng)前輸入的狀態(tài)。

2. 提供多種輸入格式和單位支持允許用戶選擇不同的輸入格式，如日期可以選擇“年-月-日”或“月/日/年”等格式。對于數(shù)字輸入，提供多種單位支持，如百分比、貨幣、科學(xué)計數(shù)等。

3. 設(shè)計可擴展的驗證規(guī)則系統(tǒng) 提供內(nèi)置的常見驗證規(guī)則，如必填、長度限制、正則匹配等。允許用戶自定義驗證規(guī)則，以滿足特定的業(yè)務(wù)需求。

4. 支持復(fù)雜數(shù)據(jù)結(jié)構(gòu)輸入設(shè)計支持?jǐn)?shù)組、對象等復(fù)雜數(shù)據(jù)結(jié)構(gòu)的輸入組件。提供可視化編輯工具，方便用戶直接編輯復(fù)雜數(shù)據(jù)結(jié)構(gòu)。

5. 優(yōu)化鍵盤導(dǎo)航和快捷鍵支持允許用戶使用鍵盤快速導(dǎo)航和輸入數(shù)據(jù)，如使用Tab鍵在字段間切換。提供常用的快捷鍵支持，如Ctrl+C/V進行復(fù)制粘貼。

6. 設(shè)計可配置的界面和布局提供多種預(yù)設(shè)的界面風(fēng)格和布局選項。允許用戶自定義界面元素和布局，以滿足不同的視覺需求。

7. 集成智能提示和自動補全功能使用機器學(xué)習(xí)算法為用戶提供輸入建議，減少輸入錯誤。對于重復(fù)輸入的數(shù)據(jù)，提供自動補全功能，提高輸入效率。

8. 支持多語言和本地化設(shè)置為不同語言和文化背景的用戶提供本地化支持。允許用戶自定義顯示的語言和格式設(shè)置。

9. 建立組件使用分析和反饋系統(tǒng) 收集并分析用戶使用數(shù)據(jù)錄入組件的數(shù)據(jù)，了解用戶的真實需求和習(xí)慣。建立用戶反饋系統(tǒng)，及時收集和處理用戶對組件的意見和建議。

三、B端組件庫中的反饋類組件應(yīng)該如何搭建？有哪些注意事項？常用的場景有哪些？

在B端組件庫中，反饋類組件是非常重要的一部分，它們用于在必要時向用戶反饋操作結(jié)果，做到合理有效的信息傳達。

3.1搭建反饋類組件

確定反饋類型：根據(jù)需要，確定要使用的反饋類型，如提示、警告、錯誤、成功等。

設(shè)計反饋樣式：針對不同類型的反饋，設(shè)計相應(yīng)的視覺樣式，如顏色、圖標(biāo)、動畫等。

編寫組件代碼：根據(jù)設(shè)計好的樣式，編寫反饋類組件的代碼，包括HTML結(jié)構(gòu)、CSS樣式和JavaScript交互邏輯。

測試與優(yōu)化：對編寫好的組件進行測試，確保其在不同瀏覽器和設(shè)備上都能正常工作，并根據(jù)測試結(jié)果進行優(yōu)化。

3.2注意事項

反饋一致性：對于同一類型的消息反饋，使用同一類型的組件，以確保用戶在不同場景下獲得一致的體驗。

符合場景：不同的場景使用不同的反饋組件，例如系統(tǒng)主動推送消息類型的使用通知提醒框。

描述精確：合理而精確的消息提示文案描述，可以幫助用戶高效理解。

可關(guān)閉性：對于一些非關(guān)鍵性的反饋，提供用戶手動關(guān)閉的選項，避免打擾用戶。

適應(yīng)性：確保反饋類組件在不同屏幕尺寸和分辨率下都能正常顯示和工作。

3.3常用場景

告警提示：當(dāng)某個頁面需要向用戶提供告警信息時，使用告警提示。通常告警提示在頁面上不會自己消失，用戶可以手動關(guān)閉。

全局提示：在當(dāng)前頁面以輕量級提示方式告知用戶操作的結(jié)果，使用全局提示。通常提示框在頁面頂部居中顯示并且會自動消失，不打斷用戶的其他操作行為。

通知提醒框：一般在系統(tǒng)主動推動通知的情況下使用，如服務(wù)到期、服務(wù)告警等。

加載提示：常用于數(shù)據(jù)加載中提示、操作中提示，Loading的文案可按照具體場景定義。

對話框：常用于比較強的二次確認(rèn)彈框提示、或者展示一段比較長的消息。

四、B端組件庫中的導(dǎo)航類組件應(yīng)該如何搭建？有哪些注意事項？常用的場景有哪些？

在B端組件庫中，導(dǎo)航類組件的設(shè)計和實現(xiàn)對于用戶體驗和系統(tǒng)效率至關(guān)重要。

4.1搭建導(dǎo)航類組件

確定導(dǎo)航結(jié)構(gòu)：根據(jù)系統(tǒng)的信息架構(gòu)和用戶需求，確定導(dǎo)航的結(jié)構(gòu)，如全局導(dǎo)航、局部導(dǎo)航、面包屑導(dǎo)航等。

設(shè)計導(dǎo)航樣式：針對不同類型的導(dǎo)航，設(shè)計相應(yīng)的視覺樣式，如顏色、字體、圖標(biāo)等。

編寫組件代碼：根據(jù)設(shè)計好的樣式和結(jié)構(gòu)，編寫導(dǎo)航類組件的代碼，包括HTML結(jié)構(gòu)、CSS樣式和JavaScript交互邏輯。

測試與優(yōu)化：對編寫好的組件進行測試，確保其在不同瀏覽器和設(shè)備上都能正常工作，并根據(jù)測試結(jié)果進行優(yōu)化。

4.2注意事項

清晰的信息架構(gòu)：確保導(dǎo)航的結(jié)構(gòu)能夠清晰地反映系統(tǒng)的信息架構(gòu)，使用戶能夠快速找到所需的信息。

易于理解：導(dǎo)航的標(biāo)簽和名稱應(yīng)使用用戶熟悉的術(shù)語，避免使用過于專業(yè)的術(shù)語或縮寫。

可擴展性：考慮到系統(tǒng)未來的發(fā)展，導(dǎo)航結(jié)構(gòu)應(yīng)具備一定的可擴展性，以便添加新的功能或模塊。

響應(yīng)式設(shè)計：確保導(dǎo)航在不同屏幕尺寸和分辨率下都能正常顯示和工作，提供良好的用戶體驗。

遵循設(shè)計規(guī)范：參考行業(yè)通用的設(shè)計規(guī)范和最佳實踐，確保導(dǎo)航的設(shè)計符合用戶的期望和習(xí)慣。

4.3常用場景

全局導(dǎo)航：適用于整個系統(tǒng)的主導(dǎo)航，通常位于頁面的頂部或側(cè)邊，提供對主要功能和模塊的快速訪問。

局部導(dǎo)航：適用于特定頁面或功能的子導(dǎo)航，幫助用戶在該頁面或功能內(nèi)快速找到所需的信息。

面包屑導(dǎo)航：顯示用戶當(dāng)前所在的位置，以及從首頁到當(dāng)前頁面的路徑，方便用戶了解自己的位置和返回上一級頁面。

下拉菜單：當(dāng)導(dǎo)航項較多時，可以使用下拉菜單進行收納，節(jié)省頁面空間并提高用戶體驗。

標(biāo)簽頁導(dǎo)航：適用于需要同時展示多個內(nèi)容或功能的場景，用戶可以在不同的標(biāo)簽頁之間切換以查看或操作不同的內(nèi)容。

舉例說明：公司內(nèi)部不同系統(tǒng)，可采用的不同種類菜單導(dǎo)航，均可以設(shè)計先行。后續(xù)使用可進行調(diào)整

五、如何對“數(shù)據(jù)錄入”、“反饋”、“導(dǎo)航”進行C化設(shè)計？

對于數(shù)據(jù)錄入，關(guān)鍵在于簡化用戶的輸入過程，同時提供清晰直觀的界面。

例如，可以通過減少不必要的表單字段來簡化錄入流程，使用智能填充來加速輸入過程，并通過即時驗證和友好的錯誤提示來減少用戶的輸入錯誤。此外，考慮到移動設(shè)備用戶的增長，優(yōu)化表單的移動端設(shè)計，確保在小屏幕上也能輕松輸入，是至關(guān)重要的。這可能意味著增加觸摸友好的元素，如更大的點擊區(qū)域和適應(yīng)屏幕大小的布局。

在反饋方面，提供即時、直觀且情感化的反饋對于增強用戶體驗至關(guān)重要。這包括在用戶完成任務(wù)或遇到錯誤時提供明確的視覺和文字提示。

例如，操作成功時可以顯示綠色的勾號圖標(biāo)和正面的消息，而錯誤則可以用紅色的嘆號和說明性的錯誤消息來提示。增加動態(tài)反饋，如加載動畫，也可以提高用戶體驗，減少等待時的焦慮感。此外，提供易于訪問的幫助和支持選項，例如在線聊天或用戶論壇，可以幫助用戶在遇到問題時快速找到解決方案。

對于導(dǎo)航，設(shè)計的重點是確保用戶能夠直觀地理解如何在應(yīng)用或網(wǎng)站中移動。

這涉及到創(chuàng)建清晰、一致的導(dǎo)航結(jié)構(gòu)，突出顯示主要功能，并使用易于理解的圖標(biāo)和標(biāo)簽。在移動設(shè)備上，這可能意味著采用漢堡菜單或底部導(dǎo)航條來節(jié)省空間。同時，考慮到個性化的重要性，可以提供自定義選項，讓用戶根據(jù)自己的偏好調(diào)整導(dǎo)航界面。綜上所述，C化設(shè)計強調(diào)的是提高易用性和用戶體驗，使得B端產(chǎn)品在保持專業(yè)性和功能性的同時，更貼近最終消費者的使用習(xí)慣。

六、結(jié)束

后續(xù)還有一篇“問題匯總”，之后會整理一些最近兩年的B端項目發(fā)布，感謝大家支持??！

其余篇章，可點擊主頁觀看?。?/strong>

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

作者：張陽光Designer
鏈接：https://www.zcool.com.cn/article/ZMTU5OTM4OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(685)

112024-1
探索家居之美：巧妙裝修設(shè)計點亮生活空間

前端達人

在現(xiàn)代生活中，家不僅是我們居住的地方，更是承載夢想、情感和溫馨的港灣。精心的裝修設(shè)計不僅可以為家增色添彩，更能為居住者創(chuàng)造出宜人舒適的生活環(huán)境。本文將探討一些巧妙的裝修設(shè)計理念，點亮居家生活空間。

1. 創(chuàng)意空間布局

裝修設(shè)計的第一步是合理規(guī)劃空間布局。通過巧妙的布局，可以最大限度地利用空間，使得家居更加通風(fēng)明亮。采用開放式設(shè)計或者巧妙的隔斷，打破傳統(tǒng)的界限，使得家居更具動感和靈活性。

2. 色彩搭配的魅力

色彩是裝修設(shè)計中的靈魂。巧妙的色彩搭配能夠為家注入活力和個性。根據(jù)不同房間的功能和居住者的喜好，選擇合適的色調(diào)，營造出溫馨、舒適或者活潑的氛圍。同時，考慮光線的影響，讓色彩更加生動。

3. 自然元素的融入

自然元素是現(xiàn)代裝修設(shè)計中備受推崇的要素之一。通過引入植物、木材等自然元素，可以為家?guī)砬逍碌目諝夂蛯庫o的氛圍。綠色植物不僅美化環(huán)境，還有助于調(diào)節(jié)室內(nèi)空氣質(zhì)量，使居住更加健康。

4. 定制化家具的個性

定制化家具是打造獨特家居的重要途徑。根據(jù)家居空間的尺寸和個人需求，選擇定制家具，既可以充分利用空間，又能體現(xiàn)個性。獨特設(shè)計的家具不僅美觀實用，更是家的象征。

5. 光影設(shè)計的藝術(shù)

光影設(shè)計是裝修中的一門藝術(shù)。巧妙的燈光設(shè)計能夠調(diào)整空間氛圍，營造出溫馨、浪漫或者專注的氛圍。選擇合適的照明設(shè)備，根據(jù)房間的功能和布局，設(shè)計出有層次感的光影效果。

6. 智能家居的未來

隨著科技的不斷發(fā)展，智能家居已經(jīng)成為現(xiàn)代家居設(shè)計的新趨勢。智能化的家居設(shè)備可以為生活帶來更多便利，通過智能家居系統(tǒng)，可以實現(xiàn)家居的智能化控制，提升居住的舒適度和便捷性。

結(jié)語：設(shè)計家，添彩生活

家，是一個溫馨的港灣，也是生活的舞臺。通過巧妙的裝修設(shè)計，我們可以在家中創(chuàng)造出一個令人陶醉的生活空間。創(chuàng)意的布局、色彩的搭配、自然元素的融入，都是點亮家居的法寶。在設(shè)計的過程中，發(fā)揮想象力，打破傳統(tǒng)，定制個性化的家具，讓每一個空間都成為藝術(shù)的延伸。通過裝修設(shè)計，我們可以感受到家的溫暖，生活也因此變得更加豐富多彩。

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計

軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(676)

112024-1
探索UI設(shè)計的奇妙世界：創(chuàng)新、美感與用戶體驗

前端達人

在數(shù)字化的時代，用戶界面（UI）設(shè)計已經(jīng)超越了簡單的美觀外觀，它成為了數(shù)字產(chǎn)品成功的關(guān)鍵因素之一。一個令人愉悅、易用的UI設(shè)計不僅吸引用戶，更能夠幫助品牌在競爭激烈的市場中脫穎而出。在本文中，我們將深入探討UI設(shè)計的奇妙世界，探討創(chuàng)新、美感與用戶體驗的重要性。

1. 創(chuàng)新引領(lǐng)潮流

UI設(shè)計的核心是創(chuàng)新。通過引入獨特的設(shè)計元素、交互方式和動效，設(shè)計師們能夠打破傳統(tǒng)界限，創(chuàng)造出令人驚艷的用戶體驗。在設(shè)計過程中，考慮用戶的需求和行為，將創(chuàng)新融入產(chǎn)品，使用戶感受到與眾不同的數(shù)字世界。

2. 美感與品牌形象

美感是UI設(shè)計的靈魂。吸引用戶的第一眼往往決定了他們是否愿意留下并繼續(xù)使用產(chǎn)品。精心設(shè)計的顏色搭配、字體選擇以及圖形元素，不僅構(gòu)建了令人難以忘懷的用戶界面，也能夠加強品牌形象。一致的設(shè)計語言和品牌標(biāo)識，將品牌的價值傳遞給用戶。

3. 用戶體驗的黃金法則

用戶體驗（UX）是UI設(shè)計的至高追求。一個優(yōu)秀的UI設(shè)計應(yīng)當(dāng)始終以用戶為中心，關(guān)注用戶需求、習(xí)慣和心理。簡潔而直觀的界面、合理的信息架構(gòu)以及高效的操作流程，都是提高用戶體驗的關(guān)鍵因素。通過不斷優(yōu)化用戶的互動過程，提升用戶的滿意度和忠誠度。

4. 響應(yīng)式設(shè)計的未來趨勢

隨著移動設(shè)備的普及，響應(yīng)式設(shè)計成為了不可忽視的趨勢。UI設(shè)計師需要考慮不同設(shè)備上的顯示效果，確保用戶在不同屏幕尺寸上都能獲得一致而流暢的體驗。這不僅提高了用戶滿意度，也有助于網(wǎng)站在搜索引擎中的排名。

5. 數(shù)據(jù)驅(qū)動的優(yōu)化

UI設(shè)計不僅僅是一門藝術(shù)，更是一門科學(xué)。通過使用數(shù)據(jù)分析工具，設(shè)計師可以深入了解用戶行為、流量和互動。這些數(shù)據(jù)可以為設(shè)計優(yōu)化提供有力的依據(jù)，幫助設(shè)計師更好地了解用戶需求，不斷改進和優(yōu)化界面。

結(jié)語：設(shè)計的魔力

UI設(shè)計是數(shù)字產(chǎn)品成功的關(guān)鍵之一。在競爭激烈的市場中，一個創(chuàng)新、美觀且用戶體驗出色的UI設(shè)計能夠讓產(chǎn)品脫穎而出。通過將創(chuàng)新、美感和用戶體驗融入設(shè)計的每個層面，設(shè)計師們可以引領(lǐng)品牌進入數(shù)字化的未來，為用戶創(chuàng)造出令人愉悅的、難以忘懷的數(shù)字體驗。在這個數(shù)字化的奇妙世界里，UI設(shè)計是連接品牌和用戶的橋梁，也是探索數(shù)字創(chuàng)新的引導(dǎo)者。

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計

軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(670)

052024-1
ui表單驗證問題

前端達人

首先展示正確的格式(以驗證是否為空為例):

html代碼塊:

<el-form :model="nodeName(數(shù)組名)" ref="nodeName(數(shù)組名)">

<el-form-item prop="name(數(shù)組內(nèi)的屬性)" label="內(nèi)容:" :rules="[{ required: true, message: '不能為空'}]">

<el-input type="name(數(shù)組內(nèi)的屬性)" v-model="nodeName.name(數(shù)組內(nèi)的屬性)"></el-input>

</el-form-item>

</el-form>

js代碼塊:

data(){

return{

// 表單

nodeName:{

name:''

}

}

},

前端展示(輸入內(nèi)容后顯示為空消失):

下面開始總結(jié)常見的問題以及功能失效的原因.

1. input左側(cè)出現(xiàn)星號,內(nèi)容為空卻不提醒

原因:已經(jīng)寫好了驗證功能,但是沒有綁定到input框 .

解決方法:是<el-form-item>標(biāo)簽加入prop="數(shù)組內(nèi)要驗證的屬性"或者<el-input>標(biāo)簽中加入type="數(shù)組內(nèi)要驗證的屬性".

2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

(一)原因:input有數(shù)據(jù),但是表單沒有驗證到.

解決方法:給<el-form>綁定整個數(shù)組.v-model="newName".

(二)原因:表單驗證綁定的不是數(shù)組,只是一個單純的ojbect或者number或者char類型

如此種情況,無論輸入什么都會提示為空.

解決方法:將綁定驗證內(nèi)容變成數(shù)組【也可以把表單驗證寫在data里面】

[表單驗證只能綁定數(shù)組,如果單純綁定一個數(shù)值,會出現(xiàn)驗證不到的現(xiàn)象發(fā)生]!!!!!!!!!

3.提交表單按鈕無法驗證以及符合驗證的表單內(nèi)容,也就是提交失敗.

此情況一般報錯為兩個:

Element-ui官方樣式表單提交函數(shù)功能是這樣展示的:

newNameBtn(newName) {

this.$refs[newName].validate((valid) => {

if (valid) {

alert('submit!');

} else {

console.log('error submit!!');

return false;

}

});

},

我們可以看到方法是this.$refs[數(shù)組名].validate(() =>{})或者this.$refs.數(shù)組名.validate(() =>{})這樣一個函數(shù).

如果你用的html5或者是其他不顯示參數(shù)的集成工具,代碼是這樣的:

并不知道這個this.$refs有沒有真正的請求到,如果你用的顯示參數(shù)的集成工具(如phpstorm),如果你的代碼正確,會這樣顯示:

我們看到會多顯示一個callback,這就說明this.$refs生效了.

所以不管你使用說明軟件寫的代碼,如果出現(xiàn)表單驗證提交錯誤.也就是現(xiàn)實開頭那兩個錯誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數(shù)組]

看看輸出是一個對象還是undefine.顯示這個對象說明this.$refs.newName請求成功.

如果顯示undefine,可以這樣改正:

(一)你的代碼格式書寫錯誤,請比照上文有紅箭頭的圖正確案例改正格式.

(二)你的<el-form>未綁定ref,請給<el-form>標(biāo)簽綁定ref="newName"[此處的newName是你自己綁定的數(shù)組]

出現(xiàn)表單驗證錯誤先比對案例 ,然后再按照自己的具體代碼綁定自己的數(shù)據(jù).

[注:Element-ui的表單驗證一定是綁定的數(shù)組類型]

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(671)

052024-1
js判斷屏幕分辨率的代碼

前端達人

一般我們可以通過下面的代碼判斷分辨率

復(fù)制代碼代碼如下:
<script language="JavaScript">

</script>

js判斷瀏覽器分辨率

復(fù)制代碼代碼如下:
<script>
function ScreenWidth(){
if (screen.width == 1440){
alert("1440*900");
}else if (screen.width == 800){
alert("800*600");
}else if (screen.width == 1152){
alert("1152*864");
}else {
alert("do not know!");
}
}
</script>
<input type="button" name="" value="fenbianli " οnclick=" ScreenWidth()"/>
內(nèi)容來自17jquery

說明：這段js代碼可改造一下，改為screen.width>=1024 screen.width=800兩種情況

所以我選擇使用下面的代碼：

復(fù)制代碼代碼如下:
if(screen.width>=1440){
alert('寬屏幕可以加載廣告了');
//一些廣告代碼
}

用JS判斷不同分辨率調(diào)用不同的CSS樣式文件

最近看一個網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，今天寫了一個例子研究一下，
復(fù)制代碼代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.οnlοad=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //獲取屏幕的的寬度
{
sc.setAttribute("href","css/c2.css"); //設(shè)置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現(xiàn)在是紅色。";
}
else{

sc.setAttribute("href","css/c1.css"); 17jquery.com
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現(xiàn)在是藍(lán)色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

c1.css里面的內(nèi)容

復(fù)制代碼代碼如下:
*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}

c2.css里面的內(nèi)容

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(679)

042024-1
Vue新建項目+git托管+初始配置+項目打包優(yōu)化

前端達人

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項目

打開項目所在文件夾

vue create ‘項目名’

選擇手動配置

babel：js編輯器
typeScript：超集js【需要指定數(shù)據(jù)類型】
PWA：離線可用
Linter/Formatter：約束代碼規(guī)范，配合eslint
unit/e2e testing：測試

 3、git遠(yuǎn)程倉庫初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項目托管

新建倉庫，給倉庫命名即可，無任何勾選

第二次新建倉庫，不需要再git全局設(shè)置

已經(jīng)創(chuàng)建了項目，進入vscode終端（管理員）（or cmd進入項目路徑）

git init

執(zhí)行橙色代碼（第一句表示遠(yuǎn)程倉庫地址，第二句表示首次推送主分支到云端倉庫，origin為云倉庫別名）

5、項目文件夾

node_modules:放置項目依賴的地方
public:一般放置一些共用的靜態(tài)資源，包括頁簽圖標(biāo)、index.html，打包上線的時候，public文件夾里面資源原封不動打包到dist文件夾里面；<%= BASE_URL %>是public所在路徑，使用絕對路徑

腳手架目錄public和assets區(qū)別：參考鏈接

src：程序員源代碼文件夾

assets文件夾：經(jīng)常放置一些靜態(tài)資源（圖片），assets文件夾里面資源webpack會進行打包為一個模塊（js文件夾里面）

components文件夾:一般放置非路由組件（或者項目共用的組件）

App.vue 唯一的根組件

main.js 入口文件【程序最先執(zhí)行的文件】

babel.config.js:babel配置文件【翻譯官：如ES6翻譯成ES5，兼容好】

package.json：應(yīng)用包配置文件；看到項目描述、項目依賴、項目運行指令【項目信息記錄：‘項目身份證’】

package-lock.json: 包版本控制文件

.gitignore: git版本管制忽略的配置

README.md:項目說明文件

補充：通過 vue.config.js 可以修改 webpack 的默認(rèn)配置

 6、初始配置

a. 瀏覽器自動打開html，vue-cli-service serve --open

在package.json文件中 "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

1

2

3

4

5

6

b.關(guān)閉eslint校驗工具

創(chuàng)建vue.config.js文件：需要對外暴露 module.exports = { lintOnSave:false, }

1

2

3

4

c. src文件夾的別名的設(shè)置【@表示src文件夾，@在"node_modules","dist"不能用】

創(chuàng)建jsconfig.json文件 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }, "exclude": [ "node_modules", "dist" ] }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

7、后臺項目的環(huán)境安裝配置；參考黑馬項目

MySQL數(shù)據(jù)庫；

Node.js環(huán)境【因為后臺接口依賴Node.js】 Nodejs安裝及環(huán)境配置鏈接

安裝API依賴包；

postman測試后臺項目接口：【安裝與使用見連接】
https://blog.csdn.net/m0_61843874/article/details/123324727
https://www.bilibili.com/video/BV1hP4y177gS/?spm_id_from=333.337.search-card.all.click&vd_source=c4d71976fd97f04545873bc4552dfb71
選擇好請求方式；輸入URL；body——x-www-form-urlencoded（普通形式輸入請求參數(shù)）

8、清除初始靜態(tài)樣式，梳理app.vue根組件

 9、清除初始路由配置；清除初始的路由組件和非路由組件

新建routes.js放路由規(guī)則

 10、生成項目報告

npm run build -- --report

1

11、項目優(yōu)化

Vue項目在執(zhí)行build命令期間中移除所有console.log 鏈接

通過 vue.config.js 可以修改 webpack 的默認(rèn)配置

為開發(fā)模式與發(fā)布模式指定不同的打包入口

3.1 打包入口的修改，可以通過 configureWebpack和 chainWebpack節(jié)點來實現(xiàn)：

3.2 通過 chainWebpack 自定義打包入口
新建./src/main-prod.js和./src/main-dev.js文件；在vue.config.js進行如下配置

chainWebpack: config => { config.when(process.env.NODE_ENV === 'production',config=>{ config.entry('app').clear().add('./src/main-prod.js') }) config.when(process.env.NODE_ENV === 'development',config=>{ config.entry('app').clear().add('./src/main-dev.js') }) }

1

2

3

4

5

6

7

8

通過externals 加載外部 CDN 資源，對于externals中的第三方依賴包，在用到依賴包的時候，會找window全局對象上查找并直接使用現(xiàn)成的對象，能夠讓打包的項目體積更??；只有production模式才有必要配置externals節(jié)點

第一步：vue.config.js——>配置externals節(jié)點

//配置后的vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave:false, // 通過 chainWebpack 為開發(fā)模式與發(fā)布模式指定不同的打包入口 chainWebpack: config => { // 發(fā)布模式 config.when(process.env.NODE_ENV === 'production',config=>{ config.entry('app').clear().add('./src/main-prod.js')

// 通過externals 加載外部 CDN 資源 config.set('externals',{ vpe : ' Vue ', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress:'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) }) config.when(process.env.NODE_ENV === 'development',config=>{ config.entry('app').clear().add('./src/main-dev.js') })

} })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

第二步：導(dǎo)入的樣式表也會被導(dǎo)入到輸出文件中，導(dǎo)致體積大；臨時注釋掉main.prod.js中的import的VueQuillEditor樣式表；進行如下配置；【注意版本號】

進一步添加js文件的CDN引用：

 <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>  <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>  <script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>

1

2

3

4

5

6

7

8

9

10

11

12

13

.通過 CDN 優(yōu)化 ElementUl 的打包

第一步：

 <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />  <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

1

2

3

4

第二步：臨時注釋掉
// 引入自定義插件（封裝element按需引入模塊）
// import element from ‘./plugins/element’

首頁內(nèi)容定制（根據(jù)production模式和development模式定制）
不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同，我們可以通過插件的方式進行定制；
isProd的值為True表示production模式，為FALSE表示development模式；

第一步：對vue.config.js中chainWebpack的屬性進行調(diào)整：

// 通過 chainWebpack 為開發(fā)模式與發(fā)布模式指定不同的打包入口 chainWebpack: config => { // 1、發(fā)布模式 config.when(process.env.NODE_ENV === 'production',config=>{ config.entry('app').clear().add('./src/main-prod.js')

// 通過externals 加載外部 CDN 資源 config.set('externals',{ vue : ' Vue ', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', 'vue-quill-editor': 'VueQuillEditor' }) // 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同 // 我們可以通過插件的方式進行定制，根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)，發(fā)布模式插件配置如下: config.plugin('html') .tap(args => { args[0].isProd = true return args }) }) // 2、開發(fā)模式 config.when(process.env.NODE_ENV === 'development',config=>{ config.entry('app').clear().add('./src/main-dev.js') // 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同 // 我們可以通過插件的方式進行定制，根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)，開發(fā)模式插件配置如下: config.plugin('html').tap(args => { args[0].isProd = false return args }) })

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

第二步：在public/index.html首頁中，可以根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)

<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>電商后臺管理系統(tǒng)</title>


<% if(htmlWebpackPlugin.options.isProd){ %>
前面CDN引入的依賴資源（富文本編輯器+elemen-ui）
<% } %>

前面CDN引入的依賴資源（富文本編輯器+elemen-ui），代碼如下：

<link rel="stylesheet" href="/>
<link rel="stylesheet" href=" />
<link rel="stylesheet" href="/>

<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>  <script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />  <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

第三步：由于對首頁內(nèi)容根據(jù)production模式和development模式進行了定制，需要將前面注釋掉的富文本編輯器樣式，以及element-ui樣式引入取消注釋，最終項目會根據(jù)不同模式展示首頁

7. 路由懶加載
當(dāng)打包構(gòu)建應(yīng)用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后**[當(dāng)路由被訪問的時候才加載對應(yīng)組件**]，這樣就會更加高效。

簡化：
不需要在route.js文件 import UserDetails from ‘./views/UserDetails.vue’；直接路由懶加載
{
name:‘search’, //商品搜索
path:‘/search’,
component:()=>import(‘@/pages/Search’), [路由被訪問才加載組件]

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(958)

272023-12
【Git】取消上一次commit或push

前端達人

(轉(zhuǎn)自csdn)

目錄

一、取消上一次commit

方法1：使用 Git reset

方法2：使用 Git revert

方法3：使用 Git checkout

二、取消上一次push

git push --force

git reflog

git reset

git push --force

三、擴展

commit參數(shù)

--mixed

--soft

--hard

--amend

一、取消上一次commit

如果你需要取消上一次的 Git 提交，有幾個不同的方法可以實現(xiàn)。其中包括撤消提交、提交到新的分支、使用 Git 回滾等等。

下面介紹三種方法：

方法1：使用 Git reset

使用 Git reset 命令來取消上一次提交：

git reset HEAD~1

這會把 HEAD 指針移回上一個提交（HEAD~1），并清除最后一次提交的內(nèi)容。

或

git reset HEAD^

撤回兩次或者n次

git reset HEAD~2

方法2：使用 Git revert

使用 Git revert 命令來撤消上一次提交并創(chuàng)建一個新的提交來撤消原來的提交：

git revert HEAD

這會創(chuàng)建一個新的提交來撤消提交之前的更改。在命令行中輸入該命令后，你需要編輯撤消的提交信息，以便 Git 創(chuàng)建一個新的提交。

方法3：使用 Git checkout

還可以使用 Git checkout 命令來將工作樹恢復(fù)到上一次提交的狀態(tài)。這將清除所有未提交的更改，所以請確保你有一個備份：

git checkout HEAD~1

這會將工作樹恢復(fù)到上一次提交的狀態(tài)，也就是你上一次提交之前的狀態(tài)。請注意，這里的修改都將被丟棄。

無論你使用的是哪種方法，請確保在撤消提交之前首先備份你的工作。這可以幫助你避免在操作過程中意外刪除無法恢復(fù)的內(nèi)容。

二、取消上一次push

如果你已經(jīng)push了代碼，并且想要撤回這個commit，可以通過以下步驟實現(xiàn)：

git push --force

首先，在使用git push命令時，需要加上--force參數(shù)，強制覆蓋遠(yuǎn)程倉庫上已經(jīng)存在的commit。命令如下：

git push --force origin <branch_name>

其中，<branch_name>表示你要撤銷的分支名稱。

git reflog

如果在本地倉庫沒有回到該commit的上一個狀態(tài)，需要使用git reflog命令找到該commit的SHA-1值。命令如下：

git reflog

該命令會列出整個Git倉庫的提交歷史記錄，包括HEAD指針?biāo)赶虻奶峤缓鸵呀?jīng)被廢棄的提交。

git reset

找到要回到的某個commit的SHA-1值，然后使用如下命令回到該commit的狀態(tài)：

git reset --hard <commit_SHA-1>

其中，<commit_SHA-1>表示要回到的commit的SHA-1值。

git push --force

然后使用之前的推送命令進行推送，添加--force參數(shù)，覆蓋遠(yuǎn)程倉庫的歷史提交記錄。命令如下：

git push --force origin <branch_name>

提醒：使用git push --force命令可能會導(dǎo)致遠(yuǎn)程倉庫、其他成員的倉庫和歷史版本產(chǎn)生不可逆的影響，因此操作時需要謹(jǐn)慎。一般情況下，在工作流中使用git revert命令回滾某個commit，以保證版本控制的完整性和可維護性。

三、擴展

git log 查看提交日志

commit參數(shù)

--mixed

不刪除工作空間改動代碼，撤銷 commit，并撤銷 git add . 操作

git reset --mixed HEAD^ 效果等同 git reset HEAD^

--soft

不刪除工作空間改動代碼，撤銷commit，不撤銷git add .

--hard

刪除工作空間改動代碼，撤銷commit，撤銷git add .

--amend

修改注釋, 進入vim編輯器, 改完:wq即可

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1071)

272023-12
國內(nèi) Linux 集群服務(wù)器網(wǎng)絡(luò)差無法 Git Clone 大項目的解決辦法

前端達人

GitHub 是一個軟件源代碼托管服務(wù)平臺，Linux 上使用的大部分工具都可以在上面獲得。

但是由于 GitHub 的服務(wù)器在國外，國內(nèi)訪問經(jīng)常出現(xiàn)網(wǎng)絡(luò)問題導(dǎo)致訪問失敗，尤其是使用 git clone 對 repo 進行克隆的時候，會經(jīng)常出現(xiàn)因網(wǎng)絡(luò)問題而克隆失敗。

Linux 集群服務(wù)器的用戶，在比較難實現(xiàn)科學(xué)上網(wǎng)的前提下，對大型 repo 克隆的任務(wù)顯得尤為困難，而且想使用 gradle build 的話，git clone 似乎是唯一選擇。

既然 git clone 一兩次不成功，那我就想辦法讓他 clone 到成功為止，于是我就寫了一個循環(huán)腳本，將它投遞到計算節(jié)點上 24h 運行，直到它克隆成功才結(jié)束任務(wù)。

以克隆 GATK （repo 大小約 300mb）為例，腳本如下：

#!/bin/bash #SBATCH --job-name=GitClone #任務(wù)名稱 #SBATCH --nodelist=litchi-0-1 #計算節(jié)點名稱 #SBATCH --partition=WHEEL #使用 WHEEL 用戶組 #SBATCH --nodes=1 #使用計算節(jié)點數(shù)量 #SBATCH --ntasks=1 #使用 1 個線程 #SBATCH --mail-type=end #任務(wù)結(jié)束時發(fā)送郵件 #SBATCH --mail-user=***@qq.com #郵箱地址 #SBATCH --output=/home/$USER/Slurm_JobLogs/JobLog_%j_%x.log #標(biāo)準(zhǔn)輸出保存路徑 #SBATCH --error=/home/$USER/Slurm_JobLogs/JobLog_%j_%x.err #標(biāo)準(zhǔn)錯誤保存路徑 #------------------------------------------------------------ # PRINT JOB'S INFORMATION source /home/$USER/.bashrc threads=$SLURM_NTASKS echo "## Job:[$SLURM_JOB_NAME]" echo "## Node:[$SLURM_NODELIST]" echo "## CPUs:[$SLURM_NTASKS]" echo "## Mem:[$SLURM_MEM_PER_NODE]" echo `date` echo -e $(printf -- "-%.0s" {1..100})"\n" #cut-off-line #------------------------------------------------------------ # PATH repo_url="https://github.com/broadinstitute/gatk.git" repo_name="gatk" #------------------------------------------------------------ # SHELL cd /home/$USER/Accessories/Softwares while true; do #循環(huán)執(zhí)行任務(wù) git clone $repo_url #執(zhí)行 git clone if [ $? -eq 0 ]; then #如果以上命令的退出碼等于 0 (任務(wù)成功) echo "Git clone successful!" break #則退出循環(huán) else #如果命令的退出碼不等于 0 (任務(wù)失敗) echo "Git clone failed:( Retrying..." rm -rf ./${repo_name} #則刪除這個repo sleep 1 #睡眠 1 秒緩沖一下繼續(xù)循環(huán) fi done #------------------------------------------------------------ # JOB ENDS echo -e $(printf -- "-%.0s" {1..100}) #cut-off-line echo "## Runtime:[`sacct -j $SLURM_JOB_ID --format=Elapsed --noheader | awk '{print $1}' | sed -n '2p'`]"

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

這個腳本的路徑為 ~/Scripts/GitClone_GATK.sh

將任務(wù)投遞到計算節(jié)點運行：

sbatch ~/Scripts/GitClone_GATK.sh

1

最終，這個任務(wù)運行了 40 次，歷時 13h，終于是克隆成功了！

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1062)

262023-12
GIT生成SSH公鑰圖文教程轉(zhuǎn)自csdn

前端達人

GIT介紹

GIT是一種分布式版本控制系統(tǒng)，用于追蹤文件的變化和協(xié)作開發(fā)。本文將詳細(xì)介紹GIT的基本架構(gòu)、工作流程和常用命令，并對其優(yōu)勢和應(yīng)用場景進行分析。

1. GIT的基本架構(gòu)

GIT的基本架構(gòu)由三個主要組件組成：工作區(qū)（Working Directory）、暫存區(qū)（Stage）和倉庫（Repository）。

工作區(qū)即本地文件夾，用于存放項目文件。

暫存區(qū)是位于工作區(qū)與倉庫之間的緩沖區(qū)域，用于臨時存儲修改。

倉庫則是存放項目歷史記錄的地方，包含項目所有文件的完整歷史。

2. GIT的工作流程

GIT的工作流程通常包括以下幾個步驟：

初始化倉庫：使用git init命令初始化一個空白的倉庫。

添加文件：使用git add命令將文件添加到暫存區(qū)中。

提交修改：使用git commit命令將暫存區(qū)的修改提交到倉庫中。

分支管理：使用git branch命令創(chuàng)建、切換和刪除分支。

遠(yuǎn)程倉庫：使用git remote命令管理遠(yuǎn)程倉庫，并使用git push和git pull命令與遠(yuǎn)程倉庫進行數(shù)據(jù)同步。

3. GIT常用命令

以下是GIT的一些常用命令及其功能：

git init：初始化一個新的倉庫。

git add <file>：將指定文件添加到暫存區(qū)中。

git commit -m "<message>"：提交暫存區(qū)的修改并添加注釋。

git status：顯示工作區(qū)和暫存區(qū)的狀態(tài)。

git log：顯示倉庫的提交歷史。

git branch：管理分支，包括創(chuàng)建、切換和刪除分支。

git checkout [branch]：切換到指定分支。

git merge <branch>：將指定分支合并到當(dāng)前分支。

git remote add <name> <url>：添加遠(yuǎn)程倉庫。

git push <remote> <branch>：將本地分支推送到遠(yuǎn)程倉庫。

git pull <remote> <branch>：從遠(yuǎn)程倉庫拉取最新代碼。

4. GIT的優(yōu)勢

GIT具有以下幾個優(yōu)勢：

分布式：每個開發(fā)者都擁有完整的倉庫副本，可以在離線環(huán)境下進行工作，并能方便地處理分支操作和合并沖突。

高效性：GIT采用了快照方式保存文件，不會重復(fù)存儲相同的內(nèi)容，大幅節(jié)省存儲空間。

數(shù)據(jù)完整性：使用哈希算法確保每個文件和每次提交都有唯一的標(biāo)識，可以有效避免數(shù)據(jù)損壞和篡改。

可擴展性：GIT具有良好的插件和擴展支持，可以根據(jù)需求靈活地進行功能擴展。

5. GIT的應(yīng)用場景

由于GIT的優(yōu)勢和高效性，它廣泛應(yīng)用于軟件開發(fā)中的版本控制和協(xié)作管理。以下是幾個常見的應(yīng)用場景：

代碼版本控制：開發(fā)人員可以使用GIT來追蹤和管理代碼的版本變化，輕松地回退、回顧和比較代碼的不同版本。

多人協(xié)作開發(fā)：GIT支持跨團隊和跨地域的多人協(xié)作開發(fā)，能夠有效解決代碼沖突，并提供完整的歷史記錄和審計功能。

敏捷開發(fā)：GIT的分支管理和快速迭代特性非常適合敏捷開發(fā)方法，可以幫助團隊快速迭代并保持項目的整潔和穩(wěn)定。

綜上所述，GIT作為一種強大的分布式版本控制系統(tǒng)，在軟件開發(fā)中發(fā)揮著重要的作用。通過了解GIT的基本架構(gòu)、工作流程和常用命令，開發(fā)人員可以更好地利用和實踐GIT，提高代碼管理和協(xié)作效率。

教程

1.下載安裝git客戶端

此處省略1萬字，本人是通過idea開發(fā)工具下載的git.

2.鼠標(biāo)右鍵進入，給 GIT base Here

輸入生成SSH公鑰命令

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

然后需要輸入的地方，回車，如圖所示，生成ssh公鑰成功

在找到公鑰生成的位置，打開id_rsa.pub文件，即可找到ssh公鑰

在git服務(wù)平臺如碼云、conding、github等里添加自己公鑰

補充知識

SSH公鑰是一種加密技術(shù)，用于實現(xiàn)安全的遠(yuǎn)程登錄和文件傳輸。它使用非對稱加密算法，將用戶的公鑰保存在被訪問的服務(wù)器上，而私鑰則由用戶自己保管。

當(dāng)用戶要進行遠(yuǎn)程登錄或文件傳輸時，客戶端會生成一對公鑰和私鑰，并將公鑰發(fā)送給服務(wù)器。服務(wù)器將收到的公鑰存儲起來。當(dāng)用戶進行身份驗證時，服務(wù)器會向客戶端發(fā)送一個隨機的挑戰(zhàn)，并使用存儲的公鑰對其進行加密。用戶收到挑戰(zhàn)后，使用自己保管的私鑰進行解密并返回結(jié)果給服務(wù)器。如果解密結(jié)果正確，身份驗證就成功了。

SSH公鑰具有以下優(yōu)點：

安全性：使用非對稱加密算法，確保通信和數(shù)據(jù)傳輸?shù)陌踩浴?/li>
方便性：無需記住密碼，只需要保管好私鑰即可。

靈活性：可以在多個終端之間共享公鑰，方便用戶同時訪問多臺服務(wù)器。

可審計性：公鑰在服務(wù)器上留下痕跡，方便審計和管理。

為了確保SSH公鑰的安全，用戶應(yīng)該妥善保管自己的私鑰，并定期更新公鑰，防止被惡意利用。此外，服務(wù)器管理員也應(yīng)確保正確配置和管理公鑰，避免安全漏洞的出現(xiàn)。

評論(0) 瀏覽(691)

262023-12
git入門：Linux操作系統(tǒng)下 git環(huán)境搭建 | 生成公私密鑰

前端達人

前言

該示例是在ubuntu下完成的

文章目錄

前言

一、安裝 git 和 ssh

二、配置公鑰

三、得到公鑰在GitHub配置

四、查看能否通信成功

五、配置郵箱和用戶名

 一、安裝 git 和 ssh

sudo apt-get install git
sudo apt-get install openssh-server

二、配置公鑰

因為git和 GitHub之間是通過ssh加密傳輸?shù)模虼诵枰渲霉 €，所以需要先生成公私密鑰。

命令：該郵箱是你注冊GitHub的郵箱地址

ssh-keygen -t rsa -C “xxxxxxxxxx@163.com”

如圖，表示生成成功

 三、得到公鑰在GitHub配置

進入 .ssh 文件里，查看id_rsa.pub，表示公鑰（public）

復(fù)制該密鑰到GitHub里配置

標(biāo)題title隨便起

 四、查看能否通信成功

輸入該命令：如果出現(xiàn)下面這句話，就說明成功了。

ssh -T git@github.com

五、配置郵箱和用戶名

通過以下兩個命令配置用戶名和郵箱，以后提交代碼文件，就會附帶該用戶的信息。

git config --global user.name " xxx "
git config --global user.email " xxx@xx.com"

在 .gitconfig文件可查看

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(742)

1 2 3 4 5 6 7 ... 104 »

分類

大數(shù)據(jù)可視化設(shè)計文章及欣賞(144)

B端ui設(shè)計文章及欣賞(600)

系統(tǒng)UI設(shè)計文章及欣賞(106)

移動端UI設(shè)計文章及欣賞(687)

圖標(biāo)設(shè)計文章及欣賞(120)

網(wǎng)站設(shè)計文章及欣賞(480)

平面設(shè)計(251)

行業(yè)趨勢(463)

設(shè)計資源(872)

交互設(shè)計及用戶體驗(903)

前端及開發(fā)文章及欣賞(1031)

隨筆的一些文章(63)

設(shè)計思維(1876)

用戶研究(242)

設(shè)計管理與成長(345)

seo優(yōu)化(498)

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.jghy.net

存檔

2024年12月(61)

2024年11月(84)

2024年10月(168)

2024年9月(145)

2024年8月(165)

2024年7月(108)

2024年6月(65)

2024年5月(73)

2024年4月(44)

2024年3月(50)

2024年2月(58)

2024年1月(44)

2023年12月(47)

2023年11月(41)

2023年10月(14)

2023年9月(27)

2023年8月(88)

2023年7月(62)

2023年6月(58)

2023年5月(28)

2023年4月(47)

2023年3月(37)

2023年2月(90)

2023年1月(78)

2022年12月(45)

2022年11月(69)

2022年10月(51)

2022年9月(135)

2022年8月(60)

2022年7月(111)

2022年6月(162)

2022年5月(143)

2022年4月(86)

2022年3月(119)

2022年2月(53)

2022年1月(99)

2021年12月(105)

2021年11月(83)

2021年10月(101)

2021年9月(153)

2021年8月(147)

2021年7月(149)

2021年6月(157)

2021年5月(124)

2021年4月(185)

2021年3月(144)

2021年2月(35)

2021年1月(103)

2020年12月(95)

2020年11月(76)

2020年10月(31)

2020年9月(45)

2020年8月(50)

2020年7月(46)

2020年6月(33)

2020年5月(78)

2020年4月(69)

2020年3月(100)

2020年2月(59)

2020年1月(31)

2019年12月(50)

2019年11月(57)

2019年10月(48)

2019年9月(48)

2019年8月(57)

2019年7月(58)

2019年6月(58)

2019年5月(31)

2019年4月(37)

2019年3月(43)

2019年2月(25)

2019年1月(45)

2018年12月(41)

2018年11月(40)

2018年10月(29)

2018年9月(40)

2018年8月(87)

2018年7月(107)

2018年6月(86)

2018年5月(109)

2018年4月(40)

2018年3月(35)

2017年8月(35)

2017年7月(45)

2017年6月(7)

2017年5月(27)

2017年4月(51)

2017年3月(69)

2017年2月(65)

2017年1月(69)

2016年12月(55)

2016年11月(111)

2016年10月(92)

2016年9月(53)

2016年8月(9)

2016年7月(4)

2016年6月(9)

2016年3月(19)

2016年2月(26)

2016年1月(29)

2015年12月(34)

2015年11月(35)

2015年10月(46)

2015年9月(43)

2015年8月(40)

2015年7月(33)

2015年6月(46)

2015年5月(58)

2015年4月(70)

2015年3月(55)

2015年2月(17)

2015年1月(33)

2014年12月(21)

2014年11月(83)

2014年10月(94)

2014年9月(6)

2014年8月(1)

2014年7月(13)

2014年6月(66)

2014年5月(99)

2014年4月(88)

2014年3月(101)

2014年2月(67)

2014年1月(83)

2013年12月(106)

2013年11月(111)

2013年10月(61)

2013年9月(20)

2013年7月(13)

2013年6月(27)

2013年5月(48)

2013年4月(39)

2013年3月(8)

2013年2月(20)

2013年1月(31)

2012年12月(33)

2012年11月(31)

2012年10月(22)

2012年9月(8)

2012年7月(14)

2012年6月(15)

2012年5月(31)

2012年4月(24)

2012年2月(4)

2012年1月(8)

2011年12月(35)

2011年11月(32)

2011年10月(13)

2011年8月(1)

2011年6月(1)

首頁

一、引言

二、B端組件庫中的數(shù)據(jù)錄入類組件應(yīng)該如何搭建？如何進行多樣化設(shè)計？

2.1“數(shù)據(jù)錄入”類組件搭建過程

2.3如何進行多樣化設(shè)計？

三、B端組件庫中的反饋類組件應(yīng)該如何搭建？有哪些注意事項？常用的場景有哪些？

3.1搭建反饋類組件

3.2注意事項

3.3常用場景

四、B端組件庫中的導(dǎo)航類組件應(yīng)該如何搭建？有哪些注意事項？常用的場景有哪些？

4.1搭建導(dǎo)航類組件

4.2注意事項

4.3常用場景

五、如何對“數(shù)據(jù)錄入”、“反饋”、“導(dǎo)航”進行C化設(shè)計？

六、結(jié)束

1. 創(chuàng)意空間布局

2. 色彩搭配的魅力

3. 自然元素的融入

4. 定制化家具的個性

5. 光影設(shè)計的藝術(shù)

6. 智能家居的未來

結(jié)語：設(shè)計家，添彩生活

1. 創(chuàng)新引領(lǐng)潮流

2. 美感與品牌形象

3. 用戶體驗的黃金法則

4. 響應(yīng)式設(shè)計的未來趨勢

5. 數(shù)據(jù)驅(qū)動的優(yōu)化

結(jié)語：設(shè)計的魔力

首先展示正確的格式(以驗證是否為空為例):

下面開始總結(jié)常見的問題以及功能失效的原因.

1. input左側(cè)出現(xiàn)星號,內(nèi)容為空卻不提醒

原因:已經(jīng)寫好了驗證功能,但是沒有綁定到input框 .

2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

(一)原因:input有數(shù)據(jù),但是表單沒有驗證到.

(二)原因:表單驗證綁定的不是數(shù)組,只是一個單純的ojbect或者number或者char類型

[表單驗證只能綁定數(shù)組,如果單純綁定一個數(shù)值,會出現(xiàn)驗證不到的現(xiàn)象發(fā)生]!!!!!!!!!

3.提交表單按鈕無法驗證以及符合驗證的表單內(nèi)容,也就是提交失敗.

(一)你的代碼格式書寫錯誤,請比照上文有紅箭頭的圖正確案例改正格式.

(二)你的<el-form>未綁定ref,請給<el-form>標(biāo)簽綁定ref="newName"[此處的newName是你自己綁定的數(shù)組]

出現(xiàn)表單驗證錯誤先比對案例 ,然后再按照自己的具體代碼綁定自己的數(shù)據(jù).

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項目

3、git遠(yuǎn)程倉庫初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項目托管

5、項目文件夾

6、初始配置

7、后臺項目的環(huán)境安裝配置；參考黑馬項目

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

10、生成項目報告

11、項目優(yōu)化

一、取消上一次commit

方法1：使用 Git reset

方法2：使用 Git revert

方法3：使用 Git checkout

二、取消上一次push

git push --force

git reflog

git reset

git push --force

三、擴展

commit參數(shù)

--mixed

--soft

--hard

--amend

GIT介紹

教程

補充知識

前言

文章目錄

一、安裝 git 和 ssh

二、配置公鑰

三、得到公鑰在GitHub配置

四、查看能否通信成功

五、配置郵箱和用戶名

分類

日歷

鏈接

個人資料

二、B端組件庫中的數(shù)據(jù)錄入類組件應(yīng)該如何搭建？如何進行多樣化設(shè)計？

2.3如何進行多樣化設(shè)計？

三、B端組件庫中的反饋類組件應(yīng)該如何搭建？有哪些注意事項？常用的場景有哪些？

四、B端組件庫中的導(dǎo)航類組件應(yīng)該如何搭建？有哪些注意事項？常用的場景有哪些？

五、如何對“數(shù)據(jù)錄入”、“反饋”、“導(dǎo)航”進行C化設(shè)計？

結(jié)語：設(shè)計家，添彩生活

1、已全局安裝vue-cli和nodejs（第一次需要）

3、git遠(yuǎn)程倉庫初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項目托管

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

10、生成項目報告

11、項目優(yōu)化

一、取消上一次commit

三、擴展

二、配置公鑰

三、得到公鑰在GitHub配置

四、查看能否通信成功