个人博客留言板功能实现

皮革探戈

ZY知识库留言板功能实现

前言

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

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

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

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

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

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

复制代码

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

1. public class MessagesService:IMessagesService
2. {
3.     private readonly MyDbContext _myDbContext;
5.     public MessagesService(MyDbContext myDbContext)
6.     {
7.         _myDbContext = myDbContext;
8.     }
9.     public async Task<Messages> SubmitMessageAsync(Messages messages)
10.     {
11.         StringBuilder sb = CommentSJson.CommentsJson(messages.Message);
12.         messages.Message = sb.ToString();
13.         messages.created_at = DateTime.Now;
14.         await _myDbContext.Messages.AddAsync(messages);
15.         await _myDbContext.SaveChangesAsync();
16.         return messages;
17.     }
18.     public IPagedList<Messages> GetAll(QueryParameters param)
19.     {
20.         return _myDbContext.Messages.Include(m => m.Replies).ToList().ToPagedList(param.Page, param.PageSize);
21.     }
22. }

复制代码

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

builder.Services.AddTransient();
Controller层实现

1. public class MsgBoardController : Controller
2. {
3.     private readonly IMessagesService _messagesService;
5.     public MsgBoardController(IMessagesService messagesService)
6.     {
7.         _messagesService = messagesService;
8.     }
9.     // GET
10.     public async Task<IActionResult> Index(int page = 1, int pageSize = 10)
11.     {
12.         MsgBoardList msgBoardList = new MsgBoardList()
13.         {
14.             PagedList = _messagesService.GetAll(new QueryParameters
15.             {
16.                 Page = page,
17.                 PageSize = pageSize
18.             }),
19.             ...
20.         };
21.         return View(msgBoardList);
22.     }
24.     /// <summary>
25.     /// 新增留言
26.     /// </summary>
27.     /// <param name="messages"></param>
28.     /// <returns></returns>
29.     [HttpPost]
30.     public async Task<ApiResponse> SubMessage([FromBody]Messages messages)
31.     {
32.         if(messages.Message == null || messages.Message == "")
33.             return new ApiResponse(){Data = "请输入留言内容",Message = "请输入留言内容",StatusCode = 422};
34.         if(messages.Name == null || messages.Name == "")
35.             return new ApiResponse(){Message = "请输入昵称~",StatusCode = 422};
36.         if (messages.Email == null || messages.Email == "")
37.             return new ApiResponse(){Message = "请输入邮箱~",StatusCode = 422};
38.         bool isValid = CheckEmail.CheckEmailFormat(messages.Email);
39.         if (!isValid)
40.         {
41.             return new ApiResponse(){Message = "邮箱格式错误~",StatusCode = 422};
42.         }
43.         try
44.         {
45.             return new ApiResponse(){Data = GetHtml(await _messagesService.SubmitMessageAsync(messages)),Message = "留言成功",StatusCode = 200};
46.         }
47.         catch (Exception e)
48.         {
49.             return new ApiResponse() { Data = "服务器异常！", Message = "服务器异常！", StatusCode = 500 };
50.         }
51.     }
52. }

复制代码

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

2.             
3.                 留言列表
4.             
5.             @foreach (var m in Model.PagedList)
6.             {
7.                 @await Html.PartialAsync("Widgets/MsgBoxList",m)
8.             }

复制代码

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

1. @model Personalblog.Model.Entitys.Messages
3.    
4.         
5.             
6.                 <a  target="_blank" href="https://www.cnblogs.com/#reply" onclick="Reply(@Model.Id,'@Model.Name')" id="Reply">回复</a>
7.             
8.         
9.         @Model.created_at
10.         @Model.Name
11.    
12.    
13.         @Html.Raw(@Model.Message)
14.       
16. @if (Model.Replies.Any())
17. {
18.     @await Html.PartialAsync("Widgets/MsgBoxReplyList",Model.Replies)
19. }

复制代码

利用ajax请求发送留言

部分代码

1. $.ajax({
2.             url:'/MsgBoard/SubMessage/',
3.             type:'post',
4.             data:JSON.stringify({
5.                 "Name":""+Name+"",
6.                 "Email":""+Email+"",
7.                 "Message":""+Content+""
8.             }),
9.             contentType: 'application/json',
10.             success:function (data){
11.                 if (data.statusCode === 200){
12.                     alert(data.message, 'success')
13.                      const CommentList = document.getElementById('CommentList')
14.                     const html = data.data
15.                     CommentList.insertAdjacentHTML('beforeend', html);
16.                     clearInput()
17.                 }else{
18.                     alert(data.data, 'danger')
19.                 }
20.                  $("#btnComent").prop("disabled", false);
21.             },
22.             error:function(xhr,status,error){
23.                  $("#btnComent").prop("disabled", false);
24.                  if (xhr.status === 429){
25.                     alert("请求过于频繁，请稍后再试。",'warning')
26.                 }else if (xhr.status === 422){
27.                     alert(xhr.responseJSON.message,'warning')
28.                  }
29.                 else{
30.                     alert("服务器异常，请稍后再试！！！",'danger')
31.                 }
32.             }
33. })

复制代码

留言板效果图

结尾

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

来源:https://www.cnblogs.com/ZYPLJ/archive/2023/06/10/17471043.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！