《JavaWeb篇》09.JSP看这一篇就够了(三)

简介: 《JavaWeb篇》09.JSP看这一篇就够了(三)

8.2 查询所有


image.png

当我们点击 index.html 页面中的 查询所有 这个超链接时,就能查询到上图右半部分的数据。


对于上述的功能,点击 查询所有 超链接是需要先请后端的 servlet ,由 servlet 跳转到对应的页面进行数据的动态展示。而整个流程如下图:


image.png


8.2.1 编写BrandMapper

在 mapper 包下创建创建 BrandMapper 接口,在接口中定义 selectAll() 方法

/**
  * 查询所有
  * @return
  */
@Select("select * from tb_brand")
List<Brand> selectAll();

8.2.2 编写工具类

在 com.itheima 包下创建 utils 包,并在该包下创建名为 SqlSessionFactoryUtils 工具类


public class SqlSessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;
    static {
        //静态代码块会随着类的加载而自动执行,且只执行一次
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

8.2.3 编写BrandService

在 service 包下创建 BrandService 类


public class BrandService {
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
    /**
     * 查询所有
     * @return
     */
    public List<Brand> selectAll(){
        //调用BrandMapper.selectAll()
        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4. 调用方法
        List<Brand> brands = mapper.selectAll();
        sqlSession.close();
        return brands;
    }
}

8.2.4 编写Servlet

在 web 包下创建名为 SelectAllServlet 的 servlet,该 servlet 的逻辑如下:


调用 BrandService 的 selectAll() 方法进行业务逻辑处理,并接收返回的结果

将上一步返回的结果存储到 request 域对象中

跳转到 brand.jsp 页面进行数据的展示

具体的代码如下:


@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private  BrandService service = new BrandService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用BrandService完成查询
        List<Brand> brands = service.selectAll();
        //2. 存入request域中
        request.setAttribute("brands",brands);
        //3. 转发到brand.jsp
        request.getRequestDispatcher("/brand.jsp").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}


8.2.5 编写brand.jsp页面

将资料 资料\2. 品牌增删改查案例\静态页面 下的 brand.html 页面拷贝到项目的 webapp 目录下,并将该页面改成 brand.jsp 页面,而 brand.jsp 页面在表格中使用 JSTL 和 EL表达式 从request域对象中获取名为 brands 的集合数据并展示出来。页面内容如下:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<table border="1" cellspacing="0" width="80%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${brands}" var="brand" varStatus="status">
        <tr align="center">
            <%--<td>${brand.id}</td>--%>
            <td>${status.count}</td>
            <td>${brand.brandName}</td>
            <td>${brand.companyName}</td>
            <td>${brand.ordered}</td>
            <td>${brand.description}</td>
            <c:if test="${brand.status == 1}">
                <td>启用</td>
            </c:if>
            <c:if test="${brand.status != 1}">
                <td>禁用</td>
            </c:if>
            <td><a href="/brand-demo/selectByIdServlet?id=${brand.id}">修改</a> <a href="#">删除</a></td>
        </tr>
    </c:forEach>
</table>
</body>
</html>

8.2.6 测试

启动服务器,并在浏览器输入 http://localhost:8080/brand-demo/index.html,看到如下 查询所有 的超链接,点击该链接就可以查询出所有的品牌数据


image.png


为什么出现这个问题呢?是因为查询到的字段名和实体类对象的属性名没有一一对应。相比看到这大家一定会解决了,就是在映射配置文件中使用 resultMap 标签定义映射关系。映射配置文件内容如下:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.mapper.BrandMapper">
    <resultMap id="brandResultMap" type="brand">
        <result column="brand_name" property="brandName"></result>
        <result column="company_name" property="companyName"></result>
    </resultMap>
</mapper>

并且在 BrandMapper 接口中的 selectAll() 上使用 @ResuleMap 注解指定使用该映射


/**
  * 查询所有
  * @return
  */
@Select("select * from tb_brand")
@ResultMap("brandResultMap")
List<Brand> selectAll();

重启服务器,再次访问就能看到我们想要的数据了


image.png


8.3 添加

image.png


上图是做 添加 功能流程。点击 新增 按钮后,会先跳转到 addBrand.jsp 新增页面,在该页面输入要添加的数据,输入完毕后点击 提交 按钮,需要将数据提交到后端,而后端进行数据添加操作,并重新将所有的数据查询出来。整个流程如下:


image.png


接下来我们根据流程来实现功能:


8.3.1 编写BrandMapper方法

在 BrandMapper 接口,在接口中定义 add(Brand brand) 方法


@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);

8.3.2 编写BrandService方法

在 BrandService 类中定义添加品牌数据方法 add(Brand brand)


/**
     * 添加
     * @param brand
     */
    public void add(Brand brand){
        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4. 调用方法
        mapper.add(brand);
        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
    }

8.3.3 改进brand.jsp页面

我们需要在该页面表格的上面添加 新增 按钮


<input type="button" value="新增" id="add"><br>

并给该按钮绑定单击事件,当点击了该按钮需要跳转到 brand.jsp 添加品牌数据的页面

<script>
    document.getElementById("add").onclick = function (){
        location.href = "/brand-demo/addBrand.jsp";
    }
</script>

注意:该 script 标签建议放在 body 结束标签前面。


8.3.4 编写addBrand.jsp页面

从资料 资料\2. 品牌增删改查案例\静态页面 中将 addBrand.html 页面拷贝到项目的 webapp 下,并改成 addBrand.jsp 动态页面


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="/brand-demo/addServlet" method="post">
    品牌名称:<input name="brandName"><br>
    企业名称:<input name="companyName"><br>
    排序:<input name="ordered"><br>
    描述信息:<textarea rows="5" cols="20" name="description"></textarea><br>
    状态:
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>
    <input type="submit" value="提交">
</form>
</body>
</html>

8.3.5 编写servlet

在 web 包下创建 AddServlet 的 servlet,该 servlet 的逻辑如下:


设置处理post请求乱码的字符集

接收客户端提交的数据

将接收到的数据封装到 Brand 对象中

调用 BrandService 的add() 方法进行添加的业务逻辑处理

跳转到 selectAllServlet 资源重新查询数据

具体的代码如下:


@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService service = new BrandService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理POST请求的乱码问题
        request.setCharacterEncoding("utf-8");
        //1. 接收表单提交的数据,封装为一个Brand对象
        String brandName = request.getParameter("brandName");
        String companyName = request.getParameter("companyName");
        String ordered = request.getParameter("ordered");
        String description = request.getParameter("description");
        String status = request.getParameter("status");
        //封装为一个Brand对象
        Brand brand = new Brand();
        brand.setBrandName(brandName);
        brand.setCompanyName(companyName);
        brand.setOrdered(Integer.parseInt(ordered));
        brand.setDescription(description);
        brand.setStatus(Integer.parseInt(status));
        //2. 调用service 完成添加
        service.add(brand);
        //3. 转发到查询所有Servlet
        request.getRequestDispatcher("/selectAllServlet").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

8.3.6 测试

点击 brand.jsp 页面的 新增 按钮,会跳转到 addBrand.jsp页面


image.png


点击 提交 按钮,就能看到如下页面,里面就包含我们刚添加的数据


image.png


8.4 修改

image.png


点击每条数据后面的 编辑 按钮会跳转到修改页面,如下图:


image.png


在该修改页面我们可以看到将 编辑 按钮所在行的数据 回显 到表单,然后需要修改那个数据在表单中进行修改,然后点击 提交 的按钮将数据提交到后端,后端再将数据存储到数据库中。


从上面的例子我们知道 修改 功能需要从两方面进行实现,数据回显和修改操作。


8.4.1 回显数据



上图就是回显数据的效果。要实现这个效果,那当点击 修改 按钮时不能直接跳转到 update.jsp 页面,而是需要先带着当前行数据的 id 请求后端程序,后端程序根据 id 查询数据,将数据存储到域对象中跳转到 update.jsp 页面进行数据展示。整体流程如下


image.png


8.4.1.1 编写BrandMapper方法

在 BrandMapper 接口,在接口中定义 selectById(int id) 方法


/**
     * 根据id查询
     * @param id
     * @return
     */
    @Select("select * from tb_brand where id = #{id}")
    @ResultMap("brandResultMap")
    Brand selectById(int id);

8.4.1.2 编写BrandService方法

在 BrandService 类中定义根据id查询数据方法 selectById(int id)


/**
     * 根据id查询
     * @return
     */
    public Brand selectById(int id){
        //调用BrandMapper.selectAll()
        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4. 调用方法
        Brand brand = mapper.selectById(id);
        sqlSession.close();
        return brand;
    }

8.4.1.3 编写servlet

在 web 包下创建 SelectByIdServlet 的 servlet,该 servlet 的逻辑如下:


获取请求数据 id

调用 BrandService 的 selectById() 方法进行数据查询的业务逻辑

将查询到的数据存储到 request 域对象中

跳转到 update.jsp 页面进行数据真实

具体代码如下:


@WebServlet("/selectByIdServlet")
public class SelectByIdServlet extends HttpServlet {
    private  BrandService service = new BrandService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收id
        String id = request.getParameter("id");
        //2. 调用service查询
        Brand brand = service.selectById(Integer.parseInt(id));
        //3. 存储到request中
        request.setAttribute("brand",brand);
        //4. 转发到update.jsp
        request.getRequestDispatcher("/update.jsp").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

8.4.1.4 编写update.jsp页面

拷贝 addBrand.jsp 页面,改名为 update.jsp 并做出以下修改:


title 标签内容改为 修改品牌


form 标签的 action 属性值改为 /brand-demo/updateServlet


input 标签要进行数据回显,需要设置 value 属性


品牌名称:<input name="brandName" value="${brand.brandName}"><br>
企业名称:<input name="companyName" value="${brand.companyName}"><br>
排序:<input name="ordered" value="${brand.ordered}"><br>

textarea 标签要进行数据回显,需要在标签体中使用 EL表达式


描述信息:<textarea rows="5" cols="20" name="description">${brand.description} </textarea><br>

单选框使用 if 标签需要判断 brand.status 的值是 1 还是 0 在指定的单选框上使用 checked 属性,表示被选中状态


状态:

<c:if test="${brand.status == 0}">
    <input type="radio" name="status" value="0" checked>禁用
    <input type="radio" name="status" value="1">启用<br>
</c:if>
<c:if test="${brand.status == 1}">
    <input type="radio" name="status" value="0" >禁用
    <input type="radio" name="status" value="1" checked>启用<br>
</c:if>

综上,update.jsp 代码如下:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改品牌</title>
</head>
<body>
<h3>修改品牌</h3>
<form action="/brand-demo/updateServlet" method="post">
    品牌名称:<input name="brandName" value="${brand.brandName}"><br>
    企业名称:<input name="companyName" value="${brand.companyName}"><br>
    排序:<input name="ordered" value="${brand.ordered}"><br>
    描述信息:<textarea rows="5" cols="20" name="description">${brand.description} </textarea><br>
    状态:
    <c:if test="${brand.status == 0}">
        <input type="radio" name="status" value="0" checked>禁用
        <input type="radio" name="status" value="1">启用<br>
    </c:if>
    <c:if test="${brand.status == 1}">
        <input type="radio" name="status" value="0" >禁用
        <input type="radio" name="status" value="1" checked>启用<br>
    </c:if>
    <input type="submit" value="提交">
</form>
</body>
</html>

8.4.2 修改数据

做完回显数据后,接下来我们要做修改数据了,而下图是修改数据的效果:


image.png


在修改页面进行数据修改,点击 提交 按钮,会将数据提交到后端程序,后端程序会对表中的数据进行修改操作,然后重新进行数据的查询操作。整体流程如下:


image.png


8.4.2.1 编写BrandMapper方法

在 BrandMapper 接口,在接口中定义 update(Brand brand) 方法


/**
  * 修改
  * @param brand
  */
@Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")
void update(Brand brand);

8.4.2.2 编写BrandService方法

在 BrandService 类中定义根据id查询数据方法 update(Brand brand)


/**
     * 修改
     * @param brand
     */
    public void update(Brand brand){
        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4. 调用方法
        mapper.update(brand);
        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
    }


8.4.2.3 编写servlet

在 web 包下创建 AddServlet 的 servlet,该 servlet 的逻辑如下:


设置处理post请求乱码的字符集

接收客户端提交的数据

将接收到的数据封装到 Brand 对象中

调用 BrandService 的update() 方法进行添加的业务逻辑处理

跳转到 selectAllServlet 资源重新查询数据

具体的代码如下:


@WebServlet("/updateServlet")
public class UpdateServlet extends HttpServlet {
    private BrandService service = new BrandService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理POST请求的乱码问题
        request.setCharacterEncoding("utf-8");
        //1. 接收表单提交的数据,封装为一个Brand对象
        String id = request.getParameter("id");
        String brandName = request.getParameter("brandName");
        String companyName = request.getParameter("companyName");
        String ordered = request.getParameter("ordered");
        String description = request.getParameter("description");
        String status = request.getParameter("status");
        //封装为一个Brand对象
        Brand brand = new Brand();
        brand.setId(Integer.parseInt(id));
        brand.setBrandName(brandName);
        brand.setCompanyName(companyName);
        brand.setOrdered(Integer.parseInt(ordered));
        brand.setDescription(description);
        brand.setStatus(Integer.parseInt(status));
        //2. 调用service 完成修改
        service.update(brand);
        //3. 转发到查询所有Servlet
        request.getRequestDispatcher("/selectAllServlet").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

存在问题:update.jsp 页面提交数据时是没有携带主键数据的,而后台修改数据需要根据主键进行修改。


针对这个问题,我们不希望页面将主键id展示给用户看,但是又希望在提交数据时能将主键id提交到后端。此时我们就想到了在学习 HTML 时学习的隐藏域,在 update.jsp 页面的表单中添加如下代码:


<%--隐藏域,提交id--%>
<input type="hidden" name="id" value="${brand.id}">

update.jsp 页面的最终代码如下:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改品牌</title>
</head>
<body>
<h3>修改品牌</h3>
<form action="/brand-demo/updateServlet" method="post">
    <%--隐藏域,提交id--%>
    <input type="hidden" name="id" value="${brand.id}">
    品牌名称:<input name="brandName" value="${brand.brandName}"><br>
    企业名称:<input name="companyName" value="${brand.companyName}"><br>
    排序:<input name="ordered" value="${brand.ordered}"><br>
    描述信息:<textarea rows="5" cols="20" name="description">${brand.description} </textarea><br>
    状态:
    <c:if test="${brand.status == 0}">
        <input type="radio" name="status" value="0" checked>禁用
        <input type="radio" name="status" value="1">启用<br>
    </c:if>
    <c:if test="${brand.status == 1}">
        <input type="radio" name="status" value="0" >禁用
        <input type="radio" name="status" value="1" checked>启用<br>
    </c:if>
    <input type="submit" value="提交">
</form>
</body>
</html>
相关文章
|
Java 关系型数据库 MySQL
基于jsp,javaweb银行柜员业务绩效考核系统
基于jsp,javaweb银行柜员业务绩效考核系统
157 0
|
Java
19JavaWeb基础 - JSP的其它内容补充
19JavaWeb基础 - JSP的其它内容补充
76 0
|
Java
18JavaWeb基础 - 图解JSP输出缓冲区原理
18JavaWeb基础 - 图解JSP输出缓冲区原理
94 0
|
Java
17JavaWeb基础 - JSP的九大内置对象/四大作用域
17JavaWeb基础 - JSP的九大内置对象/四大作用域
151 0
|
存储 前端开发 Java
JavaWeb基础6——Request,Response,JSP&MVC
Request继承体系、获取请求头行体的方法、IDEA使用模板创建Servlet、请求参数中文乱码解决、请求转发、Respones重定向、Response响应字节字符数据、JSP、EL 表达式、JSTL标签、MVC模式和三层架构
JavaWeb基础6——Request,Response,JSP&MVC
|
前端开发 JavaScript Java
Jsp在Javaweb中扮演什么角色?
Jsp在Javaweb中扮演什么角色?
|
SQL druid Java
javaweb案例实训之基于jsp和servlet的用户管理开发[增删改查及登录注销]
javaweb案例实训之基于jsp和servlet的用户管理开发[增删改查及登录注销]
96 0
|
SQL 数据可视化 数据库
基于jsp+servlet的javaweb实现最基本的用户注册登陆注销功能
基于jsp+servlet的javaweb实现最基本的用户注册登陆注销功能
118 0
|
存储 前端开发 Java
JavaWeb:servlet+jsp+mybatis商品管理增删改查
商品管理通常包括增加(添加)、删除、修改和查询商品信息
332 2
JavaWeb:servlet+jsp+mybatis商品管理增删改查
|
SQL 缓存 Oracle
JavaWeb之JSP(下)
这篇文档是关于Java Web中JSP(Java Server Pages)技术的主要内容包括:JSP的常用命令使用,EL表达式的概念,和使用,JSTL表达式的概念和使用方式的总结.