分享我做dotnet9博客網站時積累的一些資料

分享我做dotnet9博客網站時積累的一些資料

dotnet9網站用wordpress搭建了兩年,去年開始自學asp.net core mvc,開始了獨立開發網站之路,現在網站前台算是有模有樣了,後台正在開發中

最后更新 2024/10/26 上午10:12
沙漠尽头的狼
预计阅读 12 分钟
分类
課程
标签
.NET C# ASP.NET Core 開源 開源博客

从 2019 年使用WordPress搭建Dotnet9 网站,到现在手撸代码开发,介绍中间使用的一些资源,绝无保留,希望对大家有用。

1. 申請域名、搭建 wordpress 網站

時間點:2019 年 11 月

申请Dotnet9域名,讲个实话,站长是从 Dotnet1 试到 Dotnet9 的,前面 8 个都被注册了,哈哈。

网站使用WordPress的第三方收费主题JustNews 主题搭建:

justnews 主題專為博客、自媒體、資訊類的網站設計開發,自適應兼容手機、平板設備,支持前端用戶中心,可以前端發布/投稿文章,同時主題支持專題功能,可以添加文章專題。

1.1經典風格

  • 演示地址:http://demo.wpcom.cn/justnews/

這種風格挺適合技術類網站,內容比較緊湊,一眼展示內容較多。

Just News经典风格

1.2風格二

  • 演示地址:http://demo.wpcom.cn/justnews2/

這種風格是站長去年之前一直選用的風格,用了將近 2 年,看著比較大氣,貌似沒有保留網站最後的截圖,還是上演示截圖吧。

Just News风格二

2. 開始調研網站開發技術棧

時間點:2021 年 10 月

这是一个重要时间点,前面两年站长基本就是在维护上面的WordPress搭建的网站。

关注Dotnet9 网站的网友也经常问我,这个网站是用什么语言开发的,是否开源,想学习一下怎么开发网站。

陸陸續續站長也有自己開發網站的想法,但一直未付諸行動,畢竟自己技術棧主要在 c/s,b/s 也只是偶爾客串。

所以这个时候就开始调研网站开发技术栈,这首先就选择了Flutter Web,并参考油管一些视频做了个首页展示:

  • 源碼:https://github.com/dotnet9/lequ/tree/main/src/flutter_blog

選擇 flutter web,因為站長在公司也在調研 flutter 開發 mac 項目,另一個就是為了它的跨平台特性,為了後面做桌面和 app 鋪路,但目前 flutter web 是還不太成熟的:

目前最不適合選用的技術,首次加載 2mb 左右的 flutter js 庫,2、30 秒加載白屏等待,有做 seo 的第三方插件,但不成熟,就和選 flutter 做桌面一樣,需要再等等...

3. 使用 asp.net core mvc + bootstrap 開發網站

時間點:2021 年 12 月

源碼:https://github.com/dotnet9/lequ/tree/main/src/dotnet_blog

這應該是最適宜做需要 seo 類型的網站選用的技術棧,個人感覺單體就好。

站长以前做 B/S,要么只做ASP.NET Core Web API,或者加上前端 Vue(vue-element-admin),React(Ant Design Prop),ASP.NET Core MVC是还没有接触过的,所以全网找视频学习。

怀着找有现成博客代码的教学视频目标,在百度、谷歌找了个遍,终于找到了一个视频网址:udemy.com,这个网址有不少同学在上面学习过吧,全球的教学视频都有,中文、英文、其他语言:

udemy学习网站

我找到了一个土耳其老师的视频,正好是使用ASP.NET Core MVC 5教授博客网站开发,正好对我路子,当时花了 19.9$来着,还是有点小贵,不过学到了真东西,他基本使用的三层架构开发的,建议初学 MVC 的同学可以看看,这里发截图和链接不是推荐买哈,后面我接着讲。

  • 視頻連結:https://www.udemy.com/course/kurumsal-mimaride-mvc5-ile-blog-projesi-gelistirelim/

博客开发视频教程

当然站长不全是按他的教学视频做,有些代码也参考了老张的Blog.Core开发的,建议收藏老张的博客园,有兴趣的同学可以看看他的博客,站长 18 年底开始看的老张博客入门的 B/S 开发,这应该是全网最全的 B/S 入门系列教程了:.NET CORE Web API + Vue:

老张的哲学

站长在看土耳其老师的视频和参考老张的Blog.Core做了一个版本的博客前台展示后,在油管发现了土耳其老师的账号,他新开了一个视频系列,也是讲解 ASP.NET CORE MVC 5.0 开发博客系统,只是主题不同,使用的技术可能更新了,有 150 集,站长追了 80 几集,后面没看了,和前面收费的类似,有需求的朋友可不用买收费视频(当然支持是可以的),直接看他最新的博客开发视频学习吧。

  • 視頻地址:https://www.youtube.com/watch? v=hxkndub06iw&list=plknjbhu2xxnnkinavhpqpzg0ubaln63ci

油管免费博客开发视频教程

語言不是障礙哈,油管可以做語言翻譯,站長有時是 2 倍速觀看,邊看邊敲代碼學習,食用效果更佳。

4. abp vnext + blazor server 開發

時間點:2022 年 01 月

站長在前面學習 mvc 的過程中,已經把前台做了個大概了,有主題切換、多語言切換。

在 2022 年 01 月,站长公司有个项目,有使用 Abp vNext + Blazor Server 开发项目的需求,遂在公司学习技术,晚上加班加点用新学的技术练手做Dotnet9网站前台,

源碼:https://github.com/dotnet9/Dotnet9/tree/abp-blazor-server

學習地址:https://docs.abp.io/en/abp/latest/Tutorials/Part-1? ui=blazorserver&db=ef

總結:

Abp vNext 太重了,Hello World运行内存 400MB 左右,个人手撸 CRUD 比较费时,即使有代码生成器,也不应该选用这种方式做博客网站。

但不妨礙大家使用 abp vnext 開發企業級項目哈,社區有不少 abp vnext 的開源項目,大家可關注這個 github 帳號: EasyAbp Team

  • EasyAbp Team:https://github.com/EasyAbp

EasyAbp Team

5. 純用 blazor server 開發網站

時間點:1 月~2 月

纯用Blazor Server开发的网站

上面未再用 abp vnext 做個人項目的原因已經提了個人觀點,所以從 blazor server hello word 開始又重新搭建網站了。

blazor 組件庫使用的 masa blazor:https://masa-blazor-docs-dev.lonsid.cn/

Masa Blazor

與第 4 版 abp vnext 集成的 blazor server 相比,當時是工作需要練手選擇的。這次選原生的 blazor server,對做.net 的我來說,應該是僅次於 mvc 的選擇吧。

说实话,找工作靠 Blazor 可能性是很小的,但个人玩是非常爽的,这里学习 Blazor 可看下站长当时翻译的一个台湾小哥的系列文章:学 Blazor,站长用 Blazor 这个版本还写了 2 个在线小工具,上线了一段时间,代码可参考:

Blazor在线Ico转换工具

Blazor时间戳在线转换工具

後面也沒有繼續堅持選擇 blazor server 開發個人網站,站長主要有這個考量:blazor 使用的 signalr 做長連接,實時性較好,但對客戶端網絡要求較高,網絡稍差,可能就與伺服器斷開了連接,對用戶使用體驗影響較大,站長也不想繼續折騰下去,所以後面又選擇了 mvc 開發個人網站。

小插曲:當時中間有用 .net core web api 搭配 vue 開發網站,因為老張的新書上市了,站長上手買了一本,跟著做了後端和前台首頁,嘗了個鮮,前後端分離,前端 vue 比較熟用起來也很爽,稍微有點麻煩,沒有 mvc 利索。

6. 現在的開發版本(2022年5月)

時間點:2022 年 03 月至今(2022 年 05 月 03 號)

第一次上線時間:2022 年 04 月 01 號

源碼:https://github.com/dotnet9/Dotnet9

Dotnet9网站源码仓库

折騰回 mvc 做網站,現在網站前台基本成型了,前台前端在網上扒的一個主題,後面考慮在淘寶付費找個設計師美化一下:

首頁:

Dotnet9网站首页

专辑之一:开源 WPF

Dotnet9网站专辑

分类之一:Blazor

Dotnet9网站分类

文章之一:ASP.NET Core 可视化日志组件使用

Dotnet9网站文章详情页

前台使用的ASP.NET Core MVC开发,ORM 使用的 EF Core,MVC 可以得到完美的 SEO 支持,再也不用担心百度、谷歌的收录问题了。

网站数据做了个数据种子,目前每次有更新需要删库、重新初始化,后台正在开发中,参考的Panda这个项目正在做后台,后台前端使用的 Vue 3.0 + Element Plus:

  • Panda:https://github.com/coolqingcheng/Panda

开源项目Panda仓库

最後來個後台前端動圖結束本文:

开源项目Panda后台前端

7. 2023 年 3 月 11 號更新

目前網站正在進行新一輪的重構,前台展示效果如下:

首頁:

首页

詳情頁:

详情页

參考項目:

  • 前台前端:https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-blog
  • 後台前端:https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-admin
  • 後端:https://github.com/yangzhongke/NETBookMaterials/tree/main/%E6%9C%80%E5%90%8E%E5%A4%A7%E9%A1%B9%E7%9B%AE%E4%BB%A3%E7%A0%81/YouZack-VNext

dotnet9 網站項目:

  • 前台前端(vue 3 + element plus):https://github.com/dotnet9/Dotnet9/tree/develop/src/dotnet9-web-vue3
  • 後台前端(vue 2 + element ui):https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.Web/dotnet9-adminvue
  • 後端(asp.net core 7.0 web api):https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.WebAPI

8. 2023 年 5 月 3 號更新

前台由 Vue 3 换回ASP.NET Core Razor Pages,风格以简约为主,主打内容为王,放弃花哨,网友称风格类似早期博客园,站长其实买的杨青青个人博客(https://www.yangqq.com/)的静态模板;后端采用MASA Framework 搭建,框架地址是 https://www.masastack.com/framework,后端依然以DDD设计为开发指导,这次加入了CQRS。开发总体规划是:后端框架采用MASA Framework 应该是不变了,并且前后台现在全面拥抱了 .NET 8。

怎麼又重構了?

隨著技術的不斷發展,網站的重構已經成為了一個必然的趨勢。為了更好地滿足個人學習的需求,提高網站的性能和用戶體驗,dotnet9 網站進行了新一輪的重構。本次重構主要包括前台和後台兩個方面。

前台重構

技術棧:asp.net core 8.0 razor pages

在前台方面,Dotnet9 网站将原来的 Vue 3 换回了 Razor Pages 。这是因为 Vue 3 虽然有很多优点,但是在性能和 SEO 方面还存在一些问题。而 Razor Pages 则更加适合于构建前台网站(服务端渲染),具有更好的性能和 SEO 优化效果。

同時,dotnet9 網站在風格上也進行了一些調整。網站的風格以簡約為主,放棄了過多的花哨效果,更加注重內容的呈現。這種風格類似於早期的博客園,讓用戶更加專注於閱讀和學習。

後台重構

技術棧:asp.net core 8.0 web api (masa framework + ef core 8.0(postgresql), ddd + cqrs)

在后台后端方面,Dotnet9 网站采用了 MASA Framework 作为开发框架。MASA Framework 是.NET 下一代微服务开发框架, 助力开发者和企业开启全新的现代化应用开发交付体验。

在開發設計上,dotnet9 網站依然採用了 ddd(領域驅動設計)的思想實踐。這種設計思想可以幫助開發者更好地理解業務需求,將業務邏輯和技術實現分離開來,從而提高代碼的可維護性和可擴展性。

此外,Dotnet9 网站还加入了 CQRS(命令查询职责分离)的设计模式,由 MASA Framework 提供技术支持。CQRS 是一种与领域驱动设计(DDD)和事件溯源相关的架构模式,它将事件(Event)划分为 命令端(Command)和 查询端(Query),可以提高系统的性能和可扩展性。在 Dotnet9 网站中,博客文章的查询就使用了查询(Query),文章阅读统计(开发中)使用了命令(Command)。

小結

dotnet9 網站的重構,不僅提高了網站的性能和用戶體驗,還採用了最新的技術和設計思想,使得網站更加具有可維護性和可擴展性。在未來的發展中,dotnet9 網站將繼續秉承這種理念,不斷優化和改進,為用戶提供更好的服務,當然主要以個人學習、不斷演進為主。

成果展示

首頁:

首页

文章專輯:

文章专辑

文章詳情:

文章详情

源碼

這次把歷史分支也做了清理,只保留 develop 和 main 分支。

倉庫:https://github.com/dotnet9/dotnet9

解決方案結構如下:

解决方案结构

前台主工程:dotnet9.razorpages

Dotnet9.RazorPages

後端主工程:dotnet9.service

Dotnet9.Service

  1. dotnet9.commons:工具庫
  2. dotnet9.contracts:暫時放 dto 類
  3. dotnet9.razorpages:前台主工程,逐步完善
  4. dotnet9.service:後端主工程,暫時將各種分層文件放一個工程,有需要再分庫
  5. dotnet9.admin:後台前端暫定

等網站開發完成,寫個 dotnet9 網站前後台開發系列教程分享,不是今年,就是明年....

9. 2024年7月

ant design風格重構,源碼地址:htts://github.com/dotnet9/codewf:

  1. 採用blazor靜態ssr;
  2. 沒有資料庫,核心數據本地讀取、加載內存使用,所以沒有後台

在線瀏覽:htts://dotnet9.. com

訪問速度有沒有飛一般的感覺:

本文持續更新,歡迎關注。

Keep Exploring

延伸阅读

更多文章
同标签 2024/12/5

avalonia 國際化之路:resx 資源文件的深度應用與探索

在當今全球化的軟體開發浪潮中,應用的國際化(i18n)與本地化(l10n)顯得尤為重要。avalonia ui 作為一款強大的跨平台 ui 框架,為開發者提供了多種實現國際化的途徑。其中,使用傳統的 resx 資源文件進行國際化處理,不僅兼容了原 winform、wpf、asp.net core 等開發場景下的使用習慣,還藉助一些實用工具和特定的開發流程,讓國際化的實現變得高效且有條理。

继续阅读
同标签 2024/6/20

codewf.eventbus:輕量級事件總線,讓通信更流暢

codewf.eventbus,一款靈活的事件總線庫,實現模塊間解耦通信。支持多種.net項目類型,如wpf、winforms、asp.net core等。採用簡潔設計,輕鬆實現命令的發布與訂閱、請求與響應。通過有序的事件處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。

继续阅读
同标签 2024/1/19

基於 .net 的 fluentvalidation 驗證教程

fluentvalidation 是一個基於 .net 開發的驗證框架,開源免費,而且優雅,支持鏈式操作,易於理解,功能完善,還是可與 mvc5、webapi2 和 asp.net core 深度集成,組件內提供十幾種常用驗證器,可擴展性好,支持自定義驗證器,支持本地化多語言。

继续阅读