个人博客-给推荐文章添加排序字段

前言

设计思路：

给推荐文章表添加一个排序字段，然后写一个修改方法即可。

数据库字段

这里的数据类型以sqlite3为例。

字段名	类型	解释
Id	INTEGER	主键
PostId	TEXT	文章外键，对应文章主键id
SortOrder	INTEGER	排序字段

实体类

    public class FeaturedPost     {         [Key]         [DatabaseGenerated(DatabaseGeneratedOption.Identity)]         public int Id { get; set; }         public string PostId { get; set; }         public int SortOrder { get; set; }          public Post Post { get; set; }     }

功能实现

Service层

老套路，添加接口

public interface IFPostService{ 	Task<bool> UpdateSortOrderAsync(int featuredPostId, int newSortOrder); }

实现这个接口

public class FPostService : IFPostService {     private readonly MyDbContext _myDbContext;     public FPostService(MyDbContext myDbContext)     {         _myDbContext = myDbContext;     }         public async Task<bool> UpdateSortOrderAsync(int featuredPostId, int newSortOrder)     {         var fPost = await _myDbContext.featuredPosts.FindAsync(featuredPostId);         if (fPost != null)         {             fPost.SortOrder = newSortOrder;             await _myDbContext.SaveChangesAsync();             return true;         }         return false;     } }

逻辑很简单，传入推荐文章的id，然后再传入新的排序字段，比如传入1就是排第一个。然后根据id去查询推荐文章，如果存在则修改排序字段，否则返回false。这里就简单的返回了一下成功和失败，如果希望更详细，可以自行琢磨。

注入服务

别忘记注入服务了

builder.Services.AddTransient<IFPostService, FPostService>();

Controller层

/// <summary> /// 推荐博客 /// </summary> [Authorize]  //这里指定该控制器下所有方法都需要token校验 [ApiController] [Route("Api/[controller]")] public class FeaturedPostController : ControllerBase{     private readonly IFPostService _fpostService;     public FeaturedPostController(IFPostService fpostService)     {         _fpostService = fpostService;     }     [HttpPut("{id:int}/{newSortOrder:int}")]     public async Task<ApiResponse> UpdateSort(int id, int newSortOrder)     {         try         {             var result = await _fpostService.UpdateSortOrderAsync(id, newSortOrder);             if (result)                 return ApiResponse.Ok("修改排序成功！");             return ApiResponse.Error("修改排序失败");         }         catch (Exception ex)         {             return ApiResponse.Error("发生错误：" + ex.Message);         }     } }

ApiResponse是大佬封装的返回类型，具体可以查看https://www.cnblogs.com/deali/p/16995384.html，这里就不做多的解释了，用自带的返回值也是可以的。

接口测试

数据库数据展示

个人博客-给推荐文章添加排序字段

失败

修改不存在的推荐文章，可以正常提示错误信息

个人博客-给推荐文章添加排序字段

成功

个人博客-给推荐文章添加排序字段

修改查询接口

让查询接口根据排序字段升序排列OrderBy(o => o.SortOrder)

用户端

public async Task<IPagedList<Post>> GetFeaturedPostsAsync(QueryParameters param) {     var posts =await _myDbContext.featuredPosts         .OrderBy(o => o.SortOrder)         .Include(fp => fp.Post)         .ThenInclude(p => p.Categories)         .Include(fp => fp.Post)         .ThenInclude(p => p.Comments)         .Select(fp => fp.Post)         .ToPagedListAsync(param.Page, param.PageSize);     return posts; }

管理端

public async Task<List<FeaturedPost>> GetListAsync() {      return await _myDbContext.featuredPosts.Include(a => a.Post.Categories).OrderBy(o => o.SortOrder).ToListAsync(); }

后台管理系统

给请求的ts文件添加一个axios请求

import axios from "../axios"  // 修改排序字段 export const updateSort = (Id,newId) => {   return axios({     url: `FeaturedPost/${Id}/${newId}`,     method: 'put'   }) }

Vue界面修改

这里就展示部分代码了，一些简单的Element plus的应用而已

<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">     <template #default="scope"> <el-input-number                  v-model="tableData[scope.$index].sortOrder"                  :disabled="Show"                  :min="1"                  :max="999"                  controls-position="right"                  size="large"                  @change="handleChange(scope.$index,scope.row)"                  />     </template> </el-table-column>

const Show = ref(false)  const handleChange = async (index,item) => {   console.log(index+" "+item.id + " " + item.sortOrder)   Show.value = true   try {     var res = (await updateSort(item.id,item.sortOrder))     if(res.statusCode === 200){       ElMessage.success(`${res.message}`)     }else{       ElMessage.error(`${res.message}`)     }   } catch (error) {     if (error.response && error.response.data && error.response.data.message) {       ElMessage.error(`${error.response.data.message}`);     } else {       ElMessage.error("发生错误，请重试");     }   } finally {     Show.value = false;   } }

可以在finally加入重新加载数据，但是我觉得没什么必要，毕竟还是排序修改。