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

振进

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

前言

前篇文章优化了推荐文章的加载，但是呢，还是不太满意，之前是按照文章的发布日期去排序的，既然是推荐文章，还是得用一个字段去专门管理顺序。
设计思路：
给推荐文章表添加一个排序字段，然后写一个修改方法即可。
数据库字段

这里的数据类型以sqlite3为例。
字段名类型解释IdINTEGER主键PostIdTEXT文章外键，对应文章主键idSortOrderINTEGER排序字段实体类

1.     public class FeaturedPost
2.     {
3. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
4.     <template #default="scope">
5. <el-input-number
6.                  v-model="tableData[scope.$index].sortOrder"
7.                  :disabled="Show"
8.                  :min="1"
9.                  :max="999"
10.                  controls-position="right"
11.                  size="large"
12.                  @change="handleChange(scope.$index,scope.row)"
13.                  />
14.     </template>
15. </el-table-column>[Key]
16. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
17.     <template #default="scope">
18. <el-input-number
19.                  v-model="tableData[scope.$index].sortOrder"
20.                  :disabled="Show"
21.                  :min="1"
22.                  :max="999"
23.                  controls-position="right"
24.                  size="large"
25.                  @change="handleChange(scope.$index,scope.row)"
26.                  />
27.     </template>
28. </el-table-column>[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
29. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
30.     <template #default="scope">
31. <el-input-number
32.                  v-model="tableData[scope.$index].sortOrder"
33.                  :disabled="Show"
34.                  :min="1"
35.                  :max="999"
36.                  controls-position="right"
37.                  size="large"
38.                  @change="handleChange(scope.$index,scope.row)"
39.                  />
40.     </template>
41. </el-table-column>public int Id { get; set; }
42. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
43.     <template #default="scope">
44. <el-input-number
45.                  v-model="tableData[scope.$index].sortOrder"
46.                  :disabled="Show"
47.                  :min="1"
48.                  :max="999"
49.                  controls-position="right"
50.                  size="large"
51.                  @change="handleChange(scope.$index,scope.row)"
52.                  />
53.     </template>
54. </el-table-column>public string PostId { get; set; }
55. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
56.     <template #default="scope">
57. <el-input-number
58.                  v-model="tableData[scope.$index].sortOrder"
59.                  :disabled="Show"
60.                  :min="1"
61.                  :max="999"
62.                  controls-position="right"
63.                  size="large"
64.                  @change="handleChange(scope.$index,scope.row)"
65.                  />
66.     </template>
67. </el-table-column>public int SortOrder { get; set; }
68. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
69.     <template #default="scope">
70. <el-input-number
71.                  v-model="tableData[scope.$index].sortOrder"
72.                  :disabled="Show"
73.                  :min="1"
74.                  :max="999"
75.                  controls-position="right"
76.                  size="large"
77.                  @change="handleChange(scope.$index,scope.row)"
78.                  />
79.     </template>
80. </el-table-column>public Post Post { get; set; }
81.     }

复制代码

功能实现

Service层

老套路，添加接口

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

复制代码

实现这个接口

1. public class FPostService : IFPostService
2. {
3.     private readonly MyDbContext _myDbContext;
4.     public FPostService(MyDbContext myDbContext)
5.     {
6. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
7.     <template #default="scope">
8. <el-input-number
9.                  v-model="tableData[scope.$index].sortOrder"
10.                  :disabled="Show"
11.                  :min="1"
12.                  :max="999"
13.                  controls-position="right"
14.                  size="large"
15.                  @change="handleChange(scope.$index,scope.row)"
16.                  />
17.     </template>
18. </el-table-column>_myDbContext = myDbContext;
19.     }
20. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
21.     <template #default="scope">
22. <el-input-number
23.                  v-model="tableData[scope.$index].sortOrder"
24.                  :disabled="Show"
25.                  :min="1"
26.                  :max="999"
27.                  controls-position="right"
28.                  size="large"
29.                  @change="handleChange(scope.$index,scope.row)"
30.                  />
31.     </template>
32. </el-table-column>public async Task<bool> UpdateSortOrderAsync(int featuredPostId, int newSortOrder)
33.     {
34. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
35.     <template #default="scope">
36. <el-input-number
37.                  v-model="tableData[scope.$index].sortOrder"
38.                  :disabled="Show"
39.                  :min="1"
40.                  :max="999"
41.                  controls-position="right"
42.                  size="large"
43.                  @change="handleChange(scope.$index,scope.row)"
44.                  />
45.     </template>
46. </el-table-column>var fPost = await _myDbContext.featuredPosts.FindAsync(featuredPostId);
47. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
48.     <template #default="scope">
49. <el-input-number
50.                  v-model="tableData[scope.$index].sortOrder"
51.                  :disabled="Show"
52.                  :min="1"
53.                  :max="999"
54.                  controls-position="right"
55.                  size="large"
56.                  @change="handleChange(scope.$index,scope.row)"
57.                  />
58.     </template>
59. </el-table-column>if (fPost != null)
60. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
61.     <template #default="scope">
62. <el-input-number
63.                  v-model="tableData[scope.$index].sortOrder"
64.                  :disabled="Show"
65.                  :min="1"
66.                  :max="999"
67.                  controls-position="right"
68.                  size="large"
69.                  @change="handleChange(scope.$index,scope.row)"
70.                  />
71.     </template>
72. </el-table-column>{
73. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
74.     <template #default="scope">
75. <el-input-number
76.                  v-model="tableData[scope.$index].sortOrder"
77.                  :disabled="Show"
78.                  :min="1"
79.                  :max="999"
80.                  controls-position="right"
81.                  size="large"
82.                  @change="handleChange(scope.$index,scope.row)"
83.                  />
84.     </template>
85. </el-table-column>    fPost.SortOrder = newSortOrder;
86. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
87.     <template #default="scope">
88. <el-input-number
89.                  v-model="tableData[scope.$index].sortOrder"
90.                  :disabled="Show"
91.                  :min="1"
92.                  :max="999"
93.                  controls-position="right"
94.                  size="large"
95.                  @change="handleChange(scope.$index,scope.row)"
96.                  />
97.     </template>
98. </el-table-column>    await _myDbContext.SaveChangesAsync();
99. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
100.     <template #default="scope">
101. <el-input-number
102.                  v-model="tableData[scope.$index].sortOrder"
103.                  :disabled="Show"
104.                  :min="1"
105.                  :max="999"
106.                  controls-position="right"
107.                  size="large"
108.                  @change="handleChange(scope.$index,scope.row)"
109.                  />
110.     </template>
111. </el-table-column>    return true;
112. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
113.     <template #default="scope">
114. <el-input-number
115.                  v-model="tableData[scope.$index].sortOrder"
116.                  :disabled="Show"
117.                  :min="1"
118.                  :max="999"
119.                  controls-position="right"
120.                  size="large"
121.                  @change="handleChange(scope.$index,scope.row)"
122.                  />
123.     </template>
124. </el-table-column>}
125. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
126.     <template #default="scope">
127. <el-input-number
128.                  v-model="tableData[scope.$index].sortOrder"
129.                  :disabled="Show"
130.                  :min="1"
131.                  :max="999"
132.                  controls-position="right"
133.                  size="large"
134.                  @change="handleChange(scope.$index,scope.row)"
135.                  />
136.     </template>
137. </el-table-column>return false;
138.     }
139. }

复制代码

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

别忘记注入服务了

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

复制代码

Controller层

1. /// <summary>
2. /// 推荐博客
3. /// </summary>
4. [Authorize]  //这里指定该控制器下所有方法都需要token校验
5. [ApiController]
6. [Route("Api/[controller]")]
7. public class FeaturedPostController : ControllerBase{
8.     private readonly IFPostService _fpostService;
9.     public FeaturedPostController(IFPostService fpostService)
10.     {
11. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
12.     <template #default="scope">
13. <el-input-number
14.                  v-model="tableData[scope.$index].sortOrder"
15.                  :disabled="Show"
16.                  :min="1"
17.                  :max="999"
18.                  controls-position="right"
19.                  size="large"
20.                  @change="handleChange(scope.$index,scope.row)"
21.                  />
22.     </template>
23. </el-table-column>_fpostService = fpostService;
24.     }
25.     [HttpPut("{id:int}/{newSortOrder:int}")]
26.     public async Task<ApiResponse> UpdateSort(int id, int newSortOrder)
27.     {
28. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
29.     <template #default="scope">
30. <el-input-number
31.                  v-model="tableData[scope.$index].sortOrder"
32.                  :disabled="Show"
33.                  :min="1"
34.                  :max="999"
35.                  controls-position="right"
36.                  size="large"
37.                  @change="handleChange(scope.$index,scope.row)"
38.                  />
39.     </template>
40. </el-table-column>try
41. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
42.     <template #default="scope">
43. <el-input-number
44.                  v-model="tableData[scope.$index].sortOrder"
45.                  :disabled="Show"
46.                  :min="1"
47.                  :max="999"
48.                  controls-position="right"
49.                  size="large"
50.                  @change="handleChange(scope.$index,scope.row)"
51.                  />
52.     </template>
53. </el-table-column>{
54. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
55.     <template #default="scope">
56. <el-input-number
57.                  v-model="tableData[scope.$index].sortOrder"
58.                  :disabled="Show"
59.                  :min="1"
60.                  :max="999"
61.                  controls-position="right"
62.                  size="large"
63.                  @change="handleChange(scope.$index,scope.row)"
64.                  />
65.     </template>
66. </el-table-column>    var result = await _fpostService.UpdateSortOrderAsync(id, newSortOrder);
67. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
68.     <template #default="scope">
69. <el-input-number
70.                  v-model="tableData[scope.$index].sortOrder"
71.                  :disabled="Show"
72.                  :min="1"
73.                  :max="999"
74.                  controls-position="right"
75.                  size="large"
76.                  @change="handleChange(scope.$index,scope.row)"
77.                  />
78.     </template>
79. </el-table-column>    if (result)
80. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
81.     <template #default="scope">
82. <el-input-number
83.                  v-model="tableData[scope.$index].sortOrder"
84.                  :disabled="Show"
85.                  :min="1"
86.                  :max="999"
87.                  controls-position="right"
88.                  size="large"
89.                  @change="handleChange(scope.$index,scope.row)"
90.                  />
91.     </template>
92. </el-table-column><el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
93.     <template #default="scope">
94. <el-input-number
95.                  v-model="tableData[scope.$index].sortOrder"
96.                  :disabled="Show"
97.                  :min="1"
98.                  :max="999"
99.                  controls-position="right"
100.                  size="large"
101.                  @change="handleChange(scope.$index,scope.row)"
102.                  />
103.     </template>
104. </el-table-column>return ApiResponse.Ok("修改排序成功！");
105. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
106.     <template #default="scope">
107. <el-input-number
108.                  v-model="tableData[scope.$index].sortOrder"
109.                  :disabled="Show"
110.                  :min="1"
111.                  :max="999"
112.                  controls-position="right"
113.                  size="large"
114.                  @change="handleChange(scope.$index,scope.row)"
115.                  />
116.     </template>
117. </el-table-column>    return ApiResponse.Error("修改排序失败");
118. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
119.     <template #default="scope">
120. <el-input-number
121.                  v-model="tableData[scope.$index].sortOrder"
122.                  :disabled="Show"
123.                  :min="1"
124.                  :max="999"
125.                  controls-position="right"
126.                  size="large"
127.                  @change="handleChange(scope.$index,scope.row)"
128.                  />
129.     </template>
130. </el-table-column>}
131. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
132.     <template #default="scope">
133. <el-input-number
134.                  v-model="tableData[scope.$index].sortOrder"
135.                  :disabled="Show"
136.                  :min="1"
137.                  :max="999"
138.                  controls-position="right"
139.                  size="large"
140.                  @change="handleChange(scope.$index,scope.row)"
141.                  />
142.     </template>
143. </el-table-column>catch (Exception ex)
144. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
145.     <template #default="scope">
146. <el-input-number
147.                  v-model="tableData[scope.$index].sortOrder"
148.                  :disabled="Show"
149.                  :min="1"
150.                  :max="999"
151.                  controls-position="right"
152.                  size="large"
153.                  @change="handleChange(scope.$index,scope.row)"
154.                  />
155.     </template>
156. </el-table-column>{
157. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
158.     <template #default="scope">
159. <el-input-number
160.                  v-model="tableData[scope.$index].sortOrder"
161.                  :disabled="Show"
162.                  :min="1"
163.                  :max="999"
164.                  controls-position="right"
165.                  size="large"
166.                  @change="handleChange(scope.$index,scope.row)"
167.                  />
168.     </template>
169. </el-table-column>    return ApiResponse.Error("发生错误：" + ex.Message);
170. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
171.     <template #default="scope">
172. <el-input-number
173.                  v-model="tableData[scope.$index].sortOrder"
174.                  :disabled="Show"
175.                  :min="1"
176.                  :max="999"
177.                  controls-position="right"
178.                  size="large"
179.                  @change="handleChange(scope.$index,scope.row)"
180.                  />
181.     </template>
182. </el-table-column>}
183.     }
184. }

复制代码

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

数据库数据展示

失败

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

成功

​
修改查询接口

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

1. public async Task<IPagedList<Post>> GetFeaturedPostsAsync(QueryParameters param)
2. {
3.     var posts =await _myDbContext.featuredPosts
4. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
5.     <template #default="scope">
6. <el-input-number
7.                  v-model="tableData[scope.$index].sortOrder"
8.                  :disabled="Show"
9.                  :min="1"
10.                  :max="999"
11.                  controls-position="right"
12.                  size="large"
13.                  @change="handleChange(scope.$index,scope.row)"
14.                  />
15.     </template>
16. </el-table-column>.OrderBy(o => o.SortOrder)
17. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
18.     <template #default="scope">
19. <el-input-number
20.                  v-model="tableData[scope.$index].sortOrder"
21.                  :disabled="Show"
22.                  :min="1"
23.                  :max="999"
24.                  controls-position="right"
25.                  size="large"
26.                  @change="handleChange(scope.$index,scope.row)"
27.                  />
28.     </template>
29. </el-table-column>.Include(fp => fp.Post)
30. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
31.     <template #default="scope">
32. <el-input-number
33.                  v-model="tableData[scope.$index].sortOrder"
34.                  :disabled="Show"
35.                  :min="1"
36.                  :max="999"
37.                  controls-position="right"
38.                  size="large"
39.                  @change="handleChange(scope.$index,scope.row)"
40.                  />
41.     </template>
42. </el-table-column>.ThenInclude(p => p.Categories)
43. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
44.     <template #default="scope">
45. <el-input-number
46.                  v-model="tableData[scope.$index].sortOrder"
47.                  :disabled="Show"
48.                  :min="1"
49.                  :max="999"
50.                  controls-position="right"
51.                  size="large"
52.                  @change="handleChange(scope.$index,scope.row)"
53.                  />
54.     </template>
55. </el-table-column>.Include(fp => fp.Post)
56. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
57.     <template #default="scope">
58. <el-input-number
59.                  v-model="tableData[scope.$index].sortOrder"
60.                  :disabled="Show"
61.                  :min="1"
62.                  :max="999"
63.                  controls-position="right"
64.                  size="large"
65.                  @change="handleChange(scope.$index,scope.row)"
66.                  />
67.     </template>
68. </el-table-column>.ThenInclude(p => p.Comments)
69. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
70.     <template #default="scope">
71. <el-input-number
72.                  v-model="tableData[scope.$index].sortOrder"
73.                  :disabled="Show"
74.                  :min="1"
75.                  :max="999"
76.                  controls-position="right"
77.                  size="large"
78.                  @change="handleChange(scope.$index,scope.row)"
79.                  />
80.     </template>
81. </el-table-column>.Select(fp => fp.Post)
82. <el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
83.     <template #default="scope">
84. <el-input-number
85.                  v-model="tableData[scope.$index].sortOrder"
86.                  :disabled="Show"
87.                  :min="1"
88.                  :max="999"
89.                  controls-position="right"
90.                  size="large"
91.                  @change="handleChange(scope.$index,scope.row)"
92.                  />
93.     </template>
94. </el-table-column>.ToPagedListAsync(param.Page, param.PageSize);
95.     return posts;
96. }

复制代码

管理端

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

复制代码

后台管理系统

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

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

复制代码

Vue界面修改

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

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

复制代码

1. const Show = ref(false)
3. const handleChange = async (index,item) => {
4.   console.log(index+" "+item.id + " " + item.sortOrder)
5.   Show.value = true
6.   try {
7.     var res = (await updateSort(item.id,item.sortOrder))
8.     if(res.statusCode === 200){
9.       ElMessage.success(`${res.message}`)
10.     }else{
11.       ElMessage.error(`${res.message}`)
12.     }
13.   } catch (error) {
14.     if (error.response && error.response.data && error.response.data.message) {
15.       ElMessage.error(`${error.response.data.message}`);
16.     } else {
17.       ElMessage.error("发生错误，请重试");
18.     }
19.   } finally {
20.     Show.value = false;
21.   }
22. }

复制代码

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

修改了id为9的排序字段，其实在请求还没完成的时候，这个数字选择框是不能第二次修改的，关键代码:disabled="Show"，修改完成才能进行二次修改。
完工


最近文章发布有点频繁，是时候断更一会儿了
来源:https://www.cnblogs.com/ZYPLJ/archive/2023/06/25/17499490.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！