ZY知识库留言板功能实现

前言

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

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

留言类和回复类

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

留言类

回复类

Service层实现

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

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

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

public class MessagesService:IMessagesService {     private readonly MyDbContext _myDbContext;      public MessagesService(MyDbContext myDbContext)     {         _myDbContext = myDbContext;     }     public async Task<Messages> 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<Messages> 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<IMessagesService, MessagesService>();

Controller层实现

public class MsgBoardController : Controller {     private readonly IMessagesService _messagesService;      public MsgBoardController(IMessagesService messagesService)     {         _messagesService = messagesService;     }     // GET     public async Task<IActionResult> Index(int page = 1, int pageSize = 10)     {         MsgBoardList msgBoardList = new MsgBoardList()         {             PagedList = _messagesService.GetAll(new QueryParameters             {                 Page = page,                 PageSize = pageSize             }),             ...         };         return View(msgBoardList);     }      /// <summary>     /// 新增留言     /// </summary>     /// <param name="messages"></param>     /// <returns></returns>     [HttpPost]     public async Task<ApiResponse> 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风格接口。

前端部分实现

 <div class="my-3" id = "CommentList">             <div class="feedback_area_title">                 留言列表             </div>             @foreach (var m in Model.PagedList)             {                 @await Html.PartialAsync("Widgets/MsgBoxList",m)             } </div> 

分布视图MsgBoxList用于显示留言

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

MsgBoxList：

@model Personalblog.Model.Entitys.Messages <div class="feedbackItem">     <div class="feedbackListSubtitle">         <div class="feedbackManage">             <span class="comment_actions">                 <a class="comment_actions_link" href="#reply" onclick="Reply(@Model.Id,'@Model.Name')" id="Reply">回复</a>             </span>         </div>         <span class="comment_date">@Model.created_at</span>         <span class="a_comment_author_5166961">@Model.Name</span>     </div>     <div class="feedbackCon">         @Html.Raw(@Model.Message)     </div>    </div> @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')                 }             }  }) 

留言板效果图

结尾

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