个人博客留言板功能实现

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

留言板效果图

image

结尾

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

posted @   妙妙屋(zy)  阅读(525)  评论(4编辑  收藏  举报
相关博文:
阅读排行:
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇
  1. 1 够爱(翻自 曾沛慈) 是我呀卡司宝贝
  2. 2 老人と海 ヨルシカ
  3. 3 生生世世爱 黄霄雲
  4. 4 希望有羽毛和翅膀 imzat
够爱(翻自 曾沛慈) - 是我呀卡司宝贝
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 无

作曲 : 无

翻唱:卡司

后期:A 酱

母带:TORA

海报:相如赋

“因为够爱,所以才勇敢啊”

我穿梭金星 木星 水星 火星 土星 追寻

追寻你 时间滴滴答滴答答的声音

我穿梭金星 木星 水星 火星 土星 追寻

追寻你 时间滴滴答滴答答的声音

指头还残留 你为我

擦的指甲油 没想透

你好像说过 你和我

会不会有以后

世界一直一直变

地球不停的转动

在你的时空 我从未退缩懦弱

当我靠在你耳朵

只想轻轻对你说

我的温柔 只想让你都拥有

我的爱 只能够

让你一个人 独自拥有

我的灵和魂魄

不停守候 在你心门口

我的伤和眼泪

化为乌有 为你而流

藏在 无边无际

小小宇宙 爱你的我

你听见了吗

我为你唱的这首歌

是为了要证明

我为了你 存在的意义

世界一直一直变

地球不停的转动

在你的时空 我从未退缩懦弱

当我靠在你耳朵

只想轻轻对你说我的温柔

只想让你都拥有

我的爱 只能够

让你一个 人独自拥有

我的灵和魂魄

不停守候 在你心门口

我的伤和眼泪化为乌有

为你而流

藏在 无边无际

小小宇宙 爱你的我

爱你的我 不能停止脉搏

为了爱你奋斗

就请你让我 说出口

爱 只能够

让你一个人 独自拥有

我的灵和魂魄

不停守候 在你心门口

我的伤和眼泪

化为乌有 为你而流

藏在 无边无际

小小宇宙 爱你的我

爱你的我 爱你的我

我穿梭金星 木星 水星

火星 土星 追寻

追寻你 时间滴滴答滴答

答滴声音

我穿梭金星 木星 水星

火星 土星 追寻

追寻你 时间滴滴答滴答

答的声音

我穿梭金星 木星 水星

火星 土星 追寻

追寻你 时间滴滴答滴答

答的声音

点击右上角即可分享
微信分享提示