软件开发与创新课程设计-第一周课后作业-软件二次开发
1. 来源
项目来源于我的室友,一个基于JSP+Mysql的WEB图书售卖系统项目。
2.运行环境与运行结果
-
运行环境:
Windows 11 23H2
OpenJDK 21.0.2
IntelliJ IDEA 2023.3.4
Tomcat 10
MySQL-Connector 8.2.0 -
数据库构成
-
源程序代码
book.java
package com.project02.project02;
public class Book {
private int bookid;
private String bookname;
private String author;
private String pic;
private String press;
private String intro;
private double price;
public Integer getBookid(){
return bookid;
}
public void setBookid(Integer bookid){
this.bookid = bookid;
}
public String getBookname(){
return bookname;
}
public void setBookname(String bookname){
this.bookname = bookname;
}
public String getAuthor(){
return author;
}
public void setAuthor(String author){
this.author = author;
}
public String getPic(){
return pic;
}
public void setPic(String pic){
this.pic =pic;
}
public String getPress(){
return press;
}
public void setPress(String press){
this.press = press;
}
public String getIntro(){
return intro;
}
public void setIntro(String intro){
this.intro = intro;
}
public double getPrice(){
return price;
}
public void setPrice(double price){
this.price = price;
}
}
cart.java
package com.project02.project02;
public class Cart {
private Book p;
private int sum;
public Book getP() {
return p;
}
public void setP(Book p) {
this.p = p;
}
public int getSum() {
return sum;
}
public void setSum(int sum) {
this.sum = sum;
}
}
doAccount.java
package com.project02.project02;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.*;
import java.io.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
import java.sql.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.net.URLDecoder;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
public class doAccount extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String account = (String)session.getAttribute("username");
String address = request.getParameter("address");
String phone = request.getParameter("phone");
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.装载驱动程序
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立数据库连接
conn = DriverManager.getConnection(sConnStr,username,password);
// 4创建PreparedStatement对象
stmt = conn.createStatement();
// 执行SQL语句
String sql = "INSERT INTO userinfo (account, address, phone) VALUES('"+account+"','"+address+"','"+phone+"') " +
"ON DUPLICATE KEY UPDATE address = '"+address+"', phone = '"+phone+"';";
int result = stmt.executeUpdate(sql);
//6.处理结果
if(result>0){
response.sendRedirect("./account.jsp");
// 在session中存储收货地址和电话号码
session.setAttribute("address", address);
session.setAttribute("phone", phone);
}
else {
response.sendRedirect("./accountFail.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.关闭连接
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doLogin.java
package com.project02.project02;
import java.io.IOException;
import java.sql.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
public class doLogin extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String account = request.getParameter("username");
String pwd = request.getParameter("password");
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.装载驱动程序
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立数据库连接
conn = DriverManager.getConnection(sConnStr,username,password);
//4.创建PreparedStatement
String sql = "SELECT * FROM user WHERE account = ? AND password = ?";
stmt = conn.prepareStatement(sql);
stmt.setString(1, account);
stmt.setString(2, pwd);
//5.执行SQL语句
rs = stmt.executeQuery();
//6.处理结果
if(rs.next()){
//out.println("用户登录成功,欢迎您," + account);
response.sendRedirect("./account.jsp");
// 在session中存储登录账号和密码
session.setAttribute("username", account);
session.setAttribute("password", pwd);
} else {
//out.println("用户登录失败,用户名或密码错误。");
response.sendRedirect("./loginFail.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.关闭连接
try {
rs.close();
stmt.close();
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doMessage.java
package com.project02.project02;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class doMessage extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
String msg = request.getParameter("msg");
String footer = request.getParameter("footer");
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.装载驱动程序
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立数据库连接
conn = DriverManager.getConnection(sConnStr,username,password);
//4.创建Statement
stmt = conn.createStatement();
//5.执行SQL语句
String sql = "INSERT INTO message (msg,footer) VALUES('"+msg+"','"+footer+"') " ;
int result = stmt.executeUpdate(sql);
//6.处理结果
if(result>0){
response.sendRedirect("./message.jsp");
}
}
catch(SQLException el){
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.关闭连接
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doOrder.java
package com.project02.project02;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.*;
import java.util.HashMap;
import java.util.Iterator;
public class doOrder extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String account = (String) session.getAttribute("username");
String address = (String) session.getAttribute("address");
String phone = (String) session.getAttribute("phone");
System.out.println(account);
System.out.println(address);
System.out.println(phone);
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.装载驱动程序
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立数据库连接
conn = DriverManager.getConnection(sConnStr,username,password);
// 4创建PreparedStatement对象
stmt = conn.createStatement();
int result =0;
HashMap map = (HashMap)session.getAttribute("cart");
Iterator it = map.keySet().iterator();
while(it.hasNext()) {
java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
java.util.Date currentTime = new java.util.Date();
String str1 = formatter.format(currentTime);
Object key = it.next();
Cart cartItem = (Cart) map.get(key);
Book p = cartItem.getP();
int sum = cartItem.getSum();
String sql = "INSERT INTO orders (account,address,phone,bookid,bookname,booknumber,buytime) VALUES('"+account+"','"+address+"','"+phone+"','"+p.getBookid()+"','"+p.getBookname()+"','"+sum+"','"+str1+"') " ;
result+= stmt.executeUpdate(sql);
}
//6.处理结果
if(result>0){
//下单成功页面
response.sendRedirect("./orderSuccess.jsp");
// 在session中存储收货地址和电话号码
}
else {
response.sendRedirect("./accountFail.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.关闭连接
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doRegister
package com.project02.project02;
import java.io.IOException;
import java.sql.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
public class doRegister extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
String account = request.getParameter("username");
String pwd = request.getParameter("confirmPassword");
String ema = request.getParameter("email");
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.装载驱动程序
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立数据库连接
conn = DriverManager.getConnection(sConnStr,username,password);
//4.创建Statement
stmt = conn.createStatement();
//5.执行SQL语句
String sql = "INSERT INTO user (account, password, email) VALUES('"+account+"','"+pwd+"','"+ema+"') " +
"ON DUPLICATE KEY UPDATE password = '"+pwd+"', email = '"+ema+"';";
int result = stmt.executeUpdate(sql);
//6.处理结果
if(result>0){
//out.println("用户注册成功,请登录使用。");
response.sendRedirect("./login.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.关闭连接
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
User.java
package com.project02.project02;
public class User {
private String account;
private String password;
private String email;
@Override
public String toString(){
return "User{" +
"account='" + account +'\''+
", password='" + password + '\''+
", email='" + email + '\''+
'}';
}
public String getAccount(){
return account;
}
public void setAccount(String account){
this.account = account;
}
public String getPassword(){
return password;
}
public void setPassword(String password){
this.password = password;
}
public String getEmail(){
return email;
}
public void setEmail(String email){
this.email = email;
}
public User(){
}
public User(String account , String password,String email){
this.account = account;
this.password = password;
this.email = email;
}
}
BaseDao.java
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class BaseDao {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
Connection con;
public static Connection getConnection() throws SQLException {
Connection connection = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test";
connection = DriverManager.getConnection(url,"root","zhouzhou");
} catch (ClassNotFoundException e) {
// TODO: handle exception
e.printStackTrace();
}
return connection;
}
public static void closeAll(Connection conn, Statement stmt, ResultSet rs) {
try {
if (rs != null)
rs.close();
if (stmt != null)
stmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
// TODO: handle exception
e.printStackTrace();
}
}
}
BookDaoImpl.java
package dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import com.project02.project02.Book;
//操作图书的实现类
public class BookDaoImpl {
/* 作用,按照条件查询图书 */
public ArrayList findAll() {
ArrayList list = new ArrayList();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
// 1.打开数据库连接
conn = BaseDao.getConnection();
// 2.创建执行sql语句对象
stmt = conn.createStatement();
// 3.发送sql语句到mysql
String sql = "select * from book";
rs = stmt.executeQuery(sql);
// rs结果集--->遍历--->封装product--->放入ArrayList
while (rs.next())// 循环一次只代表一行
{
Book p = new Book();
p.setBookid(rs.getInt("bookid"));
p.setBookname(rs.getString("bookname"));
p.setPrice(rs.getDouble("price"));
p.setAuthor(rs.getString("author"));
p.setPic(rs.getString("pic"));
p.setPress(rs.getString("press"));
p.setIntro(rs.getString("intro"));
System.out.println(p.getBookname());
list.add(p);
}
// 4.
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
BaseDao.closeAll(conn, stmt, rs);
}
return list;
}
public Book findById(int id) {
//ArrayList list = new ArrayList();
Book p = new Book();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
// 1.打开数据库连接
conn = BaseDao.getConnection();
// 2.创建执行sql语句对象
stmt = conn.createStatement();
// 3.发送sql语句到mysql
String sql = "select * from book where bookid =" + id;
rs = stmt.executeQuery(sql);
// rs结果集--->遍历--->封装product--->放入ArrayList
while (rs.next())// 循环一次只代表一行
{
//Product p = new Product();
p.setBookid(rs.getInt("bookid"));
p.setBookname(rs.getString("bookname"));
p.setPrice(rs.getDouble("price"));
p.setAuthor(rs.getString("author"));
p.setPic(rs.getString("pic"));
p.setPress(rs.getString("press"));
p.setIntro(rs.getString("intro"));
System.out.println(p.getBookname());
}
// 4.
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
BaseDao.closeAll(conn, stmt , rs);
}
return p;
}
}
account.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/prompt.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>用户</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
font-family: "zhanku";
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
#main {
display: none;
width: 70%;
height: 70%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 20%;
left: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.header-text{
position: relative;
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
text-align: center;
top: 5%;
}
#inner{
display: none;
position: relative;
width: 95%;
height: 80%;
left: 2.5%;
top: 5%;
}
.img-box{
position: relative;
width:50% ;
height: 100%;
}
#user-img{
position: relative;
width: 50%;
top: 20%;
left: 20%;
filter: brightness(120);
opacity: 0.6;
}
#account-form{
position: relative;
width: 100%;
height: 100%;
font-family: "JetBrainsMono-Bold";
text-align: center;
top: 8%;
}
#account-form h1{
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
}
#username-box{
position: relative;
width:100%;
height: 8%;
font-size: 32px;
font-family: "zhanku";
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
#address{
position: relative;
width:70%;
height: 25%;
margin: 12px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
input::placeholder{
text-align: center;
font-size: 15px;
}
input{
text-align: center;
text-wrap:inherit;
}
input:focus{
border: none;
outline: 2px solid rgb(116, 116, 116);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
#phone{
position: relative;
width:40%;
height: 12%;
margin: 15px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
#bottoms{
position: relative;
left: 10%;
width: 80%;
height: 12%;
bottom: 0;
margin: 15px 0px 0px 0px;
}
input[type="submit"],button{
border: none;
position: relative;
width: 20%;
height: 80%;
margin: 0px 20px 0px 20px;
border-radius: 64px;
font-size: 24px;
background-color: rgba(255, 255, 255, 0.8);
}
input[type="submit"]:hover,button:hover{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:active,button:active{
color: rgb(0, 0, 0);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
background-color: rgb(252, 252, 252);
outline-style: none;
}
</style>
<body>
<%--判断session中取的用户名是否为空,若为空,则显示去登录,--%>
<%-- 若不为空,则可以在session中取到用户名,并且可以注销,注销后,用户名不在显示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<%
String address = null;
String phone = null;
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT address, phone FROM userinfo WHERE account = '"+session.getAttribute("username")+"'");
while (rs.next()) {
address = rs.getString("address");
phone= rs.getString("phone");
}
if(address!=null && phone !=null){
session.setAttribute("address",address);
session.setAttribute("phone",phone);
}
rs.close();
stmt.close();
conn.close();
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="main">
<div class="header-text">ACCOUNT</div>
<div id="inner">
<div class="img-box"><img src="image/user_img.png" id="user-img"></div>
<form id="account-form" action="doAccount" method="post">
<div id="username-box"><%=session.getAttribute("username")%></div>
<h1>Address</h1>
<input type="text" id="address" name="address" placeholder="<%
if(session.getAttribute("address") != null){
out.print(session.getAttribute("address"));
}
else {%>
请填入收货地址
<%
}
%>">
<h1>Phone</h1>
<input type="text" id="phone" name="phone" placeholder="<%
if(session.getAttribute("phone") != null){
out.print(session.getAttribute("phone"));
}
else {%>
请填入手机号码
<%
}
%>">
<div id="bottoms">
<input type="submit" value="确认" id="account-submit">
<a href="session.jsp"><button type="button">注销</button></a>
<a href="index.jsp"><button type="button">返回</button></a>
</div>
</form>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
//载入界面时动画
var mainForm = document.getElementById("main");
var form = document.getElementById("inner");
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "flex";
prompt_window.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 500);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
prompt_window.classList.add("fadeout-effect");
}, 1800);
}
</script>
</html>
accountFail.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/prompt.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>用户</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
font-family: "zhanku";
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
#main {
display: none;
width: 70%;
height: 70%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 20%;
left: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.header-text{
position: relative;
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
text-align: center;
top: 5%;
}
#inner{
display: none;
position: relative;
width: 95%;
height: 80%;
left: 2.5%;
top: 5%;
}
.img-box{
position: relative;
width:50% ;
height: 100%;
}
#user-img{
position: relative;
width: 50%;
top: 20%;
left: 20%;
filter: brightness(120);
opacity: 0.6;
}
#account-form{
position: relative;
width: 100%;
height: 100%;
font-family: "JetBrainsMono-Bold";
text-align: center;
top: 8%;
}
#account-form h1{
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
}
#username-box{
position: relative;
width:100%;
height: 8%;
font-size: 32px;
font-family: "zhanku";
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
#address{
position: relative;
width:70%;
height: 25%;
margin: 12px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
input::placeholder{
text-align: center;
font-size: 15px;
}
input{
text-align: center;
text-wrap:inherit;
}
input:focus{
border: none;
outline: 2px solid rgb(116, 116, 116);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
#phone{
position: relative;
width:40%;
height: 12%;
margin: 15px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
#bottoms{
position: relative;
left: 10%;
width: 80%;
height: 12%;
bottom: 0;
margin: 15px 0px 0px 0px;
}
input[type="submit"],button{
border: none;
position: relative;
width: 20%;
height: 80%;
margin: 0px 20px 0px 20px;
border-radius: 64px;
font-size: 24px;
background-color: rgba(255, 255, 255, 0.8);
}
input[type="submit"]:hover,button:hover{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:active,button:active{
color: rgb(0, 0, 0);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
background-color: rgb(252, 252, 252);
outline-style: none;
}
</style>
<body>
<%--判断session中取的用户名是否为空,若为空,则显示去登录,--%>
<%-- 若不为空,则可以在session中取到用户名,并且可以注销,注销后,用户名不在显示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<!-- 提示窗口 -->
<div id="window-prompt"><div id="prompt">请确保收货地址或电话号码完整</div></div>
<div class="container">
<div id="main">
<div class="header-text">ACCOUNT</div>
<div id="inner">
<div class="img-box"><img src="image/user_img.png" id="user-img"></div>
<form id="account-form" action="doAccount" method="post">
<div id="username-box"><%=session.getAttribute("username")%></div>
<h1>Address</h1>
<input type="text" id="address" name="address" placeholder="收货地址">
<h1>Phone</h1>
<input type="text" id="phone" name="phone" placeholder="手机号码">
<div id="bottoms">
<input type="submit" value="确认" id="account-submit">
<a href="session.jsp"><button type="button">注销</button></a>
<a href="index.jsp"><button type="button">返回</button></a>
</div>
</form>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
//载入界面时动画
var mainForm = document.getElementById("main");
var form = document.getElementById("inner");
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "flex";
prompt_window.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 500);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
form.classList.remove("fadein-effect-longTime")
prompt_window.classList.add("fadeout-effect");
}, 1800);
}
</script>
</html>
booklist.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>书单</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
}
body{
height: 2000px;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
}
.header ul li a{
color: rgb(199, 198, 198);
}
.booklist-container{
width: 80%;
top:150px;
height: 1800px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter:blur(4px);
position: relative;
left: 10%;
border-radius: 256px;
}
#booklist-header-text{
text-align: center;
height: 30px;
color: rgba(255,255,255,0.9);
font-size: 120px;
transform: translateY(-70px);
font-family: "zhanku";
z-index: 10;
--c:rgb(207, 207, 207);
text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c),
0 0 320px var(--c);
animation: glow-animation-light 5s infinite ease-in-out;
}
.booklist-heade-ul{
width: 60%;
height: 70px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 9999px;
position: relative;
left: 20%;
text-align: center;
}
.booklist-heade-ul ul{
width: 100%;
height: 100%;
display: flex;
align-items: center;
right: 5%;
}
.booklist-heade-ul li{
width: 100%;
text-align: center;
}
.booklist-heade-ul li a{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
border-radius: 9999px;
}
.booklist-heade-ul li a:hover{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
background-color: rgba(255,255,255,0.5);
}
.booklist-box{
position: relative;
width: 95%;
height: 90%;
left: 2.5%;
top: 2.5%;
border-radius: 200px;
display: flex;
justify-content: left;
align-items: start;
flex-wrap: wrap;
}
.booklist-subbox{
width: 18%;
height: 400px;
background-color: rgba(0, 0, 0, 0.2);
margin: 50px;
border-radius: 64px;
text-align: center;
flex: initial;;
}
.book-img{
position: relative;
border-radius: 64px 64px 100px 100px;
width: 100%;
height: 75%;
background-color: rgba(255,255,255,0.25);
background-position: center;
background-repeat: no-repeat;
}
.book-img:hover{
position: relative;
border-radius: 64px 64px 64px 64px;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.4);
background-position: center;
transform: scale(1.1);
background-repeat: no-repeat;
}
.book-name{
width: 100%;
height: 10%;
transform: translateY(-10px);
font-size: 32px;
color: rgba(255,255,255,0.9);
text-shadow: 0 0 16px rgba(255,255,255,0.3);
}
.book-press{
position: relative;
width: 100%;
height: auto;
font-size: 16px;
color: rgba(0, 0, 0, 0.4);
transform: translateY(0px);
}
.book-price{
color: rgba(255,255,255,0.9);
text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.book-window{
position: fixed;
z-index: 999;
width: 60%;
height: 80%;
top: 16%;
left: 20%;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 128px;
}
.book-window-container{
position: relative;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 128px;
display: flex;
font-family: "zhanku";
}
.book-window-container h1{
font-size: 40px;
text-align: center;
}
.book-window-container h2{
font-size: 28px;
text-align: center;
}
.book-window-container h3{
font-size: 20px;
text-align: center;
word-wrap: break-word;
}
.book-window-container .bookimg{
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.book-window-container .bookimg img{
position: relative;
width: 100%;
height: auto;
top: 19.5%;
}
.book-window-container .bookcontent{
width: 55%;
height:100%;
background:rgba(0, 0, 0, 0);
}
.book-window-container .bookcontent #bookname{
position: relative;
top: 10px;
height: 60px;
text-align: center;
}
.book-window-container .bookcontent #author{
position: relative;
height: 30px;
text-align: center;
}
.book-window-container .bookcontent #press{
position: relative;
height: 20px;
text-align: center;
}
.book-window-container .bookcontent #bookintro{
position: relative;
top: 10px;
left: 5%;
width: 90%;
height: 72%;
text-align: center;
background-color: rgba(255,255,255,0);
}
.book-window-container .bookcontent #addButton{
position: fixed;
bottom: 5%;
right: 24%;
}
.book-window-container .bookcontent #backButton{
position: fixed;
bottom: 5%;
right: 8%;
}
.book-window-container .bookcontent .price {
font-size: 48px;
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 4%;
right: 45%;
}
</style>
<body>
<%--判断session中取的用户名是否为空,若为空,则显示去登录,--%>
<%-- 若不为空,则可以在session中取到用户名,并且可以注销,注销后,用户名不在显示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<%--<div class="book-window">--%>
<%-- <div class="book-window-container">--%>
<%-- <div class="bookimg"><img src="image/book_img/santi_1.png" alt=""></div>--%>
<%-- <div class="bookcontent">--%>
<%-- <div id="bookname"><h1>书名</h1></div>--%>
<%-- <div id="author"><h2>作者</h2></div>--%>
<%-- <div id="press"><h3>出版社</h3></div>--%>
<%-- <div id="bookintro"><h2>简介</h2><h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3> </div>--%>
<%-- <div class="price"> <h4>¥ 100.0</h4></div>--%>
<%-- <button class="button" type="button" id="addButton">--%>
<%-- <span class="button__text">加入购物车</span>--%>
<%-- <span class="button__icon"><svg class="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span>--%>
<%-- </button>--%>
<%-- <button class="button" type="button" id="backButton">--%>
<%-- <span class="button__text">返回</span>--%>
<%-- <span class="button__icon"><svg t="1703929107643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984a48 48 0 0 1 0-67.872l351.968-352a48 48 0 1 1 67.872 67.872L387.872 512.032l318.016 318.016A48 48 0 0 1 671.968 912z" fill="#333333" p-id="4298"></path></svg></span>--%>
<%-- </button>--%>
<%-- </div>--%>
<%-- </div>--%>
<%--</div>--%>
<div class="booklist-container">
<div class="booklist-header">
<div id="booklist-header-text" >书单</div>
<div class="booklist-heade-ul">
<ul>
<li><a href="">全部</a></li>
<li id="shop"><a href="cart.jsp">购物车</a> </li>
</ul>
</div>
</div>
<div class="booklist-box">
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
for(int i=0;i<list.size();i++){
Book p = (Book)list.get(i);
%>
<a href="detail.jsp?bookid=<%= p.getBookid() %>" class="booklist-subbox">
<img class="book-img" src="image/book_img/<%=p.getPic()%>.png" alt="">
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
<div class="book-press"><%= p.getPress()%></div>
</a>
<%
}
%>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
cart.jsp
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="com.project02.project02.Cart" %>
<%@ page import="com.project02.project02.Book" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>购物车</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
display: flex;
}
.container{
position: relative;
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(6px);
left: 5%;
border-radius: 64px;
}
.header ul li a{
color: rgba(0, 0, 0,0.7);
font-family: "zhanku";
font-size: 28px;
}
.cart-book-box{
position: relative;
background-color: rgba(255,255,255,0.2);
width: 90%;
left: 5%;
height: 300px;
margin: 50px;
font-family: "JetBrainsMono-Bold";
font-size: 20px;
display: flex;
border-radius: 26px;
}
.cart-book-box img{
position: relative;
object-fit: contain;
height: 80%;
top: 10%;
width: auto;
}
.cart-book-box p{
position: relative;
top: 25%;
width: 10%;
height: 50%;
margin: 10px;
font-size: 32px;
font-family: "JetBrainsMono-Bold";
text-align: center;
}
.cart-book-box img:hover{
transform: scale(1.24);
}
#cart-bar{
display: flex;
position: fixed;
bottom: 0;
width: 100%;
height: 7%;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
border-radius: 32px 32px 0px 0px;
text-align: end;
}
#sum-price{
position: relative;
height: 100%;
width: 30%;
bottom: 0;
top:20%;
font-size: 36px;
left: 50%;
text-align: right;
color: rgba(0,0,0,0.8);
text-shadow: 0 0 6px rgba(0,0,0,0.2);
}
.button{
position: fixed;
z-index: 888;
width: 300px;
height: 100%;
right: 0;
bottom: 0;
font-size: 40px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(6px);
border: 0;
outline: none;
border-radius: 32px;
color: rgba(0,0,0,0.7);
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.button:hover{
background-image: linear-gradient(to top, rgba(183, 160, 245, 0.1) 0%, rgba(7, 181, 255, 0.1) 100%);
color: white;
text-shadow: 0 0 16px rgba(0,0,0,0.4);
}
#cart-header{
width: 100%;
height: 100px;
position: relative;
top: 45px;
float: left;
margin-right: 10px;
}
#cart-header ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: 30px;
}
#cart-header ul li{
display: inline-block;
margin-right: 110px;
font-family: "zhanku";
font-size: 28px;
left :25.5% ;
position: relative;
color: rgba(0,0,0,0.4);
user-select:none;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="cart-header">
<ul>
<li>书名</li>
<li>书号</li>
<li>单价</li>
<li>数量</li>
<li>作者</li>
<li>出版社</li>
<li>总价</li>
</ul>
</div>
<%
//定义总共价格
double totalPrice = 0;
// 遍历map, 前端显示购物车商品
HashMap map = (HashMap)session.getAttribute("cart");
Iterator it = map.keySet().iterator();
while(it.hasNext()){
Object key = it.next();
Cart cartItem = (Cart)map.get(key);
Book p = cartItem.getP();
int sum = cartItem.getSum();
totalPrice +=p.getPrice()*sum;
%>
<div class="cart-book-box">
<img src="image/book_img/<%= p.getPic() %>.png" />
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-id"><%= p.getBookid()%></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
<p class="book-number"><%=sum%></p>
<p class="book-author"><%= p.getAuthor()%></p>
<p class="book-press"><%= p.getPress()%></p>
<p class="book-totalPrice"> <%= p.getPrice()* sum%></p>
</div>
<%
}
%>
</div>
<div id="cart-bar">
<div id="sum-price">合计 <b>¥</b> <%=totalPrice%> </div>
<a href="doOrder" id="settle">
<button class="button" type="button" id="backButton">
结算
</button>
</a>
</div>
<a href="booklist.jsp" >返回</a>
</body>
</html>
detail.jsp
<%--
Created by IntelliJ IDEA.
User: 14985
Date: 2024/1/1
Time: 21:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<html>
<%
String idStr = request.getParameter("bookid");
if("".equals(idStr) || idStr == null){
response.sendRedirect("login.jsp");
}else{
int id = Integer.parseInt(request.getParameter("bookid"));
BookDaoImpl dao = new BookDaoImpl();
Book p = dao.findById(id);
%>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%=p.getBookname()%> - <%=p.getAuthor()%></title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
}
body{
height: 2000px;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
}
.header ul li a{
color: rgb(199, 198, 198);
}
.book-window{
position: fixed;
z-index: 999;
width: 60%;
height: 80%;
top: 16%;
left: 20%;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 128px;
}
.book-window-container{
position: relative;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 128px;
display: flex;
font-family: "zhanku";
}
.book-window-container h1{
font-size: 40px;
text-align: center;
}
.book-window-container h2{
font-size: 28px;
text-align: center;
}
.book-window-container h3{
font-size: 20px;
text-align: center;
word-wrap: break-word;
}
.book-window-container .bookimg{
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.book-window-container .bookimg img{
position: relative;
width: 100%;
height: auto;
top: 19.5%;
}
.book-window-container .bookcontent{
width: 55%;
height:100%;
background:rgba(0, 0, 0, 0);
}
.book-window-container .bookcontent #bookname{
position: relative;
top: 10px;
height: 60px;
text-align: center;
}
.book-window-container .bookcontent #author{
position: relative;
height: 30px;
text-align: center;
}
.book-window-container .bookcontent #press{
position: relative;
height: 20px;
text-align: center;
}
.book-window-container .bookcontent #bookintro{
position: relative;
top: 10px;
left: 5%;
width: 90%;
height: 72%;
text-align: center;
background-color: rgba(255,255,255,0);
}
.book-window-container .bookcontent #addButton{
position: fixed;
bottom: 5%;
right: 24%;
}
.book-window-container .bookcontent #backButton{
position: fixed;
bottom: 5%;
right: 8%;
}
.book-window-container .bookcontent .price {
font-size: 48px;
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 4%;
right: 45%;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="book-window">
<div class="book-window-container">
<div class="bookimg"><img src="image/book_img/<%= p.getPic() %>.png" ></div>
<div class="bookcontent">
<div id="bookname"><h1><%= p.getBookname() %></h1></div>
<div id="author"><h2><%= p.getAuthor()%></h2></div>
<div id="press"><h3></h3><%= p.getPress()%></div>
<div id="bookintro"><h2>简介</h2><h3><%= p.getIntro()%></h3> </div>
<div class="price"> <h4><b>¥</b> <%= p.getPrice() %></h4></div>
<a href="doCart.jsp?bookid=<%= p.getBookid() %>">
<button class="button" type="button" id="addButton">
<span class="button__text">加入购物车</span>
<span class="button__icon"><svg class="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span>
</button>
</a>
<a href="booklist.jsp">
<button class="button" type="button" id="backButton">
<span class="button__text">返回</span>
<span class="button__icon"><svg t="1703929107643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984a48 48 0 0 1 0-67.872l351.968-352a48 48 0 1 1 67.872 67.872L387.872 512.032l318.016 318.016A48 48 0 0 1 671.968 912z" fill="#333333" p-id="4298"></path></svg></span>
</button>
</a>
</div>
</div>
<%
}
%>
</body>
</html>
doCart.jsp
<%@ page language="java" import="dao.*,com.project02.project02.*,java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 1.获得购物车 Map
// getAttribute的返回值类型是Object,需要向下转型,
// 转成你的userName类型的,简单说就是存什么,取出来还是什么.
HashMap map = (HashMap) session.getAttribute("cart");
// 2.判断购物车 Map是否存在,不存在则创建
if (map == null) {
map = new HashMap();
}
// 3.把产品添加到购物车
// 3.1 根据 id 查询商品
String id = request.getParameter("bookid");
BookDaoImpl dao = new BookDaoImpl();
Book p = dao.findById(Integer.parseInt(id));
// 3.2判断 Map 中是否由此商品 , 注意这里id不加引号
Cart cart = (Cart) map.get(id);
// 有--> 把数量+1
// 无--> 把商品放入购物车 数量设置为1
if (cart != null) {
cart.setSum(cart.getSum() + 1);
} else {
cart = new Cart();
cart.setP(p); // 关键步骤
cart.setSum(1);
}
// 3.3 将产品加入map集合,id+""拼接成字符串型
map.put(id, cart);
// out.print(map.size());
// 4.把集合存储到session作用域
session.setAttribute("cart", map);
response.sendRedirect("cart.jsp");
%>
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书售卖系统</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
h1{
font-size: 27px;
color: white;
height: 70px;
}
body{
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
padding: 0px 0px 150px 0px;
background-image: url("image/BG_index.jpg");
}
.container{
height: auto;
width: 100%;
}
.banner{
margin: 0;
width: 100%;
height: 500px;
text-align:center;
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(5px);
}
#banner-box{
width: 80%;
height: 60%;
position: relative;
left: 10%;
top: 20%;
background-color: rgba(255,255,255,0.7);
border-radius: 120px;
--c: rgb(211, 211, 239);
box-shadow: 0 0 10px var(--c),
0 0 12px var(--c),
0 0 20px var(--c),
0 0 28px var(--c),
0 0 36px var(--c),
0 0 48px var(--c);
animation: glow-animation 2.6s infinite ease-in-out;
}
#banner-box h1{
height: 100%;
width: 100%;
text-align: center;
font-size: 120px;
font-family: "zhanku";
position: relative;
transform: translateY(25%);
--c: rgb(89, 210, 248);
text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c),
0 0 320px var(--c);
animation: glow-animation 2s infinite ease-in-out;
user-select: none;
}
.booklist h2{
color: white;
width: 100%;
height: 60px;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0));
backdrop-filter: blur(3px);
text-align: center;
font-size: 60px;
text-shadow: 3px -10px 16px rgba(0, 0, 0,0.5);
}
.booklist .response{
width: 33.3%;
height: 360px;
float: left;
text-align: center;
margin: 8px 0px 8px 0px;
}
.booklist .img{
width: auto;
height: 90%;
margin: 0 auto;
text-align: center;
background: lightblue;
border-radius: 16px ;
}
.booklist-foot{
text-align: end;
font-size: 24px;
}
.booklist-foot a{
color: white;
text-shadow: 3px -10px 32px black;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class = container>
<h1> </h1>
<div class="banner"><div id="banner-box"><h1>图书售卖系统</h1></div></div>
<div class="booklist">
<h2>书单</h2>
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
int size =list.size();
if(size>6){
size=6;
}
for(int i=0;i<size;i++){
Book p = (Book)list.get(i);
%>
<a href="booklist.jsp" class="response" >
<img class="img" src="image/book_img/<%=p.getPic()%>.png" alt="">
<p class="book-name"><%= p.getBookname() %></p>
<div class="book-press"><%= p.getPress()%></div>
</a>
<%
}
%>
<div class="booklist-foot"><a href="booklist.jsp">点此查看更多图书</a></div>
</div>
</div>
</body>
</html>
list.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
for(int i=0;i<list.size();i++){
Book p = (Book)list.get(i);
%>
<li>
<a href="detail.jsp?bookid=<%= p.getBookid() %>">
<div class="book-box">
<img src="image/book_img/<%= p.getPic() %>.png" />
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
</div>
</a>
</li>
<%
}
%>
</body>
</html>
login.jsp
<%--
Created by IntelliJ IDEA.
User: 14985
Date: 2023/12/30
Time: 23:40
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>Login</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
.main {
display: none;
width: 40%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 22%;
left: 30%;
right: 30%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.form{
position: relative;
width: 80%;
height: 80%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.header-text{
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
}
.text-form{
transform: translateY(50px);
height: 100%;
}
input[type="submit"]:active,
button:active{
transform: scale(0.75);
transition: 0.3s ease-in-out;
}
input{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
font-size: 30px;
transition: all 0.4s;
background-color: rgba(255, 255, 255, 0.4);
box-sizing:border-box;
}
input::placeholder{
font-style:oblique;
text-align: center;
font-size: 25px;
color: rgba(0, 0, 0, 0.5);
}
.form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
input[type="password"]::-ms-reveal{
position: fixed;
}
input[type="password"]::-ms-clear{
position: relative;
}
input[type="submit"] {
background-color:rgba(219, 219, 219, 0.5);
font-style:oblique;
color: rgb(71, 71, 71);
font-size: 25px;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 23px;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
margin: 10px 0px 0px 0px;
}
button{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.4);
color: rgb(107, 107, 107);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
transition: all 0.4s ease-in-out;
}
button:hover{
background-color:rgba(51, 51, 51, 0.5);
color: rgb(241, 241, 241);
font-size: 32px;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease-in-out;
}
input[type="text"]:hover,
input[type="password"]:hover{
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 900px){
.main {
width: 70%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 25%;
left: 15%;
right: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.4);
border-radius: 32px;
position: fixed;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
}
button{
width: 37%;
font-size: 28px;
margin: 0px 10px 0px 10px;
}
}
@media only screen and (max-width: 600px){
button{
width: 37%;
font-size: 24px;
font-weight: bold;
margin: 0px 10px 0px 10px;
}
}
/* 注册界面 */
.register-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.register-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.register-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.register-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.register-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
#conformPassword:focus{
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}
/* 忘记密码界面 */
.forget-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.forget-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
line-height: normal;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.forget-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.forget-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.forget-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
#window-prompt{
display: none;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<!-- 提示窗口 -->
<div id="window-prompt"><div id="prompt"></div></div>
<!-- 主窗口 -->
<div class="container">
<div class="main" id="mainForm">
<!-- 登录界面 -->
<div class="form" id="form">
<div class="header-text">LOGIN</div>
<div class="text-form">
<form id="loginform" action="doLogin" method="post">
<div class="one">
<input type="text" name="username" placeholder="USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="password" placeholder="PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input type="submit" value="OK" style=" text-align:center" onclick="return checkLoginForm()">
</div>
<div class="buttons">
<button id="go-register" type="button" >注册</button>
<button id="go-forget" type="button">忘记</button>
</div>
</form>
</div>
</div>
<!-- 注册界面 -->
<div class="register-form" id="register-form">
<div class="header-text">REGISTER</div>
<div class="text-form">
<form id="registerform" action="doRegister" method="post" >
<div class="one">
<input type="text" name="username" placeholder="NEW USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="newPassword" placeholder="NEW PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input id="conformPassword" type="password" name="confirmPassword" placeholder="CONFIRM PASSWORD" style=" text-align:center">
</div>
<div class="four">
<input class="email" type="text" name="email" placeholder="EMAIL" style=" text-align:center">
</div>
<input type="submit" value="OK" style=" text-align:center" id="reg-submit" onclick="return checkRegForm()">
<button id="back-register" type="button" >BACK</button>
</form>
</div>
</div>
<!-- 忘记密码界面 -->
<div class="forget-form" id="forget-form">
<div class="header-text">FORGET</div>
<div class="text-form">
<div class="one">
<input type="text" name="username" placeholder="YOUR USERNAME" style=" text-align:center">
</div>
<div class="two">
<input class="email" type="text" name="email" placeholder="YOUR EMAIL" style=" text-align:center">
</div>
<div class="buttons">
<input type="submit" value="OK" style=" text-align:center;">
<button id="back-forget">BACK</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
// 按钮
var registerBack_btn = document.getElementById("back-register");
var registerGo_btn = document.getElementById("go-register");
var forgetBack_btn = document.getElementById("back-forget");
var forgetGo_btn = document.getElementById("go-forget");
// 窗体
var form = document.getElementById("form");
var register_form = document.getElementById("register-form");
var forget_form = document.getElementById("forget-form");
var mainForm = document.getElementById("mainForm");
//载入界面时动画
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 500);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
form.classList.remove("fadein-effect-longTime")
}, 1800);
}
//按钮控制窗体渐变
registerBack_btn.onclick =function(){
register_form.classList.add("fadeout-effect");
setTimeout(function(){
register_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
register_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
registerGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
register_form.style.display = "block";
register_form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
register_form.classList.remove("fadein-effect")
},1260);
}
forgetBack_btn.onclick =function(){
forget_form.classList.add("fadeout-effect");
setTimeout(function(){
forget_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
forget_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
forgetGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
forget_form.style.display = "block";
forget_form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
forget_form.classList.remove("fadein-effect")
},1260);
}
//检查登录表单
function checkRegForm(){
var registerform = document.getElementById('registerform');
var name = registerform.username.value;
var newpwd = registerform.newPassword.value;
var conpwd = registerform.confirmPassword.value;
var ema = registerform.email.value
if (name == "" || name == null) {
alert("请输入账号");
registerform.name.focus();
return false;
} else if (newpwd == "" || newpwd == null) {
alert("请输入密码");
registerform.newPassword.focus();
return false;
} else if (conpwd == "" || conpwd == null) {
alert("请确认密码");
registerform.confirmPassword.focus();
return false;
}else if(ema == "" || ema == null){
alert("请输入邮箱");
registerform.email.focus();
return false;
}else if(newpwd!=conpwd){
alert("两次密码输入不一致,请重新输入!");
registerform.confirmPassword.focus();
return false;
}
alert('注册成功!');
return true;
}
//检查登录表单
function checkLoginForm(){
var loginform = document.getElementById('loginform');
var name = loginform.username.value;
var pwd = loginform.password.value;
if (name == "" || name == null) {
alert("请输入账号");
loginform.name.focus();
return false;
} else if (pwd == "" || pwd == null) {
alert("请输入密码");
loginform.password.focus();
return false;
}
return true;
}
</script>
</html>
loginFail.jsp
<%--
Created by IntelliJ IDEA.
User: 14985
Date: 2023/12/30
Time: 23:40
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/prompt.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>Login</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
.main {
display: none;
width: 40%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 22%;
left: 30%;
right: 30%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.form{
position: relative;
width: 80%;
height: 80%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.header-text{
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
}
.text-form{
transform: translateY(50px);
height: 100%;
}
input[type="submit"]:active,
button:active{
transform: scale(0.75);
transition: 0.3s ease-in-out;
}
input{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
font-size: 30px;
transition: all 0.4s;
background-color: rgba(255, 255, 255, 0.4);
box-sizing:border-box;
}
input::placeholder{
font-style:oblique;
text-align: center;
font-size: 25px;
color: rgba(0, 0, 0, 0.5);
}
.form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
input[type="password"]::-ms-reveal{
position: fixed;
}
input[type="password"]::-ms-clear{
position: relative;
}
input[type="submit"] {
background-color:rgba(219, 219, 219, 0.5);
font-style:oblique;
color: rgb(71, 71, 71);
font-size: 25px;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 23px;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
margin: 10px 0px 0px 0px;
}
button{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.4);
color: rgb(107, 107, 107);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
transition: all 0.4s ease-in-out;
}
button:hover{
background-color:rgba(51, 51, 51, 0.5);
color: rgb(241, 241, 241);
font-size: 32px;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease-in-out;
}
input[type="text"]:hover,
input[type="password"]:hover{
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 900px){
.main {
width: 70%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 25%;
left: 15%;
right: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.4);
border-radius: 32px;
position: fixed;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
}
button{
width: 37%;
font-size: 28px;
margin: 0px 10px 0px 10px;
}
}
@media only screen and (max-width: 600px){
button{
width: 37%;
font-size: 24px;
font-weight: bold;
margin: 0px 10px 0px 10px;
}
}
/* 注册界面 */
.register-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.register-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.register-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.register-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.register-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
#conformPassword:focus{
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}
/* 忘记密码界面 */
.forget-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.forget-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
line-height: normal;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.forget-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.forget-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.forget-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<!-- 提示窗口 -->
<div id="window-prompt"><div id="prompt">登录失败,请重试</div></div>
<!-- 主窗口 -->
<div class="container">
<div class="main" id="mainForm">
<!-- 登录界面 -->
<div class="form" id="form">
<div class="header-text">LOGIN</div>
<div class="text-form">
<form id="loginform" action="doLogin" method="post">
<div class="one">
<input type="text" name="username" placeholder="USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="password" placeholder="PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input type="submit" value="OK" style=" text-align:center" onclick="return checkLoginForm()">
</div>
<div class="buttons">
<button id="go-register" type="button" >注册</button>
<button id="go-forget" type="button">忘记</button>
</div>
</form>
</div>
</div>
<!-- 注册界面 -->
<div class="register-form" id="register-form">
<div class="header-text">REGISTER</div>
<div class="text-form">
<form id="registerform" action="doRegister" method="post" >
<div class="one">
<input type="text" name="username" placeholder="NEW USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="newPassword" placeholder="NEW PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input id="conformPassword" type="password" name="confirmPassword" placeholder="CONFIRM PASSWORD" style=" text-align:center">
</div>
<div class="four">
<input class="email" type="text" name="email" placeholder="EMAIL" style=" text-align:center">
</div>
<input type="submit" value="OK" style=" text-align:center" id="reg-submit" onclick="return checkRegForm()">
<button id="back-register" type="button" >BACK</button>
</form>
</div>
</div>
<!-- 忘记密码界面 -->
<div class="forget-form" id="forget-form">
<div class="header-text">FORGET</div>
<div class="text-form">
<div class="one">
<input type="text" name="username" placeholder="YOUR USERNAME" style=" text-align:center">
</div>
<div class="two">
<input class="email" type="text" name="email" placeholder="YOUR EMAIL" style=" text-align:center">
</div>
<div class="buttons">
<input type="submit" value="OK" style=" text-align:center;">
<button id="back-forget">BACK</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
// 按钮
var registerBack_btn = document.getElementById("back-register");
var registerGo_btn = document.getElementById("go-register");
var forgetBack_btn = document.getElementById("back-forget");
var forgetGo_btn = document.getElementById("go-forget");
// 窗体
var form = document.getElementById("form");
var register_form = document.getElementById("register-form");
var forget_form = document.getElementById("forget-form");
var mainForm = document.getElementById("mainForm");
var prompt_window = document.getElementById("window-prompt");
var prompt_content = document.getElementById("prompt");
//载入界面时动画
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "block";
prompt_window.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 700);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
form.classList.remove("fadein-effect-longTime");
prompt_window.classList.add("fadeout-effect");
}, 2000);
}
//按钮控制窗体渐变
registerBack_btn.onclick =function(){
register_form.classList.add("fadeout-effect");
setTimeout(function(){
register_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
register_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
registerGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
register_form.style.display = "block";
register_form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
register_form.classList.remove("fadein-effect")
},1260);
}
forgetBack_btn.onclick =function(){
forget_form.classList.add("fadeout-effect");
setTimeout(function(){
forget_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
forget_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
forgetGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
forget_form.style.display = "block";
forget_form.classList.add("fadein-effect");
},640);
//移除渐变类
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
forget_form.classList.remove("fadein-effect")
},1260);
}
//检查登录表单
function checkRegForm(){
var registerform = document.getElementById('registerform');
var name = registerform.username.value;
var newpwd = registerform.newPassword.value;
var conpwd = registerform.confirmPassword.value;
var ema = registerform.email.value
if (name == "" || name == null) {
alert("请输入账号");
registerform.name.focus();
return false;
} else if (newpwd == "" || newpwd == null) {
alert("请输入密码");
registerform.newPassword.focus();
return false;
} else if (conpwd == "" || conpwd == null) {
alert("请确认密码");
registerform.confirmPassword.focus();
return false;
}else if(ema == "" || ema == null){
alert("请输入邮箱");
registerform.email.focus();
return false;
}else if(newpwd!=conpwd){
alert("两次密码输入不一致,请重新输入!");
registerform.confirmPassword.focus();
return false;
}
alert('注册成功!');
return true;
}
//检查登录表单
function checkLoginForm(){
var loginform = document.getElementById('loginform');
var name = loginform.username.value;
var pwd = loginform.password.value;
if (name == "" || name == null) {
alert("请输入账号");
loginform.name.focus();
return false;
} else if (pwd == "" || pwd == null) {
alert("请输入密码");
loginform.password.focus();
return false;
}
return true;
}
</script>
</html>
message.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
@font-face{
font-family: 'sao';
src : url(font/胡晓波骚包体.otf);
}
@font-face{
font-family: 'mao';
src : url(font/猫啃什锦黑.otf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header ul li a{
color: rgb(97, 156, 232);
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_index.jpg);
overflow-y: hidden;
padding: 0px 0px 150px 0px;
}
.header ul li a{
color: rgb(253, 253, 253);
}
#msg-board{
height: 100%;
width: 80%;
position: relative;
left: 10%;
top: 100px;
background-color: rgba(255,255,255,0.3);
border-radius: 128px;
}
#msg-board #msg-header{
width: 100%;
height: 100px;
font-size: 70px;
font-family: "zhanku";
text-align: center;
position: relative;
top: 15px;
color: rgba(0,0,0,0.8);
text-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
.msg-box{
height: 400px;
width: 60%;
background-color: rgba(255,255,255,0.3);
border-radius: 64px;
position: relative;
left: 20%;
margin: 40px 0px 40px 0px;
overflow-y: hidden;
}
.msg-box .msg-content{
height: 50%;
width: 80%;
position: relative;
left: 10%;
font-size: 40px;
text-align: center;
font-family: "sao";
top: 20%;
color: rgba(0,0,0,0.7);
text-shadow: 0 0 12px rgba(255,255,255,0.8);
}
.msg-box .footer{
height:30%;
width: 50%;
position: relative;
top: 30%;
left: 35%;
font-family: "mao";
font-size: 30px;
text-align: right;
color: rgba(0,0,0,0.4);
text-shadow: 0 5px 8px rgba(0,0,0,0.3);
}
#msg-input{
height: 300px;
width: 60%;
background-color: rgba(255,255,255,0.3);
border-radius: 64px;
position: relative;
left: 20%;
margin: 40px 0px 40px 0px;
overflow-y: hidden;
}
form{
width: 100%;
height: 100%;
}
input::placeholder{
text-align: center;
font-size: 16px;
transform: translateY(-3px);
}
input{
height: 200px;
width: 70%;
position: relative;
left: 15%;
text-align: center;
text-wrap:inherit;
border:none;
outline: none;
background-color: rgba(255,255,255,0.3);
display: flex;
top: 15px;
border-radius: 64px;
font-size: 30px;
}
#msg-footer{
position: relative;
height: 30px;
width: 40%;
left: 30%;
}
input[type="text"]:hover{
background-color: rgba(0,0,0,0.3);
}
input:focus{
border: none;
outline: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
input[type="submit"]{
border: none;
position: relative;
width: 30%;
height: 40px;
margin: 0px 20px 0px 20px;
border-radius: 64px;
font-size: 24px;
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
display:block;
left: 32.5%;
top: 20px;
}
input[type="submit"]:hover{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:active{
color: rgb(0, 0, 0);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
background-color: rgb(252, 252, 252);
outline-style: none;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div id="msg-board">
<div id="msg-header">留言板</div>
<div id="msg-input">
<form action="doMessage" method="post">
<input type="text" name="msg" id="msg" placeholder="留言内容">
<input type="text" name="footer" id="msg-footer" placeholder="注名">
<input type="submit" id="submit" value="留言">
</form>
</div>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM message");
while (rs.next()) {
//获取每一行的数据
String msg = rs.getString("msg");
String footer = rs.getString("footer");
%>
<div class="msg-box">
<div class="msg-content"><%=msg%></div>
<div class="footer">- <%=footer%> </div>
</div>
<%
}
//关闭结果集,预处理语句和数据库连接
rs.close();
stmt.close();
conn.close();
%>
</div>
</body>
</html>
orderSuccess.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下单成功</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
}
.header ul li a{
color: rgb(97, 156, 232);
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_order.jpg);
display: flex;
}
.container{
position: relative;
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(6px);
left: 5%;
top: 10%;
border-radius: 64px;
}
#container-header{
text-align: center;
font-size: 70px;
font-family: "zhanku";
color: rgba(0,0,0,0.9);
position: relative;
top:4%;
height: 100px;
width: 100%;
}
.container .header-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.5);
text-align: center;
border-radius: 64px;
box-shadow: 0 0 10px rgba(255,255,255,0.45);
}
.container .header-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .header-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 28px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.2);
text-align: center;
border-radius: 40px;
margin: 40px 0px 0px 0px;
}
.container .order-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .order-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 22px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box:hover{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.container .order-box:hover li{
color: rgba(255,255,255,0.5);
text-shadow: 0 5px 12px rgba(255,255,255,0.5);
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="container-header">订单详情</div>
<div class="header-box">
<ul>
<li>订单号</li>
<li>书号</li>
<li>书名</li>
<li>地址</li>
<li>电话</li>
<li>数量</li>
<li>购买时间</li>
</ul>
</div>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM orders WHERE account = '"+session.getAttribute("username")+"'");
while (rs.next()) {
//获取每一行的数据
int orderid = rs.getInt("orderid");
String bookname = rs.getString("bookname");
String address = rs.getString("address");
String phone = rs.getString("phone");
int bookid = rs.getInt("bookid");
int booknumber = rs.getInt("booknumber");
String buytime = rs.getString("buytime");
%>
<div class="order-box">
<ul>
<li><%=orderid%></li>
<li><%=bookid%></li>
<li><%=bookname%></li>
<li><%=address%></li>
<li><%=phone%></li>
<li><%=booknumber%></li>
<li><%=buytime%></li>
</ul>
</div>
<%
}
//关闭结果集,预处理语句和数据库连接
rs.close();
stmt.close();
conn.close();
%>
</div>
</body>
</html>
session.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注销</title>
</head>
<body>
<%
session.invalidate(); // 清空session
// 重定向
response.sendRedirect("account.jsp");
%>
</body>
</html>
- 运行结果截图
index.jsp
login.jsp
message.jsp
account.jsp
booklist.jsp
书本二级界面
cart.jsp
3.主要问题
①发现购物车结算后原购物车的内容并没有清空。
②除了购物车结算页面和直接查看数据库以外没有办法查看订单记录。
4.改进
在结算成功后清除购物车的session:修改后的orderSuccess.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下单成功</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
}
.header ul li a{
color: rgb(97, 156, 232);
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_order.jpg);
display: flex;
}
.container{
position: relative;
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(6px);
left: 5%;
top: 10%;
border-radius: 64px;
}
#container-header{
text-align: center;
font-size: 70px;
font-family: "zhanku";
color: rgba(0,0,0,0.9);
position: relative;
top:4%;
height: 100px;
width: 100%;
}
.container .header-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.5);
text-align: center;
border-radius: 64px;
box-shadow: 0 0 10px rgba(255,255,255,0.45);
}
.container .header-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .header-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 28px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.2);
text-align: center;
border-radius: 40px;
margin: 40px 0px 0px 0px;
}
.container .order-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .order-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 22px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box:hover{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.container .order-box:hover li{
color: rgba(255,255,255,0.5);
text-shadow: 0 5px 12px rgba(255,255,255,0.5);
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="container-header">订单详情</div>
<div class="header-box">
<ul>
<li>订单号</li>
<li>书号</li>
<li>书名</li>
<li>地址</li>
<li>电话</li>
<li>数量</li>
<li>购买时间</li>
</ul>
</div>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM orders WHERE account = '"+session.getAttribute("username")+"'");
while (rs.next()) {
//获取每一行的数据
int orderid = rs.getInt("orderid");
String bookname = rs.getString("bookname");
String address = rs.getString("address");
String phone = rs.getString("phone");
int bookid = rs.getInt("bookid");
int booknumber = rs.getInt("booknumber");
String buytime = rs.getString("buytime");
%>
<div class="order-box">
<ul>
<li><%=orderid%></li>
<li><%=bookid%></li>
<li><%=bookname%></li>
<li><%=address%></li>
<li><%=phone%></li>
<li><%=booknumber%></li>
<li><%=buytime%></li>
</ul>
</div>
<%
}
//关闭结果集,预处理语句和数据库连接
rs.close();
stmt.close();
conn.close();
session.removeAttribute("cart");///////////////////////修改的地方
%>
</div>
</body>
</html>
把booklist.jsp书单页面中的无用按钮“全部”改为“历史订单”并指定跳转到orderlList.jsp:orderList.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>书单</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
}
body{
height: 2000px;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
}
.header ul li a{
color: rgb(199, 198, 198);
}
.booklist-container{
width: 80%;
top:150px;
height: 1800px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter:blur(4px);
position: relative;
left: 10%;
border-radius: 256px;
}
#booklist-header-text{
text-align: center;
height: 30px;
color: rgba(255,255,255,0.9);
font-size: 120px;
transform: translateY(-70px);
font-family: "zhanku";
z-index: 10;
--c:rgb(207, 207, 207);
text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c),
0 0 320px var(--c);
animation: glow-animation-light 5s infinite ease-in-out;
}
.booklist-heade-ul{
width: 60%;
height: 70px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 9999px;
position: relative;
left: 20%;
text-align: center;
}
.booklist-heade-ul ul{
width: 100%;
height: 100%;
display: flex;
align-items: center;
right: 5%;
}
.booklist-heade-ul li{
width: 100%;
text-align: center;
}
.booklist-heade-ul li a{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
border-radius: 9999px;
}
.booklist-heade-ul li a:hover{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
background-color: rgba(255,255,255,0.5);
}
.booklist-box{
position: relative;
width: 95%;
height: 90%;
left: 2.5%;
top: 2.5%;
border-radius: 200px;
display: flex;
justify-content: left;
align-items: start;
flex-wrap: wrap;
}
.booklist-subbox{
width: 18%;
height: 400px;
background-color: rgba(0, 0, 0, 0.2);
margin: 50px;
border-radius: 64px;
text-align: center;
flex: initial;;
}
.book-img{
position: relative;
border-radius: 64px 64px 100px 100px;
width: 100%;
height: 75%;
background-color: rgba(255,255,255,0.25);
background-position: center;
background-repeat: no-repeat;
}
.book-img:hover{
position: relative;
border-radius: 64px 64px 64px 64px;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.4);
background-position: center;
transform: scale(1.1);
background-repeat: no-repeat;
}
.book-name{
width: 100%;
height: 10%;
transform: translateY(-10px);
font-size: 32px;
color: rgba(255,255,255,0.9);
text-shadow: 0 0 16px rgba(255,255,255,0.3);
}
.book-press{
position: relative;
width: 100%;
height: auto;
font-size: 16px;
color: rgba(0, 0, 0, 0.4);
transform: translateY(0px);
}
.book-price{
color: rgba(255,255,255,0.9);
text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.book-window{
position: fixed;
z-index: 999;
width: 60%;
height: 80%;
top: 16%;
left: 20%;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 128px;
}
.book-window-container{
position: relative;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 128px;
display: flex;
font-family: "zhanku";
}
.book-window-container h1{
font-size: 40px;
text-align: center;
}
.book-window-container h2{
font-size: 28px;
text-align: center;
}
.book-window-container h3{
font-size: 20px;
text-align: center;
word-wrap: break-word;
}
.book-window-container .bookimg{
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.book-window-container .bookimg img{
position: relative;
width: 100%;
height: auto;
top: 19.5%;
}
.book-window-container .bookcontent{
width: 55%;
height:100%;
background:rgba(0, 0, 0, 0);
}
.book-window-container .bookcontent #bookname{
position: relative;
top: 10px;
height: 60px;
text-align: center;
}
.book-window-container .bookcontent #author{
position: relative;
height: 30px;
text-align: center;
}
.book-window-container .bookcontent #press{
position: relative;
height: 20px;
text-align: center;
}
.book-window-container .bookcontent #bookintro{
position: relative;
top: 10px;
left: 5%;
width: 90%;
height: 72%;
text-align: center;
background-color: rgba(255,255,255,0);
}
.book-window-container .bookcontent #addButton{
position: fixed;
bottom: 5%;
right: 24%;
}
.book-window-container .bookcontent #backButton{
position: fixed;
bottom: 5%;
right: 8%;
}
.book-window-container .bookcontent .price {
font-size: 48px;
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 4%;
right: 45%;
}
</style>
<body>
<%--判断session中取的用户名是否为空,若为空,则显示去登录,--%>
<%-- 若不为空,则可以在session中取到用户名,并且可以注销,注销后,用户名不在显示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首页</div></a></li>
<li><a href="booklist.jsp">书单</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">用户</a></li>
<div class="header-box"></div>
</ul>
</div>
<%--<div class="book-window">--%>
<%-- <div class="book-window-container">--%>
<%-- <div class="bookimg"><img src="image/book_img/santi_1.png" alt=""></div>--%>
<%-- <div class="bookcontent">--%>
<%-- <div id="bookname"><h1>书名</h1></div>--%>
<%-- <div id="author"><h2>作者</h2></div>--%>
<%-- <div id="press"><h3>出版社</h3></div>--%>
<%-- <div id="bookintro"><h2>简介</h2><h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3> </div>--%>
<%-- <div class="price"> <h4>¥ 100.0</h4></div>--%>
<%-- <button class="button" type="button" id="addButton">--%>
<%-- <span class="button__text">加入购物车</span>--%>
<%-- <span class="button__icon"><svg class="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span>--%>
<%-- </button>--%>
<%-- <button class="button" type="button" id="backButton">--%>
<%-- <span class="button__text">返回</span>--%>
<%-- <span class="button__icon"><svg t="1703929107643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984a48 48 0 0 1 0-67.872l351.968-352a48 48 0 1 1 67.872 67.872L387.872 512.032l318.016 318.016A48 48 0 0 1 671.968 912z" fill="#333333" p-id="4298"></path></svg></span>--%>
<%-- </button>--%>
<%-- </div>--%>
<%-- </div>--%>
<%--</div>--%>
<div class="booklist-container">
<div class="booklist-header">
<div id="booklist-header-text" >书单</div>
<div class="booklist-heade-ul">
<ul>
<li><a href="orderList.jsp">历史订单</a></li>
<li id="shop"><a href="cart.jsp">购物车</a> </li>
</ul>
</div>
</div>
<div class="booklist-box">
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
for(int i=0;i<list.size();i++){
Book p = (Book)list.get(i);
%>
<a href="detail.jsp?bookid=<%= p.getBookid() %>" class="booklist-subbox">
<img class="book-img" src="image/book_img/<%=p.getPic()%>.png" alt="">
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
<div class="book-press"><%= p.getPress()%></div>
</a>
<%
}
%>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
5.总结
逆向软件工程开发的难点我认为是看代码、学代码和理解代码。这次拿了室友的项目代码来之后,先是研究着把他的项目配置到自己电脑上花费了很多时间,然后又花了很多时间理清楚这套系统的来龙去脉和理解了主要的代码,发现了一个bug和一个可以改进的地方,从而让‘用户’能够更好的使用这个图书售卖系统。