基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
作者:互联网
系列文章
- 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客?
- 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目
- 基于.NetCore开发博客项目 StarBlog - (3) 模型设计
- 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入
- 基于.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代码~
到这写页面的准备工作就完成了,后面就是把页面一个个写完~
标签:node,Web,dist,name,NetCore,modules,StarBlog 来源: https://www.cnblogs.com/deali/p/16276448.html