天天看點
傳回

基于.NetCore開發部落格項目 StarBlog - (5) 開始搭建Web項目

系列文章

  • 基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格？
  • 基于.NetCore開發部落格項目 StarBlog - (2) 環境準備和建立項目
  • 基于.NetCore開發部落格項目 StarBlog - (3) 模型設計
  • 基于.NetCore開發部落格項目 StarBlog - (4) markdown部落格批量導入
  • 基于.NetCore開發部落格項目 StarBlog - (5) 開始搭建Web項目
  • 基于.NetCore開發部落格項目 StarBlog - (6) 頁面開發之部落格文章清單
  • 基于.NetCore開發部落格項目 StarBlog - (7) 頁面開發之文章詳情頁面
  • 基于.NetCore開發部落格項目 StarBlog - (8) 分類層級結構展示
  • 基于.NetCore開發部落格項目 StarBlog - (9) 圖檔批量導入
  • 基于.NetCore開發部落格項目 StarBlog - (10) 圖檔瀑布流
  • 基于.NetCore開發部落格項目 StarBlog - (11) 實作通路統計
  • 基于.NetCore開發部落格項目 StarBlog - (12) Razor頁面動态編譯
  • 基于.NetCore開發部落格項目 StarBlog - (13) 加入友情連結功能
  • 基于.NetCore開發部落格項目 StarBlog - (14) 實作主題切換功能
  • 基于.NetCore開發部落格項目 StarBlog - (15) 生成随機尺寸圖檔
  • ...

前言

距離本系列的上一篇文章釋出有段時間了，最近被一個教育訓練活動整得身心俱疲，休息了一個周末好不容易才緩過來，趕緊繼續來更新部落格~

經過了前面的模型設計、部落格資料導入之後，我們項目的準備工作已經基本完成，可以開始來做網站了，本文将記錄StarBlog部落格的AspNet.Core Web項目的搭建過程。

回顧一下

先來回顧一下，我們的Web項目是MVC類型的項目，作為部落格的前台，本項目使用後端渲染頁面以友善SEO，也就是部落格網站這部分是前後端不分離的寫法。

整理項目

打開我們之前建立的好的AspNetCore Web項目

StarBlog.Web

，模闆生成的預設目錄結構類似這樣：

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

可以看到它自動生成了一堆東西，有些我們不需要，有些可以利用起來的，先來整理一下吧。

wwwroot

目錄中的靜态資源是不需要的，模闆自帶的bootstrap啥的也不适合放進git，後面我們自己用NPM來管理靜态資源，是以把

wwwroot

目錄下的檔案都删了。

Views

裡的是頁面模闆，裡面代碼是要全部重寫的，先留着，後面直接重寫就行。

Models

裡的

ErrorViewModel.cs

沒用上，可以删了~

暫時先這樣，來進行下一步了。

引入NPM管理前端資源

據說在.Net Framework時代，前端資源甚至能通過nuget來管理，不過包太少了，更新也跟不上NPM，是以現在.Net Core時代已經廢棄了，我之前也寫了一篇部落格詳細介紹使用NPM和Gulp來管理AspNetCore Web項目的靜态資源，可以作為本文這部分的擴充閱讀：Asp-Net-Core開發筆記：使用NPM和gulp管理前端靜态檔案

這部分依賴于node環境，如果本地沒有安裝node環境，請先在官網下載下傳安裝：https://nodejs.org/en/download/

在

StarBlog.Web

項目的目錄下執行指令初始化node項目（主要就是為了生成

package.json

檔案）

npm init

然後直接編輯

package.json

檔案添加依賴

{
  "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"
  }
}

這些是本項目需要用到的前端依賴，一股腦加進去之後，執行指令一鍵安裝依賴

npm install

到這NPM管理前端資源的使命就結束了。

使用前端自動化工具Gulp

接下來要解決一個問題，NPM安裝的依賴都在

node_modules

目錄下，要怎麼把這些資源放到

wwwroot

目錄下呢？手動複制粘貼？no，這也太麻煩了，前端工具鍊中為我們提供了更友善的生産力工具——Gulp。

關于Gulp的介紹可以看我之前的這篇部落格：Asp-Net-Core開發筆記：使用NPM和gulp管理前端靜态檔案

這裡就不重複了，直接安裝：

npm install --global gulp-cli

然後在

StarBlog.Web

目錄下建立

gulpfile.js

檔案，内容比較長，我就不全部貼出來了，全部代碼可以在GitHub檢視到：https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/gulpfile.js

這裡貼一下關鍵的配置

// 使用 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/**/*.*'},
]

搞定，我們配置的是把前端依賴複制到

wwwroot/lib

目錄下

之後執行指令

gulp move

搞定~

如果覺得每次添加前端依賴之後還得敲指令麻煩的話，可以看我之前這篇配置gulp的部落格，在IDE裡配置一下，以後點一下就行。

修改 _Layout 模闆

前端資源都準備齊全，接下來修改一下前端主模闆，友善接下來的寫頁面~

編輯

wwwroot/Shared/_Layout.cshtml

檔案，修改

<head>

節點下的引用代碼

<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>
<!-- 我們自己寫的js -->
<script src="~/js/site.js"></script>
@await RenderSectionAsync("bottom", false)

有些具體的代碼太長了我就不貼了，涉及到具體功能的時候我再貼上關鍵代碼，因為項目已經基本完成，代碼在GitHub都有，大家可以參考一下GitHub代碼~

到這寫頁面的準備工作就完成了，後面就是把頁面一個個寫完~

微信公衆号：「程式設計實驗室」

專注于網際網路熱門新技術探索與團隊靈活開發實踐，包括架構設計、機器學習與資料分析算法、移動端開發、Linux、Web前後端開發等，歡迎一起探讨技術，分享學習實踐經驗。

asp.netcore StarBlog部落格開發筆記
上一篇: 華為這一波操作可以的，在HUAWEIMate50系列及全場景秋季新品釋出會上推出了桌上型電腦領域新品——華為MateStat
下一篇: 基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格？

繼續閱讀