.NET6 个人博客-推荐文章加载优化

金球五金陈万里

个人博客-推荐文章加载优化

前言

随着博客文章越来越多，那么推荐的文章也是越来越多，之前推荐文章是只推荐8篇，但是我感觉有点少，然后也是决定加一个加载按钮，也是类似与分页的效果，点击按钮可以继续加载8篇文章。
我的实现思路

同样使用X.PagedList组件去实现分页效果，通过Nuget下载即可
首先我在Service层新增了一个Task GetFeaturedPostsAsync(QueryParameters param)方法
QueryParameters 类主要参数
参数类型参数名描述intMaxPageSize最大页面条目intPageSize页面大小intPage当前页面然后该方法的实现：

1. /// <summary>
2. /// 这个查询语句会先加载 featuredPosts 表，然后使用 Include 方法加载文章表 Post，并使用 ThenInclude 方法一次性加载文章的分类和评论。
3. ///注意，我们使用了两个 Include 方法来加载不同的关联表，并使用 ThenInclude 方法来指定要加载的关联表的属性。这样可以避免 EF Core 生成多个 SQL 查询，从而提高查询效率。
4. ///在查询结果中，每个文章对象都包含了它的分类和评论。
5. /// </summary>
6. /// <returns></returns>
7. public async Task<IPagedList<Post>> GetFeaturedPostsAsync(QueryParameters param)
8. {
9.     var posts =await _myDbContext.featuredPosts
10.         .Include(fp => fp.Post)
11.         .ThenInclude(p => p.Categories)
12.         .Include(fp => fp.Post)
13.         .ThenInclude(p => p.Comments)
14.         .Select(fp => fp.Post)
15.         .OrderByDescending(o => o.CreationTime)
16.         .ToPagedListAsync(param.Page, param.PageSize); //分页加载数据
17.     return posts;
18. }

复制代码

控制器

主要是FeaturedPosts字段去加载推荐文章，然后加载第一页，每页八条

1. public async Task<IActionResult> Index()
2. {
3.     HomeViewModel homeView = new HomeViewModel()
4.     {
5.         FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),
6.         FeaturedCategories = _fCategoryService.GetFeaturedCategories(),
7.         TopPost = _TopPostService.GetTopOnePost(),
8.         FeaturedPosts = await _PostService.GetFeaturedPostsAsync(new QueryParameters
9.                                                                  {
10.                                                                      Page = 1,
11.                                                                      PageSize = 8,
12.                                                                  }),
13.         Links = await _linkService.GetAll(),
14.         Notices = await _noticeService.GetAllAsync(),
15.         FirstLastPost =await _articelsService.FirstLastPostAsync(),
16.         // MaxPost = await _articelsService.MaxPostAsync()
17.     };
18.     return View(homeView);
19. }

复制代码

然后我在控制器新增了一个返回分布视图的方法
这个方法是从第2页开始，同样也是展示8条，该方法需要通过前端jquery ajax去调用它

1. public async Task<IActionResult> GetFeaturedPosts(int page = 2, int pageSize = 8)
2. {
3.     IPagedList<Post> data = await _PostService.GetFeaturedPostsAsync(new QueryParameters
4.                                                                      {
5.                                                                          Page = page,
6.                                                                          PageSize = pageSize,
7.                                                                      });
8.     if (data.Count == 0) {
9.         // 没有更多数据了，返回错误
10.         return NoContent();
11.     }
13.     return PartialView("Widgets/FeaturedPostCard", data);
14. }

复制代码

前端

这里可以看到加载了一个分布视图并且传入了Model.FeaturedPosts，也就是上面控制里面的FeaturedPosts对象，他是一个IPagedList集合对象

2.             @await Html.PartialAsync("Widgets/FeaturedPostCard",Model.FeaturedPosts) //数据在这里
5.    
6.         
7.             <button type="button"  
8.                     id="Home-more"
9.                     
10.                     onclick="LoadHome()">加载更多</button>
11.         
12.    

复制代码

分布视图：然后我们在分布视图中通过foreach去加载它

1. @using Personalblog.Migrate
2. @using Microsoft.AspNetCore.Mvc.TagHelpers
3. @model X.PagedList.IPagedList<Personalblog.Model.Entitys.Post>
5. @foreach (var post in @Model)
6. {
7.    
8.         
9.             
10.                 <strong >@post.Categories.Name</strong>
11.                 <h5 >@post.Title</h5>
12.                
13.                     @post.LastUpdateTime.ToShortDateString()
14.                     
15.                         <i ></i>
16.                         @post.ViewCount
17.                     
18.                      
19.                     
20.                         <i ></i>
21.                         @post.Comments.Count
22.                     
23.                
24.                 <p >@post.Summary.Limit(50)</p>
25.                 <a
26.                    asp-controller="Blog" asp-action="Post" asp-route-id="@post.Id">
27.                     Continue reading
28.                 </a>
29.             
30.             
31.                 <img  alt=""
32.                      src="https://www.cnblogs.com/@Url.Action("GetRandomImage", "PicLib" ,new { seed = post.Id,Width = 800, Height = 1000})">
33.             
34.         
35.    
36. }

复制代码

上述内容只能展示8条信息，所以还需要通过ajax去调用GetFeaturedPosts接口去请求第n页的数据。
这里和之前的文章归档的实现其实是一个道理。

1. var currentPage = 2;
2. function LoadHome() {
3.       $.ajax({
4.         url: '/Home/GetFeaturedPosts',
5.         type: 'GET',
6.         data: { page: currentPage },
7.         success: function(data,status, xhr) {
8.                   // 处理返回的数据
9.              // 更新当前页码
10.             currentPage++;
11.             // 将数据渲染到页面中
12.             $('#Home-list').append(data);
13.         },
14.         error: function() {
15.           // 处理错误
16.         }
17. });

复制代码

实现效果

结尾

合理的利用分布视图可以很方便的去展示数据。
关注公众号，一起交流学习~

来源:https://www.cnblogs.com/ZYPLJ/archive/2023/06/21/17495172.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！