程序员经验分享-hwhale

JavaWeb阶段综合案例

2023-10-26

文章目录

综合案例

今日目标：

  • 能够完成查询所有功能
  • 能够完成添加功能
  • 能够理解 BaseServlet 思想
  • 能够完成批量删除功能
  • 能够完成分页查询功能
  • 能够完成条件查询功能

1，功能介绍

在这里插入图片描述

以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有一些复杂的功能，如 批量删除、分页查询、条件查询 等功能

  • 批量删除 功能：每条数据前都有复选框，当我选中多条数据并点击 批量删除 按钮后，会发送请求到后端并删除数据库中指定的多条数据。
  • 分页查询 功能：当数据库中有很多数据时，我们不可能将所有的数据展示在一页里，这个时候就需要分页展示数据。
  • 条件查询 功能：数据库量大的时候，我们就需要精确的查询一些想看到的数据，这个时候就需要通过条件查询。

这里的 修改品牌 和 删除品牌 功能在课程上不做讲解，留作同学来下的练习。

2，环境准备

环境准备我们主要完成以下两件事即可

  • 将资料的 brand-case 模块导入到 idea中
  • 执行资料中提供的 tb_brand.sql脚本

2.1 工程准备

将 04-资料\01-初始工程 中的 brand-case 工程导入到我们自己的 idea 中。工程结构如下：

在这里插入图片描述

2.2 创建表

下面是创建表的语句

-- 删除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 
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1);

3，查询所有功能

在这里插入图片描述

如上图所示是查询所有品牌数据在页面展示的效果。要实现这个功能，要先搞明白如下问题：

  • 什么时候发送异步请求？

    页面加载完毕后就需要在页面上看到所有的品牌数据。所以在 mounted() 这个构造函数中写发送异步请求的代码。

  • 请求需要携带参数吗？

    查询所有功能不需要携带什么参数。

  • 响应的数据格式是什么样？

    后端是需要将 List<Brand> 对象转换为 JSON 格式的数据并响应回给浏览器。响应数据格式如下：

    在这里插入图片描述

整体流程如下

在这里插入图片描述

我们先实现后端程序，然后再实现前端程序。

3.1 后端实现

3.1.1 dao方法实现

在 com.itheima.mapper.BrandMapper 接口中定义抽象方法，并使用 @Select 注解编写 sql 语句

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

由于表中有些字段名和实体类中的属性名没有对应，所以需要在 com/itheima/mapper/BrandMapper.xml 映射配置文件中定义结果映射 ，使用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 property="brandName" column="brand_name" />
        <result property="companyName" column="company_name" />
    </resultMap>
</mapper>

定义完结果映射关系后，在接口 selectAll() 方法上引用该结构映射。使用 @ResultMap("brandResultMap") 注解

完整接口的 selectAll() 方法如下：

/**
     * 查询所有
     * @return
     */
@Select("select * from tb_brand")
@ResultMap("brandResultMap")
List<Brand> selectAll();
3.1.2 service方法实现

在 com.itheima.service 包下创建 BrandService 接口，在该接口中定义查询所有的抽象方法

public interface BrandService {
   

    /**
     * 查询所有
     * @return
     */
    List<Brand> selectAll();
}

并在 com.itheima.service 下再创建 impl 包；impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 BrandServiceImpl 类

public class BrandServiceImpl implements BrandService {
   

    @Override
    public List<Brand> selectAll() {
   
    }
}

此处为什么要给 service 定义接口呢？因为service定义了接口后，在 servlet 中就可以使用多态的形式创建Service实现类的对象，如下：

在这里插入图片描述

这里使用多态是因为方便我们后期解除 Servlet 和 service 的耦合。从上面的代码我们可以看到 SelectAllServlet 类和 BrandServiceImpl 类之间是耦合在一起的，如果后期 BrandService 有其它更好的实现类（例如叫 BrandServiceImpl），那就需要修改 SelectAllServlet 类中的代码。后面我们学习了 Spring 框架后就可以解除 SelectAllServlet 类和红色框括起来的代码耦合。而现在咱们还做不到解除耦合，在这里只需要理解为什么定义接口即可。

BrandServiceImpl 类代码如下：

public class BrandServiceImpl implements BrandService {
   
    //1. 创建SqlSessionFactory 工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    @Override
    public List<Brand> selectAll() {
   
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

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

        //5. 释放资源
        sqlSession.close();

        return brands;
    }
}
3.1.3 servlet实现

在 com.itheima.web.servlet 包下定义名为 SelectAllServlet 的查询所有的 servlet。该 servlet 逻辑如下：

  • 调用service的 selectAll() 方法查询所有的品牌数据，并接口返回结果
  • 将返回的结果转换为 json 数据
  • 响应 json 数据

代码如下：

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
   

    private BrandService brandService = new BrandServiceImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
        //1. 调用service查询
        List<Brand> brands = brandService.selectAll();
        //2. 转为JSON
        String jsonString = JSON.toJSONString(brands);
        //3. 写数据
        response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
        this.doGet(request, response);
    }
}
3.1.4 测试后端程序

在浏览器输入访问 servlet 的资源路径 http://localhost:8080/brand-case/selectAllServlet ，如果没有报错，并能看到如下信息表明后端程序没有问题

在这里插入图片描述

3.2 前端实现

前端需要在页面加载完毕后发送 ajax 请求，所以发送请求的逻辑应该放在 mounted() 钩子函数中。而响应回来的数据需要赋值给表格绑定的数据模型，从下图可以看出表格绑定的数据模型是 tableData

在这里插入图片描述

前端代码如下：

 mounted(){
   
     //当页面加载完成后，发送异步请求，获取数据
     var _this = this;

     axios({
   
         method:"get",
         url:"http://localhost:8080/brand-case/selectAllServlet"
     }).then(function (resp) {
   
         _this.tableData = resp.data;
     })
 }

4，添加功能

在这里插入图片描述

上图是添加数据的对话框，当点击 提交 按钮后就需要将数据提交到后端，并将数据保存到数据库中。下图是整体的流程：

在这里插入图片描述

页面发送请求时，需要将输入框输入的内容提交给后端程序，而这里是以 json 格式进行传递的。而具体的数据格式如下：

在这里插入图片描述

注意：由于是添加数据，所以上述json数据中id是没有值的。

4.1 后端实现

4.1.1 dao方法实现

在 BrandMapper 接口中定义 add() 添加方法，并使用 @Insert 注解编写sql语句

/**
     * 添加数据
     * @param brand
     */
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);
4.1.2 service方法实现

在 BrandService 接口中定义 add() 添加数据的业务逻辑方法

/**
     * 添加数据
     * @param brand
     */
void add(Brand brand);

在 BrandServiceImpl 类中重写 add() 方法，并进行业务逻辑实现

@Override
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();//提交事务

    //5. 释放资源
    sqlSession.close();
}

注意：增删改操作一定要提交事务。

4.1.3 servlet实现

在 com.itheima.web.servlet 包写定义名为 AddServlet 的 Servlet。该 Servlet 的逻辑如下：

  • 接收页面提交的数据。页面到时候提交的数据是 json 格式的数据，所以此处需要使用输入流读取数据
  • 将接收到的数据转换为 Brand 对象
  • 调用 service 的 add() 方法进行添加的业务逻辑处理
  • 给浏览器响应添加成功的标识，这里直接给浏览器响应 success 字符串表示成功

servlet 代码实现如下：

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
   

    private BrandService brandService = new BrandServiceImpl();

    @Override
    protected void
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javaweb

JavaWeb阶段综合案例 的相关文章

随机推荐

  • 太阳能板最大面积

    题目描述 给航天器一侧加装长方形或正方形的太阳能板 图中的红色斜线区域 需要先安装两个支柱 图中的黑色竖条 再在支柱的中间部分固定太阳能板 但航天器不同位置的支柱长度不同 太阳能板的安装面积受限于最短一侧的那根支柱长度 如图 现提供一组整形

  • HTTPS阿里云免费SSL证书申请教程来了（白嫖指南）

    阿里云免费SSL证书是digicert品牌的DV单域名证书 一个阿里云账号一年可以申请20张免费SSL证书 免费SSL证书是在阿里云数字证书管理服务控制台申请的 阿里云百科来详细说下阿里云免费SSL证书申请方法 证书下载及第二年到期续费说明

  • 定位城市+iOS8 定位问题

    在IOS8中定位功能新增了两个方法 void requestWhenInUseAuthorization OSX AVAILABLE STARTING MAC NA IPHONE 8 0 void requestAlwaysAuthoriz

  • python 关于git下unix和windows换行符不同导致稍微改动一行代码git diff就是全部文件对比的解决方案

    背景 家里的电脑是用来打游戏的 配置也还可以 windows的 偶尔也会用来写写代码 公司是mac pycharm的默认配置 Pycharm Settings Editor Code Style Line separator是Classis

  • 如何快乐地检测SQL注入

    这估计大家也都发现了 测试SQL注入这种漏洞啊 又有WAF页面又没有明显的报错的情况下 测试起来就是一个字 烦 有waf 我 and 1 1 啪 它拦了 我 order by 啪 它拦了 我 sleep 5 啪 它拦了 我 benchmar

  • 高阶数据结构之红黑树

    文章目录 红黑树 红黑树的性质 红黑树的定义 红黑树的插入 情况一 插入节点的父节点为红 祖父节点为黑 叔叔节点存在且为红 情况二 当前节点的父节点为红 祖父节点为黑 叔叔节点不存在或者为黑 红黑树的验证 验证是否是二叉搜索树 验证是否遵循

  • 软件静态测试

    软件静态测试 7 1 静态测试概念 通常是指不执行程序代码而寻找代码中可能存在的错误或评估程序代码的过程 7 2 静态测试测试对象 各种与软件相关的有必要进行测试的产物 比如各类文档 源代码等 7 3 静态测试的特点 1 不必动态地运行程序

  • 数据库第二章关系模型xjtu

    关系模式 关系模式的构成要素 数据结构 数据操作 完整性约束 一些定义 examples 定义2 1 域 domain 是一组值的集合 同一个域中的所有值均应具有相同的数据类型 例2 1 D1 袁玲 吴丹 刘杰 姓名域 D2 男 女 性别域

  • WPF 控件专题 PasswordBox控件详解

    1 PasswordBox 介绍 PasswordBox 密码输入控件 PasswordBox 具有对浮泡 MouseUp 和 MouseDown 事件的内置处理 因此 永远不会调用侦MouseUp听或从中PasswordBox侦听事件的M

  • ubuntu 16.04安装pypbc库

    PBC是密码学中计算双线性对的C库 对于双线性对运算具有很大的帮助 在python中同样在有着双线性对运算的库 名为pypbc 该库具有很多依赖项 安装前需要按照顺序依次安装 本文从一台新安装的ubuntu 16 04虚拟机开始 接下来演示

  • 对Spring 控制反转和依赖注入的理解

    IOC inversion of control 控制反转 DI Dependency Injection 依赖注入 要理解这两个概念 首先要搞清楚以下几个问题 1 参与者都有谁 2 依赖 谁依赖于谁 为什么需要依赖 3 注入 谁注入于谁

  • 【ES6】异步编程Ajax、Callback Hell与Promise、Generator的完全指北

    文章目录 前言 一 异步操作前置知识 1 JS是单线程的 2 同步任务 异步任务 3 Ajax原理 4 Callback Hell 二 Promise 面试必考 1 原理 2 Promise的用法 3 Promise执行顺序 4 Promi

  • VBA—EXCEL操作集合—04

    大家好 我接着给大家去介绍VBA的一些小功能 希望对大家在平时的工作中能有所帮助 我文章中的代码都是经过调试过的 复制过去是可以直接运行的 欢迎大家复制使用 在我们实际工作中 经常要面临处理各种数据表格 里面有一个小功能就是 我如何能获取到

  • Hive分区表

    1 为什么设立分区表 在大量数据需要查询时 虽然可以通过where进行筛选 但也是检索整个数据表后得到的结果 而将一个大的数据集根据实际需要分割成各个小型数据集 再通过where选择需要查询的分区 故而效率大大提高 2 分区表实质 Hive

  • C++ std::mutex 用法详解

    Mutex 又称互斥量 C 11中与 Mutex 相关的类 包括锁类型 和函数都声明在 头文件中 所以如果你需要使用 std mutex 就必须包含 头文件 头文件介绍 Mutex 系列类 四种 std mutex 最基本的 Mutex 类

  • Unity调取本地浏览器打开网页

    第一种方式 System Diagnostics Process Start http www 3dmomoda com thingdepot 可以自己选择浏览器 也可以用系统设置的默认浏览器 默认浏览器就不需要传入 IExplore ex

  • 基于Star UML3.1版本的课程结业设计餐饮管理系统

    课程论文报告 教 学 院 计算机学院 课程名称 UML建模技术 题 目 餐饮管理系统 专 业 计算机科学与技术 班 级 学 号 姓 名 指导教师 2021 年 6 月 20 日 引言 随着社会的进步 人民生活水平的不断提高 餐饮酒店以及学校

  • C语言中 数组名 与 ”&数组名” 的区别

    1 测试代码 include

  • 贴吧照片和酷狗音乐简单爬取

    爬取的基本步骤 很简单 主要是两大步 向url发起请求 这里注意找准对应资源的url 如果对应资源不让程序代码访问 这里可以伪装成浏览器发起请求 解析上一步返回的源代码 从中提取想要的资源 这里解析看具体情况 一般是筛选标签之中的信息或者资

  • JavaWeb阶段综合案例

    文章目录 综合案例 1 功能介绍 2 环境准备 2 1 工程准备 2 2 创建表 3 查询所有功能 3 1 后端实现 3 1 1 dao方法实现 3 1 2 service方法实现 3 1 3 servlet实现 3 1 4 测试后端程序

热门标签