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

留言板效果圖

結尾

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