每日资讯:个人博客留言板功能实现
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") } } })
留言板效果图
结尾
上述内容就是对留言板功能的大体实现,总的来说,这是一个留言板的简单实现。
标签:
精彩推送
世界微速讯:港股异动 | ASMPT(00522)涨超5% 机构称行业景气回升驱动戴维斯双击
ASMPT(00522)尾盘涨超5%,截至发稿,涨4 62%,报74 7港元,成交额9993 91万港元。
来源:2023.06.08
新闻快讯
X 关闭
X 关闭
新闻快讯
- 每日资讯:个人博客留言板功能实现
- 奥迪中国总裁温泽岳:计划构建中国市场专属的奥迪生态系统 天天简讯
- 五部门联合启动河湖安全保护专项执法行动|环球热消息
- 襄阳6家企业签约入驻军创园地
- 全球今头条!美英领导人发表《大西洋宣言》 美英寻求建立“新型创新伙伴关系”!
- 天天速读:容量4500mAh、充电25W!三星Galaxy S23 FE电池曝光
- 热资讯!中国吸引跨国公司的不单是大市场
- 【世界新要闻】张怡宁将执教印度乒乓球队?假的!
- 二甲胺水溶液商品报价动态(2023-06-10) 每日播报
- 京东几天到货河北(京东一般几天到货) 天天新要闻
- 韩国:2025年起将AI引入小中高课程 到2028年实现全面覆盖-世界速看料
- 当前热议!组图|2023高考结束!青春不散场 未来皆可期
- 饮酒配什么蔬菜好吃?
- 鸡打鸣烧鸡的制作?-世界微速讯
- 世界速看:诸康妮演讲稿(诸康妮)
- 新华全媒+|夜幕下,一个群体带动城市消费新热潮
- 3070显卡需要多大电源(3070显卡)
- 全球实时:追光 | 明晨,看18年后的伊斯坦布尔续写欧冠决赛传奇
- 河南各地迎难而上全力抢收 多方聚力确保夏粮应收尽收
- 【环球报资讯】航行警告!渤海海峡黄海北部执行军事任务
- 吉愿罐、定胜糕、考神咖……快消企业“高考”营销寻增量 环球滚动
- 商城县气象局发布高温橙色预警【II级/严重】【2023-06-10】 天天头条
- 速递!梅西刚走巴黎欲连签7人!强挖皇马太子+曼城核心,欲带飞姆巴佩
- 《古惑狼大乱斗》第一赛季将于正式版上线时开启
- 辛亥革命史pdf_辛亥革命 2011年中国青年出版社出版的图书_每日资讯
- 要闻:龙湖集团:今年前5个月累计销售额817亿元,5月新增4宗土地
- 天天微速讯:“十年一遇”!数万人被疏散,加拿大山林野火为何失控?
- 工伤团体意外险怎么买?多少钱? 环球新资讯
- 米小圈脑筋急转弯大全及答案100个 米小圈脑筋急转弯大全及答案
- 小杨_xiaoyang
- 老板电器官宣代言人,与王一博携手实现洗碗机的用户与认知破圈
- 学历和胖瘦有关?柳叶刀:在中国,女性学历越高,身材越瘦!而男性则相反
- 视讯!让券商研报成为真正的投资指南
- 新消息丨行业分类八大行业_行业分类
- 【环球时快讯】华为mlaal10是啥型号(华为mlaal10是什么型号价格多少钱)
- 《奋斗者在路上——“我们都是新新职业人”》养老护理员单桂红:希望能有更多的人一起为老人提供优质的服务
- 世界快讯:股票行情快报:沃森生物(300142)6月9日主力资金净买入215.90万元
- 每日快讯!转型失败?月销252辆,凯迪拉克的首款新能源锐歌,整体表现低迷
- 【热闻】国网天津静海公司:深入企业开展有限空间作业和用电安全专项宣传活动
- 美人你只要AI的?浅谈白袜和光脚关系的囧图 全球速递
- 祎怎么读音语音_祎怎么读
- 北京市互联网金融行业协会召开贷款中介自律规范闭门座谈会
- 喜欢一个人始于颜值陷于才华忠于人品谁写的_喜欢一个人 始于颜值 陷于才华 忠于人品 下一句是什么 我记得是_-天天日报
- 当前热门:住房公积金制度惠及面进一步扩大 去年全国发放贷款超万亿元
- 环球通讯!卫星图像显示烟雾从加拿大扩散至美国
- 蒙古斑虫(蒙古斑) 当前通讯
- 美国4月批发销售环比上升0.2%预期上升0.40%_天天即时
- 西华“小城大爱”:风雨十年路 爱心送考情
- 小学语文教学评价案例(小学语文教学评价)
- 马斯克不敌王传福!一季度电动车销量比亚迪全球第一 全球观速讯