.NET 个人博客-首页排版优化-2

  • .NET 个人博客-首页排版优化-2已关闭评论
  • 97 次浏览
  • A+
所属分类:.NET技术
摘要

原本这篇文章早就要出了的,结果之前买的服务器服务商跑路了,导致博客的数据缺失了部分。我是买了一年的服务器,然后用了3个月,国内跑路云太多了,然后也是花钱重新去别的服务商买了一台服务器,这次只买了一个月,先试试水。


个人博客-首页排版优化-2

原本这篇文章早就要出了的,结果之前买的服务器服务商跑路了,导致博客的数据缺失了部分。我是买了一年的服务器,然后用了3个月,国内跑路云太多了,然后也是花钱重新去别的服务商买了一台服务器,这次只买了一个月,先试试水。

优化计划

本篇文章优化历史文章

实现思路

页面数据代码

public async Task<IActionResult> Index() {     HomeViewModel homeView = new HomeViewModel()     {         FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),         FeaturedCategories = _fCategoryService.GetFeaturedCategories(),         TopPost =await _TopPostService.GetTopOnePostAsync(),         FeaturedPosts = await _PostService.GetFeaturedPostsAsync(new QueryParameters         {             Page = 1,             PageSize = 8,         }),         Links = await _linkService.GetAll(),         Notices = await _noticeService.GetAllAsync(),         HomePost = await _articelsService.HomePostAsync(),     };     return View(homeView); } 

把FeaturedPosts中的PageSize参数8改为4,让推荐文章只展示4个,然后新增历史文章,也就是全部文章。

代码实现

接口与实现类

看过之前文章的应该知道之前分页用的是插件,但是那个插件分页需要把数据库的内容全部查询出来,然后再分页,非常影响性能。考虑到博客长期的发展,也是用Skip和Take关键字去进行分页,使用这两个关键字的好处是不会把数据从数据库全部拿去来,而是在查询的时候就对数据进行分页查询,我需要多少数据就拿多少数据,这样做大大减少了服务端的压力。

  1. Skip属性:Skip属性用于跳过指定数量的元素,返回剩余的元素。它接受一个整数参数,表示要跳过的元素数量。例如,如果有一个包含10个元素的集合,使用Skip(5)将跳过前5个元素,返回后面的5个元素。
  2. Take属性:Take属性用于获取指定数量的元素。它接受一个整数参数,表示要获取的元素数量。例如,如果有一个包含10个元素的集合,使用Take(5)将返回前5个元素。

下面代码返回值是一个元组包含(List, PaginationMetadata),PaginationMetadata是一个分页信息类,在现在这个场景其实是不需要这个类的,可以做下处理,也可以不做处理,没有影响。

Task<(List<Post>, PaginationMetadata)> GetAllPostsAsync(QueryParameters param);  public async Task<(List<Post>, PaginationMetadata)>GetAllPostsAsync(QueryParameters param)   {       var querySet =  _myDbContext.posts.AsQueryable();       var posts = await _myDbContext.posts       .OrderByDescending(o => o.CreationTime)       .Include(p => p.Categories)       .Include(p => p.Comments)       .Skip((param.Page - 1) * param.PageSize)       .Take(param.PageSize)       .ToListAsync();       var pagination = new PaginationMetadata()       {           PageNumber = param.Page,           PageSize = param.PageSize,           TotalItemCount = await querySet.CountAsync()       };       return (posts, pagination);   } 

控制器

给HomeViewModel类添加AllPosts属性

public (List<Post>, PaginationMetadata) AllPosts { get; set; } 

然后在控制器方法中调用查询数据的实现方法

        public async Task<IActionResult> Index()         {             HomeViewModel homeView = new HomeViewModel()             {             	......                 AllPosts = await _PostService.GetAllPostsAsync(new QueryParameters                 {                     Page = 1,                     PageSize = 8,                 })             };             return View(homeView);         } 

接下来就是Razor页面的代码了

直接把之前推荐文章页面的代码copy过来就好了,只需要修改model的类型为(List<Personalblog.Model.Entitys.Post>,PaginationMetadata),可以看到实际上只需要Post列表就能完成想要的效果。

AllPostCard.cshtml

@model (List<Post>,PaginationMetadata)  @foreach (var post in @Model.Item1) {     <div class="col-md-6 box">         <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">             <div class="col p-4 d-flex flex-column position-static">                 <strong class="d-inline-block mb-2 text-primary">@post.Categories.Name</strong>                 <h5 class="mb-0">@post.Title</h5>                 <div class="mb-1 text-muted d-flex align-items-center">                     <span class="me-2">@post.LastUpdateTime.ToShortDateString()</span>                     <div class="d-flex align-items-center">                         <i class="bi bi-eye bi-sm me-1"></i>                         <span style="font-size: 0.875rem;">@post.ViewCount</span>                     </div>                     <span style="width: 10px;"></span> <!-- 这里设置了一个 10px 的间距 -->                     <div class="d-flex align-items-center">                         <i class="bi bi-chat-square-dots bi-sm me-1"></i>                         <span style="font-size: 0.875rem;">@post.Comments.Count</span>                     </div>                 </div>                 <p class="card-text mb-auto">@post.Summary.Limit(50)</p>                 <a class="stretched-link"                    asp-controller="Blog" asp-action="Post" asp-route-id="@post.Id">                     Continue reading                 </a>             </div>             <div class="col-auto d-none d-lg-block">                 <img class="bd-placeholder-img" alt="" style="width:200px;height: 250px"                      src="@Url.Action("GetRandomImage", "PicLib" ,new { seed = post.Id,Width = 800, Height = 1000})">             </div>         </div>     </div> } 

js代码

然后也是和之前一样,写一个返回布局页的代码,用ajax请求就行了

.NET6 个人博客-推荐文章加载优化 - 妙妙屋(zy) - 博客园 (cnblogs.com) https://www.cnblogs.com/ZYPLJ/p/17495172.html

效果展示

.NET 个人博客-首页排版优化-2
.NET 个人博客-首页排版优化-2