世界快資訊:個人博客留言板功能實現

        來源:博客園     時間:2023-06-11 00:34:43

        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.3CommentsJson方法是用來處理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")                }            } })

        留言板效果圖

        結尾

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

        標簽:

        精彩放送
        亚洲AV成人精品网站在线播放| 午夜在线亚洲男人午在线| 亚洲欧美中文日韩视频| 在线观看亚洲人成网站| 久久久久亚洲AV成人无码网站| 国产成人亚洲综合色影视| 中文字幕精品亚洲无线码二区| 亚洲欧洲精品成人久久奇米网| 亚洲狠狠婷婷综合久久| 亚洲色成人网站WWW永久四虎| avtt天堂网手机版亚洲| 亚洲国产91在线| 亚洲一卡2卡3卡4卡5卡6卡| 国产精品亚洲一区二区麻豆| 在线观看日本亚洲一区| 亚洲av永久无码精品秋霞电影秋| 亚洲av永久中文无码精品| 亚洲AV无码一区二区三区鸳鸯影院| 亚洲av无码专区在线电影天堂| 亚洲AV无码成人精品区日韩| 99亚洲精品卡2卡三卡4卡2卡| 国产亚洲精品仙踪林在线播放| 亚洲高清免费视频| 亚洲午夜av影院| 亚洲精品国偷自产在线| 久久久久无码精品亚洲日韩| 精品亚洲A∨无码一区二区三区| 亚洲永久中文字幕在线| 亚洲人xxx日本人18| 亚洲爆乳无码精品AAA片蜜桃| av无码东京热亚洲男人的天堂| 亚洲日韩国产精品乱| 亚洲精品国偷自产在线| 亚洲人成亚洲精品| 亚洲一级毛片免费观看| 亚洲av无码有乱码在线观看| 亚洲国产精品综合久久一线| 亚洲色爱图小说专区| 亚洲日韩区在线电影| 亚洲人和日本人jizz| 亚洲Av永久无码精品一区二区|