个人博客留言板功能实现
ZY知识库留言板功能实现
前言
因为这个博客是用的大佬的开源项目,我也是用自己的想法改了很多东西,虽然可能写的不是很好,但是我自己想要的效果实现了,开源项目不就是用来学习的嘛,所以不能一层不变,之前首页改版、评论功能我都没有写文章,这次抽空更新了留言板功能,来水一篇文章。
留言板地址:ZY知识库 · ZY - 留言板 (pljzy.top)
(资料图片仅供参考)
留言类和回复类
首先我创建了如下2个类,类型无非就是int、string、DateTime,这里就不做多的解释了
留言类
字段名 | 解释 |
---|---|
Id | 主键 |
Name | 留言者昵称 |
留言者邮箱 | |
Message | 留言内容 |
Created | 留言时间 |
回复类
字段名 | 解释 |
---|---|
Id | 主键 |
MessageId | 留言类外键 |
Name | 回复者昵称 |
回复者邮箱 | |
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.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 @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") } } })
留言板效果图
结尾
上述内容就是对留言板功能的大体实现,总的来说,这是一个留言板的简单实现。
标签:
精彩推送
新闻快讯
X 关闭
X 关闭
新闻快讯
- 个人博客留言板功能实现
- 华南等地部分地区将有大到暴雨 黄淮江汉等地有高温天气 全球要闻
- 让文明交融之光照耀未来
- 杭州士兰微公司地址(杭州士兰微电子股份有限公司官网) 天天聚看点
- 数字营销的好处和坏处_什么是数字营销 有什么好处
- 天维美维生素b族怎么吃(天维禁地)
- 世界热门:世界报道:焦点热文:潘达利亚飞行多少级能学 潘达利亚飞行 每日视讯 全球热消息
- 前沿资讯!理清三段关系,新人smart更通透了
- 妻子谎称留学分别与2男子同居
- 焦点资讯:月经以后胸痛,月经后胸还疼怎么办
- 【全球热闻】火车计次票、定期票 如何购买使用
- 全球百事通!AI前哨 | GPT-5什么时间上线?OpenAI CEO在中国会议上发言
- 全球焦点!吴智恩男友 吴智恩丈夫
- 组图|2023高考结束!青春不散场 未来皆可期 每日动态
- 保卫萝卜4周赛6.10攻略
- 世界观察:昔日荒山变为幸福“金山” 桃园变成农民增收“致富园”
- 信用就医“亲情付”上线 老年人和未成年人也能享“先诊疗 后付费”
- 鱼塘7万斤鱼异常死亡,镇政府:工业废弃物倾倒被雨水冲入_当前最新
- 环球今头条!资本家是什么意思
- 金苹果月饼怎么样(金苹果月饼) 环球新要闻
- 全球热点评!“文根”何以“深种”?看文博会如何寻找岭南新坐标
- 每日热文:《天空之城》:用纯真对抗贪婪
- 每日简讯:乐平京东京喜代运营_为您揭秘京东京喜代运营的优势与方法
- 意外险一般赔付多少?赔付多久能到账?
- 每日快报!推荐一款轻量级全栈式开源测试平台!
- 炎炎夏日,女子选择清凉舒适的吊带衫,尽显温柔气质和曼妙身姿-全球聚看点
- 龙爸无双100集电视剧免费观看_世界焦点
- 第34届中国经济新闻奖:21世纪经济报道获评论一等奖、融合报道一等奖 全球短讯
- 我市2023年高考顺利结束 预计6月25日公布成绩 即时焦点
- EDG海报选手无字图,官方明示Uzi的加入,粉丝彻底疯狂了
- 环球最新:黄州区“政采贷”为中小微企业发展注入金融“活水”
- 好玩好看,上海国际电影节首次推出“数字影视体验展”
- 中医治疗脑血栓验方:益气活血,温经通脉。 当前简讯
- 世界热资讯!景芝景阳春酒价格表38度_景芝景阳春酒价格表
- 华尔街前瞻:美联储会否按下加息“暂停键”?下周股市迎来“关键一周” 聚焦美国CPI、FOMC会议
- 上海以吉文化传播有限公司(上海吉承文化传播有限公司) 全球热头条
- 科达制造:6月9日融资买入1278.06万元,融资融券余额16.67亿元
- 采访很多活得久的癌症患者,成功的背后都藏有3个秘密 全球观焦点
- 夜书所见叶绍翁带拼音_夜书所见叶绍翁拼音版-每日焦点
- 日本东京多摩地区半数居民血检有害物质超标 污染源或为美军基地|环球今日讯
- 全球新动态:【聚焦深圳文博会】当云南的风吹到深圳 来云南展区打卡“有风小院”
- 耐的部首结构(耐的部首)|热点聚焦
- 【环球速看料】1234567910大写怎么写123456_123456789大写怎么写
- 渣打集团6月8日斥资343.85万港元回购51.15万股
- 农业发展银行董事长钱文挥:持续推进产品模式创新,研究构建ESG体系框架|全球热资讯
- 什么是esg基金
- 世界热讯:日本多摩地区过半居民血检异常 数值超过正常值2倍
- 全球信息:approximate缩写_approximate
- 瓜州:家电家具下乡利农惠民 快报
- 开封市通许县咸平街道持续开展安全隐患夜查活动