基于.NetCore開(kāi)發(fā)博客項(xiàng)目 StarBlog - (5) 開(kāi)始搭建Web項(xiàng)目
系列文章
基于.NetCore開(kāi)發(fā)博客項(xiàng)目 StarBlog - (1) 為什么需要自己寫(xiě)一個(gè)博客？ 基于.NetCore開(kāi)發(fā)博客項(xiàng)目 StarBlog - (2) 環(huán)境準(zhǔn)備和創(chuàng)建項(xiàng)目 基于.NetCore開(kāi)發(fā)博客項(xiàng)目 StarBlog - (3) 模型設(shè)計(jì) 基于.NetCore開(kāi)發(fā)博客項(xiàng)目 StarBlog - (4) markdown博客批量導(dǎo)入 基于.NetCore開(kāi)發(fā)博客項(xiàng)目 StarBlog - (5) 開(kāi)始搭建Web項(xiàng)目 ...
前言
距離本系列的上一篇文章發(fā)布有段時(shí)間了，最近被一個(gè)培訓(xùn)活動(dòng)整得身心俱疲，休息了一個(gè)周末好不容易才緩過(guò)來(lái)，趕緊繼續(xù)來(lái)更新博客~
經(jīng)過(guò)了前面的模型設(shè)計(jì)、博客數(shù)據(jù)導(dǎo)入之后，我們項(xiàng)目的準(zhǔn)備工作已經(jīng)基本完成，可以開(kāi)始來(lái)做網(wǎng)站了，本文將記錄StarBlog博客的AspNet.Core Web項(xiàng)目的搭建過(guò)程。
回顧一下
先來(lái)回顧一下，我們的Web項(xiàng)目是MVC類(lèi)型的項(xiàng)目，作為博客的前臺(tái)，本項(xiàng)目使用后端渲染頁(yè)面以方便SEO，也就是博客網(wǎng)站這部分是前后端不分離的寫(xiě)法。
整理項(xiàng)目
打開(kāi)我們之前創(chuàng)建的好的AspNetCore Web項(xiàng)目StarBlog.Web，模板生成的默認(rèn)目錄結(jié)構(gòu)類(lèi)似這樣：
StarBlog.Web
├──?Controllers
│???└──?HomeController.cs
├──?Models
│???└──?ErrorViewModel.cs
├──?Properties
│???└──?launchSettings.json
├──?Views
│???├──?Home
│???├──?Shared
│???├──?_ViewImports.cshtml
│???└──?_ViewStart.cshtml
├──?wwwroot
│???├──?css
│???├──?js
│???├──?lib
│???└──?favicon.ico
├──?Dockerfile
├──?Program.cs
├──?StarBlog.Web.csproj
├──?appsettings.Development.json
└──?appsettings.json
可以看到它自動(dòng)生成了一堆東西，有些我們不需要，有些可以利用起來(lái)的，先來(lái)整理一下吧。
wwwroot目錄中的靜態(tài)資源是不需要的，模板自帶的bootstrap啥的也不適合放進(jìn)git，后面我們自己用NPM來(lái)管理靜態(tài)資源，所以把wwwroot目錄下的文件都刪了。
Views里的是頁(yè)面模板，里面代碼是要全部重寫(xiě)的，先留著，后面直接重寫(xiě)就行。
Models里的ErrorViewModel.cs沒(méi)用上，可以刪了~
暫時(shí)先這樣，來(lái)進(jìn)行下一步了。
引入NPM管理前端資源
據(jù)說(shuō)在.Net Framework時(shí)代，前端資源甚至能通過(guò)nuget來(lái)管理，不過(guò)包太少了，更新也跟不上NPM，所以現(xiàn)在.Net Core時(shí)代已經(jīng)廢棄了，我之前也寫(xiě)了一篇博客詳細(xì)介紹使用NPM和Gulp來(lái)管理AspNetCore Web項(xiàng)目的靜態(tài)資源，可以作為本文這部分的擴(kuò)展閱讀：Asp-Net-Core開(kāi)發(fā)筆記：使用NPM和gulp管理前端靜態(tài)文件
這部分依賴(lài)于node環(huán)境，如果本地沒(méi)有安裝node環(huán)境，請(qǐng)先在官網(wǎng)下載安裝：https://nodejs.org/en/download/
在StarBlog.Web項(xiàng)目的目錄下執(zhí)行命令初始化node項(xiàng)目（主要就是為了生成package.json文件）
npm?init
然后直接編輯package.json文件添加依賴(lài)
{
??"devDependencies":?{
????"gulp":?"^4.0.2",
????"gulp-changed":?"^4.0.3",
????"gulp-clean-css":?"^4.3.0",
????"gulp-concat":?"^2.6.1",
????"gulp-rename":?"^2.0.0",
????"gulp-uglify":?"^3.0.2",
????"rimraf":?"^3.0.2"
??},
??"dependencies":?{
????"@fortawesome/fontawesome-free":?"^6.0.0",
????"bootstrap":?"^5.1.3",
????"bootswatch":?"^5.1.3",
????"editor.md":?"^1.5.0",
????"jquery":?"^3.6.0",
????"masonry-layout":?"^4.2.2",
????"vue":?"^2.6.14"
??}
}
這些是本項(xiàng)目需要用到的前端依賴(lài)，一股腦加進(jìn)去之后，執(zhí)行命令一鍵安裝依賴(lài)
npm?install
到這NPM管理前端資源的使命就結(jié)束了。
使用前端自動(dòng)化工具Gulp
接下來(lái)要解決一個(gè)問(wèn)題，NPM安裝的依賴(lài)都在node_modules目錄下，要怎么把這些資源放到wwwroot目錄下呢？手動(dòng)復(fù)制粘貼？no，這也太麻煩了，前端工具鏈中為我們提供了更方便的生產(chǎn)力工具——Gulp。
關(guān)于Gulp的介紹可以看我之前的這篇博客：Asp-Net-Core開(kāi)發(fā)筆記：使用NPM和gulp管理前端靜態(tài)文件
這里就不重復(fù)了，直接安裝：
npm?install?--global?gulp-cli
然后在StarBlog.Web目錄下新建gulpfile.js文件，內(nèi)容比較長(zhǎng)，我就不全部貼出來(lái)了，全部代碼可以在GitHub查看到：https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/gulpfile.js
這里貼一下關(guān)鍵的配置
//?使用?npm?下載的前端組件包
const?libs?=?[
????{name:?"jquery",?dist:?"./node_modules/jquery/dist/**/*.*"},
????{name:?"popper",?dist:?"./node_modules/popper.js/dist/**/*.*"},
????{name:?"bootstrap",?dist:?"./node_modules/bootstrap/dist/**/*.*"},
????{name:?"bootswatch",?dist:?"./node_modules/bootswatch/dist/**/*.*"},
????{name:?"prismjs",?dist:?"./node_modules/prismjs/**/*.*"},
????{name:?'vue',?dist:?'./node_modules/vue/dist/**/*.*'},
????{name:?'masonry-layout',?dist:?'./node_modules/masonry-layout/dist/*.*'},
];
//?使用?npm?下載的前端組件，自定義存放位置
const?customLibs?=?[
????{name:?"editormd",?dist:?"./node_modules/editor.md/*.js"},
????{name:?"editormd/css",?dist:?"./node_modules/editor.md/css/*.css"},
????{name:?"editormd/lib",?dist:?"./node_modules/editor.md/lib/*.js"},
????{name:?"editormd/examples/js",?dist:?"./node_modules/editor.md/examples/js/*.js"},
????{name:?'font-awesome',?dist:?'./node_modules/@fortawesome/fontawesome-free/**/*.*'},
]
搞定，我們配置的是把前端依賴(lài)復(fù)制到wwwroot/lib目錄下
之后執(zhí)行命令
gulp?move
搞定~
如果覺(jué)得每次添加前端依賴(lài)之后還得敲命令麻煩的話，可以看我之前這篇配置gulp的博客，在IDE里配置一下，以后點(diǎn)一下就行。
修改 _Layout 模板
前端資源都準(zhǔn)備齊全，接下來(lái)修改一下前端主模板，方便接下來(lái)的寫(xiě)頁(yè)面~
編輯wwwroot/Shared/_Layout.cshtml文件，修改節(jié)點(diǎn)下的引用代碼
<head>
????
????<link?rel="stylesheet"?href="~/lib/bootstrap/dist/css/bootstrap.css">
????<link?rel="stylesheet"?href="~/lib/font-awesome/css/all.css">
????
????
????<link?rel="stylesheet"?href="~/css/features.css">
????<link?rel="stylesheet"?href="~/css/metro.css">
????<link?rel="stylesheet"?href="~/css/footer.css">
????@await?RenderSectionAsync("head",?false)
head>
修改最后面的js引用
<script?src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js">script>
<script?src="~/lib/vue/dist/vue.js">script>
<script?src="~/js/site.js">script>
@await?RenderSectionAsync("bottom",?false)
有些具體的代碼太長(zhǎng)了我就不貼了，涉及到具體功能的時(shí)候我再貼上關(guān)鍵代碼，因?yàn)轫?xiàng)目已經(jīng)基本完成，代碼在GitHub都有，大家可以參考一下GitHub代碼~
到這寫(xiě)頁(yè)面的準(zhǔn)備工作就完成了，后面就是把頁(yè)面一個(gè)個(gè)寫(xiě)完~