论坛 › .net › 个人博客-给推荐文章添加排序字段

振进 发表于 2023-6-25 19:42:06

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

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

前言

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

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

    public class FeaturedPost
    {
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>public int Id { get; set; }
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>public string PostId { get; set; }
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>public int SortOrder { get; set; }
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>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)
    {
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>_myDbContext = myDbContext;
    }
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>public async Task<bool> UpdateSortOrderAsync(int featuredPostId, int newSortOrder)
    {
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>var fPost = await _myDbContext.featuredPosts.FindAsync(featuredPostId);
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>if (fPost != null)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>{
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    fPost.SortOrder = newSortOrder;
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    await _myDbContext.SaveChangesAsync();
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    return true;
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>}
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>return false;
    }
}逻辑很简单，传入推荐文章的id，然后再传入新的排序字段，比如传入1就是排第一个。然后根据id去查询推荐文章，如果存在则修改排序字段，否则返回false。这里就简单的返回了一下成功和失败，如果希望更详细，可以自行琢磨。
注入服务

别忘记注入服务了
builder.Services.AddTransient<IFPostService, FPostService>();Controller层

/// <summary>
/// 推荐博客
/// </summary>
//这里指定该控制器下所有方法都需要token校验

")]
public class FeaturedPostController : ControllerBase{
    private readonly IFPostService _fpostService;
    public FeaturedPostController(IFPostService fpostService)
    {
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>_fpostService = fpostService;
    }
   
    public async Task<ApiResponse> UpdateSort(int id, int newSortOrder)
    {
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>try
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>{
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    var result = await _fpostService.UpdateSortOrderAsync(id, newSortOrder);
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    if (result)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column><el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>return ApiResponse.Ok("修改排序成功！");
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    return ApiResponse.Error("修改排序失败");
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>}
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>catch (Exception ex)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>{
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>    return ApiResponse.Error("发生错误：" + ex.Message);
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>}
    }
}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
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.OrderBy(o => o.SortOrder)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.Include(fp => fp.Post)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.ThenInclude(p => p.Categories)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.Include(fp => fp.Post)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.ThenInclude(p => p.Comments)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.Select(fp => fp.Post)
<el-table-column prop="sortOrder" label="排序" width="300" :show-overflow-tooltip="true">
    <template #default="scope">
<el-input-number
               v-model="tableData.sortOrder"
               :disabled="Show"
               :min="1"
               :max="999"
               controls-position="right"
               size="large"
               @change="handleChange(scope.$index,scope.row)"
               />
    </template>
</el-table-column>.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.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加入重新加载数据，但是我觉得没什么必要，毕竟还是排序修改。
界面效果展示



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


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

查看完整版本: 个人博客-给推荐文章添加排序字段