javaweb项目实战
1.功能概述
网上购物商城分为管理员和普通用户页面,用户可以自行注册登录,用户可以加入商品到购物车中,可以查看商品的详情,管理员可以对商品进行增删改查,比如发布商品,下架商品,修改商品,搜索商品。
本项目采用mysql数据库进行储存数据,所以先搭建项目所需数据库结构,此项目有
用户和管理员表,商品信息表,客户订单信息表等信息表。
利用搭建好的jsp+servlet框架提供http请求及响应视图能力,展示项目所需各个jsp页
面。根据响应显示注册页面进行注册操作。根据注册所填写的帐号和密码进行系统登录。
2.项目基本结构
filter:过滤器当用户访问服务器资源时,过滤器将请求拦截下来,完成一些通用的操作。
listener:在java程序中,有时也需要监视某些事情,一旦被监听的对象发生相应的变化,我们应该采取相应的操作。
监听web三大域对象:HttpServletRequest、HttpSession、ServletContext,通过监听器监听三大域对象它们的创建和销毁。
utils:工具类层。
dao:持久层,接口(应用层和数据层的接口),数据访问对象,主要做的事情就是对数据库单表进行增删改操作。
model:保存与数据库表所对应的结构体,作用是方便用表的结构体,增加Mapper的易用性,把所有SQL字段变成变量放在里面,根据表结构自动生成。
service: 业务层(应用层),对应界面上的操作,增删改查,涉及到几个dao,就调用几个dao。
Servlet:主要是跳转页面:1、接受用户请求,进行处理(doget/dopost)调用service,得到数据。
2、做出响应:通过PrintWriter out = response.getWriter()输出代码。
c3p0-config.xml:设置连接数据库的信息。
3.项目实战
本案例实现用户登录界面
用户登录界面包括用户的用户名或邮箱,密码。
本案例的主要代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" href="css/login.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/simpleCart.min.js"></script>
<style>
</style>
</head>
<body>
<!--header-->
<jsp:include page="header.jsp">
<jsp:param name="flag" value="9"></jsp:param>
</jsp:include>
<!--account-->
<div class="account">
<div class="container">
<div class="register">
<c:if test="${!empty msg }">
<div class="alert alert-success">${msg }</div>
</c:if>
<c:if test="${!empty failMsg }">
<div class="alert alert-danger">${failMsg }</div>
</c:if>
<form action="/user_login" method="post" style="position:relative;right: 90px;
width: 900px;
height: 560px;
display: flex;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);">
<div class="left" style="width: 500px;height: 560px;">
<img src="picture/3.jpg" alt="" style="width:100%;height:100%;object-fit: cover;">
</div>
<div class="right" style="width: 400px;
height: 760px;
background: rgba(255,255,255,0.9);
position: relative; top: 22%">
<div class="register-top-grid text-center">
<h3>用户登录</h3>
<div class="input">
<span>用户名/邮箱 <label style="color:red;">*</label></span>
<input type="text" name="ue" placeholder="请输入用户名" required="required" style="width: 280px;height: 40px;border-radius: 20px;">
</div>
<div class="input">
<span>密码 <label style="color:#ff0000;">*</label></span>
<input type="password" name="password" placeholder="请输入密码" required="required"style="width: 280px;height: 40px;border-radius: 20px;" >
</div>
<div class="clearfix"> </div>
</div>
<div class="register-but text-center">
<input type="submit" value="提交" style=" width: 180px;
height: 40px;
border-radius: 20px;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-top: 50px;
background-image: linear-gradient(120deg, #76daec 0%, #c5a8de 100%);">
<div class="clearfix"> </div>
</div>
</div>
</form>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--footer-->
<jsp:include page="footer.jsp"></jsp:include>
<!--//footer-->
</body>
</html>
运行结构图如下: