.NET6 个人博客-推荐文章加载优化
个人博客-推荐文章加载优化前言
随着博客文章越来越多，那么推荐的文章也是越来越多，之前推荐文章是只推荐8篇，但是我感觉有点少，然后也是决定加一个加载按钮，也是类似与分页的效果，点击按钮可以继续加载8篇文章。
我的实现思路
同样使用X.PagedList组件去实现分页效果，通过Nuget下载即可
首先我在Service层新增了一个Task GetFeaturedPostsAsync(QueryParameters param)方法
QueryParameters 类主要参数
参数类型参数名描述intMaxPageSize最大页面条目intPageSize页面大小intPage当前页面然后该方法的实现：
/// <summary>
/// 这个查询语句会先加载 featuredPosts 表，然后使用 Include 方法加载文章表 Post，并使用 ThenInclude 方法一次性加载文章的分类和评论。
///注意，我们使用了两个 Include 方法来加载不同的关联表，并使用 ThenInclude 方法来指定要加载的关联表的属性。这样可以避免 EF Core 生成多个 SQL 查询，从而提高查询效率。
///在查询结果中，每个文章对象都包含了它的分类和评论。
/// </summary>
/// <returns></returns>
public async Task<IPagedList<Post>> 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<IActionResult> 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<IActionResult> GetFeaturedPosts(int page = 2, int pageSize = 8)
{
IPagedList<Post> 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) //数据在这里
<button type="button"
id="Home-more"
onclick="LoadHome()">加载更多</button>
分布视图：然后我们在分布视图中通过foreach去加载它
@using Personalblog.Migrate
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model X.PagedList.IPagedList<Personalblog.Model.Entitys.Post>
@foreach (var post in @Model)
{
<strong >@post.Categories.Name</strong>
<h5 >@post.Title</h5>
@post.LastUpdateTime.ToShortDateString()
<i ></i>
@post.ViewCount
<i ></i>
@post.Comments.Count
<p >@post.Summary.Limit(50)</p>
<a
asp-controller="Blog" asp-action="Post" asp-route-id="@post.Id">
Continue reading
</a>
<imgalt=""
src="https://www.cnblogs.com/@Url.Action("GetRandomImage", "PicLib" ,new { seed = post.Id,Width = 800, Height = 1000})">
}上述内容只能展示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() {
// 处理错误
}
});实现效果
结尾
合理的利用分布视图可以很方便的去展示数据。
关注公众号，一起交流学习~
来源:https://www.cnblogs.com/ZYPLJ/archive/2023/06/21/17495172.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]