JSP+SQL实现留言功能(含留言回复功能),附源码

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/MINGHUE/article/details/79349920

一、开发环境

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("<", "&lt;");
		content=content.replaceAll(">", "&gt;");
		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" οnsubmit="return checkdata()">
		<div class="publishmessagein"><textarea maxlength="60" rows="" cols="" id="messagecontent" name="messagecontent"></textarea></div>
		<div class="publishmessagebutton"><input type="submit" value="发送">&nbsp;&nbsp;
		<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="确定">&nbsp;&nbsp;
		<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

 

展开阅读全文

没有更多推荐了,返回首页