整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ootstrap 5.0正式發(fā)布了，帶來(lái)了很多亮點(diǎn)，還學(xué)得動(dòng)嗎？
Bootstrap 是前些年十分流行，當(dāng)前比較流行的前端框架，由國(guó)內(nèi)上不了的推特出品，基于 css / html / javascript 提供了簡(jiǎn)潔的api，以及更為完善的人性化的網(wǎng)站風(fēng)格，并兼容大多數(shù) jQuery 插件。。特點(diǎn)是上手簡(jiǎn)單靈活，當(dāng)年一經(jīng)推出，受到了大量前端開(kāi)發(fā)者的青睞，極大地加快了 web 開(kāi)發(fā)的速度，是 web 前端開(kāi)發(fā)人員的一個(gè)重要工具。
bootstrap5 官網(wǎng)截圖
歷經(jīng)了4個(gè)大版本的更新，如今 Bootstrap 5.0 正式版也正式發(fā)布了，帶來(lái)很多新特性：
在移動(dòng)互聯(lián)網(wǎng)剛剛興起的那些年，前端沒(méi)有現(xiàn)在那么多工具，Bootstrap 可謂一騎絕塵，移動(dòng)優(yōu)先的自適應(yīng)布局，配合 jQuery，還有成千上萬(wàn)的漂亮主題，能快速地搭建非常美觀健壯的 web 應(yīng)用。前不久 Bootstrap 還發(fā)布了官方的開(kāi)源圖標(biāo)庫(kù) Bootstrap Icons，同樣都是非常優(yōu)秀的開(kāi)源項(xiàng)目。
bootstrap 主題
Bootstrap 5.0 作為傳統(tǒng)的 css / html / js 框架，使用也很簡(jiǎn)單，無(wú)需去學(xué)習(xí) vue.js 那些數(shù)據(jù)綁定視圖的原理，可以直接引入，也可以通過(guò) npm 安裝，即使是使用 PHP 或 Java 的后端開(kāi)發(fā)者，也可以快速地通過(guò)官網(wǎng)文檔上手。
要想明白這個(gè)問(wèn)題，只要考慮幾個(gè)問(wèn)題就行了。
非常不建議。因?yàn)?Bootstrap 是操作 dom 的，而 vue 都是虛擬的 dom，一起搭配使用會(huì)很容易導(dǎo)致很多問(wèn)題。vue 生態(tài)有很多很優(yōu)秀的 UI 組件庫(kù)，之前也推薦過(guò)很多，可以翻翻以前的文章，pc / 移動(dòng)端，admin 應(yīng)有盡有。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開(kāi)發(fā)的，在 GitHub 上發(fā)布的開(kāi)源產(chǎn)品，基于 MIT 開(kāi)源協(xié)議，所有個(gè)人、公司和組織都可以下載使用，免費(fèi)用于商業(yè)項(xiàng)目。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開(kāi)源、免費(fèi)商用的資源。
↓↓點(diǎn)【了解更多】查看本次分享的網(wǎng)址。
、 開(kāi)發(fā)第一個(gè)Blazor Server程序
2、 Blazor Server程序的特點(diǎn)
3、 Blazor Server程序的目錄結(jié)構(gòu)
4、 Blazor Server程序的發(fā)布
Blazor 是一個(gè)使用 .NET 生成交互式客戶端 Web UI 的框架：
· 使用 C# 代替 JavaScript 來(lái)創(chuàng)建豐富的交互式 UI。
· 共享使用 .NET 編寫(xiě)的服務(wù)器端和客戶端應(yīng)用邏輯。
· 將 UI 呈現(xiàn)為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動(dòng)瀏覽器。
使用 .NET 進(jìn)行客戶端 Web 開(kāi)發(fā)可提供以下優(yōu)勢(shì)：
· 使用 C# 代替 JavaScript 來(lái)編寫(xiě)代碼。
· 利用現(xiàn)有的 .NET 庫(kù)生態(tài)系統(tǒng)。
· 在服務(wù)器和客戶端之間共享應(yīng)用邏輯。
· 受益于 .NET 的性能、可靠性和安全性。
· 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
· 以一組穩(wěn)定、功能豐富且易用的通用語(yǔ)言、框架和工具為基礎(chǔ)來(lái)進(jìn)行生成。
開(kāi)發(fā)第一個(gè)Blazor Server程序，效果如下：
準(zhǔn)備工作：
1. Visual Studio 2019
2. .NET 5.0
打開(kāi)VS2019，選擇“創(chuàng)建新項(xiàng)目”：
然后，選擇“Blazor Server 應(yīng)用”：
點(diǎn)擊“下一步”：
填寫(xiě)“項(xiàng)目名稱”，選擇項(xiàng)目保存在的文件夾位置，點(diǎn)擊“下一步”：
目標(biāo)框架選擇最新的“.Net 5.0”，身份驗(yàn)證選擇“無(wú)”，點(diǎn)擊“創(chuàng)建”：
這樣，第一個(gè)Blazor server程序就創(chuàng)建好了，點(diǎn)擊工具欄中的運(yùn)行IIS Express，看看效果：
是不是很簡(jiǎn)單？如果您有云服務(wù)器，就可以發(fā)布上去了，您就擁有了開(kāi)發(fā)一個(gè)網(wǎng)站的能力。
Blazor Server程序的特點(diǎn)：
Blazor Server程序的頁(yè)面渲染是在服務(wù)端，通過(guò)SignalR反應(yīng)到客戶端，客戶端瀏覽器無(wú)需下載大量的運(yùn)行環(huán)境dll，只下載wwwroot下的有關(guān)內(nèi)容，這樣頁(yè)面反應(yīng)迅速，但前提是要求網(wǎng)絡(luò)連接要相對(duì)穩(wěn)定，不能斷網(wǎng)。
客戶端的每次操作，如點(diǎn)擊，選擇等都會(huì)通過(guò)網(wǎng)絡(luò)與服務(wù)器進(jìn)行交互。
對(duì)于客戶端瀏覽器的處理速度也沒(méi)有多大關(guān)系，性能差一點(diǎn)也可以忍受。
Blazor Server服務(wù)器要保存每個(gè)連接客戶端的狀態(tài)信息，對(duì)于服務(wù)器內(nèi)存要求較高。
Blazor Server 程序的目錄結(jié)構(gòu)：
1. wwwroot放了網(wǎng)站的靜態(tài)資源如css、js、image文件；
2. Data文件夾存放數(shù)據(jù)、服務(wù)及其他相關(guān)類，當(dāng)然可以放到其他目錄；
3. Page是應(yīng)用程序的razor頁(yè)面，當(dāng)然可以放到其他目錄；
4. Shared文件夾存放公共的razor頁(yè)面，當(dāng)然可以放到其他目錄；
5. _import.razor是應(yīng)用程序引用的命名空間，也不是所有的命名空間都必須要寫(xiě)到里面；
6. _Host.cshtml是主頁(yè)加載頁(yè)面，相當(dāng)于網(wǎng)站的默認(rèn)主頁(yè)index.html；
7. App.razor是應(yīng)用程序的啟動(dòng)路由頁(yè)面，里面規(guī)定了默認(rèn)Layout；
8. appsetting.json是應(yīng)用程序的默認(rèn)配置文件；
9. program.cs是程序的入口，目的是創(chuàng)建IHostBuilder并啟動(dòng)它；
10. startup.cs非常重要，里面配置了應(yīng)用程序的服務(wù)類，及需要的功能及中間件，應(yīng)用程序的核心功能都要通過(guò)里面進(jìn)行配置。
Startup.cs：
public void ConfigureServices(IServiceCollection services)
里面配置應(yīng)用程序需要的服務(wù)。
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
里面設(shè)置應(yīng)用程序需要的功能、中間件處理管道。
App.razor：
App.razor定義了程序的全局路由，當(dāng)客戶端請(qǐng)求路由正確時(shí)，則會(huì)執(zhí)行<Found></Found>節(jié)點(diǎn)，DefaultLayout="@typeof(MainLayout)"則規(guī)定了默認(rèn)布局模板。當(dāng)客戶端請(qǐng)求路由不正確時(shí)，則會(huì)執(zhí)行<NotFound></NotFound>節(jié)點(diǎn)在頁(yè)面輸出錯(cuò)誤信息“Sorry, there's nothing at this address.”
_Host.cshtml
此文件相當(dāng)于一般網(wǎng)站的index.html文件，默認(rèn)加載的頁(yè)面，里面有razor組件需要裝載的位置：
<component type="typeof(App)" render-mode="ServerPrerendered" />
裝載App.razor里面的默認(rèn)Layout：MainLayout.razor，MainLayout.razor又加載了路由為“/”的razor頁(yè)面，默認(rèn)是Index.razor頁(yè)面。
_Host.cshtml頁(yè)面還可以注入一些代碼，來(lái)獲取一些請(qǐng)求參數(shù)，后面我會(huì)詳細(xì)介紹。
MainLayout.razor
默認(rèn)建立的MainLayout.razor頁(yè)面如下：
里面的<NavMenu>是一個(gè)導(dǎo)航菜單組件，@Body標(biāo)記是導(dǎo)航頁(yè)面要加載的位置。從上面運(yùn)行的效果看，頁(yè)面左側(cè)是NavMenu導(dǎo)航菜單，右側(cè)上部是一個(gè)About連接，下部為頁(yè)面加載的區(qū)域。點(diǎn)擊左側(cè)菜單后加載的頁(yè)面都加載到@Body標(biāo)記的位置。
Blazor Server程序的發(fā)布：
Blazor應(yīng)用程序需要發(fā)布后才能脫離開(kāi)發(fā)環(huán)境運(yùn)行，在vs開(kāi)發(fā)環(huán)境中，右鍵我們建立的FirstBlazorServer項(xiàng)目，點(diǎn)擊“發(fā)布…”：
我們點(diǎn)擊“文件夾”，下一步，確定您要發(fā)布的文件夾位置：
瀏覽您要發(fā)布的文件夾，點(diǎn)擊“完成”：
發(fā)布前，我們要更改幾個(gè)選項(xiàng)，配置：Release，目標(biāo)框架：net5.0，部署模式：獨(dú)立，目標(biāo)運(yùn)行時(shí)：win-x64，更改好后，點(diǎn)擊“發(fā)布”按鈕。
發(fā)布完成后，系統(tǒng)會(huì)生成一堆文件，把這一堆文件復(fù)制到你的網(wǎng)站上即可運(yùn)行，是不是很簡(jiǎn)單？
別忘了您可能需要修改里面的配置文件：appsettings.json，因?yàn)榇宋募谐绦蜻\(yùn)行的一些參數(shù)，如：系統(tǒng)運(yùn)行參數(shù)，數(shù)據(jù)庫(kù)連接參數(shù)等，后面課程會(huì)詳細(xì)介紹。
在做 Web 開(kāi)發(fā)，很多開(kāi)發(fā)者都會(huì)選擇用 Java 和 SpringBoot 框架，畢竟已經(jīng)相對(duì)成熟并且可擴(kuò)展性也非常好，但確實(shí)很少看到開(kāi)發(fā)者使用 C# 和 .NET 進(jìn)行 Web 開(kāi)發(fā)。
今天 Gitee 推薦的開(kāi)源項(xiàng)目便是一個(gè)使用 .NET 生成交互式客戶端 Web UI 的框架，如果你想學(xué)習(xí)學(xué)習(xí)的話不妨接著往下看。
項(xiàng)目名稱：BootstrapBlazor
項(xiàng)目作者：Longbow
開(kāi)源許可協(xié)議：LGPL-3.0
項(xiàng)目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Blazor 是一個(gè)使用 .NET 生成交互式客戶端 Web UI 的框架：
使用 .NET 進(jìn)行客戶端 Web 開(kāi)發(fā)可提供以下優(yōu)勢(shì)：
本項(xiàng)目是利用 Bootstrap 樣式進(jìn)行封裝的 UI 組件庫(kù)。
Blazor應(yīng)用基于組件。 Blazor 中的組件是指 UI 元素，例如頁(yè)面、對(duì)話框或數(shù)據(jù)輸入窗體。
組件是內(nèi)置到 .NET 程序集的 .NET 類，用來(lái)：
目前這個(gè)項(xiàng)目仍然在不斷地完善中， 如果你想?yún)⑴c進(jìn)來(lái)，或者想看看這個(gè)項(xiàng)目更詳細(xì)的情況，那就點(diǎn)擊下方的了解更多去項(xiàng)目主頁(yè)看看吧！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
