本文作者使用Java11、Tomcat9.0.31与Jetbrain IDEA进行开发。选题为数字画作交易系统的设计与实现,本文着重于后端开发,前端部分代码略过但是会提供,感兴趣的同学可以一起交流更好的写法,若有笔误或者不好的地方欢迎您的指正!
事前准备:
①前端jsp代码,本文将直接给出给读者
homepage.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shopping</title>
<link rel="stylesheet" type="text/css" href="./css/homepage.css">
</head>
<body>
<div id="top">
<c:if test="${user==null}">
<a href="login.jsp">登录</a>
</c:if>
<c:if test="${user!=null}">
<span>欢迎您${user.usr}</span>
<a href="">退出</a>
</c:if>
<a href=""><span id="top-cart"><img alt="" src="./image/cart.png">购物车</span></a>
</div>
<div id="MainFrame">
<header>
<img alt="" src="./image/logo.png">
<form action="">
<input type="search" placeholder="输入搜索内容">
<input type="submit" value=" " >
</form>
</header>
<nav>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="HomePage?sort=${i}">书籍</a></li>
<li><a href="#contact">食品</a></li>
<li><a href="#about">电器</a></li>
</ul>
</nav>
<main>
<div id="content">
<c:forEach var="commodity" items="${homeData.commodityList}">
<div class="item">
<img alt="" src="${commodity.imgpath}">
<h4>${commodity.info}</h4>
<div> ${ommodity.price} <button>加入购物车</button></div>
</div>
</c:forEach>
</div>
<div class="pagination">
<a href="#"><</a>
<c:forEach var="i" begin="${homeData.navigateFirstPage}" end="${homeData.navigateLastPage}">
<a href="HomePage?curPage=${i}"> ${i} </a>
</c:forEach>
<a href="#">></a>
</div>
</main>
<footer>
<div class="footer-content">
@不想摆烂的varchar
</div>
<div class="footer-content">
沪ICP没备?????????号-?公网安没备??????????号
</div>
</footer>
</div>
</body>
</html>
index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<jsp:forward page="HomePage"></jsp:forward>
</body>
</html>
login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="./css/login.css">
</head>
<body>
<div id="MainFrame">
<h1><span>登</span>录</h1>
<form action="Login" id="FormFrame">
<input type="text" placeholder="输入用户名" name="userName"><br>
<input type="password" placeholder="输入密码" name="userPass"><br>
<span id="ButtonSpan">
<input type="submit" value="登录">
<a href="register.jsp"><input type="button" value="注册"></a>
</span><br>
<span id="TagA"><a href="#">忘记密码?</a></span><br>
</form>
</div>
</body>
</html>
register.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="./css/register.css">
</head>
<body>
<div id="MainFrame">
<h1><span>注</span>册</h1>
<form action="Register">
<span>
<select>
<option selected>中国大陆+86</option>
<option>美国+1</option>
<option>智利+56</option>
<option>玻利维亚+591</option>
</select>
<input type="text" placeholder="输入手机号" name="userTele">
</span><br>
<input type="text" placeholder="输入用户名" name="userName"><br>
<input type="email" placeholder="邮箱" name="userMail"><br>
<input type="password" placeholder="输入密码" name="userPass"><br>
<input type="password" placeholder="确认密码"><br>
<span>
<input type="radio" value="M" name="userSexb" checked>男
<input type="radio" value="F" name="userSexb" id="radio2">女
</span><br>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
其中所提供给你们的css代码如下:
homepage.css
@charset "UTF-8";
*{
padding:0px;
margin:0px;
}
html{
width:100%;
height:100%;
}
body{
width:inherit;
margin:0 auto;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
background-image: url("../image/homebg.png");
background-repeat: repeat;
}
#MainFrame{
display:flex;
justify-content: center;
flex-direction: column;
background-color:rgba(0,0,0,0.05);
backdrop-filter:blur(8px);
box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.3);
border-radius: 15px;
overflow:hidden;
width:70%;
height:auto;
margin-top:20px;
}
#top{
width: inherit;
height: 35px;
background: rgba(255,255,255,20%);
box-shadow: 0 1px 12px 0 rgb(1 39 78 / 12%);
padding-left:15%;
padding-right: 15%;
box-sizing: border-box;
line-height: 35px;
/* border-bottom: 1px solid gray; */
}
#top a{
text-decoration:none;
font-family: monospace;
font-weight: bolder;
font-size: large;
color:red;
}
img{
vertical-align: middle;
}
#top-cart{
float:right;
margin-right: 50px;
}
form{
display: flex;
align-items: center;
}
header{
height:100px;
display:flex;
align-items: center;
}
input[type='search']{
height:40px;
width:400px;
border-radius: 10px;
}
input[type='submit']{
background-image: url("../image/search.png");
height:40px;
width:40px;
border-radius: 10px;
vertical-align: middle;
border: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
/********************** nav **********************/
main{
display:flex;
flex-direction: column;
border-bottom: 1px solid gray;
}
#content{
display: flex;
flex-wrap: wrap;
}
.item{
display:flex;
flex-direction: column;
width:200px;
height: auto;
border: 1px solid gray;
vertical-align: center;
justify-content: center;
}
.item img{
width:60%;
height:60%;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.pagination{
display: flex;
justify-content: flex-end;
}
.footer-content{
text-align: center;
}
login.css
@charset "UTF-8";
*{
/* border: 1px solid red; */
padding:0px;
margin:0px;
}
html{
width: 100%;
height: 100%;
}
body{
height:inherit;
display:flex;
justify-content: center;
align-items: center;
background-image:url(../image/loginbg.jpg);
background-size: cover;
}
#MainFrame{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color:rgba(255,255,255,0.35);
backdrop-filter:blur(20px);
box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.3);
border-radius: 50px;
width:35%;
height:56.63%;
}
#MainFrame h1{
color: black;
text-shadow:0 0 5px;
/* letter-spacing: 30px; */
/* padding-left:20px; */
word-spacing:10px;
margin-bottom: 6%;
}
#MainFrame h1 span{
letter-spacing: 30px;
}
form{
display: flex;
flex-direction: column;
align-items:center;
justify-content:center;
width:100%;
}
form input[type="text"],
form input[type="password"]{
width: 50%;
background-color: light-gray;
border-radius: 10px;
height:30px;
padding:5px;
transition:all 1s;
}
form input[type="text"]:focus,
form input[type="password"]:focus{
background-color: rgba(227,236,253,0.9);
transition:all 1s;
}
#ButtonSpan{
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
#ButtonSpan a{
width:20%;
}
form input[type="submit"]{
width: 20%;
background-color: light-gray;
border-radius: 10px;
height:40px;
transition:all 1s;
}
form input[type="button"]{
width:100%;
background-color: light-gray;
border-radius: 10px;
height:40px;
transition:all 1s;
}
form input[type="submit"]{
margin-right:12%;
}
form input[type="submit"]:focus,
form input[type="submit"]:hover,
form input[type="button"]:focus,
form input[type="button"]:hover{
background-color: rgba(227,236,253,0.9);
transition:all 1s;
}
#TagA{
width:50%;
display:block;
text-align: right;
}
#TagA a{
text-decoration: none;
color:#7a7a7a;
border-bottom:0px solid #0080ff;
font-weight:bold;
}
#TagA a:hover{
border-bottom:2px solid #0080ff;
padding-bottom:3px;
color:#0080ff;
font-weight:bold;
transition:all 1s;
}
register.jsp
@charset "UTF-8";
*{
/* border: 1px solid red; */
margin:0px;
padding:0px;
}
html{
width:100%;
height:100%;
}
body{
height:inherit;
display:flex;
justify-content: center;
align-items: center;
background-image: url(../image/logonbg.jpg);
background-repeat: repeat;
}
#MainFrame{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color:rgba(0,0,0,0.05);
backdrop-filter:blur(15px);
box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.3);
border-radius: 50px;
width:40%;
height:60%;
}
#MainFrame h1{
color: black;
text-shadow:0 0 5px;
/* letter-spacing: 30px; */
/* padding-left:20px; */
word-spacing:10px;
margin-bottom: 1%;
}
#MainFrame h1 span{
letter-spacing: 30px;
}
form{
display: flex;
flex-direction: column;
align-items:center;
justify-content:center;
width:100%;
}
form input[type="text"],
form input[type="email"],
form input[type="password"]{
width: 50%;
background-color: light-gray;
border-radius: 10px;
height:30px;
padding:5px;
transition:all 1s;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus{
background-color: rgba(227,236,253,0.9);
transition:all 1s;
}
form input[type="submit"]{
width: 50%;
background-color: light-gray;
border-radius: 10px;
height:40px;
transition:all 1s;
}
form input[type="submit"]:focus,
form input[type="submit"]:hover{
background-color: rgba(227,236,253,0.9);
transition:all 1s;
}
form span{
width:52%;
display:flex;
align-items:center;
justify-content: center;
}
form span select{
width:40%;
background-color: light-gray;
border-radius: 10px;
height:40px;
padding:5px;
transition:all 1s;
}
form span select:focus{
background-color: rgba(227,236,253,0.9);
transition:all 1s;
}
form span input[type="text"]{
width:60%;
background-color: light-gray;
border-radius: 10px;
height:30px;
padding:5px;
/* float:left; */
}
#radio2{
margin-left:15%;
}
此处开始我们开始编写java类,首先我们测试数据库连接是否ok,测试代码如下(本文作者使用MySQL):
先构造数据库的表,执行下列SQL语句(请自己先捋一捋数据库设计内容,E-R图的建立):
create database ImgShop;
use ImgShop;
drop table img;
create table img
(
`ImgID` nvarchar(15) PRIMARY KEY,
`Name` nvarchar(63) not null,
`AuthorAccount` nvarchar(15) REFERENCES users(Account),
`Price` decimal(19,4) UNSIGNED not null,
`Sort` nvarchar(255) not null,
`Info` nvarchar(255),
`ImgPath` nvarchar(63)
)
drop table users;
create table users
(
`Account` nvarchar(15) primary key not null,
`Nickname` nvarchar(15) not null,
`Password` nvarchar(15) not null,
`E_mail` nvarchar(63) not null,
`Phone` char(11),
`Sex` nvarchar(1) not null DEFAULT '男',
`UserImg` nvarchar(63)
)
insert into users VALUES ('Admin','lucasyyy','123','2021242@fudan.edu.com','11111111111','男',NULL);
先写util工具类DBHelp连接数据库
package priv.lucasyyy.util;
import java.sql.*;
public class DBHelp {
//本方法实现数据库的连接,并返回一个连接类供其他类访问数据库对象
public static Connection getConnection() {
String DBDriverName = "com.mysql.cj.jdbc.Driver";
String DBUrl = "jdbc:mysql://localhost:3306/imgshop?" +
"useUnicode=true&characterEncoding=utf-8" +
"&useSSL=false&serverTimezone = GMT";
String DBAdmin = "root";
String DBPassword = "root";
Connection connection = null;
try {
Class.forName(DBDriverName);
connection = DriverManager.getConnection(DBUrl, DBAdmin, DBPassword);
} catch (ClassNotFoundException e) {
System.out.println(("MySQL驱动没有找到诶~"));
e.printStackTrace();
} catch (SQLException e) {
System.out.println("数据库信息错误啦~");
e.printStackTrace();
}
return connection;
}
//本方法实现数据库的关闭,释放系统资源
public static void closeDBConnection(ResultSet resultSet, Statement statement, Connection connection) {
try {
if (resultSet != null) {
resultSet.close();
resultSet = null;
}
if (statement != null) {
statement.close();
statement = null;
}
if (connection != null) {
connection.close();
connection = null;
}
} catch (SQLException e) {
System.out.println("关闭数据库出现问题,检查触发器、语句情况");
}
}
//仅仅作为一个测试函数,将数据展示在控制台,以便查看数据库是否连接成功
public void showDataInConsole() {
Connection connection = getConnection();
String sql = "select * from users";
PreparedStatement preparedStatement;
try {
preparedStatement = connection.prepareStatement(sql);
ResultSet resultSet = preparedStatement.executeQuery();
while (resultSet.next()) {
//当结果集仍然存在,遍历表格数据
String account = resultSet.getString("Account");
String password = resultSet.getString("Password");
String e_mail = resultSet.getString("E-mail");
String phone = resultSet.getString("Phone");
String sex = resultSet.getString("Sex");
String UserImg = resultSet.getString("UserImg");
System.out.println("[Account:"+account+"\tPassword:"+password+"\tE-mail:"+e_mail+"\tPhone:"+phone+"\tSex:"+sex+"\tUserImg:"+UserImg+"]");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
new DBHelp().showDataInConsole();
}
}
这个应该是比较容易的一个类的,注释写的很清楚,为了测试我们的数据库是否连接成功,我写了一个main函数测试了一下。
接下来就是MVC模式的构造,在此我发表一下个人的粗略见解,欢迎各位补充指导,谢谢!
MVC模式的出现就是为了解决逻辑组件的分层管理
Mode层就是模型层,View是视图层,Controller是控制层。
View在本系统中即.jsp文件,用户所直接看到的页面的前端。当用户发送请求时,发送请求给Controller(Servlet)。servlet就是一个特殊的java类,他可以接收请求,然后返回一个响应。servlet只负责响应,不处理数据,发送给mode层处理。mode与数据库交互后处理完毕,返回值给controller,最后controller把响应的结果展示在页面上。
我们在本文创建了一个controller包,如下图所示
@WebServlet("/LoginServlet")
注意这个是个注解类,这个名字与login.jsp的这一段对应
<form action="LoginServlet" id="FormFrame">
我们对LoginServlet做一些更改
package priv.lucasyyy.controller;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
doGet的方法这里,测试的就是把当前文件的路径输出到网页上,然后很明显执行的是doGet方法。form这里默认的是doGet
<form action="LoginServlet" id="FormFrame" method="get">
接下来我们调用模型层的内容,创建一个Service、Dao、Bean包
Bean层主要包含实体类,一个Bean类对应您数据库的一个实体;
Dao层主要包含数据库的处理方法,如一些基本的查询语句;
我们先把数据库的实体类完成噜~
package priv.lucasyyy.bean;
public class Users {
//如果有使用框架,请一一对应数据库的属性
private String Account;
private String Nickname;
private String Password;
private String E_mail;
private String Phone;
private String Sex;
private String UserImg;
public Users(String account, String nickname, String password, String e_mail, String phone, String sex, String userImg) {
Account = account;
Nickname = nickname;
Password = password;
E_mail = e_mail;
Phone = phone;
Sex = sex;
UserImg = userImg;
}
public Users(){
}
public String getAccount() {
return Account;
}
public void setAccount(String account) {
Account = account;
}
public String getNickname() {
return Nickname;
}
public void setNickname(String nickname) {
Nickname = nickname;
}
public String getPassword() {
return Password;
}
public void setPassword(String password) {
Password = password;
}
public String getE_mail() {
return E_mail;
}
public void setE_mail(String e_mail) {
E_mail = e_mail;
}
public String getPhone() {
return Phone;
}
public void setPhone(String phone) {
Phone = phone;
}
public String getSex() {
return Sex;
}
public void setSex(String sex) {
Sex = sex;
}
public String getUserImg() {
return UserImg;
}
public void setUserImg(String userImg) {
UserImg = userImg;
}
}
package priv.lucasyyy.bean;
public class Img {
String ImgID,Name,AuthorAccount,Price,Sort,Info,ImgPath;
public Img() {
}
public Img(String imgID, String name, String authorAccount, String price, String sort, String info, String imgPath) {
ImgID = imgID;
Name = name;
AuthorAccount = authorAccount;
Price = price;
Sort = sort;
Info = info;
ImgPath = imgPath;
}
public String getImgID() {
return ImgID;
}
public void setImgID(String imgID) {
ImgID = imgID;
}
public String getName() {
return Name;
}
public void setName(String name) {
Name = name;
}
public String getAuthorAccount() {
return AuthorAccount;
}
public void setAuthorAccount(String authorAccount) {
AuthorAccount = authorAccount;
}
public String getPrice() {
return Price;
}
public void setPrice(String price) {
Price = price;
}
public String getSort() {
return Sort;
}
public void setSort(String sort) {
Sort = sort;
}
public String getInfo() {
return Info;
}
public void setInfo(String info) {
Info = info;
}
public String getImgPath() {
return ImgPath;
}
public void setImgPath(String imgPath) {
ImgPath = imgPath;
}
}
接下来我们处理数据,到LoginServlet.java文件下
package priv.lucasyyy.controller;
import priv.lucasyyy.bean.Users;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理取到的表单数据,实现C提交到M的过程
String Account = request.getParameter("Account");
String Password = request.getParameter("Password");
//输出在控制台作为提示
System.out.println("LoginServlet doGet:[Account:"+Account+"\tPassword:"+Password+"]");
//将数据封装成应该Users类
Users user = new Users(Account,Password);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
package priv.lucasyyy.dao;
import priv.lucasyyy.bean.Users;
import priv.lucasyyy.util.DBHelp;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class UsersDao {
//程序的结果只和这个参数有关,与这个类的其他示例变量无关,所以设置成类方法
public static void findUser(Users user){
Connection connection = DBHelp.getConnection();
String loginSql = "select * from users where Account = ? and Password = ?";
PreparedStatement preparedStatement;
try {
preparedStatement = connection.prepareStatement(loginSql);
preparedStatement.setString(1,user.getAccount());
preparedStatement.setString(2,user.getPassword());
ResultSet resultSet = preparedStatement.executeQuery();
if (resultSet != null){
//完善实体类,然后就可以展示个人中心啦
user.setE_mail(resultSet.getString("E_mail"));
user.setSex(resultSet.getString("Sex"));
user.setUserImg(resultSet.getString("UserImg"));
user.setPhone(resultSet.getString("Phone"));
user.setNickname(resultSet.getString("Nickname"));
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
好困,呜呜呜明天再淦!