天天热门:个人博客留言板功能实现
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") } } })
留言板效果图
结尾
上述内容就是对留言板功能的大体实现,总的来说,这是一个留言板的简单实现。
关键词:
上一篇:全球今热点:淮南市政务服务中心(关于淮南市政务服务中心介绍)
下一篇:最后一页
- 广州科技活动周进入预热 明日正式启动300多场主题活动接踵而来
- 深化重点领域信用建设 广州正式出台新型监管机制实施方案
- 女童不慎掉入20米深井 18岁小姨三次下井成功营救
- 西安3个区域12月28日起每日开展全员核酸 官方提倡民众居家健身
- 浙江乐清一核酸检测结果异常人员 复采复检为阴性
- 浙江本轮疫情报告确诊病例490例 提倡“双节”非必要不出省
- 西安警方通报6起涉疫违法案件
- 西安新一轮核酸筛查日检测能力达160万管
- 西安市累计报告本土确诊病例811例
- 重庆曝光4起违反中央八项规定精神典型问题 警示党员干部清新过节
-
云南清水河边检站查获走私玉石和玉石毛料65公斤
中新网临沧12月28日电 (徐媛 雷珍玉)记者28日从云南清水河出入境边防检查站获悉,该站近日在清水河口岸查获一起利用货车藏匿走私玉石
-
让农民工不再忧“薪” 湖南祁阳高效根治欠薪
中新网永州12月28日电 (刘志军 周盛波)“感谢你们,没有你们不辞辛苦、多次讨要,我们肯定拿不着钱,这个年肯定过不好。”27日,农民
-
浙江缙云九旬老党员20多年义务为乡村老人理发
中新网丽水12月28日电(范宇斌 蒋依笑)在浙江省丽水市缙云县七里乡大园村周坎头自然村,今年90岁的陶岳贵在年近古稀时拾起剃刀,20多年
-
疫情下的边城东兴:停摆的城 夜行的人
(抗击新冠肺炎)疫情下的边城东兴:停摆的城 夜行的人 中新社广西东兴12月28日电 题:疫情下的边城东兴:停摆的城 夜行的人
-
长江流域生态管护员:我与长江的十年之约
中新网江西彭泽12月28日电 (袁昕 记者 王昊阳)“这是我今天第三次巡查了。”穿着新制服的长江流域生态管护员吴成年站立船头,在
-
吉林查干湖冬捕启幕 头鱼拍出2999999元
中新网松原12月28日电 (石洪宇 谭伟旗 薛栋栋)中国查干湖第二十届冰雪渔猎文化旅游节28日开幕,数万名游客现场直击鱼跃湖面的盛况。
-
甘肃中药炮制师研习古法30载:掌心留痕,翻烂资料书
中新网兰州12月28日电 (张婧)从事中药饮片加工技艺30年的张良,右手掌心有一条老疤痕,“20年前跟着老师傅学习中药材性状鉴别,传统方
-
广东启用涉疫风险人员排查12320专号
中新网广州12月28日电 (记者 蔡敏婕)广东省28日正式启用涉疫风险人员排查12320专号。即日起,涉疫风险人员来(返)粤前可在“粤省事”
-
武汉协和医院开设互联网儿童医学中心
中新网武汉12月28日电 (聂文闻 彭锦弦 陈有为)记者28日从华中科技大学附属协和医院(以下简称“武汉协和医院”)获悉,该院在湖北省首
-
四川:力争三年完成638个历史遗留矿山生态修复
中新网成都12月28日电 (杨予頔)28日,四川省自然资源厅发布消息称,近日,四川省自然资源厅印发了《四川省历史遗留矿山生态修复三年行
X 关闭
北京试点全龄友好住宅项目 老年家庭购房首付最低35%
西安新增本土确诊病例150例 详情发布
广东最低气温跌至-6℃现冰挂 部分道路及海上交通受影响
“2022科学跨年系列活动”启动 提高公众对科学类流言“免疫力”
珠科院多举措助力大湾区抗旱防咸保供水
X 关闭
全球今热点:淮南市政务服务中心(关于淮南市政务服务中心介绍)
当前最新:揭秘大神的大发快三走势技巧规律:如何稳赚不亏?
当前热门:电脑网络连接一直显示正在获取地址(本地连接一直在获取网络地址)
武汉挂牌21宗地块:17宗宅地起始总价超281亿元
当前热讯:茅台咖啡来了!12元可多加2ml飞天茅台酒 最新回应