- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【JavaWeb项目】——外卖订餐系统之登入、登入后显示餐品信息、用户注册、注销部分

Y小夜发表于 2024/12/05 22:15:46 2024/12/05

【摘要】 🎯Tomcat配置不会使用Tomcat的小伙伴可以去看搭建第一个Web服务器（在eclipse或idea上部署Tomcat服务器）_eclipse创建一个web项目-CSDN博客😎Server部分将URL部分配置为：http://localhost:8080/webdingcan/login.jsp😎Deployment部分🎯登入部分😎前端页面login.jsp...

🎯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.did and dianpu.did=shangjia.sdianid and 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）来增强页面的样式和响应性。

这个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）来增强表单的布局和样式。
表单验证:
- 表单的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应用程序安全实践，用于确保用户在注销后不再保持登录状态。

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入