Qing/GuestBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加发布评论功能

Browse Source
This commit is contained in:
landaiqing 2023-06-09 15:18:06 +08:00
parent 23b265e957
commit 345c2614cf
9 changed files with 788 additions and 424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/com/landaiqing/dao/UserDao.java Normal file
View File

@ -0,0 +1,75 @@
package com.landaiqing.dao;
import com.landaiqing.entity.UserEntity;
import com.landaiqing.utils.JdbcUtils;
import java.sql.*;
import java.util.ArrayList;
public class UserDao {
/**
* 留言列表查询
* */
private UserEntity userEntity=new UserEntity();
public ArrayList<UserEntity> list() {
ResultSet resultSet = null;
PreparedStatement preparedStatement = null;
Connection connection = null;
try {
connection = JdbcUtils.getConnection();
String listSql = "select * from user;";
preparedStatement = connection.prepareStatement(listSql);
resultSet = preparedStatement.executeQuery();
ArrayList<UserEntity> userEntities=new ArrayList<>();
while (resultSet.next()) {
// 将db中数据 返回给客户端 查询到数据
Integer userId = resultSet.getInt(1);
String nickName = resultSet.getString(2);
String qq = resultSet.getString(3);
String email = resultSet.getString(4);
String content = resultSet.getString(5);
Date dateTime = resultSet.getDate(6);
String replyContent = resultSet.getString(7);
Date replyDateTime = resultSet.getDate(8);
UserEntity userEntity = new UserEntity(userId, nickName, qq, email, content, dateTime, replyContent, replyDateTime);
userEntities.add(userEntity);
}
return userEntities;
} catch (Exception e) {
e.printStackTrace();
return null;
} finally {
JdbcUtils.closeConnection(resultSet, preparedStatement, connection);
}
}
/**
* 发表评论
* */
public int insert(UserEntity userEntity){
Connection connection = null;
PreparedStatement preparedStatement = null;
try {
connection = JdbcUtils.getConnection();
JdbcUtils.beginTransaction(connection);
preparedStatement = connection.prepareStatement("INSERT INTO `webguestbook`.`user` (`userId`, `nickname`, `qq`, `email`, `content`, `datetime`, `replyContent`, `replyDateTime`) VALUES (null, ?, ?, ?, ?, ?,null, null);\n");
// preparedStatement.setInt(1,userEntity.getUserId());
preparedStatement.setString(1,userEntity.getNickName());
preparedStatement.setString(2,userEntity.getQQ());
preparedStatement.setString(3,userEntity.getEmail());
preparedStatement.setString(4,userEntity.getContent());
preparedStatement.setDate(5, new Date(userEntity.getDateTime().getTime()));
Integer result = preparedStatement.executeUpdate();
JdbcUtils.commitTransaction(connection);
return result;
} catch (SQLException e) {
JdbcUtils.rollBackTransaction(connection);
throw new RuntimeException(e);
} finally {
JdbcUtils.closeConnection(null, preparedStatement, connection);
}
}
}

110
src/com/landaiqing/entity/UserEntity.java Normal file
View File

@ -0,0 +1,110 @@
package com.landaiqing.entity;
import java.sql.Date;
public class UserEntity {
/**
* CREATE TABLE `user` (
* `userId` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
* `nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
* `qq` int DEFAULT NULL COMMENT 'QQ',
* `email` varchar(255) DEFAULT NULL COMMENT '邮箱',
* `content` longtext COMMENT '留言内容',
* `datetime` datetime DEFAULT NULL COMMENT '留言日期',
* `replyContent` longtext COMMENT '回复内容',
* `replyDateTime` datetime DEFAULT NULL COMMENT '回复时间',
* PRIMARY KEY (`userId`) USING BTREE
* ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
* */
private Integer userId;
private String nickName;
private String QQ;
private String email;
private String content;
private Date dateTime;
private String replyContent;
private Date replyDateTime;
public UserEntity(){
}
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
public String getNickName() {
return nickName;
}
public void setNickName(String nickName) {
this.nickName = nickName;
}
public String getQQ() {
return QQ;
}
public void setQQ(String QQ) {
this.QQ = QQ;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Date getDateTime() {
return dateTime;
}
public void setDateTime(Date dateTime) {
this.dateTime = dateTime;
}
public String getReplyContent() {
return replyContent;
}
public void setReplyContent(String replyContent) {
this.replyContent = replyContent;
}
public Date getReplyDateTime() {
return replyDateTime;
}
public void setReplyDateTime(Date replyDateTime) {
this.replyDateTime = replyDateTime;
}
public UserEntity(Integer userId, String nickName, String QQ, String email, String content, Date dateTime, String replyContent, Date replyDateTime) {
this.userId = userId;
this.nickName = nickName;
this.QQ = QQ;
this.email = email;
this.content = content;
this.dateTime = dateTime;
this.replyContent = replyContent;
this.replyDateTime = replyDateTime;
}
}

94
src/com/landaiqing/filter/UserSessionFilter.java
View File

@ -1,48 +1,48 @@
//package com.landaiqing.filter;
//
//
//import jakarta.servlet.*;
//import jakarta.servlet.annotation.WebFilter;
//import jakarta.servlet.http.HttpServletRequest;
//import jakarta.servlet.http.HttpServletResponse;
//import jakarta.servlet.http.HttpSession;
//
//import java.io.IOException;
//
///**
// * 过滤器
// */
//@WebFilter("/*")// 过滤器所有的请求
//public class UserSessionFilter implements Filter {
// private String[] excludeUrls = new String[]{"/login", "/register", "/VerifycodeServlet"};
//
// @Override
// public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
// // 从session获取到用户的会话信息 判断用户是否登录过
// HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
// HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
// String contextPath = httpServletRequest.getContextPath();
// // 定义一个数组 哪些 请求是需要排除的
// for (int i = 0; i < excludeUrls.length; i++) {
// String excludeUrl = contextPath + excludeUrls[i];
// String requestURI = httpServletRequest.getRequestURI();
// if (excludeUrl.equals(requestURI)) {
// // 放行请求
// filterChain.doFilter(httpServletRequest, httpServletResponse);
// return;
// }
// }
// // 排除请求
// HttpSession session = httpServletRequest.getSession();
// Object user = session.getAttribute("user");
// if (user == null) {
// // 当前用户没有登录或者登录会话失效
// // 重定向到登录页面
// httpServletResponse.sendRedirect(contextPath+"/login");
// return;
// }
// // 用户已经登录了 正常放行请求
// filterChain.doFilter(httpServletRequest, httpServletResponse);
// }
//}
package com.landaiqing.filter;
import jakarta.servlet.*;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import java.io.IOException;
/**
* 过滤器
*/
@WebFilter("/System/*")// 过滤器所有的请求
public class UserSessionFilter implements Filter {
private String[] excludeUrls = new String[]{"/login", "/register", "/VerifycodeServlet"};
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
// 从session获取到用户的会话信息 判断用户是否登录过
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
String contextPath = httpServletRequest.getContextPath();
// 定义一个数组 哪些 请求是需要排除的
for (int i = 0; i < excludeUrls.length; i++) {
String excludeUrl = contextPath + excludeUrls[i];
String requestURI = httpServletRequest.getRequestURI();
if (excludeUrl.equals(requestURI)) {
// 放行请求
filterChain.doFilter(httpServletRequest, httpServletResponse);
return;
}
}
// 排除请求
HttpSession session = httpServletRequest.getSession();
Object user = session.getAttribute("user");
if (user == null) {
// 当前用户没有登录或者登录会话失效
// 重定向到登录页面
httpServletResponse.sendRedirect(contextPath+"/login");
return;
}
// 用户已经登录了 正常放行请求
filterChain.doFilter(httpServletRequest, httpServletResponse);
}
}

22
src/com/landaiqing/service/UserService.java Normal file
View File

@ -0,0 +1,22 @@
package com.landaiqing.service;
import com.landaiqing.dao.UserDao;
import com.landaiqing.entity.UserEntity;
import java.util.ArrayList;
public class UserService {
private UserDao userDao=new UserDao();
/**
* 留言列表查询
*/
public ArrayList<UserEntity> list() {
return userDao.list();
}
/**
* 发布留言
* */
public int insert(UserEntity userEntity){
return userDao.insert(userEntity);
}
}

31
src/com/landaiqing/servlet/ListServlet.java Normal file
View File

@ -0,0 +1,31 @@
package com.landaiqing.servlet;
import com.alibaba.fastjson.JSONObject;
import com.landaiqing.entity.UserEntity;
import com.landaiqing.service.UserService;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
@WebServlet("")
public class ListServlet extends HttpServlet {
private UserService userService=new UserService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<UserEntity> userEntities=userService.list();
req.setAttribute("list",userEntities);
req.getRequestDispatcher("index.jsp").forward(req,resp);
}
}

70
src/com/landaiqing/servlet/PublishServlet.java Normal file
View File

@ -0,0 +1,70 @@
package com.landaiqing.servlet;
import com.landaiqing.entity.UserEntity;
import com.landaiqing.service.UserService;
import com.mysql.cj.util.StringUtils;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
@WebServlet("/publish")
public class PublishServlet extends HttpServlet {
private UserService userService=new UserService();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
String name = req.getParameter("name");
if (StringUtils.isNullOrEmpty(name)){
req.setAttribute("errorMsg","name 的值不能为空!!!");
req.getRequestDispatcher("error.jsp").forward(req,resp);
return;
}
String qq = req.getParameter("qq");
if (StringUtils.isNullOrEmpty(qq)){
req.setAttribute("errorMsg","qq 的值不能为空!!!");
req.getRequestDispatcher("error.jsp").forward(req,resp);
return;
}
String email = req.getParameter("email");
if (StringUtils.isNullOrEmpty(email)){
req.setAttribute("errorMsg","arriveAirport 的值不能为空!!!");
req.getRequestDispatcher("error.jsp").forward(req,resp);
return;
}
String content = req.getParameter("content");
if (StringUtils.isNullOrEmpty(content)){
req.setAttribute("errorMsg","content 的值不能为空!!!");
req.getRequestDispatcher("error.jsp").forward(req,resp);
return;
}
Date time = new java.sql.Date(new java.util.Date().getTime());
UserEntity userEntity=new UserEntity();
userEntity.setNickName(name);
userEntity.setQQ(qq);
userEntity.setEmail(email);
userEntity.setContent(content);
userEntity.setDateTime((java.sql.Date) time);
int result = userService.insert(userEntity);
if (result<=0){
req.setAttribute("errorMsg","插入失败!!!");
req.getRequestDispatcher("error.jsp").forward(req,resp);
return;
}
resp.sendRedirect("index.jsp");
} catch (Exception e) {
req.setAttribute("errorMsg","系统异常!!!");
req.getRequestDispatcher("error.jsp").forward(req,resp);
throw new RuntimeException(e);
}
}
}

804
web/index.jsp
View File

@ -9,12 +9,12 @@
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
<head>
<title>留言本</title>
<%-- Lay-ui组件库--%>
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
<%-- &lt;%&ndash; Lay-ui样式&ndash;%&gt;--%>
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
<%-- &lt;%&ndash; Lay-ui样式&ndash;%&gt;--%>
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
@ -22,429 +22,481 @@
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js">
// <link rel="stylesheet" href="./static/css/index.css" type="text/css">
// <link rel="stylesheet" href="./static/css/index.css" type="text/css">
// <script language=JavaScript type="text/javascript" src="static/js/index.js"></script>
// <script language=JavaScript type="text/javascript" src="static/js/index.js"></script>
<style type="text/css">
@IMPORT url("./static/css/index.css");
@IMPORT url("./static/css/index.css");
.submit {
width: 100px;
height: 40px;
border-radius: 20px;
background-color: #1dc48c;
}
.layui-icon-down {
color: black;
}
.layui-nav .layui-nav-more {
position: absolute;
top: -13px;
right: 3px;
left: auto !important;
margin-top: 0;
font-size: 12px;
cursor: pointer;
transition: all .2s;
-webkit-transition: all .2s;
}
</style>
</head>
</head>
<body>
<body>
<div class="main">
<div class="main">
<div class="header">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
<div style="width: 570px;height: 45px;">
<span style="font-size: 2rem;font-weight: 700;font-family: FZShuTi;color:coral;">留 &nbsp;&nbsp;言&nbsp;&nbsp; 本</span>
</div>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-on="wrap">
<i class="layui-icon layui-icon-edit"></i>
发布留言
</button>
<!-- <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
<i class="layui-icon layui-icon-set-fill"></i>
管理
</button> -->
<div>
<ul class="layui-nav" style="background: transparent;">
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">
<img src="./static/img/touxiang.png" class="layui-nav-img">
</a>
<dl class="layui-nav-child">
<button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
<i class="layui-icon layui-icon-set-fill"></i>
管理
</button>
</dl>
</li>
</ul>
</div>
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
<div style="width: 570px;height: 45px;">
<span style="font-size: 2rem;font-weight: 700;font-family: FZShuTi;color:coral;">留 &nbsp;&nbsp;言&nbsp;&nbsp; 本</span>
</div>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-on="wrap">
<i class="layui-icon layui-icon-edit"></i>
发布留言
</button>
<!-- <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
<i class="layui-icon layui-icon-set-fill"></i>
管理
</button> -->
<div>
<ul class="layui-nav" style="background: transparent;">
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">
<img src="./static/img/touxiang.png" class="layui-nav-img">
</a>
<dl class="layui-nav-child">
<button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
<i class="layui-icon layui-icon-set-fill"></i>
管理
</button>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<blockquote class="layui-elem-quote layui-text">
留言列表
留言列表
</blockquote>
<!-- 管理员登陆 -->
<div class="layui-form" id="adminform" lay-filter="filter-test-layer" style="margin: 16px;display: none;">
<form action="/Guestbook_war_exploded/login" method="post">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码"
lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
<form action="/Guestbook_war_exploded/login" method="post">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src=VerifycodeServlet
onclick="this.src='VerifycodeServlet?'+ new Date().getTime();">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码"
lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"
lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src=VerifycodeServlet
onclick="this.src='VerifycodeServlet?'+ new Date().getTime();">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
</div>
<div class="layui-form-item">
<input class="submit" type="submit" value="登录"/>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
</div>
<%-- <div class="layui-form-item">--%>
<%-- <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>--%>
<%-- </div>--%>
<input type="submit" value="注册"/>
</div>
</form>
</form>
</div>
<!-- 发布留言的主体 -->
<div class="wrap" id="warp" style="display: none;">
<div class="userIfo">
<div class="userIfo">
<div class="layui-panel">
<div style="padding: 32px;" class="panel">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" id="name" name="name" placeholder="昵称" class="layui-input">
</div>
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-login-qq"></i>
</div>
<input type="text" id="qq" name="qq" placeholder="QQ" class="layui-input">
</div>
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-email"></i>
</div>
<input type="text" id="email" name="email" placeholder="Email" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-panel">
<div style="padding: 32px;" class="panel">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" placeholder="昵称" class="layui-input">
<div class="wrap-head">
<div class="head-logo">
<img src="./static/img/留言.png" style="height: 20px;width: 20px;"/>
</div>
<div class="head-txt">
<a class="title-txt"
href="javascript:void(0)">言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。</a>
</div>
</div>
<div class="main-txt">
<textarea name="content" id="content" rows="" cols="" class="main-area"></textarea>
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-login-qq"></i>
</div>
<input type="text" placeholder="QQ" class="layui-input">
</div>
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-email"></i>
</div>
<input type="text" placeholder="Email" class="layui-input">
<div class="warp-footer">
<div class="warp-icon-cont">
<ul>
<li><img src="./static/img/发表情.png" alt=""/>
<a href="javascript:void(0)">表情</a>
</li>
<li><img src="./static/img/图片_填充.png" alt=""/>
<a href="javascript:void(0)">图片</a>
</li>
<li><img src="./static/img/视频_填充.png" alt=""/>
<a href="javascript:void(0)">视频</a>
</li>
<li><img src="./static/img/话题选中.png" alt=""/>
<a href="javascript:void(0)">话题</a>
</li>
<li><img src="./static/img/文章.png" alt=""/>
<a href="javascript:void(0)">文章</a>
</li>
</ul>
</div>
<div class="warp-footer-btns">
<div class="release-btn">
<a href="javascript:publish()">发布</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-panel">
<div class="wrap-head">
<div class="head-logo">
<img src="./static/img/留言.png" style="height: 20px;width: 20px;" />
</div>
<div class="head-txt">
<a class="title-txt"
href="javascript:void(0)">111111111111111111111111111&nbsp;&nbsp;&nbsp;热门</a>
</div>
</div>
<div class="main-txt">
<textarea name="" rows="" cols="" class="main-area"></textarea>
</div>
<div class="warp-footer">
<div class="warp-icon-cont">
<ul>
<li><img src="./static/img/发表情.png" alt="" />
<a href="javascript:void(0)">表情</a>
</li>
<li><img src="./static/img/图片_填充.png" alt="" />
<a href="javascript:void(0)">图片</a>
</li>
<li><img src="./static/img/视频_填充.png" alt="" />
<a href="javascript:void(0)">视频</a>
</li>
<li><img src="./static/img/话题选中.png" alt="" />
<a href="javascript:void(0)">话题</a>
</li>
<li><img src="./static/img/文章.png" alt="" />
<a href="javascript:void(0)">文章</a>
</li>
</ul>
</div>
<div class="warp-footer-btns">
<div class="release-btn">
<a href="javascript:void(0)">发布</a>
</div>
</div>
</div>
</div>
</div>
<!-- 显示留言的主体 -->
<c:forEach items="${list}" var="list" varStatus="i">
<div class="show">
<div class="show-content">
<div class="show-name">
<div class="avtors"><img src="./static/img/touxiang.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;"></div>
<span style="margin-left: 10px;font-size: 1rem;">Xx</span>
</div>
<div class="show-txt">
<p class="">这是内容111111111111111111111111111111111111111111111111111111111</p>
</div>
<div class="show-time">2018年10月24日</div>
<!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
<i class="layui-icon layui-icon-release"></i> 回复
</button> -->
<div class="layui-panel">
<div class="comments">
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div>
</div>
<div class="comment-block">
<form action="">
<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..." style="resize:none"></textarea>
<button type="button" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-release"></i> 回复
</button>
</form>
</div>
<div class="show-content">
<div class="show-name">
<div class="avtors"><img src="./static/img/touxiang.png" alt=""
style="width: 40px;height: 40px;border-radius: 50%;"></div>
<span style="margin-left: 10px;font-size: 1rem;">${list.nickName}</span>
</div>
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div>
</div>
<div class="comment-block">
<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit
quasi sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
<div class="bottom-comment">
<div class="comment-date">23.5 2014</div>
<ul class="comment-actions">
<li class="complain">Complain</li>
<li class="reply">Reply</li>
</ul>
<div class="show-txt">
<p class="">${list.content}</p>
</div>
<div class="show-time">${list.dateTime}</div>
<!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
<i class="layui-icon layui-icon-release"></i> 回复
</button> -->
<div class="layui-panel">
<c:choose>
<c:when test="${not empty list.replyContent && !(list.replyContent eq null)}">
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
</div>
<div class="comment-block">
<p class="comment-text">${list.replyContent}</p>
<div class="bottom-comment">
<div class="comment-date">${list.replyDateTime}</div>
</div>
</div>
</div>
<div class="comments">
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
</div>
<div class="comment-block">
<form action="">
<textarea name="" cols="30" rows="3" placeholder="Say somthing..."
style="resize:none"></textarea>
<button type="button" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-release"></i> 回复
</button>
</form>
</div>
</div>
</c:when>
<c:otherwise>
<div class="comments">
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
</div>
<div class="comment-block">
<form action="">
<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..."
style="resize:none"></textarea>
<button type="button" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-release"></i> 回复
</button>
</form>
</div>
</div>
</c:otherwise>
</c:choose>
<div class="show-close">x</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="show-close">x</div>
</div>
</div>
</c:forEach>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
layui.use(function () {
var $ = layui.$;
var layer = layui.layer;
var util = layui.util;
var form = layui.form;
util.on('lay-on', {
'wrap': function () {
layer.open({
type: 1,
resize: true,
title: '发表留言',
shade: false, // 不显示遮罩
content: $('#warp'), // 捕获的元素
end: function () {
// layer.msg('关闭后的回调', {icon:6});
}
});
},
'admin': function () {
layer.open({
type: 1,
area: '350px',
resize: false,
shadeClose: true,
title: '管理员登录',
content: $('#adminform'),
},)
}
})
})
function publish() {
var name = document.getElementById('name').value;
var qq = document.getElementById('qq').value;
var email = document.getElementById('email').value;
var content = document.getElementById('content').value;
console.log(name + qq + email + content);
axios({
// 请求方式
method: 'post',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/publish',
// URL 中的查询参数
params: {
name: name,
qq: qq,
email: email,
content: content
}
}).then(function (result) {
//定位 span id 名称 error 修改
console.log(result);
})
}
<script>
layui.use(function () {
var $ = layui.$;
var layer = layui.layer;
var util = layui.util;
var form = layui.form;
$(function () {
// 还能输入的字得个数
var able_count = 140;
// 是否可以发布留言
var release_able = false;
// 右上角文字
var $title_txt = $('.title-txt');
// 留言框
var $main_area = $('.main-area');
// 发布按钮
var $release_btn = $('.release-btn');
util.on('lay-on', {
// 输入框获取焦点
$main_area.focus(function () {
console.log("获取焦点");
$(this).parent().addClass('outline');
$title_txt.addClass('title');
if (able_count >= 0) {
$title_txt.html("还可以输入" + able_count + "个字");
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
}
})
'wrap': function () {
layer.open({
type: 1,
resize: true,
title: '发表留言',
shade: false, // 不显示遮罩
content: $('#warp'), // 捕获的元素
end: function () {
// layer.msg('关闭后的回调', {icon:6});
}
});
},
'admin': function () {
layer.open({
type: 1,
area: '350px',
resize: false,
shadeClose: true,
title: '管理员登录',
content: $('#adminform'),
}, )
}
// 输入框失去焦点
$main_area.blur(function () {
console.log("失去焦点");
$(this).parent().removeClass('outline');
$title_txt.removeClass('title');
$title_txt.html("言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。");
})
})
// 输入框文本修改
$main_area.on('input', function () {
console.log("文本修改");
// 剩余可输入的字个数
able_count = 140 - $main_area.val().length;
// console.log(able_count);
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
if (able_count >= 0 && able_count <= 140) {
$title_txt.html("还可以输入" + able_count + "个字");
if (able_count != 140) {
release_able = true;
} else {
release_able = false;
}
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
release_able = false;
}
// 根据发布状态决定发布按钮的样式
if (release_able) {
$release_btn.css({
backgroundColor: "orange",
borderColor: "orange"
})
} else {
$release_btn.css({
backgroundColor: "#ffc09f",
borderColor: "#ffc09f"
})
}
})
})
// 发布事件
// $release_btn.click(function () {
// console.log("发布");
// if (release_able) {
// console.log('可以发布');
// // 创建show对象的各个部位
// var $showContent = $('<div class="show-content"></div>'),
// $showName = $('<div class="show-name"></div>'),
// $showTxt = $('<div class="show-txt"></div>'),
// $showTime = $('<div class="show-time"></div>'),
// $showClose = $('<div class="show-close"></div>'),
// $showP = $('<p class=""></p>');
//
// var date = new Date();
// // 设置，对象结构内内容
// $showName.text("XxXx");
// $showP.text($main_area.val());
// $showTime.text(date);
// $showClose.text("x");
// // 添加进入主结构
// $showTxt.append($showP);
// $showContent.append($showName);
// $showContent.append($showTxt);
// $showContent.append($showTime);
// $showContent.append($showClose);
//
// // 向所有匹配元素内部的开始处插入内容
// $('.show').prepend($showContent);
//
// // 添加动画
// // 位置从输入框处下移
// $showContent.css({
// top: '-150px'
// })
// $showContent.animate({
// top: 0
// }, 200)
//
// // 删除事件
// $showClose.click(function () {
// // 显示插入的索引位置
// // console.log($(this).parent().index());
// // console.log($showContent.index());
//
//
// // 删除操作为顺便
// // $showContent.remove();
//
// // 使用删除动画，创建效果
// $showContent.animate({
// height: 0
// }, 200, function () {
// // 动画结束后将自身从dom中移除
// $showContent.remove();
// })
//
//
// })
//
// // 发布成功后收尾工作
// $main_area.val(""); //输入框清空
// able_count = 140; //输入框可输入内容数重置
// release_able = false;
// $release_btn.css({
// backgroundColor: '#ffc09f',
// borderColor: '#ffc09f'
// }) //按钮点击事件重置
//
// }
// })
// 匿名函数包裹，防止外界操作的修改
})
$(function () {
// 还能输入的字得个数
var able_count = 140;
// 是否可以发布留言
var release_able = false;
// 右上角文字
var $title_txt = $('.title-txt');
// 留言框
var $main_area = $('.main-area');
// 发布按钮
var $release_btn = $('.release-btn');
// 输入框获取焦点
$main_area.focus(function () {
console.log("获取焦点");
$(this).parent().addClass('outline');
$title_txt.addClass('title');
if (able_count >= 0) {
$title_txt.html("还可以输入" + able_count + "个字");
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
}
})
// 输入框失去焦点
$main_area.blur(function () {
console.log("失去焦点");
$(this).parent().removeClass('outline');
$title_txt.removeClass('title');
$title_txt.html("111");
})
// 输入框文本修改
$main_area.on('input', function () {
console.log("文本修改");
// 剩余可输入的字个数
able_count = 140 - $main_area.val().length;
// console.log(able_count);
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
if (able_count >= 0 && able_count <= 140) {
$title_txt.html("还可以输入" + able_count + "个字");
if (able_count != 140) {
release_able = true;
} else {
release_able = false;
}
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
release_able = false;
}
// 根据发布状态决定发布按钮的样式
if (release_able) {
$release_btn.css({
backgroundColor: "orange",
borderColor: "orange"
})
} else {
$release_btn.css({
backgroundColor: "#ffc09f",
borderColor: "#ffc09f"
})
}
})
// 发布事件
$release_btn.click(function () {
console.log("发布");
if (release_able) {
console.log('可以发布');
// 创建show对象的各个部位
var $showContent = $('<div class="show-content"></div>'),
$showName = $('<div class="show-name"></div>'),
$showTxt = $('<div class="show-txt"></div>'),
$showTime = $('<div class="show-time"></div>'),
$showClose = $('<div class="show-close"></div>'),
$showP = $('<p class=""></p>');
var date = new Date();
// 设置，对象结构内内容
$showName.text("XxXx");
$showP.text($main_area.val());
$showTime.text(date);
$showClose.text("x");
// 添加进入主结构
$showTxt.append($showP);
$showContent.append($showName);
$showContent.append($showTxt);
$showContent.append($showTime);
$showContent.append($showClose);
// 向所有匹配元素内部的开始处插入内容
$('.show').prepend($showContent);
// 添加动画
// 位置从输入框处下移
$showContent.css({
top: '-150px'
})
$showContent.animate({
top: 0
}, 200)
// 删除事件
$showClose.click(function () {
// 显示插入的索引位置
// console.log($(this).parent().index());
// console.log($showContent.index());
</script>
// 删除操作为顺便
// $showContent.remove();
// 使用删除动画，创建效果
$showContent.animate({
height: 0
}, 200, function () {
// 动画结束后将自身从dom中移除
$showContent.remove();
})
})
// 发布成功后收尾工作
$main_area.val(""); //输入框清空
able_count = 140; //输入框可输入内容数重置
release_able = false;
$release_btn.css({
backgroundColor: '#ffc09f',
borderColor: '#ffc09f'
}) //按钮点击事件重置
}
})
})
</script>
</body>
</body>
</html>

6
web/static/css/index.css
View File

@ -56,6 +56,7 @@ ul {
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
/*最外层*/
.wrap {
width: 700px;
@ -74,7 +75,7 @@ ul {
}
.head-logo {
width: 40%;
width: 20%;
float: left;
}
@ -87,6 +88,7 @@ ul {
padding: 4px 0;
width: 60%;
float: right;
text-align: center;
}
.head-txt a {
@ -306,6 +308,8 @@ p {
.photo {
padding-top: 0.625rem;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 3.5rem;
}
.photo .avatar {

BIN
web/static/img/头像修改.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB