环球短讯！.NET6 个人博客-推荐文章加载优化

2023-06-21 10:13:47 来源：博客园

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

前言

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

我的实现思路

同样使用X.PagedList组件去实现分页效果，通过Nuget下载即可

首先我在Service层新增了一个Task> GetFeaturedPostsAsync(QueryParameters param)方法

QueryParameters类主要参数

参数类型	参数名	描述
int	MaxPageSize	最大页面条目
int	PageSize	页面大小
int	Page	当前页面

然后该方法的实现：

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

控制器

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

public async Task Index(){    HomeViewModel homeView = new HomeViewModel()    {        FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),        FeaturedCategories = _fCategoryService.GetFeaturedCategories(),        TopPost = _TopPostService.GetTopOnePost(),        FeaturedPosts = await _PostService.GetFeaturedPostsAsync(new QueryParameters                                                                 {                                                                     Page = 1,                                                                     PageSize = 8,                                                                 }),        Links = await _linkService.GetAll(),        Notices = await _noticeService.GetAllAsync(),        FirstLastPost =await _articelsService.FirstLastPostAsync(),        // MaxPost = await _articelsService.MaxPostAsync()    };    return View(homeView);}

然后我在控制器新增了一个返回分布视图的方法

这个方法是从第2页开始，同样也是展示8条，该方法需要通过前端jquery ajax去调用它

public async Task GetFeaturedPosts(int page = 2, int pageSize = 8){    IPagedList data = await _PostService.GetFeaturedPostsAsync(new QueryParameters                                                                     {                                                                         Page = page,                                                                         PageSize = pageSize,                                                                     });    if (data.Count == 0) {        // 没有更多数据了，返回错误        return NoContent();    }    return PartialView("Widgets/FeaturedPostCard", data);}

前端

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

            @await Html.PartialAsync("Widgets/FeaturedPostCard",Model.FeaturedPosts) //数据在这里

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

@using Personalblog.Migrate@using Microsoft.AspNetCore.Mvc.TagHelpers@model X.PagedList.IPagedList@foreach (var post in @Model){                                        @post.Categories.Name                @post.Title
                                    @post.LastUpdateTime.ToShortDateString()                                                                    @post.ViewCount                    
                                                                                         @post.Comments.Count                    
                
                @post.Summary.Limit(50)
                                    Continue reading                            
                                        
        
    
}

上述内容只能展示8条信息，所以还需要通过ajax去调用GetFeaturedPosts接口去请求第n页的数据。

这里和之前的文章归档的实现其实是一个道理。

var currentPage = 2;function LoadHome() {      $.ajax({        url: "/Home/GetFeaturedPosts",        type: "GET",        data: { page: currentPage },        success: function(data,status, xhr) {          // 处理返回的数据             // 更新当前页码            currentPage++;            // 将数据渲染到页面中            $("#Home-list").append(data);        },        error: function() {          // 处理错误        }});

实现效果

结尾

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

关键词：