🎼个人主页:【Y小夜】
😎作者简介:一位双非学校的大二学生,编程爱好者,
专注于基础和实战分享,欢迎私信咨询!
🎆入门专栏:🎇【MySQL,Java基础,Rust】
🎈热门专栏:🎊【Python,Javaweb,Vue框架】
感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持!❤️
🎯Tomcat配置
不会使用Tomcat的小伙伴可以去看
搭建第一个Web服务器(在eclipse或idea上部署Tomcat服务器)_eclipse创建一个web项目-CSDN博客
😎Server部分
将URL部分配置为:
http://localhost:8080/webdingcan/login.jsp
😎Deployment部分
🎯登入部分
😎前端页面login.jsp部分
🎈代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>登入注册界面</title>
<%-- 引入Bootstrap--%>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="showFoodServlet" method="post" role="form" class="form-horizontal">
<div class="first">
<div class="one">
优选外卖订餐系统
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">账户名:</label>
<div class="col-sm-8">
<input id="firstname" type="text" class="form-control" name="name" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-8">
<input class="form-control" id="lastname" type="password" name="password" placeholder="请输入密码">
</div>
</div>
<div class="chose">
<input type="radio" name="identity" value="0" checked>
<label>用户</label>
<input type="radio" name="identity" value="1">
<label>商家</label>
</div>
<div class="two">
<button type="submit" class="btn">登入</button>
</div>
<div class="three">
<a href="u1/signUer.jsp" role="button" class="btn">用户注册</a>
</div>
<div class="four">
<label>${msg}</label>
</div>
</div>
</form>
</body>
</html>
🎈解析
这是一个使用JSP和Bootstrap框架创建的登录注册界面:
-
页面头部声明了页面的内容类型为"text/html;charset=UTF-8",表示页面使用的是HTML格式,并且字符编码为UTF-8。同时,使用了Java语言编写JSP代码。
-
引入了JSTL标签库,用于在JSP页面中进行条件判断和循环等操作。
-
页面主体部分包含了一个表单,表单的action属性设置为"showFoodServlet",表示提交表单后会向该URL发送请求。表单的method属性设置为"post",表示使用POST方法提交表单数据。
-
表单内部包含一个div元素,class属性设置为"first",表示这是整个登录注册界面的主体部分。
-
在"first" div内部,有一个标题显示为"优选外卖订餐系统"。
-
接下来是一个用户名输入框,label标签显示"账户名:",input标签的id属性设置为"firstname",type属性设置为"text",表示这是一个文本输入框。name属性设置为"name",表示提交表单时将该输入框的值作为名为"name"的参数传递。placeholder属性设置为"请输入用户名",表示输入框中的提示信息。
-
类似地,还有一个密码输入框,label标签显示"密码:",input标签的id属性设置为"lastname",type属性设置为"password",表示这是一个密码输入框。name属性设置为"password",表示提交表单时将该输入框的值作为名为"password"的参数传递。placeholder属性设置为"请输入密码",表示输入框中的提示信息。
-
接下来是一个单选按钮组,用于选择用户或商家身份。两个单选按钮分别设置了value属性为"0"和"1",表示不同的选项值。默认选中第一个单选按钮(用户)。
-
在单选按钮下方有一个提交按钮,button标签的type属性设置为"submit",表示点击该按钮会提交表单。按钮上的文字显示为"登入"。
-
在提交按钮下方有一个链接,a标签的href属性设置为"u1/signUer.jsp",表示点击该链接会跳转到指定的URL。链接上的文字显示为"用户注册"。
-
最后,有一个label标签用于显示错误信息,内容为"${msg}",其中msg是一个变量,可能在后端代码中设置。
总体来说,这个登录注册界面提供了基本的表单验证功能,用户可以输入用户名和密码,选择身份,然后点击登入按钮进行登录。如果登录失败,页面上会显示错误信息。同时,还提供了一个用户注册的链接。
🎈效果
😎后端处理过滤器部分
🎈代码
package com.dingcan.controller;
import com.dingcan.service.Impl.UserServiceImpl;
import com.dingcan.service.UserService;
import com.dingcan.service.Impl.ShangServiceImpl;
import com.dingcan.service.ShangService;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "FoodFilterServlet",value = "/showFoodServlet")
public class FoodFilterServlet implements Filter {
public void init(FilterConfig filterConfig) throws ServletException {
Filter.super.init(filterConfig);
}
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest req=(HttpServletRequest) servletRequest;
HttpServletResponse resp=(HttpServletResponse) servletResponse;
String name = req.getParameter("name");
String password = req.getParameter("password");
String identity = null;
if (req.getSession().getAttribute("identity")!=null){
identity=(String) req.getSession().getAttribute("identity");
}else {
identity=req.getParameter("identity");
req.getSession().setAttribute("identity",identity);
}
if(identity.equals("0")){
//判断session中是否为用户
if ( req.getSession().getAttribute("uid1")!=null) {
resp.sendRedirect("ushowFoodServlet");
return;
}
//创建用户对象
UserService userService=new UserServiceImpl();
int uid=userService.FindUid(name,password);
if (uid!=0){
req.getSession().setAttribute("uid1",uid);
resp.sendRedirect("ushowFoodServlet");
}
else {
req.getSession().setAttribute("uid1", null);
req.getSession().setAttribute("identity", null);
//如果登入失败
String msg = "账户名或密码错误,请重新输入";
req.setAttribute("msg", msg);
req.getRequestDispatcher("login.jsp").forward(req, resp);
}
}
else if(identity.equals("1")){
//创建商家对象
ShangService shangService=new ShangServiceImpl();
//判断session中是否为商家
if ( req.getSession().getAttribute("sid1")!=null) {
filterChain.doFilter(req, resp);
return;
}
int sid=shangService.FindSid(name,password);
if(sid!=0){
// 登录成功,将用户信息存储在session中
req.getSession().setAttribute("sid1",sid);
filterChain.doFilter(req, resp);
}else{
// 如果登录失败,也将账户信息设置为null
req.getSession().setAttribute("sid1", null);
req.getSession().setAttribute("identity", null);
String msg = "账户名或密码错误,请重新输入";
req.setAttribute("msg", msg);
req.getRequestDispatcher("login.jsp").forward(req, resp);
}
}
}
public void destroy() {
Filter.super.destroy();
}
}
🎈解析
这段代码是一个Java Web应用程序中的过滤器(Filter),用于处理用户登录和商家登录的验证。过滤器的作用是在请求到达目标Servlet之前,对请求进行预处理,例如验证用户身份、过滤敏感词汇等。在这个例子中,过滤器主要用于验证用户和商家的登录信息。
-
导入相关类:导入了UserServiceImpl、ShangServiceImpl、UserService、ShangService等服务类,以及javax.servlet包下的Filter、FilterChain、ServletRequest、ServletResponse等接口和类。
-
定义FoodFilterServlet类:实现了Filter接口,并使用@WebFilter注解指定了过滤器的名称和要过滤的URL路径(/showFoodServlet)。
-
init方法:初始化过滤器时调用的方法,这里只是简单地调用了父类的init方法。
-
doFilter方法:主要的逻辑处理方法,当有请求到达时会被调用。首先获取HttpServletRequest和HttpServletResponse对象,然后从请求中获取用户名、密码和身份信息。接着根据身份信息判断是用户还是商家,并进行相应的处理。
-
如果身份为"0"(用户):检查session中是否已经有用户信息,如果有则重定向到用户展示食品的页面;如果没有,则创建UserService对象,调用FindUid方法查找用户ID,如果找到则将用户ID存入session并重定向到用户展示食品的页面,否则清空session中的用户信息并将错误信息设置到request域中,最后转发到登录页面。
-
如果身份为"1"(商家):检查session中是否已经有商家信息,如果有则继续执行后续操作;如果没有,则创建ShangService对象,调用FindSid方法查找商家ID,如果找到则将商家ID存入session并继续执行后续操作,否则清空session中的商家信息并将错误信息设置到request域中,最后转发到登录页面。
-
-
destroy方法:销毁过滤器时调用的方法,这里只是简单地调用了父类的destroy方法。
总结:这个过滤器主要用于处理用户和商家登录的验证,根据登录信息的不同,将用户或商家的信息存储在session中,并根据验证结果进行相应的跳转。
🎯登入后显示餐品信息部分
😎商家登入后显示
🎈后端请求ShowFoodServlet部分
✨代码
package com.dingcan.controller;
import cn.hutool.db.Entity;
import com.dingcan.service.FoodService;
import com.dingcan.service.Impl.FoodServiceImpl;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet(name = "ShowFoodServlet", value = "/showFoodServlet")
public class ShowFoodServlet extends HttpServlet {
FoodService foodService=new FoodServiceImpl();
protected void service(HttpServletRequest req, HttpServletResponse resp) throws javax.servlet.ServletException, IOException {
//获取session中的sid
int sid1=(int)req.getSession().getAttribute("sid1");
String sql="select * from food,shangjia,dianpu where food.`fdianid`=dianpu.`did` and dianpu.`did`=shangjia.`sdianid` and sid="+sid1;
List<Entity> list=foodService.findFood(sql);
//将list放入request域中
req.setAttribute("list",list);
req.getRequestDispatcher("/s1/showFood1.jsp").forward(req,resp);
}
}
✨解析
这段代码是一个Java Servlet,用于处理HTTP请求并返回HTTP响应。它主要用于展示特定商家的餐品信息。以下是对代码的详细解析:
-
package com.dingcan.controller;
:这是代码所在的包名,表示该类属于com.dingcan.controller包。 -
import cn.hutool.db.Entity;
:导入了cn.hutool.db.Entity类,这是一个用于操作数据库实体的工具类。 -
import com.dingcan.service.FoodService;
:导入了FoodService接口,这是一个用于处理食品相关业务逻辑的服务接口。 -
import com.dingcan.service.Impl.FoodServiceImpl;
:导入了FoodService接口的实现类FoodServiceImpl。 -
import javax.servlet.annotation.WebServlet;
:导入了WebServlet注解,用于声明Servlet的配置信息。 -
import javax.servlet.http.HttpServlet;
:导入了HttpServlet类,这是Servlet的基本类。 -
import javax.servlet.http.HttpServletRequest;
:导入了HttpServletRequest类,用于处理客户端发送的请求。 -
import javax.servlet.http.HttpServletResponse;
:导入了HttpServletResponse类,用于生成服务器端的响应。 -
import java.io.IOException;
:导入了IOException类,用于处理输入输出异常。 -
@WebServlet(name = "ShowFoodServlet", value = "/showFoodServlet")
:使用WebServlet注解声明了一个名为ShowFoodServlet的Servlet,其访问路径为/showFoodServlet。 -
public class ShowFoodServlet extends HttpServlet {
:定义了一个名为ShowFoodServlet的类,继承自HttpServlet。 -
FoodService foodService=new FoodServiceImpl();
:创建了一个FoodServiceImpl实例,并将其赋值给foodService变量。 -
protected void service(HttpServletRequest req, HttpServletResponse resp) throws javax.servlet.ServletException, IOException {
:重写了HttpServlet类的service方法,用于处理客户端的请求。该方法接收两个参数:HttpServletRequest对象(req)和HttpServletResponse对象(resp)。 -
int sid1=(int)req.getSession().getAttribute("sid1");
:从session中获取名为"sid1"的属性值,并将其转换为整数类型。 -
String sql="select * from food,shangjia,dianpu where food.
fdianid=dianpu.
didand dianpu.
did=shangjia.
sdianidand sid="+sid1;
:构造一个SQL查询语句,用于从数据库中查询与指定商家相关的食品信息。 -
List<Entity> list=foodService.findFood(sql);
:调用foodService的findFood方法,传入SQL查询语句,执行查询并将结果存储在list变量中。 -
req.setAttribute("list",list);
:将查询到的食品信息列表存入request域中,键名为"list"。 -
req.getRequestDispatcher("/s1/showFood1.jsp").forward(req,resp);
:通过RequestDispatcher将请求转发到/s1/showFood1.jsp页面,并将request和response对象传递给该页面。
总结:这段代码定义了一个名为ShowFoodServlet的Servlet,用于处理客户端发起的请求,查询特定商家的食品信息,并将查询结果展示在/s1/showFood1.jsp页面上。
🎈前端页面showFood1.jsp部分
✨代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>展示商家登入的信息</title>
<!-- 引入 Bootstrap -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/sShow.css" rel="stylesheet">
</head>
<body>
<div class="first">
<div class="one">
<div class="two">
<img src="image/four.jpg" alt="LOGO">
<label>优质外卖订餐系统</label>
</div>
<div class="three">
<a href="exitServlet" class="btn">注销</a>
</div>
</div>
<div class="btn-group-vertical">
<a href="showFoodServlet" class="btn" role="button">餐品展示</a>
<a href="s1/addFood.jsp" class="btn" role="button">添加餐品</a>
<a href="hotFoodServlet" class="btn" role="button">热门餐品</a>
<a href="showCarServlet" class="btn" role="button">出售车</a>
</div>
<div class="four">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr class="danger">
<td>餐品名称</td>
<td>购买人数</td>
<td>价格</td>
<td>状态</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="food">
<tr class="success">
<td>${food.fname}</td>
<td>${food.fcount}</td>
<td>${food.fprice}</td>
<td>${food.fstate == 1 ? "销售中" : "下架"}</td>
<td>
<a href="findFoodServlet?fid=${food.fid}" class="btn btn-primary">修改</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
✨解析
这段代码是一个使用JSP(JavaServer Pages)编写的Web页面,它使用了HTML和Bootstrap框架来构建用户界面,并使用JSTL(JavaServer Pages Standard Tag Library)标签来动态显示数据。下面是对代码的详细解析:
-
页面指令:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
: 这行代码设置了页面的内容类型为HTML,字符集为UTF-8,并指定脚本语言为Java。<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
: 这行代码引入了JSTL核心标签库,prefix="c"
定义了标签前缀,后面使用JSTL标签时会用到。
-
HTML结构:
<html>
: 定义了页面的根元素。<head>
: 包含了页面的元数据,如标题和样式表链接。<title>
: 设置页面标题为“展示商家登入的信息”。<link>
: 引入了Bootstrap的CSS文件,用于页面样式,以及自定义的CSS文件sShow.css
。
-
页面内容:
<div class="first">
: 定义了页面的主要内容区域。<div class="one">
: 包含了LOGO和标题。<img src="image/four.jpg" alt="LOGO">
: 显示LOGO图片。<label>
: 显示文本“优质外卖订餐系统”。
<div class="three">
: 包含一个注销按钮,链接到exitServlet
。<div class="btn-group-vertical">
: 垂直排列的按钮组,包含餐品展示、添加餐品、热门餐品和出售车的链接。
-
导航链接:
<a href="..." class="btn" role="button">
: 创建Bootstrap样式的按钮,链接到不同的Servlet处理不同的业务逻辑。
-
表格展示:
<table class="table table-striped table-bordered table-condensed">
: 创建一个带有Bootstrap样式的表格,用于展示数据。<thead>
和<tr class="danger">
: 定义表格的头部,包含列标题。<tbody>
: 表格的主体部分,用于展示具体的数据。
-
JSTL标签使用:
<c:forEach items="${list}" var="food">
: 这是一个JSTL循环标签,用于遍历从后端传递到页面的list
集合,每次循环将当前元素赋值给变量food
。<tr class="success">
: 表格的一行,展示了餐品的名称、购买人数、价格、状态和操作按钮。<c:forEach>
标签内部的${food.fname}
,${food.fcount}
,${food.fprice}
, 和${food.fstate}
是表达式,用于访问food
对象的属性。
-
条件表达式:
${food.fstate == 1 ? "销售中" : "下架"}
: 这是一个条件表达式,根据food.fstate
的值显示“销售中”或“下架”。
-
操作链接:
<a href="findFoodServlet?fid=${food.fid}" class="btn btn-primary">修改</a>
: 创建一个按钮链接,链接到findFoodServlet
,传递food.fid
作为参数,用于修改餐品信息。
-
注销链接:
<a href="exitServlet" class="btn">注销</a>
: 创建一个按钮链接,用于注销当前用户会话。
整个页面是一个商家登录后的管理系统界面,可以展示餐品信息,提供餐品管理功能,如查看、添加、修改等。使用JSTL标签可以方便地将Java代码和页面内容分离,提高代码的可维护性。
✨效果
😎用户登入后显示
🎈后端处理 UshowFoodServlet部分
✨代码
package com.dingcan.controller;
import cn.hutool.db.Entity;
import com.dingcan.service.FoodService;
import com.dingcan.service.Impl.FoodServiceImpl;
import com.dingcan.service.Impl.UserServiceImpl;
import com.dingcan.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet(name = "UshowFoodServlet", value = "/ushowFoodServlet")
public class UshowFoodServlet extends HttpServlet {
FoodService foodService=new FoodServiceImpl();
UserService userServic=new UserServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//得到标志参数(用用于判断执行,哪个sql语句)
String biaozhi="0";
biaozhi=req.getParameter("c");
if (biaozhi==null)
biaozhi="0";
String sql=userServic.FindSql(biaozhi);
List<Entity> list=foodService.findFood(sql);
req.setAttribute("list",list);
req.getRequestDispatcher("/u1/showFood2.jsp").forward(req,resp);
}
}
✨解析
用于处理HTTP请求并与后端服务进行交互:
-
包和导入:
package com.dingcan.controller;
: 声明了这个类属于com.dingcan.controller
包。- 导入了一些必要的类,包括
cn.hutool.db.Entity
用于数据库操作,com.dingcan.service.*
相关的服务类。
-
@WebServlet注解:
@WebServlet(name = "UshowFoodServlet", value = "/ushowFoodServlet")
: 这个注解用于注册这个Servlet,定义了它的名称和URL映射。当访问/ushowFoodServlet
路径时,这个Servlet会被调用。
-
类定义:
public class UshowFoodServlet extends HttpServlet
: 定义了一个名为UshowFoodServlet
的类,它继承自HttpServlet
。
-
成员变量:
FoodService foodService = new FoodServiceImpl();
: 创建了FoodService
接口的实现类FoodServiceImpl
的实例。UserService userServic = new UserServiceImpl();
: 创建了UserService
接口的实现类UserServiceImpl
的实例。
-
service方法:
@Override
: 表示重写了父类的方法。protected void service(HttpServletRequest req, HttpServletResponse resp)
: 这是Servlet的service
方法,用于处理客户端的请求。String biaozhi = "0";
: 定义了一个字符串变量biaozhi
并初始化为"0"
,用作标志参数。biaozhi = req.getParameter("c");
: 从请求中获取名为c
的参数,如果请求中没有这个参数,biaozhi
将保持默认值"0"
。
-
获取SQL语句:
String sql = userServic.FindSql(biaozhi);
: 使用UserService
的FindSql
方法,根据biaozhi
的值获取相应的SQL语句。
-
查询数据:
List<Entity> list = foodService.findFood(sql);
: 使用FoodService
的findFood
方法执行SQL查询,并将结果存储在list
中。
-
设置请求属性:
req.setAttribute("list", list);
: 将查询结果list
设置为请求属性,这样就可以在JSP页面中通过$ {list}
访问这些数据。
-
请求转发:
req.getRequestDispatcher("/u1/showFood2.jsp").forward(req, resp);
: 将请求转发到/u1/showFood2.jsp
页面,同时携带了请求属性。
-
异常处理:
- 方法声明中包含了
throws ServletException, IOException
,表示这个方法可能会抛出ServletException
和IOException
异常,这些异常通常与HTTP请求和响应的处理有关。
- 方法声明中包含了
总结来说,这个Servlet的作用是根据请求中的参数获取相应的SQL语句,执行数据库查询,并将查询结果转发到JSP页面进行展示。这种模式是MVC(Model-View-Controller)架构中控制器层的典型应用。
🎈前端展示showFood2.jsp部分
✨代码
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 20/6/2024
Time: 下午3:40
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>展示用户登入的信息</title>
<!-- 引入 Bootstrap -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/uShow.css" rel="stylesheet">
</head>
<body>
<div class="first">
<div class="one">
<div class="two">
<img src="image/four.jpg" alt="LOGO">
<label>优质外卖订餐系统</label>
</div>
<div class="three">
<a href="exitServlet" class="btn">注销</a>
</div>
</div>
<div class="btn-group-vertical">
<ul class="menuOne">
<li>
<a href="ushowFoodServlet?c=1" class="btn btn" role="button">老王火锅店</a>
<ul class="menuTwo">
<li><a href="ushowFoodServlet?c=2" class="btn" role="button">肉类</a></li>
<li><a href="ushowFoodServlet?c=3" class="btn" role="button">菜类</a></li>
<li><a href="ushowFoodServlet?c=4" class="btn" role="button">其他</a></li>
</ul>
</li>
<li>
<a href="ushowFoodServlet?c=5" class="btn" role="button">精品零食店</a>
<ul class="menuTwo">
<li><a href="ushowFoodServlet?c=6" class="btn" role="button">辣食</a></li>
<li><a href="ushowFoodServlet?c=7" class="btn" role="button">甜食</a></li>
<li><a href="ushowFoodServlet?c=8" class="btn" role="button">其他</a></li>
</ul>
</li>
<li>
<a href="ushowCarServlet" class="btn" role="button">我的购物车</a>
<ul class="menuTwo">
</ul>
</li>
</ul>
</div>
<div class="four">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr class="warning">
<td>餐品名称</td>
<td>价格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="food">
<tr class="danger">
<td>${food.fname}</td>
<td>${food.fprice}</td>
<td>
<a href="addCarServlet?fid=${food.fid}&fname=${food.fname}&fdianid=${food.fdianid}&fprice=${food.fprice}" class="btn btn-primary">购买</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<script src="js/ucaidan.js"></script>
</body>
</html>
✨解析
这段代码是一个JSP页面,用于展示用户登录后的信息,并通过层级菜单和表格显示餐品数据。以下是对代码的详细解析:
-
JSP注释:
- 页面顶部的注释是IntelliJ IDEA自动生成的,提供了创建者、日期和时间信息。
-
页面指令:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
: 设置页面的MIME类型为HTML,字符集为UTF-8,脚本语言为Java。<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
: 引入JSTL核心标签库,使用c
作为前缀。
-
HTML结构:
<html>
: 页面的根元素。<head>
: 包含页面的元数据,如标题和样式表链接。<title>
: 设置页面标题为“展示用户登入的信息”。<link>
: 引入Bootstrap的CSS文件和自定义的CSS文件uShow.css
。
-
页面内容:
<div class="first">
: 包含整个页面的主要内容。<div class="one">
: 包含LOGO和系统名称。<div class="two">
: 包含LOGO图片和系统名称标签。<div class="three">
: 包含注销按钮,链接到exitServlet
。
-
导航菜单:
<div class="btn-group-vertical">
: 垂直排列的按钮组,包含不同商家和分类的链接。<ul class="menuOne">
和<ul class="menuTwo">
: 使用列表来创建层级菜单结构。
-
层级菜单:
- 主菜单项链接到
ushowFoodServlet
,根据不同的参数c
显示不同商家的餐品。 - 子菜单项进一步细分了餐品种类。
- 主菜单项链接到
-
表格展示:
<table>
: 使用Bootstrap样式的表格,展示用户的餐品信息。<thead>
: 表格的头部,包含列标题:餐品名称、价格和操作。<tbody>
: 表格的主体,使用JSTL的<c:forEach>
标签循环遍历list
集合。
-
JSTL标签:
<c:forEach items="${list}" var="food">
: 用于遍历作为请求属性传递到页面的list
集合。
-
表格行:
<tr>
: 表格的一行,用于显示单个餐品的信息。<td>
: 表格单元格,显示餐品的名称(food.fname
)和价格(food.fprice
)。
-
购买操作:
<a href="addCarServlet?..."
: 在操作列中,创建一个链接到addCarServlet
的按钮,用于将选中的餐品添加到购物车。链接包含了餐品的ID、名称、商家ID和价格作为查询参数。
-
页面底部:
<script src="js/ucaidan.js"></script>
: 引入JavaScript文件,可能用于页面的动态交互或效果。
-
Bootstrap类:
- 页面使用了多个Bootstrap类(如
btn
,btn-primary
,table-striped
,table-bordered
,table-condensed
,warning
,danger
)来增强页面的样式和响应性。
- 页面使用了多个Bootstrap类(如
这个JSP页面是一个用户登录后的管理系统界面,可以展示不同商家的餐品信息,并提供购买功能。页面通过使用JSTL标签动态展示后端传递的数据,并通过Bootstrap框架增强了用户界面的友好性和交互性。
✨效果
🎯用户注册部分
😎前端页面signUer.jsp部分
🎈代码
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 21/6/2024
Time: 下午1:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 引入Bootstrap --%>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<html>
<head>
<title>用户注册界面</title>
<link href="../css/sign.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/sign.js"></script>
</head>
<body>
<form name="registerForm" action="${pageContext.request.contextPath}/signUserServlet" onsubmit="return validateForm()">
<div class="one">
<div class="first">优选外卖订餐系统</div>
<div class="form-group">
<label class="col-sm-5 control-label">账户名:</label>
<div class="col-sm-12">
<input class="form-control" type="text" name="username" placeholder="请输入账户名">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">密码:</label>
<div class="col-sm-12">
<input class="form-control" type="password" name="password1" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">重复密码:</label>
<div class="col-sm-12">
<input class="form-control" type="password" name="password2" placeholder="请再次输入密码">
</div>
</div>
<div class="left">
<button type="submit" class="btn btn-success btn-lg">注册</button>
</div>
<div class="right">
<button type="reset" class="btn btn-danger btn-lg">重置</button>
</div>
</div>
</form>
</body>
</html>
🎈解析
这段代码是一个使用HTML和Bootstrap框架构建的用户注册界面的JSP页面。以下是对代码的详细解析:
-
JSP注释:
- 页面顶部的注释由IntelliJ IDEA自动生成,提供了创建者、日期和时间。
-
页面指令:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
: 设置页面的MIME类型为HTML,字符集为UTF-8,脚本语言为Java。
-
Bootstrap链接:
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
: 引入Bootstrap的CSS文件,用于页面样式。
-
HTML结构:
<html>
: 根元素。<head>
: 包含页面的元数据,如标题和样式链接。<title>
: 设置页面标题为“用户注册界面”。<link href="../css/sign.css" rel="stylesheet" type="text/css">
: 引入自定义的CSS样式文件。
-
JavaScript脚本:
<script type="text/javascript" src="../js/sign.js"></script>
: 引入自定义的JavaScript脚本文件,可能包含表单验证逻辑。
-
表单:
<form name="registerForm" action="${pageContext.request.contextPath}/signUserServlet" onsubmit="return validateForm()">
: 创建一个表单,用于提交用户注册信息。action
属性设置表单提交的URL,使用了JSP表达式${pageContext.request.contextPath}
来动态设置上下文路径。onsubmit="return validateForm()"
: 提交表单前调用validateForm
JavaScript函数进行验证。
-
表单控件:
- 使用
div
和form-group
类创建表单控件的布局。 <label>
: 表示表单控件的说明文字。<input>
: 创建输入字段,用于输入账户名、密码和重复密码。type="text"
和type="password"
分别用于文本输入和密码输入。
- 使用
-
按钮:
<button type="submit" class="btn btn-success btn-lg">注册</button>
: 创建提交按钮,使用Bootstrap的按钮样式。<button type="reset" class="btn btn-danger btn-lg">重置</button>
: 创建重置按钮,用于清空表单输入。
-
Bootstrap类:
- 页面使用了Bootstrap的类(如
form-group
,col-sm-5
,col-sm-12
,control-label
,form-control
,btn
,btn-success
,btn-lg
,btn-danger
)来增强表单的布局和样式。
- 页面使用了Bootstrap的类(如
-
表单验证:
- 表单的
onsubmit
事件调用了validateForm
函数,这可能是在sign.js
脚本中定义的,用于在提交表单前进行前端验证。
- 表单的
这个JSP页面提供了一个用户注册的表单,包括账户名和密码的输入,并通过Bootstrap框架增强了用户界面的友好性和响应性。表单提交时会进行前端验证,并最终发送到后端的signUserServlet
进行处理。
🎈效果
😎后端处理SignUserServlet部分
🎈代码
package com.dingcan.controller;
import com.dingcan.service.Impl.UserServiceImpl;
import com.dingcan.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "SignUserServlet", value = "/signUserServlet")
public class SignUserServlet extends HttpServlet {
UserService userService =new UserServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String uname = req.getParameter("username");
String password = req.getParameter("password1");
if (userService.addUser(uname,password)) {
req.setAttribute("msg", "注册成功,请登入");
req.getRequestDispatcher("login.jsp").forward(req, resp);
}
else
resp.sendRedirect("fail.jsp");
}
}
🎈解析
这段Java代码是一个Servlet控制器,用于处理用户注册的请求。以下是对代码的详细解析:
-
包声明:
package com.dingcan.controller;
: 声明了这个类属于com.dingcan.controller
包。
-
导入:
- 导入了相关的类,包括
com.dingcan.service.Impl.UserServiceImpl
和com.dingcan.service.UserService
。
- 导入了相关的类,包括
-
@WebServlet注解:
@WebServlet(name = "SignUserServlet", value = "/signUserServlet")
: 注解用于注册Servlet,定义了它的名称和URL映射。当访问/signUserServlet
路径时,这个Servlet会被调用。
-
类定义:
public class SignUserServlet extends HttpServlet
: 定义了一个名为SignUserServlet
的类,它继承自HttpServlet
。
-
成员变量:
UserService userService = new UserServiceImpl();
: 创建了UserService
接口的实现类UserServiceImpl
的实例。
-
service方法:
@Override
: 表示重写了父类的方法。protected void service(HttpServletRequest req, HttpServletResponse resp)
: 这是Servlet的service
方法,用于处理客户端的请求。
-
获取请求参数:
String uname = req.getParameter("username");
: 从请求中获取username
参数。String password = req.getParameter("password1");
: 从请求中获取password1
参数。
-
注册用户:
if (userService.addUser(uname, password))
: 使用userService
的addUser
方法尝试添加用户。如果用户添加成功,返回true
。
-
请求转发:
req.setAttribute("msg", "注册成功,请登入");
: 设置一个消息属性,提示用户注册成功。req.getRequestDispatcher("login.jsp").forward(req, resp);
: 将请求转发到login.jsp
页面,携带请求属性。
-
重定向:
else resp.sendRedirect("fail.jsp");
: 如果用户添加失败(例如,用户名已存在),则重定向到fail.jsp
页面。
-
异常处理:
- 方法声明中包含了
throws ServletException, IOException
,表示这个方法可能会抛出ServletException
和IOException
异常。
- 方法声明中包含了
总结来说,这个SignUserServlet
的作用是接收用户提交的注册信息,通过UserService
的实现类UserServiceImpl
添加用户,根据添加结果决定是转发到登录页面还是重定向到失败页面。这种模式是MVC(Model-View-Controller)架构中控制器层的典型应用。
🎯注销部分
😎前端页面展示
🎈代码
<div class="first">
<div class="one">
<div class="two">
<img src="image/four.jpg" alt="LOGO">
<label>优质外卖订餐系统</label>
</div>
<div class="three">
<a href="exitServlet" class="btn">注销</a>
</div>
</div>
🎈解析
这段HTML代码是页面布局的一部分,通常位于页面的顶部,作为导航栏或页眉。它使用了CSS类来控制布局和样式:
-
<div class="first">
: 这是最外层的div
元素,它可能被用来作为整个头部或导航区域的容器。 -
<div class="one">
: 这个div
元素可能是用来进一步组织内容,例如将LOGO和导航链接组合在一起。 -
<div class="two">
: 这个div
元素包含了LOGO图片和系统名称,可能是页面的标识部分。<img src="image/four.jpg" alt="LOGO">
: 这是LOGO图片,使用src
属性指定图片路径,alt
属性提供了图片的替代文本。<label>优质外卖订餐系统</label>
: 这是一个文本标签,显示了系统名称。
-
<div class="three">
: 这个div
元素包含一个注销链接,可能位于页面的右侧,提供给用户退出登录的功能。<a href="exitServlet" class="btn">注销</a>
: 这是一个超链接,当用户点击时,会向exitServlet
发送请求,执行注销操作。class="btn"
可能是在CSS中定义的,用来给按钮添加样式。
-
CSS类:
.first
,.one
,.two
,.three
: 这些类名在CSS文件中定义,用来控制这些div
元素的布局、样式和行为。例如,它们可能控制元素的宽度、高度、背景颜色、边框、内边距、外边距等。
-
导航链接:
- 这个部分的代码可能用于实现用户注销功能。在实际应用中,注销链接通常会在用户登录后才显示,或者根据用户的角色和权限动态显示。
-
图片和文本的组合:
- LOGO图片和系统名称的组合是网站设计中的常见元素,用于增强品牌识别度和提供直观的导航提示。
-
响应式设计:
- 由于使用了Bootstrap框架(从引入的Bootstrap CSS可以推断),这些元素很可能被设计为响应式,以适应不同设备的屏幕尺寸。
🎈效果
😎后端处理ExitServlet部分
🎈代码
package com.dingcan.controller;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "ExitServlet", value = "/exitServlet")
public class ExitServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getSession().setAttribute("uid1",null);
req.getSession().setAttribute("identity",null);
req.getSession().setAttribute("sid1",null);
resp.sendRedirect("login.jsp");
}
}
🎈解析
这段Java代码定义了一个名为ExitServlet
的Servlet类,它继承自HttpServlet
。这个Servlet用于处理用户注销(退出登录)的请求:
-
包声明:
package com.dingcan.controller;
: 声明了这个类属于com.dingcan.controller
包。
-
@WebServlet注解:
@WebServlet(name = "ExitServlet", value = "/exitServlet")
: 这个注解用于注册Servlet,定义了它的名称和URL映射。当用户访问/exitServlet
路径时,这个Servlet会被调用。
-
类定义:
public class ExitServlet extends HttpServlet
: 定义了一个名为ExitServlet
的类,它继承自HttpServlet
。
-
service方法:
@Override
: 表示重写了父类HttpServlet
的service
方法。protected void service(HttpServletRequest req, HttpServletResponse resp)
: 这是Servlet的service
方法,用于处理客户端的请求。
-
注销逻辑:
req.getSession().setAttribute("uid1", null);
: 从会话中移除属性uid1
,这通常用于清除用户的ID信息。req.getSession().setAttribute("identity", null);
: 从会话中移除属性identity
,这可能用于清除用户的身份或角色信息。req.getSession().setAttribute("sid1", null);
: 从会话中移除属性sid1
,这可能用于清除与用户会话相关的其他信息。
-
重定向:
resp.sendRedirect("login.jsp");
: 执行注销操作后,使用HttpServletResponse
的sendRedirect
方法重定向到login.jsp
页面。这将导致浏览器接收到一个重定向响应,并将用户导航到登录页面。
-
异常处理:
- 方法声明中包含了
throws ServletException, IOException
,表示这个方法可能会抛出ServletException
和IOException
异常,这些异常通常与HTTP请求和响应的处理有关。
- 方法声明中包含了
ExitServlet
的主要作用是在用户点击注销链接时清除会话中的用户信息,并将用户重定向到登录页面,从而完成注销过程。这是一种常见的Web应用程序安全实践,用于确保用户在注销后不再保持登录状态。