be based on. NetCore development blog project StarBlog - start building a Web project

Series articles

preface

It's been some time since the last article in this series was published. Recently, I was exhausted by a training activity. I took a weekend off and finally came back. Hurry to update my blog~

After the previous model design and blog data import, the preparation of our project has been basically completed, and we can start to build the website. This paper will record the aspnet of StarBlog blog The construction process of core web project.

Look back

First of all, our Web project is an MVC type project. As the front desk of the blog, this project uses the back-end rendering page to facilitate SEO, that is, the blog website. This part is written in a way that the front and back ends are not separated.

Organize items

Open the good AspNetCore Web project starblog The default directory structure generated by the web template is similar to this:

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

You can see that it automatically generates a pile of things, some we don't need and some we can use. Let's sort them out first.

The static resources in the wwwroot directory are unnecessary. The bootstrap provided by the template is not suitable for git. Later, we use NPM to manage the static resources, so we delete all the files in the wwwroot directory.

The page template in Views needs to be rewritten. Keep it first and then rewrite it directly.

Errorview model in Models CS is useless. You can delete it~

For the time being, let's go to the next step.

Introducing NPM to manage front-end resources

It is said that in In the era of Net Framework, front-end resources can even be managed through nuget, but there are too few packages and updates can't keep up with NPM, so now The era of Net Core has been abandoned. I also wrote a blog to introduce in detail the use of NPM and Gulp to manage the static resources of AspNetCore Web project. It can be read as an extension of this part of this article: Asp net core development notes: using NPM and gulp to manage front-end static files

This part depends on the node environment. If the node environment is not installed locally, please download and install it on the official website first: https://nodejs.org/en/download/

On starblog Execute the command under the directory of the web project to initialize the node project (mainly to generate the package.json file)

npm init

Then edit the package directly Add dependency to JSON file

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

These are the front-end dependencies that need to be used in this project. After adding them, execute the command and install the dependencies with one click

npm install

At this point, NPM's mission of managing front-end resources is over.

Using front-end automation tool Gulp

Next, to solve a problem, NPM installation depends on no de_ In the modules directory, how do you put these resources in the wwwroot directory? Copy and paste manually? It's too much trouble for our front-end tools in the productivity chain, which also provides more convenience for Gulp.

See my previous blog about Gulp: Asp net core development notes: using NPM and gulp to manage front-end static files

Not repeated here. Install directly:

npm install --global gulp-cli

Then on starblog Create a new gulpfile in the web directory JS file, the content is relatively long, so I won't post it all. All the codes can be viewed in GitHub: https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/gulpfile.js

Here's the key configuration

//Front end component package downloaded using # 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/*.*'},
];

// Use the front-end components downloaded by # npm # to customize the storage location
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/**/*.*'},
]

Done. What we configured is to copy the front-end dependencies to the wwwroot/lib directory

Then execute the command

gulp move

Done~

If you think it's troublesome to hit the command after adding front-end dependencies every time, you can see my previous blog on configuring gulp, configure it in the IDE and click it later.

Modification_ Layout template

The front-end resources are fully prepared. Next, modify the front-end main template to facilitate the next page writing~

Edit wwwroot/Shared/_Layout.cshtml file, modify the reference code under the < head > node

<head>
    <!-- Third party dependency -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="~/lib/font-awesome/css/all.css">
    
    <!-- We wrote our own style -->
    <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>

Modify the last js reference

<!-- Third party dependency -->
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/vue/dist/vue.js"></script>
<!-- We wrote it ourselves js -->
<script src="~/js/site.js"></script>
@await RenderSectionAsync("bottom", false)

I won't post some specific codes if they are too long. When it comes to specific functions, I will post key codes again, because the project has been basically completed and the codes are available in GitHub. You can refer to GitHub codes~

The preparation work for writing pages here is completed, and then the pages are written one by one~

Tags: Java Javascript github npm Vue

Posted by Z3RO21 on Tue, 17 May 2022 22:18:39 +0300