一.准备工作/模板/原型
二.项目启动
- 建表，一共建有5张表，主外键关系如下图
- 制作登录页面，并且进行登录校验
- 效果图：
- maven项目分包分层：
页面采用javaScript,html,css,进行设计，并进行了非空校验和密码一致性校验，
登录主要是需要进行用户名和密码的查验（通过用户名查找数据，如果存在数据并且密码一致，则可以成功登录，并且用户信息在主页面显示用户名）
注册则需要进行重名校验，然后再进行注册插入，然后重回登录页面进行登录
用到了过滤器防止中文乱码
- 代码：
- 前端页面：
-
<html> <head> <title>Title</title> </head> <style> #dd{ margin: auto; margin-top: 10%; width: 400px; border: 2px solid darkorchid; border-radius: 5px; } body{ margin: 0; padding: 0; font-family: sans-serif; background: url("images/login5.jpg") no-repeat center 0px; /*background-image: url("images/login3.jpg");*/ background-size: cover; background-position: center 0; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; } .login-box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; padding:40px; background: rgba(0,0,0,.8); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.5); border-radius: 10px; } .login-box h2{ margin: 0 0 30px; padding: 0; text-align: center; color: #fff; } .login-box .login-field{ position: relative; } .login-box .login-field input{ width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .login-field label{ position: absolute; top: 0; left: 0; letter-spacing: 1px; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .login-field input:focus ~ label, .login-box .login-field input:valid ~ label{ top: -23px; left: 0; color: aqua; font-size: 12px; } .login-box button{ background: transparent; border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 20px; cursor: pointer; border-radius: 5px; width: 100px; } </style> <script> function f() { var flag = true; //判断是否输入用户名 var username = document.getElementById("username").value; if(username.length<1){ alert("用户名不能为空！") flag = false; } //判断是否输入密码 var password = document.getElementById("password").value; var pass = document.getElementById("pass").value; if(password.length<1){ alert("密码不能为空！") flag = false; } if(pass.length<1){ alert("请确认密码！") flag = false; } if (password != pass){ alert("您两次输入的密码不一致！") flag = false; } return flag; } </script> <body> <div class="login-box"> <h2>Login</h2> <form action="doLogin.jsp" method="post" onsubmit="return f()"><%--return必不可少--%> <div class="login-field"> <input type="text" name="userName" id="username" /> <label>用户名</label> </div> <div class="login-field"> <input type="password" name="password" id="password" /> <label >密码</label> </div> <div class="login-field"> <input type="password" name="pass" id="pass" /> <label >确认密码</label> </div> <button type="submit">登录</button> <button type="submit">注册</button> </form> </div> </body> </html> - dao查登录
//查登录
public User checkLogin(Connection conn, User user) throws Exception {
String sql = "select * from user where userName = ?";
Object[] param = {user.getUserName()};
ResultSet rs = this.getRs(conn, sql, param);
User user1 = null;
//这一步若为真，说明存在该用户，并且密码正确
if(rs.next() && user.getPassword().equals(rs.getString("password"))){
user1 = new User(
rs.getString("userName"),
rs.getString("password")
);
}
return user1;
}- 制作主页面main.jsp和section.jsp.section显示在main里面的iframe中
- 效果图
- 主要思路：板块当中的数据往数据库里面查，然后通过循环，并且使用flex布局一行三列显示到页面当中，运用阴影和hover以及绝对定位实现页面效果，鼠标动板块高度向内收缩
- 代码实现：
- section.jsp的css
-
td{ border: 0px; } body { /* background: url("../images/section1.jpg") no-repeat center 0px; !*background-image: url("images/login3.jpg");*! background-size: cover;*/ } #dd { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; /*height: 50%;*/ /*padding-top:40px;*/ /*padding-bottom: 20px;*/ /*padding-left: 40px;*/ /*background: rgba(0,0,0,.8);*/ /*box-sizing: border-box;*/ box-shadow: 0 5px 10px rgba(0, 0, 0, .5); border-radius: 10px; /*background-color: mediumspringgreen;*/ height: 410px; /*overflow: hidden;*/ overflow-y: auto; } #top { width: 100%; height: 5%; text-align: center; padding-top: 15px; /*line-height: 100%;*/ } #top b { width: 220px; color: whitesmoke; font-size: 20px; font-family: "Microsoft JhengHei Light"; /*padding-left: 20px;*/ /*background-color: darkcyan;*/ margin-left: 6%; } #top #topr { /*padding-left: 100px;*/ width: 50px; float: right; margin-right: 1%; margin-top: 12px; /*background-color: lightgoldenrodyellow;*/ background-color: white; text-align: center; height: 23px; line-height: 23px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); } #topr a { text-decoration: none; color: black; font-size: 12px; } #topr a:hover { text-decoration: none; color: skyblue; font-size: 15px; } .item { color: black; flex: 0 0 32%; height: 160px; text-align: left; /*line-height:180px;*/ background-color: initial; /* 边距用css函数代替 */ margin-right: calc(2% / 3); margin-left: calc(2% / 3); margin-bottom: calc(5% / 2); border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); transform: perspective(800px) rotateY(0deg); transition: 0.7s; transform-style: preserve-3d; /*让转换的子元素保留3D转换： 没有这个 达不到翻转的效果*/ /*父盒子清除浮动*/ overflow: hidden; } .item:hover { color: black; flex: 0 0 32%; height: 150px; text-align: left; /*line-height:300px;*/ background-color: bisque; /*边距懒得算，css函数代替 */ margin-right: calc(2% / 3); margin-left: calc(2% / 3); margin-top: calc(2% / 2); margin-bottom: calc(3% / 2); border-radius: 10px; /*向右，向下，向外扩散距离*/ box-shadow: 0 10px 20px rgba(0, 0, 0, .5); /*向外转30度*/ transform: perspective(800px) rotateY(-30deg); /*父盒子清除浮动*/ overflow: hidden; } 去除每行尾的多余边距 .item:nth-child(3n){ width: auto; margin-right: 0; } 使最后一个元素的边距填满剩余空间 .item:last-child{ margin-right: auto; } .item-left { width: 38%; float: left; } .item-left img { width: 100%; margin-top: 10%; margin-left: 1%; border-radius: 10px; } .item-left .topic { margin-top: 15%; /*margin-left: 5%;*/ font-size: 18px; } .item-right { width: 58%; height: 80%; /*background-color: blue;*/ border: 1px solid white; float: right; margin-top: 4%; border-radius: 10px; padding-top: 3%; padding-left: 2%; } - HTML：
-
<%@ page import="com.pro.service.SectionServiceImp" %> <%@ page import="com.pro.domain.Section" %> <%@ page import="java.util.List" %> <%@ page import="java.util.ArrayList" %> <%@ page import="com.pro.domain.Post" %><%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/7/25 0025 Time: 13:32 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> <link rel="stylesheet" href="section.css" type="text/css"> </head> <% /* List<Section> sectionList = (ArrayList<Section>)request.getAttribute("sectionList"); List<String> countPList = (ArrayList<String>)request.getAttribute("countPList"); List<String> countTList = (ArrayList<String>)request.getAttribute("countTList"); List<Post> postList = (ArrayList<Post>)request.getAttribute("postList");*/ %> <body> <div id="dd"> <div id="top"> <b style="">板块列表</b> <div id="topr"> <a href="../main.jsp" target="_parent">返回</a> </div> </div> <br> <div style="display: flex; justify-content: space-between; flex-wrap: wrap; "> <c:forEach items="${secList}" var="map"> <div class="item" style="background-color: white;"> <%--a标签千万不要套在flex布局的子元素当中，否则你设置的一行限制几个元素都会失效，这个导致的误差效果找了好久才找到 还有个问题就是，用jstl结合EL表达式来写，如果要用到sectionList当中的元素的索引，此时不能用foreach，那要怎么写？ 确实不能写，所以改用map来存数据，通过名字来取，就不需要用到索引了，具体的业务在service里面写，别写到do页面 --%> <a href="../post/doinitpost.jsp?sectionId=${map.section.sectionId}" style="color:black"> <div class="item-left"> <img src="${map.section.photo}" alt=""> <div class="topic"> <b>【${map.section.sectionName}】</b> </div> </div> <div class="item-right"> <b>主题: </b>${map.countTopic}，<b>帖数：</b> ${map.countPost} <br><br> <b>最后发表: </b>${map.lastPost.postTime} </div> </a> </div> </c:forEach> </div> </div> </body> </html> - 后端代码实现往数据库中查真实数据显示到页面：
- dosection.jsp
-
<%@ page import="com.pro.service.SectionServiceImp" %> <%@ page import="com.pro.domain.Section" %> <%@ page import="java.util.List" %> <%@ page import="java.util.ArrayList" %> <%@ page import="com.pro.domain.Post" %><%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/7/26 0026 Time: 12:51 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% // // SectionServiceImp sectionServiceImp = new SectionServiceImp(); /* //获取所有版块信息 List<Section> sectionList = sectionServiceImp.queryAll(); //建两个集合，用来装板块涉及的主题数和帖子数 ArrayList<String> countPList = new ArrayList<>(); ArrayList<String> countTList = new ArrayList<>(); ArrayList<Post> postList = new ArrayList<>(); for (Section section : sectionList) { int i1 = sectionServiceImp.countPost(section.getSectionId()); int i2 = sectionServiceImp.countTopic(section.getSectionId()); //获取最新发布的帖子 Post lastPost = sectionServiceImp.findLastPost(section.getSectionId()); //因为数组是字符串类型的，所以要强转为字符串类型 String s1 = String.valueOf(i1); String s2 = String.valueOf(i2); countPList.add(s1); countTList.add(s2); postList.add(lastPost); } request.setAttribute("sectionList",sectionList); request.setAttribute("countPList",countPList); request.setAttribute("countTList",countTList); request.setAttribute("postList",postList);*/ //查板块信息的思路2：用list装map，一个map表示一个板块，用map装板块里面所需要的所有数据，页面上根据键值来取 //获取所有版块信息 List secList = sectionServiceImp.queryAll(); request.setAttribute("secList",secList); // request.getRequestDispatcher("section.jsp").forward(request,response); %> - 点击板块，会跳转到 相应的板块页面，效果如下：
- 这个页面上，可以查看到相应板块的所有帖子，帖子分页显示，可以快速发帖，选择最新，精选，热门，精华类型的帖子
- HTML代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="post.css" type="text/css">
</head>
<script>
function f() {
document.getElementById("bottom").style.visibility="visible"
}
function f1() {
document.getElementById("bottom").style.visibility="hidden"
}
function f2() {
var topic = document.getElementById("topic");
var title = document.getElementById("title");
var content = document.getElementById("content");
var flag = true;
if(topic.value<1){
flag = false;
alert("请选择帖子主题！");
}
if(title.value<1){
flag = false;
alert("请输入帖子标题！")
}
if(content.value<1){
flag = false;
alert("请输入帖子内容！")
}
if(flag == true){
alert("发送成功！")
}
return flag;
}
</script>
<body>
<div id="dd">
<div id="top">
<%-- 用#aa作为锚点，跳到快速发帖的位置--%>
<div class="ft">
<b style=""><a href="#aa" style="text-decoration: none" name="bb" onclick="f()">发帖</a></b>
</div>
<div id="topr">
<a href="../section/initsection.jsp">返回</a>
</div>
</div>
<hr>
<div id="nav">
<div class="navl">
<select name="" id="">
<option value="">全部主题</option>
<c:forEach items="${topicList}" var="topic">
<option value="${topic.topicId}">${topic.topicName}</option>
</c:forEach>
</select>
<a href="#">最新</a>
<a href="#">热门</a>
<a href="#">热帖</a>
<a href="#">精华</a>
<select name="" id="">
<option value="">更多</option>
<option value="">小星星</option>
</select>
</div>
<div class="navr">
<input type="checkbox">新窗
作者
回复/查看
最后发表
</div>
</div>
<div style="display: flex; justify-content: space-between; flex-wrap: wrap; ">
<%-- //定义一个iframe专门来显示各种顺序的帖子--%>
<iframe src="initpost.jsp" frameborder="0" width="100%" height="100%" name="postPage"></iframe>
</div>
<div id="middle">
<div class="ft"><b style=""> <a href="#bb">顶部</a></b>
</div>
<div id="middler">
<%-- 有一种可能是postPageModel.post，这里的post不知道是集合当中的哪一个post，因为有几条数据，如果是这样，那要怎么改--%>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageFirst}§ionId=${postPageModel.list[0].section.sectionId}"
>首页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageUp}§ionId=${postPageModel.list[0].section.sectionId}"
>上一页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageDown}§ionId=${postPageModel.list[0].section.sectionId}"
>下一页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageLast}§ionId=${postPageModel.list[0].section.sectionId}"
>尾页</a>
<%--${postPageModel.list[0].section.sectionId}--%>
<%-- <a href="doinitpost.jsp?currentPage=${postPageModel.pageFirst}§ionId=${post.section.sectionId}"
target="_parent">首页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageUp}§ionId=${post.section.sectionId}"
target="_parent">上一页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageDown}§ionId=${post.section.sectionId}"
target="_parent">下一页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageLast}§ionId=${post.section.sectionId}"
target="_parent">尾页</a>--%>
<%--
下面用EL表达式直接取板块id可以实现分页
<a href="doinitpost.jsp?currentPage=${postPageModel.pageFirst}§ionId=${sectionId2}"
>首页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageUp}§ionId=${sectionId2}"
>上一页</a>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageDown}§ionId=${sectionId2}"
>下一页</a>
<%– 这里有个bug，点击尾页一直是跳到第八页,已经解决了，因为SQL之前查的是所有帖子数–%>
<a href="doinitpost.jsp?currentPage=${postPageModel.pageLast}§ionId=${sectionId2}"
>尾页</a>--%>
共${postPageModel.pageLast}页 当前第${postPageModel.currentPage}页
</div>
</div>
<form action="doWritePost.jsp?sectionId=${sectionId2}&userId=${user1.userId}" method="post" onsubmit="return f2()">
<div id="bottom" >
<span><b><a href="#" name="aa" style="text-decoration: none;color: black">快速发帖</a></b></span><br>
<hr>
<select name="topicId" id="topic">
<%-- 下拉框太长了，如何设置高度--%>
<option value="">选择主题分类</option>
<c:forEach items="${topicList}" var="topic">
<option value="${topic.topicId}">${topic.topicName}</option>
</c:forEach>
<%-- 如果所有的主题都可以选择的话，板块就会和主题对应不上--%>
<%--<c:forEach items="${allTopic}" var="topic">
<option value="${topic.topicId}">${topic.topicName}</option>
</c:forEach>--%>
</select>
请输入标题：<input type="text" name="postTitle" id="title"><br>
<textarea name="postContent" id="content" cols="70%" rows="8"></textarea><br>
<input type="submit" value="发表帖子" style="background-color:#FE9C0F ;color:white;border-radius: 8px " onclick="f1();">
</div>
</form>
</div>
</body>
</html>
- css代码：
-
td { border: 0px; } body { /* background: url("../images/section1.jpg") no-repeat center 0px; !*background-image: url("images/login3.jpg");*! background-size: cover;*/ } #dd { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; /*height: 50%;*/ /*padding-top:40px;*/ /*padding-bottom: 20px;*/ /*padding-left: 40px;*/ /*background: rgba(0,0,0,.8);*/ /*box-sizing: border-box;*/ box-shadow: 0 5px 10px rgba(0, 0, 0, .5); border-radius: 10px; /*background-color: mediumspringgreen;*/ height: 500px; overflow: hidden; overflow-y: auto; } #top { width: 100%; height: 5%; text-align: left; padding-top: 15px; /*line-height: 100%;*/ overflow: hidden; } .ft { background-color: #FE9C0F; width: 60px; text-align: center; border-radius: 5px; float: left; margin-left: 1%; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); height: 26px; line-height: 26px; } #top b { width: 220px; color: whitesmoke; font-size: 15px; font-family: "Microsoft JhengHei Light"; /*padding-left: 20px;*/ /*background-color: darkcyan;*/ /*margin-left: 6%;*/ } #top #topr { /*padding-left: 100px;*/ width: 50px; float: right; margin-right: 2%; /*margin-top: 20px;*/ /*background-color: lightgoldenrodyellow;*/ background-color: white; text-align: center; height: 23px; line-height: 23px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); } #topr a { text-decoration: none; color: black; font-size: 12px; } #topr a:hover { text-decoration: none; color: skyblue; font-size: 15px; } #nav { margin-left: 5%; margin-right: 5%; overflow: hidden; } .navl { float: left; } .navr { float: right; padding-right: 5%; } .navl a { text-decoration: none; } .item { color: black; flex: 0 0 90%; height: 40px; text-align: left; /*line-height: 40px;*/ background-color: initial; /* 边距用css函数代替 */ margin-right: calc(5% / 1); margin-left: calc(5% / 1); margin-bottom: calc(1% / 1); border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); transform: perspective(800px) rotateY(0deg); transition: 0.7s; transform-style: preserve-3d; /*让转换的子元素保留3D转换： 没有这个 达不到翻转的效果*/ /*父盒子清除浮动*/ overflow: hidden; } .item:hover { color: black; flex: 0 0 90%; height: 35px; text-align: left; /*line-height:300px;*/ background-color: bisque; /*边距懒得算，css函数代替 */ margin-right: calc(5% / 1); margin-left: calc(5% / 1); margin-top: calc(1% / 1); margin-bottom: calc(1% / 1); border-radius: 10px; /*向右，向下，向外扩散距离*/ box-shadow: 0 10px 20px rgba(0, 0, 0, .5); /*向外转30度*/ transform: perspective(800px) rotateY(0deg); /*父盒子清除浮动*/ overflow: hidden; } .item .one { width: 3%; height: 40px; float: left; background-color: #FFFFFF; /* padding-top: 1%; padding-left: 1%;*/ padding-top: 10px; padding-left: 8px; } .item .two { width: 65%; height: 40px; float: left; background-color: slategrey; line-height: 40px; } .item .two a{ text-decoration: none; } .item .three { width: 10%; height: 40px; font-size: 10px; float: left; padding-top: 5px; background-color: darksalmon; } .item .four { width: 10%; height: 40px; padding-top: 5px; float: left; font-size: 10px; background-color: deeppink; } .item .five { width: 10%; height: 40px; float: left; font-size: 10px; padding-top: 5px; background-color: initial; } 去除每行尾的多余边距 .item:nth-child(3n) { width: auto; margin-right: 0; } 使最后一个元素的边距填满剩余空间 .item:last-child { margin-right: auto; } .item-left { width: 38%; float: left; } .item-left img { width: 100%; margin-top: 10%; margin-left: 1%; border-radius: 10px; } .item-left .topic { margin-top: 15%; /*margin-left: 5%;*/ font-size: 18px; } .item-right { width: 58%; height: 80%; /*background-color: blue;*/ border: 1px solid white; float: right; margin-top: 4%; border-radius: 10px; padding-top: 3%; padding-left: 2%; } #middle { width: 90%; height: 5%; text-align: left; padding-top: 0px; /*line-height: 100%;*/ overflow: hidden; padding-bottom: 1%; margin-right: 5%; margin-left: 5%; } #middle b { width: 220px; color: whitesmoke; font-size: 15px; font-family: "Microsoft JhengHei Light"; /*padding-left: 20px;*/ /*background-color: darkcyan;*/ /*margin-left: 6%;*/ } #middle #middler { /*padding-left: 100px;*/ width: 400px; float: right; /*margin-right: 2%;*/ /*margin-top: 20px;*/ /*background-color: lightgoldenrodyellow;*/ background-color: initial; text-align: center; height: 26px; line-height: 23px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); } #middle a { text-decoration: none; color: black; font-size: 15px; } #middle a:hover { text-decoration: none; color: skyblue; font-size: 17px; } #bottom { color: black; flex: 0 0 90%; background-color: initial; /* 边距用css函数代替 */ margin-right: calc(5% / 1); margin-left: calc(5% / 1); margin-bottom: calc(1% / 1); box-shadow: 0 1px 6px rgba(0, 0, 0, .5); /*父盒子清除浮动*/ overflow: hidden; visibility: hidden; }后端代码：
-
数据显示到post页面前先查数据：doinitPost
-
<%@ page import="com.pro.service.PostServiceImp" %> <%@ page import="com.pro.domain.Post" %> <%@ page import="com.pro.util.PageModel" %> <%@ page import="com.pro.domain.Topic" %> <%@ page import="java.util.List" %><%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/7/27 0027 Time: 18:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% //6yg String sectionId = request.getParameter("sectionId"); String currentPage = request.getParameter("currentPage"); // int pageSize = 4; if(currentPage == null || currentPage.equals("")){ currentPage = "1"; } PostServiceImp postServiceImp = new PostServiceImp(); //查分页 PageModel<Post> postPageModel = postServiceImp.queryPostBySid(Integer.parseInt(sectionId),Integer.parseInt(currentPage),pageSize); //根据板块id查所有主题 List<Topic> topicList = postServiceImp.queryTopicBySid(Integer.parseInt(sectionId)); //查所有主题 List<Topic> allTopic = postServiceImp.queryAllTopic(); session.setAttribute("postPageModel",postPageModel); session.setAttribute("topicList",topicList); session.setAttribute("allTopic",allTopic); //响应当前的板块id给post页面，方便分页请求时取sectionId这个参数，这个是方式2 int sectionId2 = Integer.parseInt(sectionId); session.setAttribute("sectionId2",sectionId2); // request.getRequestDispatcher("post.jsp").forward(request,response); %> - 点击发帖的请求页面：doWritePost.jsp
<%@ page import="com.pro.domain.User" %>
<%@ page import="com.pro.domain.Section" %>
<%@ page import="com.pro.domain.Topic" %>
<%@ page import="java.util.Date" %>
<%@ page import="com.pro.domain.Post" %>
<%@ page import="com.pro.service.PostServiceImp" %><%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/7/28 0028
Time: 20:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
//
String userId = request.getParameter("userId");
String sectionId = request.getParameter("sectionId");
String topicId = request.getParameter("topicId");
String postTitle = request.getParameter("postTitle");
String postContent = request.getParameter("postContent");
//
User user = new User(Integer.parseInt(userId));
Section section = new Section(Integer.parseInt(sectionId));
Topic topic = new Topic(Integer.parseInt(topicId));
Date postTime = new Date();
Post post = new Post(user, section, topic, postTitle, postContent, postTime);
PostServiceImp postServiceImp = new PostServiceImp();
postServiceImp.writePost(post);
//
response.sendRedirect("../section/initsection.jsp");
%>- post列表的初始数据：initPost.jsp
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/7/28 0028
Time: 22:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<style>
.item {
color: black;
flex: 0 0 90%;
height: 40px;
text-align: left;
/*line-height: 40px;*/
background-color: initial;
/* 边距用css函数代替 */
margin-right: calc(5% / 1);
margin-left: calc(5% / 1);
margin-bottom: calc(1% / 1);
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
transform: perspective(800px) rotateY(0deg);
transition: 0.7s;
transform-style: preserve-3d; /*让转换的子元素保留3D转换： 没有这个 达不到翻转的效果*/
/*父盒子清除浮动*/
overflow: hidden;
}
.item:hover {
color: black;
flex: 0 0 90%;
height: 35px;
text-align: left;
/*line-height:300px;*/
background-color: bisque;
/*边距懒得算，css函数代替 */
margin-right: calc(5% / 1);
margin-left: calc(5% / 1);
margin-top: calc(1% / 1);
margin-bottom: calc(1% / 1);
border-radius: 10px;
/*向右，向下，向外扩散距离*/
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
/*向外转30度*/
transform: perspective(800px) rotateY(0deg);
/*父盒子清除浮动*/
overflow: hidden;
}
.item .one {
width: 3%;
height: 40px;
float: left;
background-color: #FFFFFF;
/* padding-top: 1%;
padding-left: 1%;*/
padding-top: 10px;
padding-left: 8px;
}
.item .two {
width: 65%;
height: 40px;
float: left;
background-color: slategrey;
line-height: 40px;
}
.item .two a{
text-decoration: none;
}
.item .three {
width: 10%;
height: 40px;
font-size: 10px;
float: left;
padding-top: 5px;
background-color: darksalmon;
}
.item .four {
width: 10%;
height: 40px;
padding-top: 5px;
float: left;
font-size: 10px;
background-color: deeppink;
}
.item .five {
width: 10%;
height: 40px;
float: left;
font-size: 10px;
padding-top: 5px;
background-color: initial;
}
</style>
</head>
<body>
<c:forEach items="${postPageModel.list}" var="post">
<div class="item" style="background-color: white;">
<a href="../reply/reply.jsp" target="_parent" style="text-decoration: none;color: black">
<div class="one">
<img src="../images/post1.png" alt="" width="15px">
</div>
<div class="two">
<a href="#" style="text-decoration: none">[${post.topic.topicName}]</a>
<span>${post.postTitle}</span>
</div>
<div class="three">
${post.user.userName} <br>
${post.postTime}
</div>
<%--回复和查看数量--%>
<div class="four">
37
<br>
2001
</div>
<div class="five">
${post.user.userName}
<br>
${post.postTime}
</div>
</a>
</div>
</c:forEach>
</body>
</html>
- 点击某一条post帖子，跳转到详情页：这个页面可以查看楼主的帖子的具体内容并可以对其进行回复
4629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
