Java课题笔记~ 综合案例

3.综合案例

3.1 功能介绍

 

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

  • 批量删除 功能：每条数据前都有复选框，当我选中多条数据并点击 批量删除 按钮后，会发送请求到后端并删除数据库中指定的多条数据。

  • 分页查询 功能：当数据库中有很多数据时，我们不可能将所有的数据展示在一页里，这个时候就需要分页展示数据。

  • 条件查询 功能：数据库量大的时候，我们就需要精确的查询一些想看到的数据，这个时候就需要通过条件查询。

3.2 环境准备

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

  • 将静态页面导入到 idea中

  • 执行资料中提供的 tb_brand.sql脚本

3.2.1 工程准备

创建SpringBoot项目brand-case，把静态页面复制到resources/static目录下。

3.2.2 创建表

下面是tb_brand.sql脚本中创建表的语句

-- 删除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.3 查询所有功能

 

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

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

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

  • 请求需要携带参数吗？

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

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

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

 

整体流程如下

 

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

3.3.1 后端实现

3.3.1.1 dao方法实现

在 com.ambow.mapper.BrandMapper 接口中定义抽象方法，同时在接口上添加@Mapper注解，并使用 @Select 注解编写 sql 语句

@Mapper
public interface BrandMapper {/*** 查询所有* @return*/@Select("select * from tb_brand")List<Brand> selectAll();
}

由于表中有些字段名和实体类中的属性名没有对应，所以需要在 com/ambow/mapper/BrandMapper.xml 映射配置文件中定义结果映射 ，使用resultMap 标签。映射配置文件内容如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ambow.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() 方法如下：

@Mapper
public interface BrandMapper {/*** 查询所有* @return*/@Select("select * from tb_brand")@ResultMap("brandResultMap")List<Brand> selectAll();
}
3.3.1.2 service方法实现

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

public interface BrandService {/*** 查询所有* @return*/List<Brand> findAll();
}

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

BrandServiceImpl 类代码如下：

@Service
public class BrandServiceImpl implements BrandService {@Autowiredprivate BrandMapper brandMapper;@Overridepublic List<Brand> findAll() {return brandMapper.selectAll();;}
}
3.3.1.3 controller实现

在 com.ambow.controller 包下定义名为 BrandController 的控制器类。并在其中定义findAll()方法 该方法逻辑如下：

  • 调用service的 findAllAll() 方法查询所有的品牌数据

  • 将获取的品牌集合List<Brand>，以JSON形式返回。

代码如下：

@RestController
@RequestMapping("/brand")
public class BrandController {@Autowiredprivate BrandService brandService;@RequestMapping("/findAll")public List<Brand> findAll(){return brandService.findAll();}}
3.3.1.4 测试后端程序

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

 

3.3.2 前端实现

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

 

前端代码如下：

mounted(){//当页面加载完成后，发送异步请求，获取数据var _this = this;axios({method:"get",url:"http://localhost:8080/brand-case/findAll"}).then(function (resp) {_this.tableData = resp.data;})}

3.4 添加功能

 

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

 

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

 

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

3.4.1 后端实现

3.4.1.1 dao方法实现

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

/*** 添加数据* @param brand*/@Insert("insert into tb_brand (brand_name,company_name,ordered,description,status) values(#{brandName},#{companyName},#{ordered},#{description},#{status})")int insertBrand(Brand brand);
3.4.1.2 service方法实现

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

/*** 添加数据* @param brand*/
boolean addBrand(Brand brand);

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

@Override
public boolean addBrand(Brand brand) {return (brandMapper.insertBrand(brand) == 1)?true:false;
}
3.4.1.3 controller实现

在 com.ambow.controller 包中的BrandController中定义名为 addBrand 的方法。该方法的逻辑如下：

  • 接收页面提交的数据。页面到时候提交的数据是 json 格式的数据

  • 将接收到的数据转换为 Brand 对象

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

  • 给浏览器响应添加成功的标识，这里直接给浏览器响应 true 表示成功

代码实现如下：

@PostMapping("/addBrand")
public boolean addBrand(@RequestBody Brand brand){return brandService.addBrand(brand);
}
​

3.4.2 前端实现

 

上图左边是页面效果，里面的 提交 按钮可以通过上图右边看出绑定了一个 单击事件，而该事件绑定的是 addBrand 函数，所以添加数据功能的逻辑代码应该写在 addBrand() 函数中。在此方法中需要发送异步请求并将表单中输入的数据作为参数进行传递。如下

// 添加数据
addBrand() {var _this = this;// 发送ajax请求，添加数据axios({method:"post",url:"http://localhost:8080/brand-case/addBrand",data:_this.brand}).then(function (resp) {//响应数据的处理逻辑})
}

在 then 函数中的匿名函数是成功后的回调函数，而 resp.data 就可以获取到响应回来的数据，如果值是 success 表示数据添加成功。成功后我们需要做一下逻辑处理：

  1. 关闭新增对话框窗口

    如下图所示是添加数据的对话框代码，从代码中可以看到此对话框绑定了 dialogVisible 数据模型，只需要将该数据模型的值设置为 false，就可以关闭新增对话框窗口了。

  3. 重新查询数据

    数据添加成功与否，用户只要能在页面上查看到数据说明添加成功。而此处需要重新发送异步请求获取所有的品牌数据，而这段代码在 查询所有 功能中已经实现，所以我们可以将此功能代码进行抽取，抽取到一个 selectAll() 函数中

    // 查询所有数据
selectAll(){var _this = this;axios({method:"get",url:"http://localhost:8080/brand-case/findAll"}).then(function (resp) {_this.tableData = resp.data;})
}

    那么就需要将 mounted() 钩子函数中代码改进为

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

    同时在新增响应的回调中调用 selectAll() 进行数据的重新查询。

  4. 弹出消息给用户提示添加成功

  5. 上图左边就是 elementUI 官网提供的成功提示代码，而上图右边是具体的效果。

    ==注意：上面的this需要的是表示 VUE 对象的this。==

综上所述，前端代码如下：

 

// 添加数据
addBrand() {var _this = this;// 发送ajax请求，添加数据axios({method:"post",url:"http://localhost:8080/brand-case/addServlet",data:_this.brand}).then(function (resp) {if(resp.data == "success"){//添加成功//关闭窗口_this.dialogVisible = false;// 重新查询数据_this.selectAll();// 弹出消息提示_this.$message({message: '恭喜你，添加成功',type: 'success'});}})
}
 












本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/90239.html


如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！












相关文章










LeetCode 热题 100（七）：105. 从前序与中序遍历序列构造二叉树、14. 二叉树展开为链表








LeetCode 热题 100（七）：105. 从前序与中序遍历序列构造二叉树、14. 二叉树展开为链表




题目一&#xff1a; 105. 从前序与中序遍历序列构造二叉树https://leetcode.cn/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 
思路&#xff1a;依据前序遍历的根左右和中序遍历的左根右&#xff0c; 且根左长度&#xff1d;左根 
代码&#xff1a; 
…




阅读更多...

















uniapp的 picker 日期时间选择器








uniapp的 picker 日期时间选择器




效果图&#xff1a;  
dateTimePicker.js 
function withData(param){return param < 10 ? 0  param :   param;
}
function getLoopArray(start,end){var start  start || 0;var end  end || 1;var array  [];for (var i  start; i < end; i) {array.push(withData(i))…




阅读更多...

















Flutter：getX的学习








Flutter：getX的学习




前言 
学习教程&#xff1a;Getx教程_FlutterGetx系列实战教程 
简介 getX是第三方的状态管理插件&#xff0c;不仅具有状态管理的功能&#xff0c;还具有路由管理、主题管理、国际化多语言管理、网络请求、数据验证等功能。相比其他状态管理组件&#xff0c;getX简单、功能强大…




阅读更多...

















Node爬虫项目精简版 wallhaven网站实操 2023.8.29








Node爬虫项目精简版 wallhaven网站实操 2023.8.29




练习地址&#xff1a; https://wallhaven.cc/toplist const express  require(express);
const axios  require(axios);
const cheerio  require(cheerio);
const schedule  require(node-schedule);
const fs  require(fs);async function downloadImage(url) {const response…




阅读更多...

















漏洞发现-web应用发现探针类型利用








漏洞发现-web应用发现探针类型利用




关于在真实环境下面&#xff0c;这个漏洞该如何发现 
这里老师把它分成了三块第一类是 
#已知cms 
如常见的dedecms&#xff0c;discuz&#xff0c;wordpress等源码结构&#xff0c;这些都是网上比较知名的php源码的cms的名称&#xff0c;这是我们在国内常见的几个程序&#xf…




阅读更多...

















WPF基础入门-Class5-WPF命令








WPF基础入门-Class5-WPF命令




WPF基础入门 
Class5-WPF命令 
1、xaml编写一个button&#xff0c;Command绑定一个命令 
<Grid><ButtonWidth"100"Height"40" Command"{Binding ShowCommand}"></Button>
</Grid>2、编写一个model.cs 
namespace WPF_Le…




阅读更多...

















华为OD机试 - 数字序列比大小 - 贪心算法（Java 2023 B卷 100分）








华为OD机试 - 数字序列比大小 - 贪心算法（Java 2023 B卷 100分）




目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 一、题目描述 
A&#xff0c;B两个人万一个数字比大小的游戏&#xff0c;在游戏前&#xff0c;两个人会拿…




阅读更多...

















【Unity】常见的角色移动旋转








【Unity】常见的角色移动旋转




在Unity 3D游戏引擎中&#xff0c;可以使用不同的方式对物体进行旋转。以下是几种常见的旋转方式&#xff1a; 欧拉角&#xff08;Euler Angles&#xff09;&#xff1a;欧拉角是一种常用的旋转表示方法&#xff0c;通过绕物体的 X、Y 和 Z 轴的旋转角度来描述物体的旋转。在Un…




阅读更多...

















Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em








Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em




​ 鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 
1. 项目背景 
一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工…




阅读更多...

















【LeetCode-中等题】230. 二叉搜索树中第K小的元素








【LeetCode-中等题】230. 二叉搜索树中第K小的元素




文章目录 题目方法一&#xff1a;层序遍历  集合排序方法二&#xff1a;中序遍历&#xff08;栈 或者 递归 &#xff09;方法三&#xff08;方法二改进&#xff09;&#xff1a;中序遍历&#xff08;栈 &#xff09; 题目 该题最大的特点就是这个树是二叉树&#xff1a;  
所以…




阅读更多...

















C语言：递归思想及实例详解








C语言：递归思想及实例详解




简介&#xff1a;在计算机科学中是指一种通过重复将问题分解为同类的子问题而解决问题的方法。通过函数的自调用化繁为简。 
递归可以说是编程中最神奇的一种算法。因为我们有时候可能不能完全明晰代码的运行过程&#xff0c;但是我们却知道代码可以跑出正确的结果。而当我们使…




阅读更多...

















高等职业学校物联网实训室建设方案








高等职业学校物联网实训室建设方案




一、概述 
1.1专业背景 
物联网&#xff08;Internet of Things&#xff09;被称为继计算机、互联网之后世界信息产业第三次浪潮&#xff0c;它并非一个全新的技术领域&#xff0c;而是现代信息技术发展到一定阶段后出现的一种聚合性应用与技术提升&#xff0c;是随着传感网、通…




阅读更多...


















推荐文章












最新文章


















Copyright @ 2022~2023