<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 基于.NetCore開發博客項目 StarBlog - (5) 開始搭建Web項目

    系列文章

    前言

    距離本系列的上一篇文章發布有段時間了,最近被一個培訓活動整得身心俱疲,休息了一個周末好不容易才緩過來,趕緊繼續來更新博客~

    經過了前面的模型設計、博客數據導入之后,我們項目的準備工作已經基本完成,可以開始來做網站了,本文將記錄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代碼~

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

    posted @ 2022-05-16 11:53  程序設計實驗室  閱讀(788)  評論(4編輯  收藏  舉報
    国产美女a做受大片观看