JSP+SQL實現留言功能（含留言回覆功能），附原始碼
阿新 • • 發佈：2019-01-14
一、開發環境
MyEclipse8.6+WampServer+MySQL
這裡用到Apache，是因為我用了他來連線資料庫。
專案中還用到了一個jar包，mysql-connector-java-5.1.13-bin.jar。
二、思路介紹
下圖是回覆資訊在資料庫中儲存的基本結構：
這是博主自己想的一種思路，適合一些小型網站，如果需要在大型網站上運用，需要你們考慮下如何解決資料超載的問題。
三、資料庫結構
資料庫名稱:blog
表內容:
（1）、user表
| Field | Type | Comment |
| uid | int(3) NOT NULL | 使用者編號（主鍵 |
| name | varchar(10) NOT NULL | 名字 |
| pwd | varchar(12) NOT NULL | 密碼 |
| status | int(1) NOT NULL | 身份 |
| condi | int(1) NOT NULL | 使用者狀態 |
| friend | varchar(100) NULL | 使用者好友 |
| userimg | varchar(100) NULL | 頭像路徑 |
| sex | int(1) NOT NULL | 性別(0未填寫1男2女)0下同 |
| age | int(3) NOT NULL | 年齡 |
| constellation | int(2) NOT NULL | 星座 |
| addres | varchar(15) NOT NULL | 地址 |
| bloodtype | varchar(5) NOT NULL | 血型 |
| sign | varchar(25) NOT NULL | 頭像 |
（2）usermessage表
| Field | Type | Comment |
| MessageId | int(5) NOT NULL | 留言id（主鍵） |
| wuid | int(5) NOT NULL | 留言者id |
| guid | int(5) NOT NULL | 被留言者id |
| MessageText | text NOT NULL | 留言內容 |
| ReplyMessage | text NULL | 回覆內容 |
| writetime | varchar(20) NOT NULL | 留言時間 |
三、html模組
（1）、通過form表單跳轉到留言功能預處理模組的serverlet,表單模組程式碼如下
<form action="SelectMessageServlet" method="post">
<!--
手動更改value的值測試效果
value根據自己專案更改為value="<%=userid %>"的形勢
注：記得刪除註釋，不然jsp編譯會出錯
-->
<input type="hidden" name="userid" value="1"/>
<input class="formliinput" type="submit" value="留言"/>
</form>注：錶帶中的uid是當前登入使用者的ID資訊（記得刪除註釋，不然編譯會出錯）
（2）SelectMessageServlet程式碼介紹
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
//獲取當前登入使用者的id
String id=request.getParameter("userid");
MyBean a=new MyBean();
//查詢該使用者所有留言資訊
ResultSet messageinfo=a.SelectUserMessage(id);
//查詢該使用者的留言回覆資訊
Map map=a.selectUserReplyMessage(id);
//當前使用者的id，name等基本資訊
ResultSet userinfo=a.selectoneuser(id);
//查詢所有使用者資訊，不含密碼
ResultSet alluserinfo=a.selectallusernopwd();
HttpSession session=request.getSession();
session.setAttribute("nowuserinfo", userinfo);
session.setAttribute("messageinfo", messageinfo);
session.setAttribute("userallinfo", alluserinfo);
session.setAttribute("replymessage", map);
try {
a.con().close();
} catch (SQLException e) {
e.printStackTrace();
}
request.getRequestDispatcher("message.jsp").forward(request, response);
}MyBean()方法，程式碼如下：
package control;
import java.sql.*;
import java.text.SimpleDateFormat;
import java.util.*;
import java.util.Date;
public class MyBean {
Connection conn;
public MyBean() {
this.conn = con();
}
public Connection con() {//連結資料庫
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//後面進行了編碼宣告，防止中文亂碼
String sqlcon = "jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=UTF-8";
try {
conn = DriverManager.getConnection(sqlcon, "root", "");
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
public ResultSet selectalluser(){//無引數，查詢所有使用者資訊
ResultSet a = null;
String sql="select * from user order by uid";
Statement st;
try {
st=conn.createStatement();
a=st.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return a;
}
public ResultSet selectoneuser(String uid){//帶引數，通過uid查詢使用者資訊
ResultSet a = null;
String sql="select * from user where uid='"+uid+"' order by uid";
Statement st;
try {
st=conn.createStatement();
a=st.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return a;
}
public ResultSet selectallusernopwd(){//無引數，查詢所有使用者資訊
ResultSet a = null;
String sql="select uid,NAME,userimg from user order by uid";
Statement st;
try {
st=conn.createStatement();
a=st.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return a;
}
public ResultSet SelectUserMessage(String gid){//查詢該使用者所有留言記錄，並按時間排序
ResultSet rt=null;
String sql="select * from usermessage where guid="+gid+" order by writetime DESC";
try {
Statement st=conn.createStatement();
rt=st.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return rt;
}
public Map selectUserReplyMessage(String gid){//查詢留言回覆資訊
ResultSet rs=SelectUserMessage(gid);
ResultSet userinfo=null;
String replymessage=null;
String onereply=null;
int be = 0,en,rbe = 0,ren;
int i=1,j=1;
int alllengthnow=0;
int lengthnow=0;
String messageid=null;
boolean check1=true,check2=true;
Map map=new HashMap();
try {
while(rs.next()){
replymessage=rs.getString("ReplyMessage");
if(replymessage!=null){
messageid=rs.getString("MessageId");
alllengthnow = replymessage.length();
j=1;
en=0;be=0;
ren=0;rbe=0;
check1=true;
check2=true;
while(check1){
i=1;
rbe=0;
be=be+0;
en=replymessage.indexOf(">",be+1);
if(en==-1) check1=false;
if(be==0)
onereply=replymessage.substring(be,en+1);
else
onereply=replymessage.substring(be+1,en+1);
lengthnow=onereply.length();
check2=true;
while(check2){
rbe=rbe+0;
ren=onereply.indexOf("<",rbe+1);
if(ren==-1&&ren!=lengthnow-1)
ren=lengthnow-1;
if(ren==-1)check2=false;
if(rbe==0)
map.put(messageid+":"+j+"."+i, onereply.substring(rbe, ren));
else
map.put(messageid+":"+j+"."+i, onereply.substring(rbe+1, ren));
userinfo=selectoneuser(map.get(messageid+":"+j+".1").toString());
if(userinfo.next()){
map.put(messageid+":"+j+"."+(i+1), userinfo.getString("name"));
map.put(messageid+":"+j+"."+(i+2), userinfo.getString("userimg"));
}else{
map.put(messageid+":"+j+"."+(i+1), "");
map.put(messageid+":"+j+"."+(i+2), "");
}
i++;
if(ren==lengthnow-1)check2=false;
rbe=ren;
}
j++;
if(en==alllengthnow-1)check1=false;
be=en;
}
}
}
} catch (SQLException e) {
e.printStackTrace();
}
return map;
}
public int insertmessage(String wid,String gid,String content){
int i=0;
String time=gettimenow();
String sql="insert into usermessage (wuid,guid,MessageText,writetime) values (?,?,?,?)";
try {
PreparedStatement pd=conn.prepareStatement(sql);
pd.setString(1, wid);
pd.setString(2, gid);
pd.setString(3, content);
pd.setString(4, time);
i=pd.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
//根據messageid查詢回覆資訊
public ResultSet selectReplyByMessageId(String messageid){
ResultSet end = null;
String sql="select * from usermessage where MessageId="+messageid;
Statement st;
try {
st = conn.createStatement();
end=st.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return end;
}
//新增留言回覆功能
public int updatetmessagereply(String messageid,String wid,String content){
int end=0;
String sql="update usermessage set ReplyMessage=? where MessageId=?";
content=content.replaceAll("<", "<");
content=content.replaceAll(">", ">");
String time=gettimenow();
StringBuffer oldMessageReply=new StringBuffer();
ResultSet oldmessageinfo=selectReplyByMessageId(messageid);
try {
if(oldmessageinfo.next()){
if(oldmessageinfo.getString("ReplyMessage")!=null||oldmessageinfo.getString("ReplyMessage")==""){
oldMessageReply.append(oldmessageinfo.getString("ReplyMessage"));
}
oldMessageReply.append(wid+"<"+content+"<"+time+">");
PreparedStatement ps=conn.prepareStatement(sql);
ps.setString(1, oldMessageReply.toString());
ps.setString(2, messageid);
end=ps.executeUpdate();
}
} catch (SQLException e) {
e.printStackTrace();
}
return end;
}
public String gettimenow(){//獲取當前系統時間
Date a=new Date();
SimpleDateFormat formatter=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String dataString=formatter.format(a);
System.out.println(dataString);
System.out.println(a.getTime());
return dataString;
}
}注：bean方法中的留言回覆功能，有時間我發一條詳解，2執行完後跳轉至message.jsp
（3）、message.jsp頁面程式碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.sql.ResultSet" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>留言板</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/message.css">
</head>
<script type="text/javascript" src="js/jquery1111.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
var ti;
$(document).ready(
function (){
$("#userinfo").mouseover(function(){
$("#usernameshow").fadeIn(200);
});
$("#usernameshow").mouseover(function(){
clearTimeout(ti);
$("#usernameshow").show();
});
$("#usernameshow").mouseout(function(){
$("#usernameshow").hide();
});
$("#userinfo").mouseout(function(){
$("#usernameshow").stop(false,true);
ti=setTimeout(function(){
$("#usernameshow").hide();
},100);
});
$(".messageuserreply").click(function(){
var a=this.id;
$("[id$='div"+a+"']").toggle();
});
$(".cancelinput").click(function(){
$(this).parents(".messageuserreplydiv").hide();
});
});
</script>
<body>
<%
String name="NULLUSER";
ResultSet userinfo=null;
ResultSet messageinfo=null;
ResultSet userallinfo=null;
Map map=new HashMap();
Iterator it=null;
Set keySet=null;
int i=1;
if(session.getAttribute("nowuserinfo")!=null){
userinfo=(ResultSet)session.getAttribute("nowuserinfo");
userinfo.beforeFirst();
userinfo.next();
name=userinfo.getString("name");
}
if(session.getAttribute("messageinfo")!=null){
messageinfo=(ResultSet)session.getAttribute("messageinfo");
}
if(session.getAttribute("userallinfo")!=null){
userallinfo=(ResultSet)session.getAttribute("userallinfo");
}
if(session.getAttribute("replymessage")!=null){
map=(Map)session.getAttribute("replymessage");
keySet=map.keySet();//獲取鍵的集合
it=keySet.iterator();//迭代鍵的集合
while(it.hasNext()){
Object key=it.next();
Object value=map.get(key);//獲取每個鍵所對應的值
System.out.println(key+":"+value);
}
}
%>
<div id="bigtop">
<div id="top">
<div id="topcontentleft">
<div class="topbg">
<a>部落格首頁</a>
</div>
</div>
<div id="topcontentright">
<div id="userlogininfo">
<span class="welcomeuser">歡迎你，</span>
<span id="userinfo"><%=name %></span>
<div class="showdivuserinfo">
<ul id="usernameshow" style="display:none">
<li>個人中心</li>
<li>這是測試</li>
<li style="border:0px">登出登入</li>
</ul>
</div>
</div>
<div>
<ul class="topul">
<li>
<div class="nrmessage">訊息中心<span class="badge">3</span></div>
</li>
<li style="border-right: none"><a href="#">退出登陸</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div><!-- 留言展示內容 -->
<div class="MessagecontentBigBox"><!-- 內容外層div -->
<div class="MessagecontentBigBox-top">
<font>留言板</font>
</div>
<script type="text/javascript">
function checkdata(){
var a=document.getElementById("messagecontent").value;
if(a==null||a==""){
alert("輸入不能為空！釋出失敗。");
return false;
}
}
</script>
<div class="messageinfodiv">
<div class="publishmessage">
<form action="AddMessageBy" method="post" onsubmit="return checkdata()">
<div class="publishmessagein"><textarea maxlength="60" rows="" cols="" id="messagecontent" name="messagecontent"></textarea></div>
<div class="publishmessagebutton"><input type="submit" value="傳送">
<input type="reset" value="取消"> </div>
</form>
</div>
<ul>
<%
int idi=1;
while(messageinfo.next()){
String thisuserid=null;
String thisusername=null;
String thislogurl=null;
String thismessagecontent=null;
String thismessagereply=null;
String thismessageid=null;
if(messageinfo.getString("wuid")!=null||messageinfo.getString("wuid")!=""){
thisuserid=messageinfo.getString("wuid");
while(userallinfo.next()){
if(userallinfo.getString("uid").equals(messageinfo.getString("wuid"))){
thisusername=userallinfo.getString("name");
thislogurl=userallinfo.getString("userimg");
thismessagecontent=messageinfo.getString("MessageText");
thismessagereply=messageinfo.getString("ReplyMessage");
thismessageid=messageinfo.getString("MessageId");
break;
}
}
userallinfo.beforeFirst();
}
%>
<li class="thismessageinfodiv">
<img src="<%=thislogurl %>" class="messageuserimg"/>
<font class="messageusername"><%=thisusername %></font>
<br/>
<p class="messageusercontent">
<c:out value="<%=thismessagecontent %>" escapeXml="true" default="載入失敗，請重試!"></c:out>
</p>
<p class="messageusertime"><%=messageinfo.getString("writetime") %></p>
<font class="messageuserreply" id="<%=idi %>">回覆</font>
<%
if(thismessagereply!=null){
i=1;
keySet=map.keySet();//獲取鍵的集合
it=keySet.iterator();//迭代鍵的集合
//System.out.print(it.hasNext());
%>
<div class="messagereplydiv">
<%
while(it.hasNext()){
Object key=it.next();
Object value=map.get(key);//獲取每個鍵所對應的值
Object srcurl=map.get(thismessageid+":"+i+".5");
Object thisname=map.get(thismessageid+":"+i+".4");
Object thisreplycontent=map.get(thismessageid+":"+i+".2");
Object thisreplytime=map.get(thismessageid+":"+i+".3");
System.out.print(thisname);
if(srcurl==null)break;
%>
<img class="messagereplyimg" src="<%=srcurl %>">
<font class="messagereplyname"><%=thisname %></font>
<font class="messagereplycontent"><%=thisreplycontent %></font>
<p class="messagereplytime"><%=thisreplytime %></p>
<% i++; } %>
</div>
<% } %>
<div class="messageuserreplydiv" id="replybigdiv<%=idi %>" style="display: none">
<form action="MessageUserReply" method="post" id="replymessageform">
<!-- <form action="" method="post" id="replymessageform<%=thismessageid %>"> -->
<input type="hidden" name="thismessageid" value="<%=thismessageid %>" />
<textarea rows="" cols="" id="replycontent" name="replycontent"></textarea><br/>
<input type="submit" value="確定">
<input type="reset" value="取消" class="cancelinput">
</form>
<script>
$(document).ready(function(){
$('#replymessageform<%=thismessageid %>').submit(function(){
$msid=$("#replymessageform<%=thismessageid %> input[name='thismessageid']").val();
if($msid!=<%=thismessageid %>){return false;}
});
});
</script>
</div>
</li>
<% idi++; } %>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>注：1、id="replybigdiv<%=idi %>"的表單為回覆模組的前端程式碼
（3）發表留言功能，AddMessageBy程式碼介紹。這部分需根據自己的專案靈活更改，我這裡做了一個使用者自己給自己留言的方法。如需要在使用者好友的留言板上留言，需要做一個好友互訪的模組，然後根據這部分程式碼為參考，實現好友互相留言的功能。
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
HttpSession session=request.getSession();
ResultSet userinfo = (ResultSet)session.getAttribute("nowuserinfo");
String wid = null,id = null;
try {
userinfo.beforeFirst();
userinfo.next();
wid = userinfo.getString("uid");
id=userinfo.getString("uid");
userinfo.beforeFirst();
} catch (SQLException e1) {
e1.printStackTrace();
}
String content=request.getParameter("messagecontent");
MyBean a=new MyBean();
// uid為當前登入使用者的id，即留言者的id
//wid為被留言者的id
//這裡的留言者id和被留言者id為同一個，因為我麼有做好友互動的介面
//通過好友互動的介面，將好友的id賦值給wid即可
int end=a.insertmessage(wid, id, content);
ResultSet messageinfo=a.SelectUserMessage(id);
ResultSet alluserinfo=a.selectallusernopwd();
session.setAttribute("nowuserinfo", userinfo);
session.setAttribute("messageinfo", messageinfo);
session.setAttribute("userallinfo", alluserinfo);
try {
a.con().close();
} catch (SQLException e) {
e.printStackTrace();
}
if(end==1){
out.print("<script>");
out.print("alert('留言釋出成功！');");
out.print("window.location.href='message.jsp';");
out.print("</script>");
}else{
out.print("<script>");
out.print("alert('Erron！留言失敗！');");
out.print("window.location.href='message.jsp';");
out.print("</script>");
}
}（4）、留言回覆功能，MessageUserReply程式碼介紹
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
HttpSession session=request.getSession();
ResultSet userinfo=(ResultSet)session.getAttribute("nowuserinfo");
String wid = null;
try {
userinfo.beforeFirst();
userinfo.next();
wid=userinfo.getString("uid");
} catch (SQLException e) {
e.printStackTrace();
}
String content=request.getParameter("replycontent");
String messageid=request.getParameter("thismessageid");
MyBean a=new MyBean();
int end=a.updatetmessagereply(messageid, wid, content);
ResultSet messageinfo=a.SelectUserMessage(wid);
//ResultSet userinfo=a.selectoneuser(wid);
ResultSet alluserinfo=a.selectallusernopwd();
Map map=a.selectUserReplyMessage(wid);
session.setAttribute("nowuserinfo", userinfo);
session.setAttribute("messageinfo", messageinfo);
session.setAttribute("userallinfo", alluserinfo);
session.setAttribute("replymessage", map);
request.getRequestDispatcher("message.jsp").forward(request, response);
}注：Mybean a = new MyBean()；中mybean方法在2步驟中
四、css樣式部分
專案中引入了bootstrap.min.css樣式，我這裡就沒有列了，可去起步網官網下載下載。下面我展示的是message.css的內容。
@CHARSET "UTF-8";
*{
margin:0px;
padding:0px;
letter-spacing:0.2em;
}
body{
line-height: inherit;
background-image:url(../img/back.jpg);
}
a:link{
color:#FFF;
text-decoration:none;
}
a:visited{
color:#FFF;
text-decoration:none;
}
a:hover{
color:#FFF;
text-decoration:underline;
}
a:active{
color:#FFF;
text-decoration:none;
}
#bigtop{
width: 100%;
height: 45px;
background-color: rgba(20, 20, 20, 0.9);
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
}
#top{
width:960px;
height:45px;
margin:0px auto;
color:#FFF;
}
#bigtopdiv{
margin:0px auto;
height:45px;
}
#topcontent{
margin:0px auto;
background-color:#666;
height:auto;
}
#topcontentleft{
width:40%;
height:auto;
float:left;
}
#topcontentright{
font-size:12px;
line-height:45px;
width: 35%;
height:45px;
float:right;
text-align:left;
}
.topbg{
float:left;
line-height:45px;
cursor: pointer;
}
.topbg a{
}
.topul{
float:left;
margin-bottom: 0px;
}
.topul li{
list-style:none;
height:45px;
float:left;
padding: 2px;
border-right:2px solid #595353;
}
.topul li:hover{
background-color:#000000;
}
.topul li div{
padding:0px 5px;
height:45px;
}
.topul li div img{
height:28px;
vertical-align: middle;
margin-top:8px;
}
.nrmessage span{
position: relative;
left: -3px;
top: -8px;
}
#userlogininfo{
height:45px;
float:left;
padding:0px 5px;
border-right:2px solid #595353;
display:inline-flex;
display: -webkit-inline-flex;
}
.welcomeuser{
float: left;
}
#userinfo{
display: block;
margin:0px 5px;
width:auto;
height:45px;
padding:0px 10px;
cursor:pointer;
background-color:#ff0000;
color: #ffffff;
border-bottom:5px solid #5D5D5D;
box-shadow:0px -8px 8px #000000;
float: left;
}
#userinfo img{
height:30px;
width:30px;
border-radius:100%;
margin-right:5px;
padding-top:7px;
}
#userinfo:hover{
background-color:#000000;
}
#content{
width:960px;
height:auto;
margin:0px auto;
margin-bottom:50px;
}
.showdivuserinfo{
position:absolute;
color:black;
margin-top:50px;
width: 120px;
z-index: 9999;
margin-left: 65px;
}
.showdivuserinfo ul{
width:120px;
box-shadow: 0px 0px 10px;
border-radius:5px;
background-color:rgba(255, 255, 255, 0.93);
}
.showdivuserinfo li{
list-style:none;
border-bottom:1px dashed #CCC;
text-align:center;
font-size:18px;
z-index: 100;
cursor: pointer;
}
.MessagecontentBigBox{
width:960px;
margin-top:110px;
background-color: white;
padding-bottom: 15px;
}
ul{
list-style: none;
}
.MessagecontentBigBox-top{
widows: 100%;
height: 40px;
background-color: rgba(236,236,236,0.39);
padding:13px 0px 0px 5px;
}
.MessagecontentBigBox-top font{
font-size: 14px;
font-weight: bold;
}
.messageinfodiv{
width: 100%;
margin:0px auto 20px auto;
}
.publishmessage{
margin: 0px auto 10px auto;
padding:5px;
}
.publishmessage form{
margin: 0px auto;
width: 96%;
}
.publishmessagein{
}
.publishmessagebutton{
margin-top: 10px;
}
.publishmessagebutton input{
border:0px;
background-color: #7B8C9E;
color: white;
padding:5px;
}
.publishmessage textarea{
font-size: 18px;
letter-spacing: 0.2em;
width: 100%;
height: 100px;
max-width: 100%;
max-height: 240px;
min-width: 100%;
min-height: 70px;
}
.thismessageinfodiv{
padding: 5px;
width: 96%;
border-bottom: 1px solid #CCC;
margin: 0px auto 5px auto;
}
.messageuserimg{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border-radius: 5px;
}
.messageusername{
font-size: 16px;
margin-left: 5px;
}
.messageusercontent{
padding-bottom: 5px;
padding-left: 65px;
font-size: 18px;
letter-spacing: 0.3em;
margin-top: 20px;
overflow-wrap: break-word;
}
.messageusertime{
clear: both;
display: inline;
padding-left: 60px;
}
.messageuserreply{
margin-left: 20px;
color: blue;
cursor: pointer;
}
.messageuserreplydiv{
clear: both;
margin-left:55px;
padding-bottom: 5px;
}
.messageuserreplydiv textarea{
width: 320px;
height:30px;
}
.messageuserreplydiv input{
margin-top:5px;
}
.messagereplydiv{
width: 90%;
border-top: 1px solid #CCC;
margin: 5px auto 0px auto;
padding:5px;
}
.messagereplyimg{
width: 40px;
height: 40px;
}
.messagereplyname{
color: blue;
}
.messagereplytime{
padding-left: 46px;
}
#replycontent{
height: 80px;
width: 450px;
max-height: 160px;
max-width: 100%;
}五、執行效果
六、結語
內容有點長，後續我會持續更新，進行縮減。最後感謝大家的支援。如果有什麼問題不懂得或者有更好的建議，歡迎看官評論或私信。如果各位需要整個專案原始碼的，請加qq群在群檔案裡面自行免費下載。群號：100372253
相關推薦
JSP+SQL實現留言功能（含留言回覆功能），附原始碼
一、開發環境 MyEclipse8.6+WampServer+MySQL 這裡用到Apache，是因為我用了他來連線資料庫。 專案中還用到了一個jar包，mysql-connector-java-5.1.13-bin.jar。 二、思路介紹 下圖是回覆資訊在資料庫中
idea+maven + spring security +springmvc入門 （自定義登入頁面），附idea如何建立web專案
第一次使用idea，上午在eclipse中 學習了spring security 入門，下午試試在idea中搭建。 剛開始 我以為 直接將eclipse的 檔案 copy過來就行了，結果發現copy過來以後 各種報錯。 後來把m
DedeCMS二次開發聯動篩選功能的實現（含多選功能）
多選效果如下圖：具體操作說明：一、注意，首先備份以下兩個檔案\include\arc.listview.class.php\include\extend.func.php多選版檔案下載連結:https 多選效果如下圖： 具體操作說明： 1、注意，首先備份以下兩個檔
使用vue+element實現表格的新增、編輯（含下拉框）、刪除功能（Vue開發二）
幾天前，需要做一個需求：新增一個xml檔案時，新增數量不確定、屬性相同的xml標籤，想了想可以用表格做啊，屬性相同，使用統一的表頭，下面的屬性值只是進行增刪改不就行了，就類似於mysql給表裡填資料一樣。 可是目前似乎還沒有表格的直接增刪改一行的操作，那要怎麼實現呢？於是，通過上網以及自己的思考
Java實現剪下複製貼上功能（含不同文字域的判斷）
通過焦點事件判斷不同的文字域 不同文字域焦點事件的處理 tp1.addFocusListener(new FocusListener(){ @Override public void focu
利用Mybaties註解動態Sql實現查詢功能（表名不固定）
最近開發過程中，資料庫的表名是日表，每次查詢需要動態傳入表名，所以需要動態拼接sql 一.mapper介面，呼叫provider類，該類返回sql(RecordProvider需要自己新建一個class) 二.Provider.class，利用StringBuid
(轉)織夢DedeCMS二次開發聯動篩選功能的實現（含多選功能）
原文:http://www.dedejs.com/html/article-571-1.html點選開啟連結織夢預設的列表頁沒有篩選功能，但有時候我們做產品列表頁的時候，產品的欄位比較多，很多人都需要用到篩選功能，這樣可以讓使用者更方便的找到自己所需要的東西，實現這個聯動篩選
網站首頁（含菜單欄）實現
range sub sea light odin charset ctype settime hide <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="
問題7：如何實現用戶的歷史記錄功能（最多n條）
NPU app while less ase 退出 添加 數字 pri 實例：制作猜字遊戲，添加歷史記錄功能，顯示用戶最近猜過的數字 解決方案：使用容量為n的隊列存儲歷史記錄 使用標準庫colections中的deque，一個雙端循環隊列 程序退出前，可以使用pick
日常學習隨筆-用鏈表的形式實現普通二叉樹的新增、查找、遍歷（前、中、後序）等基礎功能（側重源碼+說明）
新增 rabl super 例子 信息 count TP title 處理 一、二叉樹 1、二叉樹的概念 二叉樹是每個節點最多有兩個子樹的樹結構。通常子樹被稱作“左子樹”（left subtree）和“右子樹”（right subtree），其次序不能任意顛倒。 2、性質
vue 導航菜單的實現（含二級菜單）
lec func switch route -a abs sheng nav fun <template> <div class="nav"> <div class="nav-a"> <ul class
小程式購物車功能（支援手動輸入數量）以及側邊欄和列表欄聯動的實現
小組剛完成一個小程式專案，第一版正式釋出了，過程中也遇到了很多問題，這裡記錄一下我負責的模組中的購物車功能的實現過程。後期再把其他小夥伴的模組也一併貼上來分析一下，自己也學習一下他們的獨門技能！效果圖如下： 在這裡，計數器、購物籃做成元件用於複用，由於左右聯動的功能
SQL實現 模糊查詢（轉）
在進行資料庫查詢時，有完整查詢和模糊查詢之分。 一般模糊查詢語句如下： SELECT 欄位 FROM 表 WHERE 某欄位 Like 條件 其中關於條件，SQL提供了四種匹配模式： 1，% ：表示任意0個或多個字元。可匹配任意型別和長度的字元，有些情況下若是中文
mvp實現Xrecyclerview的上下拉和購物車功能（仿餓了麼）
首先先匯入咱們的依賴 implementation 'com.android.support:design:28.0.0' implementation 'com.google.code.gson:gson:2.8.5' implementation 'cn.b
利用tkinter實現簡單計算器功能（不使用eval函式）
利用tkinter實現簡單計算器功能（不使用eval函式） 一、思路 tkinter： 佈置主介面； 上部為數字顯示介面； 下部為數字鍵與功能鍵介面； 邏輯： 程式只考慮兩個運算元進行計算的情況，不考慮複雜情況 展示：
jsp中實現上傳圖片即時顯示效果功能
<script> function setImagePreview() { var docObj=document.getElementById("doc"); var imgObjPreview=document.getElementById("preview
Android用SharedPreferences儲存資料實現註冊和登入功能（首次安裝預設開啟註冊，記住密碼）
註冊介面xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
一文搞定信用評分卡模型-Python、SAS和R的實現（含程式碼和視訊）
感謝關注天善智慧，走好資料之路↑↑↑歡迎關注天善智慧，我們是專注於商業智慧BI，人工智慧AI，大資料分析與挖掘領域的垂直社群，學習，問答、求職一站式搞定！對商業智慧BI、大資料分析挖掘、機器學習，python，R等資料領域感興趣的同學加微信：tstoutiao，邀請你進入資料愛好者交
react + antd 實現列印功能（踩了不少坑）
最近在有網頁列印需求，嘗試了一下react的列印功能，遇到了不少的坑： 1.react本身有一些列印的元件，但都不好用，都是基於window.print()，但是window.print()如果直接列印的話，沒有樣式。處理直接當前網頁的body設定為你要列印的區域，但是當你取消列印的時候你會發現整個網頁都被
react + antd 實現打印功能（踩了不少坑）
set wid 但是 pan ets req 問題： 我們 posit 最近在有網頁打印需求，嘗試了一下react的打印功能，遇到了不少的坑： 1.react本身有一些打印的組件，但都不好用，都是基於window.print()，但是window.print()如果直接打印