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

308
web/index.jsp
View File

@ -9,12 +9,12 @@
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html> <html>
<head> <head>
<title>留言本</title> <title>留言本</title>
<%-- Lay-ui组件库--%> <%-- Lay-ui组件库--%>
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%> <%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
<%-- &lt;%&ndash; Lay-ui样式&ndash;%&gt;--%> <%-- &lt;%&ndash; Lay-ui样式&ndash;%&gt;--%>
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%> <%-- <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> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入 layui.css --> <!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet"> <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
@ -28,13 +28,36 @@
<style type="text/css"> <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> </style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<div class="header"> <div class="header">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;"> <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
<div style="width: 570px;height: 45px;"> <div style="width: 570px;height: 45px;">
@ -101,7 +124,8 @@
<i class="layui-icon layui-icon-vercode"></i> <i class="layui-icon layui-icon-vercode"></i>
</div> </div>
<input type="text" name="code" value="" lay-verify="required" placeholder="验证码" <input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear"> lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"
lay-affix="clear">
</div> </div>
</div> </div>
<div class="layui-col-xs5"> <div class="layui-col-xs5">
@ -115,11 +139,9 @@
<div class="layui-form-item"> <div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码"> <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
</div> </div>
<%-- <div class="layui-form-item">--%> <div class="layui-form-item">
<%-- <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>--%> <input class="submit" type="submit" value="登录"/>
<%-- </div>--%> </div>
<input type="submit" value="注册"/>
</div> </div>
</form> </form>
@ -135,21 +157,21 @@
<div class="layui-input-prefix"> <div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i> <i class="layui-icon layui-icon-username"></i>
</div> </div>
<input type="text" placeholder="昵称" class="layui-input"> <input type="text" id="name" name="name" placeholder="昵称" class="layui-input">
</div> </div>
<div class="layui-input-wrap"> <div class="layui-input-wrap">
<div class="layui-input-prefix"> <div class="layui-input-prefix">
<i class="layui-icon layui-icon-login-qq"></i> <i class="layui-icon layui-icon-login-qq"></i>
</div> </div>
<input type="text" placeholder="QQ" class="layui-input"> <input type="text" id="qq" name="qq" placeholder="QQ" class="layui-input">
</div> </div>
<div class="layui-input-wrap"> <div class="layui-input-wrap">
<div class="layui-input-prefix"> <div class="layui-input-prefix">
<i class="layui-icon layui-icon-email"></i> <i class="layui-icon layui-icon-email"></i>
</div> </div>
<input type="text" placeholder="Email" class="layui-input"> <input type="text" id="email" name="email" placeholder="Email" class="layui-input">
</div> </div>
</div> </div>
@ -158,109 +180,120 @@
<div class="layui-panel"> <div class="layui-panel">
<div class="wrap-head"> <div class="wrap-head">
<div class="head-logo"> <div class="head-logo">
<img src="./static/img/留言.png" style="height: 20px;width: 20px;" /> <img src="./static/img/留言.png" style="height: 20px;width: 20px;"/>
</div> </div>
<div class="head-txt"> <div class="head-txt">
<a class="title-txt" <a class="title-txt"
href="javascript:void(0)">111111111111111111111111111&nbsp;&nbsp;&nbsp;热门</a> href="javascript:void(0)">言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。</a>
</div> </div>
</div> </div>
<div class="main-txt"> <div class="main-txt">
<textarea name="" rows="" cols="" class="main-area"></textarea> <textarea name="content" id="content" rows="" cols="" class="main-area"></textarea>
</div> </div>
<div class="warp-footer"> <div class="warp-footer">
<div class="warp-icon-cont"> <div class="warp-icon-cont">
<ul> <ul>
<li><img src="./static/img/发表情.png" alt="" /> <li><img src="./static/img/发表情.png" alt=""/>
<a href="javascript:void(0)">表情</a> <a href="javascript:void(0)">表情</a>
</li> </li>
<li><img src="./static/img/图片_填充.png" alt="" /> <li><img src="./static/img/图片_填充.png" alt=""/>
<a href="javascript:void(0)">图片</a> <a href="javascript:void(0)">图片</a>
</li> </li>
<li><img src="./static/img/视频_填充.png" alt="" /> <li><img src="./static/img/视频_填充.png" alt=""/>
<a href="javascript:void(0)">视频</a> <a href="javascript:void(0)">视频</a>
</li> </li>
<li><img src="./static/img/话题选中.png" alt="" /> <li><img src="./static/img/话题选中.png" alt=""/>
<a href="javascript:void(0)">话题</a> <a href="javascript:void(0)">话题</a>
</li> </li>
<li><img src="./static/img/文章.png" alt="" /> <li><img src="./static/img/文章.png" alt=""/>
<a href="javascript:void(0)">文章</a> <a href="javascript:void(0)">文章</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="warp-footer-btns"> <div class="warp-footer-btns">
<div class="release-btn"> <div class="release-btn">
<a href="javascript:void(0)">发布</a> <a href="javascript:publish()">发布</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 显示留言的主体 --> <!-- 显示留言的主体 -->
<c:forEach items="${list}" var="list" varStatus="i">
<div class="show"> <div class="show">
<div class="show-content"> <div class="show-content">
<div class="show-name"> <div class="show-name">
<div class="avtors"><img src="./static/img/touxiang.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;"></div> <div class="avtors"><img src="./static/img/touxiang.png" alt=""
<span style="margin-left: 10px;font-size: 1rem;">Xx</span> style="width: 40px;height: 40px;border-radius: 50%;"></div>
<span style="margin-left: 10px;font-size: 1rem;">${list.nickName}</span>
</div> </div>
<div class="show-txt"> <div class="show-txt">
<p class="">这是内容111111111111111111111111111111111111111111111111111111111</p> <p class="">${list.content}</p>
</div> </div>
<div class="show-time">2018年10月24日</div> <div class="show-time">${list.dateTime}</div>
<!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap"> <!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
<i class="layui-icon layui-icon-release"></i> 回复 <i class="layui-icon layui-icon-release"></i> 回复
</button> --> </button> -->
<div class="layui-panel"> <div class="layui-panel">
<c:choose>
<div class="comments"> <c:when test="${not empty list.replyContent && !(list.replyContent eq null)}">
<div class="comment-wrap"> <div class="comment-wrap">
<div class="photo"> <div class="photo">
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div> <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>
<div class="comment-block"> <div class="comment-block">
<form action=""> <form action="">
<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..." style="resize:none"></textarea> <textarea name="" cols="30" rows="3" placeholder="Say somthing..."
style="resize:none"></textarea>
<button type="button" class="layui-btn layui-btn-xs"> <button type="button" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-release"></i> 回复 <i class="layui-icon layui-icon-release"></i> 回复
</button> </button>
</form> </form>
</div> </div>
</div> </div>
</c:when>
<c:otherwise>
<div class="comments">
<div class="comment-wrap"> <div class="comment-wrap">
<div class="photo"> <div class="photo">
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div> <div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
</div> </div>
<div class="comment-block"> <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 <form action="">
quasi sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p> <textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..."
<div class="bottom-comment"> style="resize:none"></textarea>
<div class="comment-date">23.5 2014</div> <button type="button" class="layui-btn layui-btn-xs">
<ul class="comment-actions"> <i class="layui-icon layui-icon-release"></i> 回复
<li class="complain">Complain</li> </button>
<li class="reply">Reply</li> </form>
</ul>
</div> </div>
</div> </div>
</div> </c:otherwise>
</div> </c:choose>
</div>
<div class="show-close">x</div> <div class="show-close">x</div>
</div> </div>
</div> </div>
</div> </div>
</c:forEach>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script> <script>
layui.use(function () { layui.use(function () {
var $ = layui.$; var $ = layui.$;
@ -290,16 +323,36 @@
shadeClose: true, shadeClose: true,
title: '管理员登录', title: '管理员登录',
content: $('#adminform'), 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);
})
}
$(function () { $(function () {
@ -331,7 +384,7 @@
console.log("失去焦点"); console.log("失去焦点");
$(this).parent().removeClass('outline'); $(this).parent().removeClass('outline');
$title_txt.removeClass('title'); $title_txt.removeClass('title');
$title_txt.html("111"); $title_txt.html("言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。");
}) })
// 输入框文本修改 // 输入框文本修改
@ -368,83 +421,82 @@
}) })
// 发布事件 // 发布事件
$release_btn.click(function () { // $release_btn.click(function () {
console.log("发布"); // console.log("发布");
if (release_able) { // if (release_able) {
console.log('可以发布'); // console.log('可以发布');
// 创建show对象的各个部位 // // 创建show对象的各个部位
var $showContent = $('<div class="show-content"></div>'), // var $showContent = $('<div class="show-content"></div>'),
$showName = $('<div class="show-name"></div>'), // $showName = $('<div class="show-name"></div>'),
$showTxt = $('<div class="show-txt"></div>'), // $showTxt = $('<div class="show-txt"></div>'),
$showTime = $('<div class="show-time"></div>'), // $showTime = $('<div class="show-time"></div>'),
$showClose = $('<div class="show-close"></div>'), // $showClose = $('<div class="show-close"></div>'),
$showP = $('<p class=""></p>'); // $showP = $('<p class=""></p>');
//
var date = new Date(); // var date = new Date();
// 设置，对象结构内内容 // // 设置，对象结构内内容
$showName.text("XxXx"); // $showName.text("XxXx");
$showP.text($main_area.val()); // $showP.text($main_area.val());
$showTime.text(date); // $showTime.text(date);
$showClose.text("x"); // $showClose.text("x");
// 添加进入主结构 // // 添加进入主结构
$showTxt.append($showP); // $showTxt.append($showP);
$showContent.append($showName); // $showContent.append($showName);
$showContent.append($showTxt); // $showContent.append($showTxt);
$showContent.append($showTime); // $showContent.append($showTime);
$showContent.append($showClose); // $showContent.append($showClose);
//
// 向所有匹配元素内部的开始处插入内容 // // 向所有匹配元素内部的开始处插入内容
$('.show').prepend($showContent); // $('.show').prepend($showContent);
//
// 添加动画 // // 添加动画
// 位置从输入框处下移 // // 位置从输入框处下移
$showContent.css({ // $showContent.css({
top: '-150px' // top: '-150px'
}) // })
$showContent.animate({ // $showContent.animate({
top: 0 // top: 0
}, 200) // }, 200)
//
// 删除事件 // // 删除事件
$showClose.click(function () { // $showClose.click(function () {
// 显示插入的索引位置 // // 显示插入的索引位置
// console.log($(this).parent().index()); // // console.log($(this).parent().index());
// console.log($showContent.index()); // // console.log($showContent.index());
//
//
// 删除操作为顺便 // // 删除操作为顺便
// // $showContent.remove();
//
// // 使用删除动画，创建效果
// $showContent.animate({
// height: 0
// }, 200, function () {
// // 动画结束后将自身从dom中移除
// $showContent.remove(); // $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'
// }) //按钮点击事件重置
//
// }
// })
}) })
// 发布成功后收尾工作
$main_area.val(""); //输入框清空
able_count = 140; //输入框可输入内容数重置
release_able = false;
$release_btn.css({
backgroundColor: '#ffc09f',
borderColor: '#ffc09f'
}) //按钮点击事件重置
}
})
})
</script> </script>
</body> </body>
</html> </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;} .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
/*最外层*/ /*最外层*/
.wrap { .wrap {
width: 700px; width: 700px;
@ -74,7 +75,7 @@ ul {
} }
.head-logo { .head-logo {
width: 40%; width: 20%;
float: left; float: left;
} }
@ -87,6 +88,7 @@ ul {
padding: 4px 0; padding: 4px 0;
width: 60%; width: 60%;
float: right; float: right;
text-align: center;
} }
.head-txt a { .head-txt a {
@ -306,6 +308,8 @@ p {
.photo { .photo {
padding-top: 0.625rem; padding-top: 0.625rem;
display: table-cell; display: table-cell;
vertical-align: middle;
text-align: center;
width: 3.5rem; width: 3.5rem;
} }
.photo .avatar { .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