JSP开发2（案例）

学习目标
学习内容
学习产出
1 环境准备
- 1.1 创建工程
- 1.2 创建包
- 1.3 创建表
- 1.4 创建实体类
- 1.5 准备mybatis环境
2 查询所有
- 2.1 编写BrandMapper
- 2.2编写SqlSessionFactoryUtils工具类
- 2.3 编写BrandService
- 2.4 编写Servlet
- 2.5 编写JSP页面
3 添加
- 3.1 编写BrandMapper方法
- 3.2 编写BrandService
- 3.3 编写brand.jsp
- 3.4 编写addBrand.jsp
- 3.5 编写addServlet
- 3.6 测试
4 修改
- 4.1 回显
- - 4.1.1 编写BrandMapper方法
  - 4.1.2 编写BrandService
  - 4.1.3 编写SelectByIdServlet
  - 4.1.4 编写update.jsp页面
  - 4.1.5 回显测试
  - 4.1.6 改进
- 4.2 修改数据
- - 4.2.1 编写BrandMapper
  - 4.2.2 编写BrandService
  - 4.2.3 编写Servlet
  - 4.2.4 测试
5 删除
- 5.1 编写BrandMapper
- 5.2 编写BrandService
- 5.3 编写DeleteServlet

学习目标

理解 JSP 及 JSP 原理
能在 JSP中使用 EL表达式和 JSTL标签
理解 MVC模式和三层架构
能完成品牌数据的增删改查功能

学习内容

能完成品牌数据的增删改查功能

学习产出 1 环境准备

环境准备工作，我们分以下步骤实现：

创建新的模块 brand_demo，引入坐标
创建三层架构的包结构
数据库表 tb_brand
实体类 Brand
MyBatis 基础环境
- Mybatis-config.xml
- BrandMapper.xml
- BrandMapper接口

1.1 创建工程

创建好工程，在pom.xml文件中，导入各种jar包。



    4.0.0

    org.example
    brand-demo
    1.0-SNAPSHOT

    war

    
        8
        8
    
    
        
            
            org.mybatis
            mybatis
            3.5.5
        
        
        
            mysql
            mysql-connector-java
            5.1.34
        
        
        
            javax.servlet
            javax.servlet-api
            3.1.0
            provided
        
        
        
            javax.servlet.jsp
            jsp-api
            2.2
            provided
        
        
        
            jstl
            jstl
            1.2
        
        
            taglibs
            standard
            1.1.2
        
    
    
        
           
            
                org.apache.tomcat.maven
                tomcat7-maven-plugin
                2.2

1.2 创建包

根据结构创建不同的包

1.3 创建表

-- 删除tb_brand表
drop table if exists tb_brand;
-- 创建tb_brand表
create table tb_brand
(
    -- id 主键
    id           int primary key auto_increment,
    -- 品牌名称
    brand_name   varchar(20),
    -- 企业名称
    company_name varchar(20),
    -- 排序字段
    ordered      int,
    -- 描述信息
    description  varchar(100),
    -- 状态：0：禁用  1：启用
    status       int
);
-- 添加数据
insert into tb_brand (brand_name, company_name, ordered, description, status)
values ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '华为致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1);

1.4 创建实体类

在 pojo 包下创建名为 Brand 的类。

public class Brand {
    // id 主键
    private Integer id;
    // 品牌名称
    private String brandName;
    // 企业名称
    private String companyName;
    // 排序字段
    private Integer ordered;
    // 描述信息
    private String description;
    // 状态：0：禁用  1：启用
    private Integer status;
    
    public Brand() {
    }

    public Brand(Integer id, String brandName, String companyName, String description) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.description = description;
    }

    public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.ordered = ordered;
        this.description = description;
        this.status = status;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getBrandName() {
        return brandName;
    }

    public void setBrandName(String brandName) {
        this.brandName = brandName;
    }

    public String getCompanyName() {
        return companyName;
    }

    public void setCompanyName(String companyName) {
        this.companyName = companyName;
    }

    public Integer getOrdered() {
        return ordered;
    }

    public void setOrdered(Integer ordered) {
        this.ordered = ordered;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    @Override
    public String toString() {
        return "Brand{" +
                "id=" + id +
                ", brandName='" + brandName + ''' +
                ", companyName='" + companyName + ''' +
                ", ordered=" + ordered +
                ", description='" + description + ''' +
                ", status=" + status +
                '}';
    }
}

1.5 准备mybatis环境

定义核心配置文件 Mybatis-config.xml ，并将该文件放置在 resources 下

在 resources 下创建放置映射配置文件的目录结构 com/itheima/mapper，并在该目录下创建映射配置文件 BrandMapper.xml

2 查询所有

当我们点击页面中的查询所有这个超链接时，就能查询到数据库中的所有数据。

2.1 编写BrandMapper

在mapper包下编写BrandMapper接口

 
    @Select("select * from tb_brand")
    List selectAll();

2.2编写SqlSessionFactoryUtils工具类

package com.zpd.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

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

2.3 编写BrandService

在 service 包下创建 BrandService 类

Service层中调用brandMapper

public class BrandService {
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    
    public List selectAll(){
        //调用BrandMapper.selectAll()

        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        List brands = mapper.selectAll();

        sqlSession.close();

        return brands;
    }
}

2.4 编写Servlet

在 web 包下创建名为 SelectAllServlet 的 servlet，该 servlet 的逻辑如下：

调用 BrandService 的 selectAll() 方法进行业务逻辑处理，并接收返回的结果
将上一步返回的结果存储到 request 域对象中
跳转到 brand.jsp 页面进行数据的展示

作用：接受html中的数据，并转发给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 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);
    }
}

2.5 编写JSP页面

创建brand.jsp文件，将资料中的brand.html中的代码粘贴到webapp中
brand.jsp

<%--
  Created by IntelliJ IDEA.
  User: zpd
  Date: 2022/5/18
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


    zpd






        
                
                
    
        序号
        品牌名称
        企业名称
        排序
        品牌介绍
        状态
        操作

        
    
            ${num.count}
            ${b.brandName}
            ${b.companyName}
            ${b.ordered}
            ${b.description}
            启用
            
            禁用
            

            修改 删除

序号	品牌名称	企业名称	排序	品牌介绍	状态	操作
${num.count}	${b.brandName}	${b.companyName}	${b.ordered}	${b.description}	启用	禁用	修改删除

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

会发现两个问题，表格的大小不合适，品牌名称和企业名称没有，这是因为查询到的字段名和实体类对象的属性名没有一一对应，在映射配置文件中使用resultmap标签定义映射关系。
brandMapper.xml

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

@Select("select * from tb_brand")
@ResultMap("brandResultMap")
List selectAll();

将brand.jsp中的table标签中width改为1100
重新启动服务器，选择查询所有，就会出现

3 添加

点击新增按钮后会跳转到addBrand.jsp，在对应的文本框输入内容，选择对应的按钮，点击提交，需要将数据提交到后端，而后端进行数据添加操作，并重新将所有的数据查询出来。

3.1 编写BrandMapper方法

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

3.2 编写BrandService

添加add方法，将最后封装成的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();

3.3 编写brand.jsp

在brand.jsp文件中的新增标签中添加add的id

在下面编写Javascript语言，当点击新增按钮时，可以进行跳转页面，跳转到，addBrabd.jsp页面（资料中有addBrand.html）

3.4 编写addBrand.jsp

在addBrand.jsp其中的包含有form标签，将表单中填写的数据提交到addServlet中

<%--
  Created by IntelliJ IDEA.
  User: zpd
  Date: 2022/5/18
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


    zpd







        
                
                
    
        序号
        品牌名称
        企业名称
        排序
        品牌介绍
        状态
        操作

        
    
            ${num.count}
            ${b.brandName}
            ${b.companyName}
            ${b.ordered}
            ${b.description}
            启用
            
            禁用
            

            修改 删除

序号	品牌名称	企业名称	排序	品牌介绍	状态	操作
${num.count}	${b.brandName}	${b.companyName}	${b.ordered}	${b.description}	启用	禁用	修改删除

3.5 编写addServlet

addServlet是对addBrand.jsp表单中的数据进行封装处理，先根据getParameter方法对表单中的各项内容进行获取，然后封装成Brand对象
调用Servlet方法进行添加

package com.zpd.web;

import com.zpd.pojo.Brand;
import com.zpd.service.BrandService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService service = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        //接受表单的数据，封装成一个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);
    }
}

3.6 测试

重启服务器，进入到浏览器中，显示

点击查询所有

点击新增，进入到addBrand.jsp

点击提交会自动跳转到查询所有的界面

这里出现的是乱码，是因为表单采用的是post提交的方法，需要进行字符集的转换，在addBrand中添加

将数据库中的乱码数据删除并提交

重启服务器并重新进行添加，最后在界面会正常显示

在数据库中也会显示出新添加的数据

4 修改

当点击查询所有界面中的修改按钮后跳转到update.jsp界面，在界面中会回显出对应id的所有内容，然后可以根据数据进行修改，点击提交后，修改的数据会进行修改。后端将修改成功的数据提交到数据库中。

在brand.jsp中，对对应的标签进行修改，修改里面包含本条数据对应的id，通过SelectByIdServlet来获取，并在SelectByIdServlet中将得到的id数据转发到update.jsp中。


修改
删除

4.1 回显

那当点击修改按钮时不能直接跳转到 update.jsp 页面，而是需要先带着当前行数据的 id 请求后端程序，后端程序根据 id 查询数据，将数据存储到域对象中跳转到 update.jsp 页面进行数据展示。

依旧按照上面的正常的思路来写，先编写BrandMapper，然后BrandService来调用方法，

4.1.1 编写BrandMapper方法

按照正常的思路来写，在 BrandMapper 接口，在接口中定义 selectById(int id) 方法

    
    @Select("select * from tb_brand where id = #{id}")
    Brand selectById(int id);

4.1.2 编写BrandService

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

4.1.3 编写SelectByIdServlet

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

获取请求数据 id
调用 BrandService 的 selectById() 方法进行数据查询的业务逻辑
将查询到的数据存储到 request 域对象中
跳转到 update.jsp 页面进行数据真实

package com.zpd.web;

import com.zpd.pojo.Brand;
import com.zpd.service.BrandService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

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

4.1.4 编写update.jsp页面

内容和addBrand.jsp中的代码差不多，但是需要点击修改就需要根据id来查询数据库，将内容回显到addBrand.jsp中

input 标签要进行数据回显，需要设置 value 属性
textarea 标签要进行数据回显，需要在标签体中使用 EL表达式
单选框使用 if 标签需要判断 brand.status 的值是 1 还是 0 在指定的单选框上使用 checked 属性，表示被选中状态
总体代码：

<%--
  Created by IntelliJ IDEA.
  User: zpd
  Date: 2022/5/25
  Time: 16:53
  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" %>


    update


修改品牌

    品牌名称：

    企业名称：

    排序：

    描述信息：${brand.description}

    状态：
    
        禁用
        启用

    
    
        禁用
        启用

4.1.5 回显测试

按照正常的步骤进入修改，发现brandName和companyName没有回显出

看上方的地址栏可以看出，在跳转页面的同时，将对应的id也会显示出

4.1.6 改进

brandName和companyName没有回显出，是因为查询到的字段名和实体类对象的属性名没有一一对应，在映射配置文件中使用resultmap标签定义映射关系。
在上面编写查询所有的方法时已经编写过对应的标签，直接在BrandMapper中selectById上方添加@ResultMap注解

    @Select("select * from tb_brand where id = #{id}")
    @ResultMap("brandResultMap")
    Brand selectById(int id);

重启服务器，重新进行测试

4.2 修改数据

4.2.1 编写BrandMapper

在BrandMapper中添加update方法，根据id值进行set修改，

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

4.2.2 编写BrandService

在BrandService中调用BrandMapper中的update方法，和添加区别不大，依旧需要提交事务。

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

    }

4.2.3 编写Servlet

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

设置处理post请求乱码的字符集
接收客户端提交的数据
将接收到的数据封装到 Brand 对象中
调用 BrandService 的update() 方法进行添加的业务逻辑处理
跳转到 selectAllServlet 资源重新查询数据

这次修改的代码比新增的代码中多获取了一个id，并将id封装成brand对象，在BrandMapper中根据id进行修改。

package com.zpd.web;

import com.zpd.pojo.Brand;
import com.zpd.service.BrandService;

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("/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");
        //接受表单的数据，封装成一个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的数据展现给用户观看，所以在update.jsp中添加一个隐藏域

<%--隐藏域，提交id--%>

update.jsp的最终代码为

<%--
  Created by IntelliJ IDEA.
  User: zpd
  Date: 2022/5/25
  Time: 16:53
  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" %>


    update


修改品牌

    <%--
        隐藏域，提交id
    --%>
    

    品牌名称：

    企业名称：

    排序：

    描述信息：${brand.description}

    状态：
    
        禁用
        启用

    
    
        禁用
        启用

4.2.4 测试

重启服务器，进行修改的测试

根图可以看出修改成功。

5 删除

删除的功能非常简单，也是根据id进行删除的
在brand.jsp中删除对应的标签，需要在点击删除时对id进行获取，并通过sql语句删除对应的数据。

  删除

5.1 编写BrandMapper

在BrandMapper中添加delete方法

    @Delete("delete from tb_brand where id = #{id}")
    void delete(int id);

5.2 编写BrandService

在BrandService中调用delete方法，进行删除

    
    public void delete(int id){
        //获取sqlSession
        SqlSession sqlSession = factory.openSession();
        //获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        mapper.delete(id);
        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
    }

5.3 编写DeleteServlet

跟SelectByIdServlet差不多，都需要根据id

一个是根据id来查询，这个是根据id来删除。
并且不需要返回任何对象
直接调用方法执行，执行完后返回selectAllServlet

package com.zpd.web;

import com.zpd.pojo.Brand;
import com.zpd.service.BrandService;

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("/deleteServlet")
public class DeleteServlet 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删除
        service.delete(Integer.parseInt(id));
        //3.转发到查询所有的Servlet
        request.getRequestDispatcher("/selectAllServlet").forward(request, response);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

JSP开发2（案例）

Java相关栏目本月热门文章