个人博客留言板功能实现
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") } } })
留言板效果图
结尾
上述内容就是对留言板功能的大体实现,总的来说,这是一个留言板的简单实现。
关键词:
责任编辑:宋璟
-
个人博客留言板功能实现
-
房子贷款多久可以下来(房子首付付了贷款没下来可以退吗)
-
广东省各地退休金标准2023年公布没?今年各地养老金如何计算的?_热点聚焦
-
柳岩的衣服真“挤”,一袭抹胸连衣裙高级时髦,大方展现曼妙身姿
-
日本的游戏十分污的游戏_日本邪恶游戏_天天实时
-
小德又遭法网观众嘘声!意外进决赛也是错?小德:我不在乎嘘声!
-
暖气排气阀排气口有点漏水(暖气排气阀漏水怎么办)
-
天天报道:aw是什么意思(awd是什么意思)
-
每日一猜6月10日:哪款能重塑眼镜人士新体验_全球速看
-
中国代表敦促日方勿让福岛核污染水危害人类健康-天天讯息
-
全球速看:2023端午节股市休市几天
-
安装使用漏电保护器属于什么安全措施(安装使用漏电保护器 是属于哪种安全技术措施)|全球视讯
-
写意牡丹画法王宝钦_写意牡丹画法
-
河南:关于做好2023年军队院校招收普通高中毕业生政治考核工作的通知_世界报资讯
-
全球要闻:外媒曝Jennie将加入漫威, 或出演亚洲超级英雄电影
-
讯息:取四朵用石蕊溶液染成紫色的纸花(取四朵用石蕊溶液)
-
环球速递!花落黄泉忧伤成海
-
物料提升机型号s100(物料提升机型号)
-
新亚制程:进入水逆期的消费电子龙头_全球聚看点
-
每日看点!将来3月,四大生肖前缘重现,财源滚滚,事业进步
-
高校食堂“鼠头鸭脖事件”背后:10万能拿下一个档口?|天天快资讯
-
今起12306试行在线选铺服务,买卧铺票可以在线选下铺了!
-
全球观天下!租房时,不满三个月的合同,中介收取一个月房租1600和管理费1200
-
湖南工业职院:两个“国字号”团队牵手共育产业工匠|世界动态
-
身怀六甲k线图形(请问大家 在股市中 ldquo 身怀六甲出现 rdquo 走势 是什么意思)
-
三星折叠屏W24系列通过认证:Fold5和Flip5换皮版,标配25W快充 焦点关注
-
首台套50万千瓦冲击式水电机组项目开工 环球新消息
-
产煤大省又有大动作 世界看点
-
这就是信心|优化营商环境 各地硬招、实招频出
-
卜算子送鲍浩然之浙东诗意翻译(卜算子送鲍浩然之浙东诗意) 世界资讯
-
湖南工业职院:两个“国字号”团队牵手共育产业工匠
-
世界短讯!俄媒:俄国防部公布乌军装甲车辆被摧毁视频,引用二战时期经典语录
-
每日视讯:微视频 | 溪下瓜田甜万家
-
焦点速看:理财起息日 理财起息日是什么意思
-
开出“科技之花”结出“产业之果”,这个研讨会聚焦青年创新力-今日关注