目录
扫描二维码关注公众号，回复：
15229529 查看本文章
功能介绍
环境准备
创建表
-- 删除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)
;
/*查询数据*/
SELECT * FROM tb_brand;
查询所有功能
如上图所示是查询所有品牌数据在页面展示的效果。要实现这个功能，要先搞明白如下问题：
什么时候发送异步请求？
页面加载完毕后就需要在页面上看到所有的品牌数据。
所以在 mounted() 这个构造函数中写发送异步请求的代码。
请求需要携带参数吗？
查询所有功能不需要携带什么参数。响应的数据格式是什么样？
后端是需要将 List<Brand> 对象转换为 JSON 格式的数据并响应回给浏览器。
响应数据格式如下：
整体流程
后端实现
dao方法实现
在 com.green.mapper.BrandMapper 接口中定义抽象方法，并使用 @Select 注解编写 sql 语句
/**
* 查询所有
* @return
*/
@Select("select * from tb_brand")
List<Brand> selectAll();由于表中有些字段名和实体类中的属性名没有对应，
所以需要在 com/green/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.green.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();service方法实现
在 com.green.service 包下创建 BrandService 接口，在该接口中定义查询所有的抽象方法
public interface Brandservice {
/**
* 查询所有
* @return
*/
List<Brand> selectAll();
}
并在 com.green.service 下再创建 impl 包； impl 表示是放 service 层接口的实现类的包。
在该包下创建名为BrandServiceImpl 类
public class BrandServiceImpl implements Brandservice {
@Override
public List<Brand> selectAll() {
return null;
}
}
此处为什么要给 service 定义接口呢？因为service定义了接口后，
在 servlet 中就可以使用多态的形式创建Service实现类的对象，如下：
这里使用多态是因为方便我们后期解除 Servlet 和 service 的耦合。
从上面的代码可以看到 SelectAllServlet 类和 BrandServiceImpl 类之间是耦合在一起的，
如果后期 BrandService 有其它更好的实现类（例如叫BrandServiceImpl ），
那就需要修改 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();
//释放资源
sqlSession.close();
return brands;
}
}servlet实现
在 com.green.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, SerializerFeature.IgnoreNonFieldGetter);
//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);
}
}
测试后端程序
在浏览器输入访问servlet的资源路径 http://localhost:8080/brand-case/selectAllServlet ，
如果没有报错，并能看到如下信息表明后端程序没有问题
前端实现
前端需要在页面加载完毕后发送 ajax 请求，所以发送请求的逻辑应该放在 mounted() 钩子函数中。
而响应回来的数据需要赋值给表格绑定的数据模型，从下图可以看出表格绑定的数据模型是tableData
mounted() {
//页面加载完成后，发送异步请求，获取数据
var _this = this;
axios({
method:"get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<el-form ref="brand" :model="brand" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>-->
</el-dialog>
<!--表格-->
<template>
<!--
row-class-name:行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<!--分页条 page-size：每页数量 total：总数量
page-sizes：表示四个选项，每页显示条数
设置background属性可以为分页按钮添加背景色。
currentPage:当前页码
-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes,prev, pager, next,jumper"
:total="400">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted() {
//页面加载完成后，发送异步请求，获取数据
var _this = this;
axios({
method:"get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//搜索表单提交方法 查询数据
onSubmit() {
console.log(this.brand);
},
//新增数据
addBrand() {
console.log(this.brand);
},
//分页条
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
//当前页码
currentPage: 5,
//添加数据对话框是否展示的标志
dialogVisible: false,
//品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id: "",
ordered: "",
description: ""
},
//复选框选中的数组数据
multipleSelection: [],
//表格数据
tableData: [{
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
/*}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"*/
}],
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'}
]
}
}
},
})
</script>
</body>
</html>添加功能
//BrandMapper创建方法
/**
* 添加数据
* @param brand
*/
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);
//BrandServlet创建方法
/**
* 添加数据
* @param brand
*/
void add(Brand brand);
//BrandServletlmpl
@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();
//释放资源
sqlSession.close();
}servlet实现
@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
private BrandService brandservice = new BrandServiceImpl();//多态
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1、接收数据
// 获取请求体数据 按行读取数据
BufferedReader br = request.getReader();
String params = br.readLine();//json字符串
// 将JSON字符串转为Java对象
Brand brand = JSON.parseObject(params, Brand.class);
//2、调用brandservice添加数据
brandservice.add(brand);
//3. 响应成功标识
response.getWriter().write("success");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}前端代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<el-form ref="brand" :model="brand" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>-->
</el-dialog>
<!--表格-->
<template>
<!--
row-class-name:行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<!--分页条 page-size：每页数量 total：总数量
page-sizes：表示四个选项，每页显示条数
设置background属性可以为分页按钮添加背景色。
currentPage:当前页码
-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes,prev, pager, next,jumper"
:total="400">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted() {
//页面加载完成后，发送异步请求，获取数据
this.selectAll();
/*var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})*/
},
methods: {
selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//搜索表单提交方法 查询数据
onSubmit() {
console.log(this.brand);
},
//新增数据
addBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/addServlet",
data: _this.brand
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data == "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，添加数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
//location.href = "http://localhost:8080/brand-case/brand.html";
}
})
//console.log(this.brand);
},
//分页条
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
//当前页码
currentPage: 5,
//添加数据对话框是否展示的标志
dialogVisible: false,
//品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id: "",
ordered: "",
description: ""
},
//复选框选中的数组数据
multipleSelection: [],
//表格数据
tableData: [{
brandName: '',
companyName: '',
ordered: '',
status: ""
/*}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"*/
}],
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'}
]
}
}
},
})
</script>
</body>
</html>servlet优化
问题导入
Web 层的 Servlet 个数太多了，不利于管理和编写
通过之前的两个功能，发现每一个功能都需要定义一个 servlet ，一个模块需要实现增删改查功能，
就需要4个servlet ，模块一多就会造成 servlet 泛滥。
此时我们就想 servlet 能不能像 service 一样，一个模块只定义一个servlet ，
而每一个功能只需要在该 servlet 中定义对应的方法，例如下面的代码：
@WebServlet("/brand/*")
public class BrandServlet {
//查询所有
public void selectAll(...) {}
//添加数据
public void add(...) {}
//修改数据
public void update(...) {}
//删除删除
public void delete(...) {}
}为了做到通用，定义一个通用的servlet类，在定义其他的servlet是不需要继承HttpServlet ，
而继承我们定义的BaseServlet，在BaseServlet中调用具体servlet(如BrandServlet)中的对应方法。
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
//进行请求的分发
}
}
//BrandServlet 定义就需要修改为如下：
@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet {
//用户实现分页查询
public void selectAll(...) {}
//添加企业信息
public void add(...) {}
//修改企业信息
public void update(...) {}
//删除企业信息
public void delete(...) {}
}
如何在 BaseServlet 中调用对应的方法呢？比如查询所有就调用 selectAll() 方法。
可以规定在发送请求时，请求资源的二级路径（/brandServlet/selectAll）和需要调用的方法名相同，
如：查询所有数据的路径以后就需要写成:http://localhost:8080/brand-case/brandServlet/selectAll
添加数据的路径以后就需要写成：http://localhost:8080/brand-case/brandServlet/add
修改数据的路径以后就需要写成：http://localhost:8080/brand-case/brandServlet/update
删除数据的路径以后就需要写成：http://localhost:8080/brand-case/brandServlet/delete
这样的话，在 BaseServlet 中就需要获取到资源的二级路径作为方法名，然后调用该方法
/**
* 替换HttpServlet，根据请求的最后一段路径进行方法分发
*/
public class BaseServlet extends HttpServlet {
//根据请求的最后一段路径进行方法分发
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1、获取请求路径
String uri = req.getRequestURI(); // brand-case/brand/selectAll
//System.out.println(uri);
//2、获取最后一段路径 方法名
int index = uri.lastIndexOf('/');
String methodName = uri.substring(index + 1);
//System.out.println(methodName);
//3、执行方法
//3.1 获取BrandServlet / UserServlet 字节码对象class
//谁调用我（this 所在的方法），我（this）代表谁
//System.out.println(this);
Class<? extends BaseServlet> cls = this.getClass();
//3.2 获取方法Method对象
try {
Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
//3.3 执行方法
try {
method.invoke(this, req, resp);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
} catch (NoSuchMethodException e) {
e.printStackTrace();
}
}
}
代码优化
后端优化
定义了 BaseServlet 后，针对品牌模块定义一个 BrandServlet 的 Servlet，
并使其继承 BaseServlet 。在BrandServlet 中定义 以下功能的方法：
查询所有 功能：方法名声明为selectAll ，并将之前的SelectAllServlet中的逻辑代码拷贝到该方法中
添加数据 功能：方法名声明为 add ，并将之前的 AddServlet 中的逻辑代码拷贝到该方法中
@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet {
private BrandService brandservice = new BrandServiceImpl();//多态
public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//System.out.println("brand selectAll....");
//1、调用service查询数据
List<Brand> brands = brandservice.selectAll();
//2、转为JSON
String jsonString = JSON.toJSONString(brands, SerializerFeature.IgnoreNonFieldGetter);
//String jsonString = JSON.toJSONString(brands);
//3、写数据
response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
response.getWriter().write(jsonString);
}
public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//System.out.println("brand add....");
//1、接收数据
// 获取请求体数据 按行读取数据
BufferedReader br = request.getReader();
String params = br.readLine();//json字符串
// 将JSON字符串转为Java对象
Brand brand = JSON.parseObject(params, Brand.class);
//2、调用brandservice添加数据
brandservice.add(brand);
//3. 响应成功标识
response.getWriter().write("success");
}
}
前端优化
页面中之前发送的请求的路径都需要进行修改，
selectAll() 函数中发送异步请求的 url 应该改为
http://localhost:8080/brand-case/brand/selectAll
addBrand() 函数中发送异步请求的 url 应该改为
http://localhost:8080/brand-case/brand/add
修改品牌
//BrandMapper
/**
* 根据id修改数据
*
* @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);//BrandService接口 方法
/**
* 修改数据
* @param brand
*/
void update(Brand brand);
//BrandServiceImpl 重写方法
@Override
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();
}//BrandServlet
//修改数据
public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求体数据 按行读取数据
BufferedReader br = request.getReader();
String params = br.readLine();//json字符串
// 将JSON字符串转为Java对象
Brand brand = JSON.parseObject(params, Brand.class);
//2、调用brandservice修改数据
brandservice.update(brand);
//3. 响应成功标识
response.getWriter().write("success");
}前端代码：
//创建一个修改数据的对话框
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<template slot-scope="scope">
<el-form ref="brand" :model="brandEdition" :rules="rules" label-width="120px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brandEdition.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brandEdition.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brandEdition.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brandEdition.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brandEdition.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateBrand">提交</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</template>
</el-dialog>
//在表格 修改 按钮 绑定一个单击事件 startEdit(scope.row) 传入的是行的数据
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="startEdit(scope.row)">修改</el-button>
<el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
</el-row>
</template>
//在methods中定义方法startEdit() 和 updateBrand()
startEdit(row) {
// 获取修改行已经有的数据，以供填入修改框
var _this = this
_this.brandEdition = JSON.parse(JSON.stringify(row));
// 弹出修改框
_this.editDialogVisible = true;
},
//修改品牌
updateBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/update",
data: _this.brandEdition
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//修改成功
//关闭窗口
_this.editDialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，修改数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}
//data数据区添加一个修改数据的品牌模型
//修改品牌模型数据
brandEdition: {
id: '',
brandName: '',
companyName: '',
ordered: '',
description: '',
status: ''
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--表格-->
<template>
<!--
row-class-name:行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column
type="index"
width="50"
align="center">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="startEdit(scope.row)">修改</el-button>
<el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条 page-size：每页数量 total：总数量
page-sizes：表示四个选项，每页显示条数
设置background属性可以为分页按钮添加背景色。
currentPage:当前页码
-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes,prev, pager, next,jumper"
:total="400">
</el-pagination>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<el-form ref="brand" :model="brand" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>-->
</el-dialog>
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<template slot-scope="scope">
<el-form ref="brand" :model="brandEdition" :rules="rules" label-width="120px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brandEdition.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brandEdition.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brandEdition.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brandEdition.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brandEdition.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateBrand">提交</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</template>
</el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
import ro from "./element-ui/src/locale/lang/ro";
new Vue({
el: "#app",
mounted() {
//页面加载完成后，发送异步请求，获取数据
this.selectAll();
/*var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})*/
},
methods: {
//查询所有数据方法
selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/selectAll"
}).then(function (resp) {
_this.tableData = resp.data;
})
},
//新增数据
addBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/add",
data: _this.brand
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，添加数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
//location.href = "http://localhost:8080/brand-case/brand.html";
}
})
//console.log(this.brand);
},
//修改品牌
updateBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/update",
data: _this.brandEdition
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//修改成功
//关闭窗口
_this.editDialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，修改数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
},
//修改数据
startEdit(row) {
// 获取修改行已经有的数据，以供填入修改框
var _this = this
_this.brandEdition = JSON.parse(JSON.stringify(row));
// 弹出修改框
_this.editDialogVisible = true;
},
//
/* cancelEdit() {
this.editDialogVisible = false
this.selectAll()
},*/
//根据id删除数据
deleteById(row) {
//获取选择删除的id值
this.brand.id = row.id;
//2. 发送ajax请求
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/deleteById?id=" + _this.brand.id
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//添加成功
//添加成功弹窗消息
_this.$message({
message: '恭喜你，添加数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
//location.href = "http://localhost:8080/brand-case/brand.html";
}
})
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//搜索表单提交方法 查询数据
onSubmit() {
console.log(this.brand);
},
//分页条
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
//当前页码
currentPage: 5,
//添加数据对话框是否展示的标志
dialogVisible: false,
//修改数据对话框展示的标志
editDialogVisible: false,
//增加品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id: "",
ordered: "",
description: ""
},
//修改品牌模型数据
brandEdition: {
id: '',
brandName: '',
companyName: '',
ordered: '',
description: '',
status: ''
},
//复选框选中的数组数据
multipleSelection: [],
//表格数据
tableData: [{
/* brandName: '',
companyName: '',
ordered: '',
status: ""
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"*/
}],
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'}
]
}
}
},
})
</script>
</body>
</html>删除品牌
后端实现
//BrandMapper
/**
* 根据id删除数据
* @param id
*/
@Delete("delete from tb_brand where id = #{id}")
void deleteById(int id);
//BrandService接口
/**
* 删除数据
* @param id
*/
void deleteById(int id);
//BrandServiceImpl
@Override
public void deleteById(int id) {
//2、获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//3、获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//4. 调用方法
mapper.deleteById(id);
//提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}
//BrandServlet
//删除数据
public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 参数是通过get请求获取的，不需要JSON来转换
//接收id
String sid = request.getParameter("id");
int id = Integer.parseInt(sid);
//2、调用brandservice删除数据
brandservice.deleteById(id);
//3. 响应成功标识
response.getWriter().write("success");
}前端实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--表格-->
<template>
<!--
row-class-name:行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column
type="index"
width="50"
align="center">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="startEdit(scope.row)">修改</el-button>
<el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条 page-size：每页数量 total：总数量
page-sizes：表示四个选项，每页显示条数
设置background属性可以为分页按钮添加背景色。
currentPage:当前页码
-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes,prev, pager, next,jumper"
:total="400">
</el-pagination>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<el-form ref="brand" :model="brand" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>-->
</el-dialog>
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<template slot-scope="scope">
<el-form ref="brand" :model="brandEdition" :rules="rules" label-width="120px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brandEdition.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brandEdition.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brandEdition.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brandEdition.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brandEdition.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateBrand">提交</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</template>
</el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted() {
//页面加载完成后，发送异步请求，获取数据
this.selectAll();
/*var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})*/
},
methods: {
//查询所有数据方法
selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/selectAll"
}).then(function (resp) {
_this.tableData = resp.data;
})
},
//新增数据
addBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/add",
data: _this.brand
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，添加数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
//location.href = "http://localhost:8080/brand-case/brand.html";
}
})
//console.log(this.brand);
},
//修改品牌
updateBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/update",
data: _this.brandEdition
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//修改成功
//关闭窗口
_this.editDialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，修改数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
},
//修改数据
startEdit(row) {
// 获取修改行已经有的数据，以供填入修改框
var _this = this
_this.brandEdition = JSON.parse(JSON.stringify(row));
// 弹出修改框
_this.editDialogVisible = true;
},
//
/* cancelEdit() {
this.editDialogVisible = false
this.selectAll()
},*/
//根据id删除数据
deleteById(row) {
//获取删除数据的id值
this.brand.id = row.id
var _this = this
//删除是否提示框
this.$confirm('是否确定删除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除操作
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/deleteById?id=" + this.brand.id
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}).catch(() => {
//取消删除
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//搜索表单提交方法 查询数据
onSubmit() {
console.log(this.brand);
},
//分页条
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
//当前页码
currentPage: 5,
//添加数据对话框是否展示的标志
dialogVisible: false,
//修改数据对话框展示的标志
editDialogVisible: false,
//增加品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id: "",
ordered: "",
description: ""
},
//修改品牌模型数据
brandEdition: {
id: '',
brandName: '',
companyName: '',
ordered: '',
description: '',
status: ''
},
//复选框选中的数组数据
multipleSelection: [],
//表格数据
tableData: [{
/* brandName: '',
companyName: '',
ordered: '',
status: ""
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"*/
}],
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'}
]
}
}
},
})
</script>
</body>
</html>批量删除
注意：
前端发送请求时需要将要删除的多个id值以json格式提交给后端，而该json格式数据如下：
[1,2,3]后端实现
//BrandMapper
/**
* 批量删除
* @param ids
*/
void deleteByIds(@Param("ids") int[] ids);
//BrandMapper 映射文件
<!--批量删除 动态SQL-->
<delete id="deleteByIds">
delete from tb_brand where id in
<foreach collection="ids" item="id" separator="," open="(" close=")">
#{id}
</foreach>
</delete>
//BrandService 接口
/**
* 批量删除
* @param ids
*/
void deleteByIds(int[] ids);
//BrandServiceImpl 实现类
@Override
public void deleteByIds(int[] ids) {
//2、获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//3、获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//4. 调用方法
mapper.deleteByIds(ids);
//提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}
//BrandServlet
//批量删除数据
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求体数据 按行读取数据 [1,2,3]
BufferedReader br = request.getReader();
String params = br.readLine();//json字符串
// 将JSON字符串转为Java对象
int[] ids = JSON.parseObject(params, int[].class);
//2、调用brandservice批量删除数据
brandservice.deleteByIds(ids);
//3. 响应成功标识
response.getWriter().write("success");
}前端实现
获取选中的id值
从上图可以看出表格复选框绑定了一个selection-change事件，该事件是当选择项发生变化时会触发。
该事件绑定了handleSelectionChange 函数，而该函数有一个参数 val ，
该参数是获取选中行的数据，如下
所有只需要将所有选中数据的id值提交给服务端即可，
在 批量删除 按钮绑定单击事件，并给绑定触发时调用的函数，如下
在Vue对象中的 methods 中定义 deleteByIds() 函数，
在该函数中从 multipleSelection 数据模型中获取所选数据的id值。
要完成这个功能需要在 Vue 对象中定义一个数据模型 selectedIds:[] ，
在 deleteByIds() 函数中遍历multipleSelection 数组，并获取到每一个所选数据的id值存储到 selectedIds 数组中，代码实现如下：
//创建id数组[1,2,3] 从this.multipleSelection 获取id
for (let i = 0; i < this.multipleSelection.length; i++) {
this.selectedIds[i] = this.multipleSelection[i].id;
}
发送异步请求
使用 axios 发送异步请求并经上一步获取到的存储所有的 id 数组作为请求参数
var _this = this
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/deleteByIds",
data:_this.selectedIds
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
})确定框实现
由于删除操作是比较危险的；有时候可能是由于用户的误操作点击了 批量删除 按钮，
所以在点击了按钮后需要先给用户确认提示。而确认框在 elementUI 中也提供了，如下图
//批量删除数据
deleteByIds() {
console.log(this.multipleSelection);
//multipleSelection数组内容
/*[
{
"brandName": "华为",
"companyName": "华为技术有限公司",
"description": "万物互联",
"id": 1,
"ordered": 100,
"status": 1
},
{
"brandName": "小米",
"companyName": "小米科技有限公司",
"description": "are you ok",
"id": 2,
"ordered": 50,
"status": 1
},
{
"brandName": "格力",
"companyName": "格力电器股份有限公司",
"description": "让世界爱上中国造",
"id": 3,
"ordered": 30,
"status": 1
}
]*/
//创建id数组[1,2,3] 从this.multipleSelection 获取id
for (let i = 0; i < this.multipleSelection.length; i++) {
this.selectedIds[i] = this.multipleSelection[i].id;
}
//是否删除提示框
this.$confirm('是否确定删除数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除操作
var _this = this
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/deleteByIds",
data:_this.selectedIds
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}).catch(() => {
//取消删除
this.$message({
type: 'info',
message: '已取消删除'
});
});
}分页查询
-- 分页查询的SQL语句
/*查询数据*/
SELECT * FROM tb_brand;
-- 分页查询
-- 参数一 : 开始索引
-- 参数二 : 查询的条目数
select * from tb_brand limit 0,5;
select * from tb_brand limit 5,5;
-- 页面传递的参数：
-- 当前页码
-- 每页显示条数
-- 参数一 : 开始索引 = (当前页码-1)*每页显示条数
-- 参数二 : 查询的条目数 = 每页显示条数前后端数据分析
//在 pojo 包下创建 PageBean 类，为了做到通用会将其定义成泛型类
public class PageBean<T> {
private int totalCount;
private List<T> rows;
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
}流程分析
后端需要响应 总记录数 和 当前页的数据 两部分数据给前端，
所以在 BrandMapper 接口中需要定义两个方法：
selectByPage() ：查询当前页的数据的方法
selectTotalCount() ：查询总记录的方法
后端实现
//在 BrandMapper 接口中定义 selectByPage() 方法进行分页查询
/**
* 分页查询
* @param begin 开始页码
* @param size 查询条目数
* @return
*/
@Select("select * from tb_brand limit #{begin } , #{size} ")
@ResultMap("brandResultMap")
List<Brand> selectByPage(@Param("begin") int begin, @Param("size") int size);
//在 BrandMapper 接口中定义 selectTotalCount() 方法进行统计记录数
/**
* 查询总记录数
* @return
*/
@Select("select count(*) from tb_brand")
int selectTotalCount();
//在 BrandService 接口中定义 selectByPage() 分页查询数据的业务逻辑方法
/**
* 分页查询
* @param currentPage 当前页码
* @param pageSize 每页查询条数
* @return
*/
PageBean<Brand> selectByPage(int currentPage,int pageSize);
//在 BrandServiceImpl 类中重写 selectByPage() 方法，并进行业务逻辑实现
@Override
public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
//2、获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//3、获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//计算开始索引
int begin = (currentPage-1)*pageSize;
//查询条目数
int size =pageSize;
//4. 调用方法 查询当前页数据
List<Brand> rows = mapper.selectByPage(begin, size);
//查询总记录数
int totalCount = mapper.selectTotalCount();
//封装成PageBean对象
PageBean<Brand> pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
//释放资源
sqlSession.close();
return pageBean;
}
在 BrandServlet 类中定义 selectByPage() 方法。而该方法的逻辑如下：
获取页面提交的 当前页码 和 每页显示条目数 两个数据。
这两个参数是在url后进行拼接的，格式是 url? currentPage=1&pageSize=5 。
获取这样的参数需要使用 requet.getparameter() 方法获取。
调用 service 的 selectByPage() 方法进行分页查询的业务逻辑处理
将查询到的数据转换为 json 格式的数据
响应 json 数据
//servlet 中 selectByPage() 方法代码实现如下：
//分页查询
public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收当前 页码 和 页码条目数 URL?currentPage=1&pageSize=5
String _currentPage = request.getParameter("currentPage");
String _pageSize = request.getParameter("pageSize");
int currentPage = Integer.parseInt(_currentPage);
int pageSize = Integer.parseInt(_pageSize);
//调用调用brandservice分页查询
PageBean<Brand> pageBean = brandservice.selectByPage(currentPage, pageSize);
//2、转为JSON
String jsonString = JSON.toJSONString(pageBean, SerializerFeature.IgnoreNonFieldGetter);
//String jsonString = JSON.toJSONString(brands);
//3、写数据
response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
response.getWriter().write(jsonString);
}前端实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--表格-->
<template>
<!--
row-class-name:行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column
type="index"
width="50"
align="center">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="startEdit(scope.row)">修改</el-button>
<el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条 page-size：每页数量 total：总数量
page-sizes：表示四个选项，每页显示条数
设置background属性可以为分页按钮添加背景色。
currentPage:当前页码
-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes,prev, pager, next,jumper"
:total="totalCount">
</el-pagination>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<el-form ref="brand" :model="brand" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>-->
</el-dialog>
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<template slot-scope="scope">
<el-form ref="brand" :model="brandEdition" :rules="rules" label-width="120px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brandEdition.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brandEdition.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brandEdition.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brandEdition.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brandEdition.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateBrand">提交</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</template>
</el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted() {
//页面加载完成后，发送异步请求，获取数据
this.selectAll();
/*var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})*/
},
methods: {
//查询所有数据方法
/*selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/selectAll"
}).then(function (resp) {
_this.tableData = resp.data;
})
},*/
selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/selectByPage?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize
}).then(function (resp) {
//设置表格数据
_this.tableData = resp.data.rows; //{rows:[],totalCount:100}
//设置总记录数
_this.totalCount = resp.data.totalCount;
})
},
//新增数据
addBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/add",
data: _this.brand
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，添加数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
//location.href = "http://localhost:8080/brand-case/brand.html";
}
})
//console.log(this.brand);
},
//修改品牌
updateBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/update",
data: _this.brandEdition
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//修改成功
//关闭窗口
_this.editDialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，修改数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
},
//修改数据
startEdit(row) {
// 获取修改行已经有的数据，以供填入修改框
var _this = this
_this.brandEdition = JSON.parse(JSON.stringify(row));
// 弹出修改框
_this.editDialogVisible = true;
},
//
/* cancelEdit() {
this.editDialogVisible = false
this.selectAll()
},*/
//根据id删除数据
deleteById(row) {
//获取删除数据的id值
this.brand.id = row.id
var _this = this
//删除是否提示框
this.$confirm('是否确定删除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除操作
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/deleteById?id=" + this.brand.id
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}).catch(() => {
//取消删除
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//批量删除数据
deleteByIds() {
console.log(this.multipleSelection);
//multipleSelection数组内容
/*[
{
"brandName": "华为",
"companyName": "华为技术有限公司",
"description": "万物互联",
"id": 1,
"ordered": 100,
"status": 1
},
{
"brandName": "小米",
"companyName": "小米科技有限公司",
"description": "are you ok",
"id": 2,
"ordered": 50,
"status": 1
},
{
"brandName": "格力",
"companyName": "格力电器股份有限公司",
"description": "让世界爱上中国造",
"id": 3,
"ordered": 30,
"status": 1
}
]*/
//创建id数组[1,2,3] 从this.multipleSelection 获取id
for (let i = 0; i < this.multipleSelection.length; i++) {
this.selectedIds[i] = this.multipleSelection[i].id;
}
//是否删除提示框
this.$confirm('是否确定删除数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除操作
var _this = this
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/deleteByIds",
data: _this.selectedIds
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}).catch(() => {
//取消删除
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//搜索表单提交方法 查询数据
onSubmit() {
console.log(this.brand);
},
//分页条
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
//重新设置每页显示的条数
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
//重新设置单当前页码
this.currentPage = val;
this.selectAll();
}
},
data() {
return {
//每页显示条数
pageSize: 5,
//设置总记录数
totalCount: 100,
//当前页码
currentPage: 1,
//添加数据对话框是否展示的标志
dialogVisible: false,
//修改数据对话框展示的标志
editDialogVisible: false,
//增加品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id: "",
ordered: "",
description: ""
},
//修改品牌模型数据
brandEdition: {
id: '',
brandName: '',
companyName: '',
ordered: '',
description: '',
status: ''
},
//被复选框选中的id数组
selectedIds: [],
//复选框选中的数组数据
multipleSelection: [],
//表格数据
tableData: [{
/* brandName: '',
companyName: '',
ordered: '',
status: ""
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"*/
}],
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'}
]
}
}
},
})
</script>
</body>
</html>条件查询
3个条件之间什么关系？
同时满足，所用 SQL 中多个条件需要使用 and 关键字连接
3个条件必须全部填写吗？
不需要。想根据哪儿个条件查询就写那个，所以这里需要使用动态 sql 语句
条件查询需要分页吗？
需要
根据上面三个问题的明确，就可以确定sql语句了 
后端实现
//在 BrandMapper 接口中定义 selectByPageAndCondition() 方法
//和 selectTotalCountByCondition 方法，用来进行条件分页查询功能
/**
* 条件分页查询
* @param begin 开始页码
* @param size 查询条目数
* @param brand 封装条件的brand对象
* @return
*/
List<Brand> selectByPageAndCondition(@Param("begin") int begin, @Param("size") int size, @Param("brand") Brand brand);
/**
* 条件查询总记录数
* @return
*/
int selectTotalCountByCondition(Brand brand);//在映射配置文件中书写 sql 语句。 brand_name 字段和company_name 字段需要进行模糊查询，
//所以需要使用 % 占位符。映射配置文件中 statement 书写如下：
<!--查询满足条件的数据并进行分页-->
<!--where brand_name = #{brand.brandName}-->
<select id="selectByPageAndCondition" resultMap="brandResultMap">
select *from tb_brand
<where>
<if test="brand.brandName != null and brand.brandName !=''">
and brand_name like #{brand.brandName}
</if>
<if test="brand.companyName != null and brand.companyName !=''">
and company_name like #{brand.companyName}
</if>
<if test="brand.status != null">
and status = #{brand.status}
</if>
</where>
limit #{begin},#{size}
</select>
<!--查询满足条件的数据条目数-->
<!--此处没有param注解，所以键的名称前不需要加brand.-->
<select id="selectTotalCountByCondition" resultType="java.lang.Integer">
select count(*)
from tb_brand
<where>
<if test="brandName != null and brandName !=''">
and brand_name like #{brandName}
</if>
<if test="companyName != null and companyName !=''">
and company_name like #{companyName}
</if>
<if test="status != null">
and status = #{status}
</if>
</where>
</select>//在 BrandService 接口中定义 selectByPageAndCondition() 分页查询数据的业务逻辑方法
/**
* 根据条件分页查询
* @param currentPage
* @param pageSize
* @param brand
* @return
*/
PageBean<Brand> selectByPageAndCondition(int currentPage,int pageSize,Brand brand);
//在 BrandServiceImpl 类中重写 selectByPageAndCondition() 方法，并进行业务逻辑实现
@Override
public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
//2、获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//3、获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//计算开始索引
int begin = (currentPage - 1) * pageSize;
//查询条目数
int size = pageSize;
//处理brand的条件 模糊表达式 模糊查询
String brandName = brand.getBrandName();
String companyName = brand.getCompanyName();
if (brandName != null && brandName.length() > 0) {
brand.setBrandName("%" + brandName + "%");
}
if (companyName != null && companyName.length() > 0) {
brand.setCompanyName("%" + companyName + "%");
}
//4. 调用方法 条件查询当前页数据
List<Brand> rows = mapper.selectByPageAndCondition(begin, size, brand);
//条件查询总记录数
int totalCount = mapper.selectTotalCountByCondition(brand);
//封装成PageBean对象
PageBean<Brand> pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
//释放资源
sqlSession.close();
return pageBean;
}
注意：brandName和companyName 属性值到时候需要进行模糊查询，所以前后需要拼接上 %
//在 BrandServlet 类中定义 selectByPageAndCondition() 方法。而该方法的逻辑如下：
//条件分页查询
public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收当前 页码 和 页码条目数 URL?currentPage=1&pageSize=5
String _currentPage = request.getParameter("currentPage");
String _pageSize = request.getParameter("pageSize");
int currentPage = Integer.parseInt(_currentPage);
int pageSize = Integer.parseInt(_pageSize);
// 获取请求体数据 按行读取数据
BufferedReader br = request.getReader();
String params = br.readLine();//json字符串
// 将JSON字符串转为Java对象
Brand brand = JSON.parseObject(params, Brand.class);
//调用调用brandservice 条件分页查询
PageBean<Brand> pageBean = brandservice.selectByPageAndCondition(currentPage, pageSize,brand);
//2、转为JSON
//String jsonString = JSON.toJSONString(pageBean, SerializerFeature.IgnoreNonFieldGetter);
String jsonString = JSON.toJSONString(pageBean);
//3、写数据
response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
response.getWriter().write(jsonString);
}前端实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--表格-->
<template>
<!--
row-class-name:行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column
type="index"
width="50"
align="center">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="statusStr"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="startEdit(scope.row)">修改</el-button>
<el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条 page-size：每页数量 total：总数量
page-sizes：表示四个选项，每页显示条数
设置background属性可以为分页按钮添加背景色。
currentPage:当前页码
-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes,prev, pager, next,jumper"
:total="totalCount">
</el-pagination>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<el-form ref="brand" :model="brand" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>-->
</el-dialog>
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<!--表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名-->
<template slot-scope="scope">
<el-form ref="brand" :model="brandEdition" :rules="rules" label-width="120px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="brandEdition.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="brandEdition.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brandEdition.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brandEdition.description"></el-input>
</el-form-item>
<!--设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。-->
<el-form-item label="状态">
<el-switch v-model="brandEdition.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateBrand">提交</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</template>
</el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted() {
//页面加载完成后，发送异步请求，获取数据
this.selectAll();
/*var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})*/
},
methods: {
//查询所有数据方法
/*selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/selectAll"
}).then(function (resp) {
_this.tableData = resp.data;
})
},*/
//分页查询
/*selectAll() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/selectByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
}).then(function (resp) {
//设置表格数据
_this.tableData = resp.data.rows; //{rows:[],totalCount:100}
//设置总记录数
_this.totalCount = resp.data.totalCount;
})
},*/
//根据 条件 分页查询
/* selectAll() {
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
data:this.brand
}).then(function (resp) {
//设置表格数据
_this.tableData = resp.data.rows; //{rows:[],totalCount:100}
//设置总记录数
_this.totalCount = resp.data.totalCount;
})
},*/
//代码优化
selectAll() {
//var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
data:this.brand
}).then((resp) => {
//设置表格数据
this.tableData = resp.data.rows; //{rows:[],totalCount:100}
//设置总记录数
this.totalCount = resp.data.totalCount;
})
},
//新增数据
addBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/add",
data: _this.brand
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，添加数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
//location.href = "http://localhost:8080/brand-case/brand.html";
}
})
//console.log(this.brand);
},
//修改品牌
updateBrand() {
//2. 发送ajax请求
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/update",
data: _this.brandEdition
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//修改成功
//关闭窗口
_this.editDialogVisible = false;
//添加成功弹窗消息
_this.$message({
message: '恭喜你，修改数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
},
//修改数据
startEdit(row) {
// 获取修改行已经有的数据，以供填入修改框
var _this = this
_this.brandEdition = JSON.parse(JSON.stringify(row));
// 弹出修改框
_this.editDialogVisible = true;
},
//
/* cancelEdit() {
this.editDialogVisible = false
this.selectAll()
},*/
//根据id删除数据
deleteById(row) {
//获取删除数据的id值
this.brand.id = row.id
var _this = this
//删除是否提示框
this.$confirm('是否确定删除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除操作
axios({
method: "get",
url: "http://localhost:8080/brand-case/brand/deleteById?id=" + this.brand.id
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}).catch(() => {
//取消删除
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//批量删除数据
deleteByIds() {
console.log(this.multipleSelection);
//multipleSelection数组内容
/*[
{
"brandName": "华为",
"companyName": "华为技术有限公司",
"description": "万物互联",
"id": 1,
"ordered": 100,
"status": 1
},
{
"brandName": "小米",
"companyName": "小米科技有限公司",
"description": "are you ok",
"id": 2,
"ordered": 50,
"status": 1
},
{
"brandName": "格力",
"companyName": "格力电器股份有限公司",
"description": "让世界爱上中国造",
"id": 3,
"ordered": 30,
"status": 1
}
]*/
//创建id数组[1,2,3] 从this.multipleSelection 获取id
for (let i = 0; i < this.multipleSelection.length; i++) {
this.selectedIds[i] = this.multipleSelection[i].id;
}
//是否删除提示框
this.$confirm('是否确定删除数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除操作
var _this = this
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/deleteByIds",
data: _this.selectedIds
}).then(function (resp) {
// 判断响应数据是否为 success 跳转brand.html
if (resp.data === "success") {
//删除成功弹窗消息
_this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
//重新查询产品数据
_this.selectAll();
}
})
}).catch(() => {
//取消删除
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//搜索表单提交方法 查询数据
onSubmit() {
//console.log(this.brand);
this.selectAll();
},
//分页条
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
//重新设置每页显示的条数
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
//重新设置单当前页码
this.currentPage = val;
this.selectAll();
}
},
data() {
return {
//每页显示条数
pageSize: 5,
//设置总记录数
totalCount: 100,
//当前页码
currentPage: 1,
//添加数据对话框是否展示的标志
dialogVisible: false,
//修改数据对话框展示的标志
editDialogVisible: false,
//增加品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id: "",
ordered: "",
description: ""
},
//修改品牌模型数据
brandEdition: {
id: '',
brandName: '',
companyName: '',
ordered: '',
description: '',
status: ''
},
//被复选框选中的id数组
selectedIds: [],
//复选框选中的数组数据
multipleSelection: [],
//表格数据
tableData: [{
/* brandName: '',
companyName: '',
ordered: '',
status: ""
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '12',
status: "1"*/
}],
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'}
]
}
}
},
})
</script>
</body>
</html>