ZY知識庫留言板功能實現

前言

因為這個博客是用的大佬的開源項目，我也是用自己的想法改了很多東西，雖然可能寫的不是很好，但是我自己想要的效果實現了，開源項目不就是用來學習的嘛，所以不能一層不變，之前首頁改版、評論功能我都沒有寫文章，這次抽空更新了留言板功能，來水一篇文章。

(資料圖片僅供參考)

留言板地址：ZY知識庫 · ZY - 留言板 (pljzy.top)

留言類和回復類

首先我創建了如下2個類，類型無非就是int、string、DateTime，這里就不做多的解釋了

留言類

回復類

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")                }            } })

留言板效果圖

結尾

上述內容就是對留言板功能的大體實現，總的來說，這是一個留言板的簡單實現。

標簽：