JavaWeb MVC模式下的开发(1)

最新推荐文章于 2024-06-12 18:34:44 发布

Varchar255

最新推荐文章于 2024-06-12 18:34:44 发布

阅读量1.3k

点赞数

文章标签： java-ee intellij-idea tomcat java

本文链接：https://blog.csdn.net/worldmelon/article/details/123774397

版权

本文作者使用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="#">&lt;</a>
	  			<c:forEach var="i" begin="${homeData.navigateFirstPage}" end="${homeData.navigateLastPage}">
	  				<a href="HomePage?curPage=${i}"> ${i} </a>
	  			</c:forEach>
	  			<a href="#">&gt;</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>

<%@ 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>

<%@ 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;
	}

@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;
	}

@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();
        }
    }
}

好困，呜呜呜明天再淦！

Varchar255

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb MVC模式下的开发(1)

本文作者使用Java11、Tomcat9.0.31与Jetbrain IDEA进行开发。选题为网上图书销售系统的设计与实现，本文着重于后端开发，前端部分代码略过但是会提供，感兴趣的同学可以一起交流更好的写法，若有笔误或者不好的地方欢迎您的指正！...
复制链接

扫一扫