个人博客留言板功能实现
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();
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>
public async Task<ApiResponse> SubMessage(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
<atarget="_blank" href="https://www.cnblogs.com/#reply" onclick="Reply(@Model.Id,'@Model.Name')" id="Reply">回复</a>
@Model.created_at
@Model.Name
@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')
}
}
})留言板效果图
结尾
上述内容就是对留言板功能的大体实现，总的来说，这是一个留言板的简单实现。
来源:https://www.cnblogs.com/ZYPLJ/archive/2023/06/10/17471043.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]