ZY知识库留言板功能实现

前言

因为这个博客是用的大佬的开源项目，我也是用自己的想法改了很多东西，虽然可能写的不是很好，但是我自己想要的效果实现了，开源项目不就是用来学习的嘛，所以不能一层不变，之前首页改版、评论功能我都没有写文章，这次抽空更新了留言板功能，来水一篇文章。

留言板地址：ZY知识库 · ZY - 留言板 (pljzy.top)


(资料图片仅供参考)

留言类和回复类

首先我创建了如下2个类，类型无非就是int、string、DateTime，这里就不做多的解释了

留言类

字段名解释
Id主键
Name留言者昵称
Email留言者邮箱
Message留言内容
Created留言时间

回复类

字段名解释
Id主键
MessageId留言类外键
Name回复者昵称
Email回复者邮箱
Reply回复内容
Created留言时间

Service层实现

然后我创建了IMessagesService接口类,列举部分如下：

using msg = Personalblog.Model.Entitys.Messages;public interface IMessagesService{    //新增留言    Task SubmitMessageAsync(msg messages);    //查询所有留言,分页列表    IPagedList GetAll(QueryParameters param);}

然后用MessagesService类实现这个接口类：

public class MessagesService:IMessagesService{    private readonly MyDbContext _myDbContext;    public MessagesService(MyDbContext myDbContext)    {        _myDbContext = myDbContext;    }    public async Task SubmitMessageAsync(Messages messages)    {        StringBuilder sb = CommentSJson.CommentsJson(messages.Message);        messages.Message = sb.ToString();        messages.created_at = DateTime.Now;        await _myDbContext.Messages.AddAsync(messages);        await _myDbContext.SaveChangesAsync();        return messages;    }    public IPagedList GetAll(QueryParameters param)    {        return _myDbContext.Messages.Include(m => m.Replies).ToList().ToPagedList(param.Page, param.PageSize);    }}

IPagedList是一个分页插件，用NuGet下载X.PagedList/8.4.3包CommentsJson方法是用来处理quill富文本编辑器传过来的内容，这里就不做解释了。

配置文件依赖注入

builder.Services.AddTransient();

Controller层实现

public class MsgBoardController : Controller{    private readonly IMessagesService _messagesService;    public MsgBoardController(IMessagesService messagesService)    {        _messagesService = messagesService;    }    // GET    public async Task Index(int page = 1, int pageSize = 10)    {        MsgBoardList msgBoardList = new MsgBoardList()        {            PagedList = _messagesService.GetAll(new QueryParameters            {                Page = page,                PageSize = pageSize            }),            ...        };        return View(msgBoardList);    }    ///     /// 新增留言    ///     ///     ///     [HttpPost]    public async Task SubMessage([FromBody]Messages messages)    {        if(messages.Message == null || messages.Message == "")            return new ApiResponse(){Data = "请输入留言内容",Message = "请输入留言内容",StatusCode = 422};        if(messages.Name == null || messages.Name == "")            return new ApiResponse(){Message = "请输入昵称~",StatusCode = 422};        if (messages.Email == null || messages.Email == "")            return new ApiResponse(){Message = "请输入邮箱~",StatusCode = 422};        bool isValid = CheckEmail.CheckEmailFormat(messages.Email);        if (!isValid)        {            return new ApiResponse(){Message = "邮箱格式错误~",StatusCode = 422};        }        try        {            return new ApiResponse(){Data = GetHtml(await _messagesService.SubmitMessageAsync(messages)),Message = "留言成功",StatusCode = 200};        }        catch (Exception e)        {            return new ApiResponse() { Data = "服务器异常！", Message = "服务器异常！", StatusCode = 500 };        }    }}

因为是MVC项目所以控制器继承Controller类，然后后台管理的接口则是继承ControllerBase用于实现Restful风格接口。

前端部分实现

                        @foreach (var m in Model.PagedList)            {                @await Html.PartialAsync("Widgets/MsgBoxList",m)            }

分布视图MsgBoxList用于显示留言

分布视图MsgBoxReplyList用于显示该留言是否有人回复

MsgBoxList：

@model Personalblog.Model.Entitys.Messages
    
        
                            回复                    
        @Model.created_at        @Model.Name    
    
        @Html.Raw(@Model.Message)    
   
@if (Model.Replies.Any()){    @await Html.PartialAsync("Widgets/MsgBoxReplyList",Model.Replies)}

利用ajax请求发送留言

部分代码

$.ajax({            url:"/MsgBoard/SubMessage/",            type:"post",            data:JSON.stringify({                "Name":""+Name+"",                "Email":""+Email+"",                "Message":""+Content+""            }),            contentType: "application/json",            success:function (data){                if (data.statusCode === 200){                    alert(data.message, "success")                     const CommentList = document.getElementById("CommentList")                    const html = data.data                    CommentList.insertAdjacentHTML("beforeend", html);                    clearInput()                }else{                    alert(data.data, "danger")                }                 $("#btnComent").prop("disabled", false);             },            error:function(xhr,status,error){                 $("#btnComent").prop("disabled", false);                  if (xhr.status === 429){                    alert("请求过于频繁，请稍后再试。","warning")                }else if (xhr.status === 422){                    alert(xhr.responseJSON.message,"warning")                 }                else{                    alert("服务器异常，请稍后再试！！！","danger")                }            } })

留言板效果图

结尾

上述内容就是对留言板功能的大体实现，总的来说，这是一个留言板的简单实现。


关键词：