天天看点
返回

基于.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) 为什么需要自己写一个博客？

继续阅读