第一种：多级评论（递归）；需要注意组件传值问题

利用Vue+ElementUi实现评论功能-仿掘金_zLanaDelRey的博客-CSDN博客_vue实现评论功能

第二种：两级评论，注意组件传值问题

VUE+Java实现评论回复功能_harveyST的博客-CSDN博客_vue评论回复功能

概述

个人博客搭建成功后已经上线运行了好久，但是一直没有时间配置评论区的邮件提醒功能，所以今晚有时间就抽空配置了，然后将操作过程做一下记录。

前提条件

• 一个已经上线运行的Hexo博客(至于用什么主题都是没有强制要求的)

操作步骤

1、为博客配置Valine评论系统

Hexo博客支持的评论系统其实有很多，像之前使用过的来比力啥的，但是目前好多博客都配置了Valine，所以我博客也选择了这一款评论系统，原因无他：轻量级、访问速度快、配置过程简单，以上三个原因足够我使用它了。

Valine评论系统的配置其实很简单，大家直接看它的官网文档还是随便百度一下配置过程，都有大量的资料。在这里就简单介绍一下。

1.1、首先要去LeanCloud官网(https://www.leancloud.cn/)注册一个帐号，账号注册成功后，我们在控制台创建一个应用，如下：

1.2、应用创建完成后，点击应用小卡片右上角的设置按钮进入到应用设置面板，在此面板下的【设置 | 应用Keys】菜单下，获取应用的AppID和AppKey，如下图：

1.3、然后将AppID和AppKey这两个属性值复制粘贴到Butterfly主题的配置文件中，其他主题也类似，粘贴到主题的配置文件中即可，如下：

1.4、此时，我们的博客页面已经出现了评论面板了，如下所示：

1.5、最后，我们在leancloud中的应用设置界面中，通过【设置 | 安全中心】菜单，将我们博客的域名添加到安全中心，如下：

1.6、如果配置完之后没有出现评论面板，那你可要认真看看对应的主题应该怎么配置Valine评论系统了，比如博主使用最新版的Butterfly主题后，配置了Valine但是没有出现评论面板，经过大佬的指导才发现是漏写了一处配置，如下：

加上以上语句就可以正常显示评论面板了，我们也可以正常留言评论。

2、为Valine评论系统增加邮件提醒功能

为博客配置了评论系统后，如果你不是一个追求完美的小伙伴的话，其实博客已经优化的差不多了，但是博主还希望它可以做到如果有小伙伴在博客上留言了的话，可以直接邮件提醒博主，所以接下来就介绍下为Valine评论系统增加邮件提醒功能的配置过程。

首先要注意的是，目前LeanCloud中的面板已经改版了，所以网上很多关于配置邮件提醒的博客文档里的图片已经不太适用，有些按钮、面板我们在新的界面中找不到，所以我才将配置过程记录下来。

2.1、打开LeanCloud的控制台，然后进入应用的设置界面，然后通过【云引擎 | 设置】菜单，进入到云引擎的相关配置面板，然后在"自定义环境变量"处新建以下变量名和值：

以上图片中关于"SMTP_PASS"的值获取方式如下：

首先打开QQ邮箱界面，然后依次点击【设置 | 账户】菜单，如下：

然后点击下方，开启IMAP/SMTP服务，如下：

开启后会得到一串字符串，将那一串字符串复制粘贴到云引擎面板中的"SMTP_PASS"属性后面作为它的值。

2.2、接下来部署生产环境。依次点击【云引擎 | 部署】菜单，打开部署界面，然后通过如下所示部署Valine-Admin，如下：

以上的GitHub地址如下"https://github.com/DesertsP/Valine-Admin.git"，必须配置这个地址，不然我们点击部署按钮后，它在部署过程中会报错。

2.3、部署成功后，我们设置定时任务，因为免费的LeanCloud会有自动休眠模式，所以要设置定时任务然它自动重启，操作过程如下：

按上图所示，创建两个定时任务：

1.自动唤醒
       Cron表达式为 0 0/30 7-23 * * ? 表示每天早7点到晚23点每隔30分钟访问云引擎
2.每天定时检查24小时内漏发的邮件通知
       Cron表达式为 0 0 8 * * ? 定时检查24小时内漏发的邮件通知

2.4、定时任务设置完成后，我们为云引擎绑定一个域名，为了保证后续邮件提醒功能正常。但是在此处要求是一个备案的域名，所以博主就绑定了两个，一个备案的域名绑定成功了，一个没备案的域名绑定失败了，但是好像都最终对邮件提醒没影像，所以猜测应该不需要绑定域名，这就看大家了，喜欢绑定的话就像下图这样绑定即可：

2.5、到此为止，我们的邮件提醒已经可以正常工作了，我们在博客中评论一下来进行测试，如下：

2.5、今天的介绍就到这里，至于邮件提醒的模板那些属于美化的东西了，大家直接百度就可以查得到，差别并不是很大的。

JavaWeb+MySQL实现简易留言板

Hello,各位小伙伴们你们好，我是Bug终结者~，不知不觉，已经放假2周了，一晃来到了一周一更，今天我决定更新文章，今天为大家带来我学习过程中的一些经验，为小伙伴们避坑，下面为大家带来今日分享

留言板需求

上图显示的是评论页面的样式

评论页面主要分为三部分： 登录状态区、 评论区(评论和回复操作的区域)、评论列表区（显示所有的评论、回复，以及翻页控件）

1. 登录状态区：

   1.1 用户不登录也可以看到该列表，但必须登录才可以发表评论和回复。

   1.2 用户不登录也可以看到评论区

   1.3 用户不登录也可以看到回复按钮

   1.4 用户未登录状态，在评论区上方显示： 注册 和 登录 超级链接，点击分别可以进入注册和登录页面。

   1.5 登录状态，在评论区上方显示： 欢迎 XXXX ，注销 。

   1.6 注销是超级链接，点击注销进入未登录状态。

2. 评论区：

   2.1 默认显示为发表评论状态。

   2.2 发表评论状态下，只显示 textarea控件 和 发表评论按钮。

   点击某条评论的回复按钮，状态切换为针对该条评论的回复状态。

   2.3 回复状态下，在评论区 textarea 上方将显示：
   我要回复 XXX 在 2021-08-09 19:23 的评论： 听的又123

   2.4 回复状态下，发表评论按钮，变成 发表回复

   2.5 回复状态下，发表评论按钮右侧显示一个按钮“返回评论状态” ，点击将进入评论状态。

   即评论区有两个状态： 评论状态和 回复状态

   2.6 评论状态，发表的是 评论，回复状态是对某条评论回复评论。

   2.7 回复状态是针对某条评论的。

3. 评论列表：

   显示所有评论的列表。

   显示评论人、评论时间、评论内容。

   每条评论的右侧，有回复按钮，点击回复将进入针对该条评论的 回复状态。

   登录状态下自己发表的评论，右侧有删除按钮

   其他人发表的评论，右侧看不到删除按钮。

   如果评论有回复，则在评论下显示回复列表。

   每条回复显示 回复人、回复时间、回复内容。

   在登录状态下，当前登录人可以看到自己回复记录的右侧有删除按钮。

   评论要实现分页，不需要查询。

看下效果：

数据表

用户表

CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `account` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL,
  `password` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `realname` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

评论表

CREATE TABLE `t_comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL COMMENT '评论人id，对应用户表的id',
  `pl_content` varchar(500) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '评论的内容',
  `pl_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=55 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

回复表

CREATE TABLE `t_revert` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pl_id` int(11) NOT NULL COMMENT '评论人id，对应t_comment.id',
  `user_id` int(11) DEFAULT NULL COMMENT '回复人id，对应当前登录的账号.id',
  `hf_content` varchar(500) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '回复的内容',
  `hf_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '回复的时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

项目结构

部分代码

IndexServlet

@WebServlet("/index")
public class IndexServlet extends HttpServlet{

	public static final Integer pageSize = 5;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//获取当前页数
		String strPageNumb = req.getParameter("pageNumb");
		Integer pageNumb = 1;
		if (!StringUtils.isEmpty(strPageNumb)) {
			pageNumb = Integer.valueOf(strPageNumb);
		}
		CommentService commentService = new CommentServiceImpl();
		try {
			PageInfo pager = commentService.page(pageNumb, pageSize);
			req.setAttribute("pager", pager);
			req.getRequestDispatcher("/WEB-INF/comment.jsp")
			.forward(req, resp);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
}

CommentServlet

@WebServlet("/comment")
public class CommentServlet extends HttpServlet{

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//获取数据，当前评论人的id，评论的内容
		String content = req.getParameter("content");
		User user = (User)req.getSession().getAttribute("user");
		Integer userId = user.getId();
		CommentService commentService = new CommentServiceImpl();
		try {
			if (commentService.saveComment(userId, content)) {
				resp.sendRedirect(req.getContextPath()+"/index");
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

RevertServlet

@WebServlet("/revert")
public class RevertServlet extends HttpServlet{

	RevertService RevertService = new RevertServiceImpl();
	CommentService CommentService = new CommentServiceImpl();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//获取回复的记录id
		String pl_id = req.getParameter("pl_id");
		try {
			Comment comment = CommentService.queryById(Integer.valueOf(pl_id));
			System.out.println("123");
			req.setAttribute("comment", comment);
			req.getRequestDispatcher("/WEB-INF/revert.jsp")
			.forward(req, resp);
		} catch (NumberFormatException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//获取回复的具体信息
		String plId = req.getParameter("pl_id");
		String liuYan = req.getParameter("liuYan");
		System.out.println(plId);
		User user = (User) req.getSession().getAttribute("user");
		Integer userId = user.getId();
		try {
			if (RevertService.saveRevert(plId, liuYan, userId)) {
				resp.sendRedirect(req.getContextPath()+"/index");
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

**Dao层核心代码 **

连接数据库基类

BaseDao

public class BaseDao {

	private static DataSource ds = null;

	public QueryRunner initQueryRunner() throws Exception {
		String dbFile = this.getClass().getClassLoader().getResource("/").getFile();
		dbFile = dbFile.substring(1) + "db.properties";
		
		FileReader fr = new FileReader(dbFile);
		
		Properties pro = new Properties();
		pro.load(fr);
		
//		DataSource ds = DruidDataSourceFactory.createDataSource(pro);
		if (ds == null) {
			ds = DruidDataSourceFactory.createDataSource(pro);
		}
		QueryRunner qur = new QueryRunner(ds);
		System.out.println(ds);
		return qur;
	}
}

CommentDaoImpl

public class CommentDaoImpl extends BaseDao implements CommentDao{

	@Override
	public List<Comment> page(Integer pageNumb, Integer pageSize) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "select * from t_comment order by pl_time desc limit ?, ? ";
		return qur.query(sql, new BeanListHandler<Comment>(Comment.class), (pageNumb - 1) * pageSize, pageSize);
	}

	@Override
	public Comment queryById(Integer id) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "select * from t_comment where id = ?";
		return qur.query(sql, new BeanHandler<Comment>(Comment.class), id);
	}

	@Override
	public Integer delete(String pl_id) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "delete from t_comment where id = ?";
		return qur.update(sql, pl_id);
	}

	@Override
	public Integer saveComment(Integer userId, String content) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "insert into t_comment (user_id, pl_content) values(?, ?)";
		//如果update方法返回的大于0，代表增加成功，返回的小于0代表失败
		return qur.update(sql, userId, content);
	}

	@Override
	public Integer getCount() throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "select count(1) from t_comment";
		Long rowCount = qur.query(sql, new ScalarHandler<Long>());
		return rowCount.intValue();
	}

	
}

RevertDaoImpl

public class RevertDaoImpl extends BaseDao implements RevertDao{

	@Override
	public Integer saveRevert(String plId, String liuYan, Integer userId) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "insert into t_revert (pl_id, user_id, hf_content) values(?, ?, ?)";
		System.out.println(plId);
		return qur.update(sql, plId, userId, liuYan);
	}

	@Override
	public List<Revert> getListByCommentId(Integer pl_id) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "select * from t_revert where pl_id = ?";
		return qur.query(sql, new BeanListHandler<Revert>(Revert.class), pl_id);
	}

	@Override
	public Integer delete(String hfId) throws Exception {
		// TODO Auto-generated method stub
		QueryRunner qur = initQueryRunner();
		String sql = "delete from t_revert where id = ?";
		return qur.update(sql, hfId);
	}

}

絮语

今日经验分享到此就要结束了，代码路漫漫，有人与你共赴前行，遇到困难去解决，最后都会化为你宝贵的经验，每周一更，回忆一周内值得写的项目，把代码共享，分享自己做练习的一些思路，好了，本周分享该案例，我们下周见！

都看到这了，点个赞支持一下博主吧~