在开始完成这个功能之前,讲讲目前的缺陷,首先我没有评论表中添加主键,这样直接与每条新闻的评论功能无法全部实现,想要完成这个功能比较啰嗦,只需要把新闻表的主键绑定为评论表的外键。写到后期才发现这个问题,因此我只完成了一条新闻(news_read.jsp)的评论功能。此外,如果你的数据库没有评论表,第一次加载新闻页面会报错,如果你有好的建议请评论留言
第一步:我们需要创建评论类,在news.entity包中创建bm_comment类,加入如下代码
package com.jjzd.news.entity;
//TODO:本页为benmao编写
public class bm_comment {
private String username;
private String ip;
private String comment;
public bm_comment() {
}
public bm_comment(String username, String ip, String comment) {
super();
this.username = username;
this.ip = ip;
this.comment = comment;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getIp() {
return ip;
}
public void setIp(String ip) {
this.ip = ip;
}
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}
@Override
public String toString() {
return "bm_comment [username=" + username + ", ip=" + ip + ", comment=" + comment + "]";
}
}
第二步:我们需要预写功能,在news.dao包中创建bm_comment接口,注意是接口,加入如下代码
import java.util.List;;
//TODO:本页为benmao编写
public interface bm_comment {
//是否存在评论表
public boolean isComExist();
//创建评论表(username,ip,comment)
public int createCom();
//获取所有评论
public List<com.jjzd.news.entity.bm_comment> getallCom();
//添加评论
public int addCom(String id, String name, String content);
}
说明:com.jjzd.news.entity.bm_comment 写全名是避免导包冲突
第三步:现在需要写具体的方法,在news.dao.impl包中创建bm_comment实现类,依次加入方法
实现类需要先继承BaseDao.java再实现父接口
方法1:是否存在评论表
@Override
// 是否存在评论表
public boolean isComExist() {
String sql = "select * from com limit 1";
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
con = getConnection();
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
if (rs!=null) {
System.out.println("true");
return true; // 表存在
} else {
System.out.println("false");
return false; // 表不存在
}
} catch (SQLException e) {
e.printStackTrace();
System.out.println("异常");
return false; // 出现异常,表不存在
} finally {
// 关闭资源
try {
if (rs != null) {
rs.close();
}
if (ps != null) {
ps.close();
}
if (con != null) {
con.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
方法2: 创建评论表
@Override
//创建评论表(username,ip,comment)
public int createCom() {
String createTableSql = "create table com (id VARCHAR(50), name VARCHAR(50), content VARCHAR(255))";
Connection con = null;
PreparedStatement ps = null;
try {
con = getConnection();
ps = con.prepareStatement(createTableSql);
return ps.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
return 0;
} finally {
// 关闭资源
try {
if (ps != null) {
ps.close();
}
if (con != null) {
con.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
方法3:获取所有评论
@Override
public List<com.jjzd.news.entity.bm_comment> getallCom() {
List<com.jjzd.news.entity.bm_comment> commentList = new ArrayList<>();
String sql = "select * from com";
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
con = getConnection();
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
String id = rs.getString("id");
String name = rs.getString("name");
String content = rs.getString("content");
com.jjzd.news.entity.bm_comment com = new com.jjzd.news.entity.bm_comment(name, id, content);
commentList.add(com);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
// 关闭资源
try {
if (rs != null) {
rs.close();
}
if (ps != null) {
ps.close();
}
if (con != null) {
con.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
System.out.println("yes");
System.out.println(commentList);
return commentList;
}
方法4:添加评论
@Override
//添加评论
public int addCom(String id, String name, String content) {
String sql = "insert into com(id, name, content) values(?,?,?)";
exceuteUpdate(sql, id, name, content);
return 0;
}
第四步:接下来需要再news_read.jsp添加代码,保证评论可以显示,在相应评论标签添加代码
1. 先添加一下样式
.classlist {
max-height: 200px; /* 设置评论区的最大高度 */
display: flex;
flex-direction: column;
overflow-y: auto; /* 设置垂直滚动条 */
}
.bm_pl {
background: white;
border-bottom: 1px solid #f2f2f2; /* 设置为淡白色 */
margin-bottom: 10px;
}
.username span {
color: rgba(255, 175, 71, 0.703);
font-weight: bold;
}
.comment span {
color: rgba(0, 0, 0, 0.886);
}
.ip span {
color: rgba(128, 128, 128, 0.855);
font-size: 12px;
font-weight: bold;
}
2. 添加如下代码。可以现在直接在新闻下面直接添加
<%-- TODO:笨猫在此写评论功能代码 --%>
<div class="classlist">
<%
request.setCharacterEncoding("UTF-8");
bm_comment bc = new bm_commentImpl();
List<com.jjzd.news.entity.bm_comment> ls = null;
// 判断表存在还是不存在
if (bc.isComExist()) {
// 如果存在就查询评论
ls = bc.getallCom();
} else {
// 如果不存在就创建这个表
bc.createCom();%>
<script type="text/javascript">
alert("评论表没有创建,重新加载可以恢复")
location.href="news_read.jsp";
</script>
<%
}
for (int i = 0; i < ls.size(); i++) {
%>
<div class="bm_pl">
<div class="username"><span>用户名:<%= ls.get(i).getUsername() %></span></div>
<div class="comment"><span> <%= ls.get(i).getComment() %></span></div>
<div class="ip"><span>IP:<%= ls.get(i).getIp() %></span></div>
</div>
<%
}
%>
</div>
3. 修改评论表单action为../util/pinglun.jsp
第五步:最后只需要把添加评论功能写上即可,在util文件夹下创建pinglun.jsp文件,在此文件填写如下代码
<%-- 本页为benmao编写 --%>
<%-- 这一页是写addCom方法 --%>
<%@page import="com.jjzd.news.dao.impl.bm_commentImpl"%>
<%@page import="com.jjzd.news.dao.bm_comment"%>
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="utf-8"%>
<%
request.setCharacterEncoding("UTF-8");
bm_comment bc = new bm_commentImpl();
String id = request.getParameter("cip");
String name = request.getParameter("cauthor");
String content = request.getParameter("ccontent");
bc.addCom(id, name, content);
%>
<script type="text/javascript">
alert("添加成功");
location.href="../newspages/news_read.jsp";
</script>
这时候已经完成了新闻的评论功能,可以自行测试一波