实现对品牌数据的增删改查等操作及页面展示（前端+后端 ）
使用三层架构思想完成品牌数据的增删改查
环境：IntelliJ IDEA Community Edition 2021.3.3、MySQL、MySQL连接驱动：mysql-connector-java-5.1.32.jar、mybatis-3.5.5、javax.servlet-3.1.0、vue2
包结构
在Java目录下创建com.mapper，com.pojo，com.service，com.util，com.web这五个包
-
在mapper包下新建
BrandMapper接口import java.util.List; public interface BrandMapper { } -
在resource目录下新建
com/mapper路径，新建一个BrandMapper.xml文件 -
在resource目录下新建
mybatis-config.xml -
在pojo包下新建
Brand类public class Brand { // id 主键 private Integer id; // 品牌名称 private String brandName; // 企业名称 private String companyName; // 排序字段 private Integer ordered; // 描述信息 private String description; // 状态：0：禁用 1：启用 private Integer status; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBrandName() { return brandName; } public void setBrandName(String brandName) { this.brandName = brandName; } public String getCompanyName() { return companyName; } public void setCompanyName(String companyName) { this.companyName = companyName; } public Integer getOrdered() { return ordered; } public void setOrdered(Integer ordered) { this.ordered = ordered; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public Integer getStatus() { return status; } //逻辑视图 public String getStatusStr(){ if (status == null){ return "未知"; } return status == 0 ? "禁用":"启用"; } public void setStatus(Integer status) { this.status = status; } @Override public String toString() { return "Brand{" + "id=" + id + ", brandName='" + brandName + '\'' + ", companyName='" + companyName + '\'' + ", ordered=" + ordered + ", description='" + description + '\'' + ", status=" + status + '}'; } } -
在util包下导入工具类
public class SqlSessionFactoryUtils { private static SqlSessionFactory sqlSessionFactory; static { //静态代码块会随着类的加载而自动执行，且只执行一次 try { String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); } catch (IOException e) { e.printStackTrace(); } } public static SqlSessionFactory getSqlSessionFactory(){ return sqlSessionFactory; } } -
在pom.xml中导入坐标
4.0.0 org.example brand_demo 1.0-SNAPSHOT war 8 8 org.mybatis mybatis 3.5.5 mysql mysql-connector-java 5.1.34 javax.servlet javax.servlet-api 3.1.0 provided com.alibaba fastjson 1.2.62 org.apache.tomcat.maven tomcat7-maven-plugin 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)
;
SELECT * FROM tb_brand;查询所有功能
后端实现
dao方法实现
-
由于表中有些字段名和实体类中的属性名没有对应，所以需要在
com/mapper/BrandMapper.xml映射配置文件中定义结果映射 ，使用resultMap标签。映射配置文件内容如下： -
在
com.mapper.BrandMapper接口中定义抽象方法，并使用@Select注解编写SQL语句/** * 查询所有 * @return */ @Select("select * from tb_brand") @ResultMap("brandResultMap") ListselectAll();
service方法实现
- 在
com.service包下创建BrandService接口，在该接口中定义查询所有的抽象方法public interface BrandService { /** * 查询所有 * @return */ ListselectAll(); } -
并在
com.service下再创建impl包；impl表示是放 service 层接口的实现类的包。 在该包下创建名为BrandServiceImpl类public class BrandServiceImpl implements BrandService { //1. 创建SqlSessionFactory工厂对象 SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory(); @Override public ListselectAll() { //2. 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //3. 获取BrandMapper BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); //4. 调用方法 List brands = mapper.selectAll(); //5. 关闭资源 sqlSession.close(); return brands; } }
-
为什么要创建BrandServiceImpl？
- 因为service定义了接口后，在 servlet 中就可以使用多态的形式创建Service实现类的对象
这里使用多态是因为方便解除Servlet和service的耦合。从上面的代码我们可以看到SelectAllServlet类和BrandServiceImpl类之间是耦合在一起的，如果后期BrandService有其它的实现类（例如叫BrandServiceImpl1），那就需要修改SelectAllServlet类中的代码。后面学习了Spring框架后就可以解除SelectAllServlet类和BrandServiceImpl的代码耦合。但现在还做不到解耦合，在这里只需要理解为什么定义接口即可。
- 因为service定义了接口后，在 servlet 中就可以使用多态的形式创建Service实现类的对象
servlet方法实现
- 在
com.web.servlet包下定义名为SelectAllServlet的查询所有的servlet。该servlet逻辑如下：- 调用service的
selectAll()方法查询所有的品牌数据，并接口返回结果 - 将返回的结果转换为 json 数据
- 响应 json 数据
@WebServlet("/selectAllServlet") public class SelectAllServlet extends HttpServlet { private BrandServiceImpl brandService = new BrandServiceImpl(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 调用方法，返回结果 Listbrands = brandService.selectAll(); //2. 将返回的结果转换为json数据 String jsonString = JSON.toJSONString(brands); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码 response.setContentType("text/json;charset=utf-8"); //3. 响应json数据 response.getWriter().write(jsonString); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
- 调用service的
测试后端程序
在浏览器输入访问 servlet 的资源路径 http://localhost:8080/brand-case/selectAllServlet ，如果没有报错，并能看到如下信息表明后端程序没有问题
[{“brandName”:”华为”,”companyName”:”华为技术有限公司”,”description”:”万物互联”,”id”:1,”ordered”:100,”status”:1,”statusStr”:”启用”},
前端实现
前端需要在页面加载完毕后发送 ajax 请求，所以发送请求的逻辑应该放在 mounted() 钩子函数中。而响应回来的数据需要赋值给表格绑定的数据模型
mounted(){
//当页面加载完成后，发送异步请求，获取数据
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp) {
_this.tableData = resp.data;
})
}添加功能
上图是添加数据的对话框，当点击 提交 按钮后就需要将数据提交到后端，并将数据保存到数据库中。
页面发送请求时，需要将输入框输入的内容提交给后端程序，而这里是以 json 格式进行传递的。
后端实现
dao方法实现
- 在
BrandMapper接口中定义add()添加方法，并使用@Insert注解编写sql语句/** * 添加数据 * @param brand */ @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})") @ResultMap("brandResultMap") void add(Brand brand);
service方法实现
-
在
BrandService接口中定义add()添加数据的业务逻辑方法/** * 添加数据 * @param brand */ void add(Brand brand); -
在
BrandServiceImpl类中重写add()方法，并进行业务逻辑实现@Override public void add(Brand brand) { //2. 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //3. 获取BrandMapper BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); //4. 调用方法 mapper.add(brand); sqlSession.commit();//提交事务 //5. 释放资源 sqlSession.close(); }注意：增删改操作一定要提交事务。
servlet方法实现
-
在
com.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 doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //解决乱码问题，一定要把它放在第一行 request.setCharacterEncoding("utf-8"); //获取输入流 BufferedReader br = request.getReader(); //读取数据 String params = br.readLine(); //将json格式的数据转换为一个Brand对象 Brand brand = JSON.parseObject(params, Brand.class); //调用方法 brandService.add(brand); //如果能顺利执行到此行，则说明添加成功，给浏览器响应一个success字符串表示成功 response.getWriter().write("success"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }前端实现
我们之前给提交按钮的点击事件绑定了一个
addBrand函数，所以添加数据功能的逻辑代码应该写在addBrand()函数中。在此方法中需要发送异步请求并将表单中输入的数据作为参数进行传递。如下addBrand() { var _this = this; 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' }); } }) }在
then函数中的匿名函数是成功后的回调函数，而resp.data就可以获取到响应回来的数据，如果值是success表示数据添加成功。那么添加成功之后有哪些操作呢？ - 先将对话框关闭，设置dialogVisible为false，就可以关闭对话框了
_this.dialogVisible = false -
重新查询数据，这部分代码其实就是刚刚查询所有的前端代码，将其封装成一个selectAll()函数
var _this = this; axios({ method:"get", url:"http://localhost:8080/brand-case/selectAllServlet" }).then(function (resp) { _this.tableData = resp.data; }) -
给出提示信息，这部分其实是直接从ElementUI官网扒的代码戳我
_this.$message({ message: '恭喜你，添加成功', type: 'success' });
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，tomcat 会自动的调用 service() 方法，HttpServlet的service()方法如下，当我们访问该 servlet 时会根据请求方式将请求分发给 doGet() 或者 doPost() 等方法
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getMethod();
long lastModified;
if (method.equals("GET")) {
lastModified = this.getLastModified(req);
if (lastModified == -1L) {
this.doGet(req, resp);
} else {
long ifModifiedSince = req.getDateHeader("If-Modified-Since");
if (ifModifiedSince < lastModified) {
this.maybeSetLastModified(resp, lastModified);
this.doGet(req, resp);
} else {
resp.setStatus(304);
}
}
} else if (method.equals("HEAD")) {
lastModified = this.getLastModified(req);
this.maybeSetLastModified(resp, lastModified);
this.doHead(req, resp);
} else if (method.equals("POST")) {
this.doPost(req, resp);
} else if (method.equals("PUT")) {
this.doPut(req, resp);
} else if (method.equals("DELETE")) {
this.doDelete(req, resp);
} else if (method.equals("OPTIONS")) {
this.doOptions(req, resp);
} else if (method.equals("TRACE")) {
this.doTrace(req, resp);
} else {
String errMsg = lStrings.getString("http.method_not_implemented");
Object[] errArgs = new Object[]{method};
errMsg = MessageFormat.format(errMsg, errArgs);
resp.sendError(501, errMsg);
}
}那么我们也可以仿照这样请求分发的思想，在 service() 方法中根据具体的操作调用对应的方法，如：查询所有就调用 selectAll() 方法，添加企业信息就调用 add() 方法。
为了做到通用，我们定义一个通用的 servlet 类，再定义其他的 servlet 就不用继承 HttpServlet，而是继承我们自定义的 BaseServlet，在BaseServlet 中调用具体 servlet（如BrandServlet）中的对应方法。
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}BrandServlet定义修改如下
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/brand/selectAll
添加数据的路径以后就需要写成： http://localhost:8080/brand-case/brand/add
修改数据的路径以后就需要写成： http://localhost:8080/brand-case/brand/update
删除数据的路径以后就需要写成： http://localhost:8080/brand-case/brand/delete
这样的话，在 BaseServlet 中就需要获取到资源的二级路径作为方法名，然后调用该方法
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取请求路径
String requestURI = req.getRequestURI();
//找到最后一个斜杠，它后面就是我们要的方法名
int index = requestURI.lastIndexOf('/');
//取子串就是斜杠后面的字符串
String methodName = requestURI.substring(index + 1);
//获取当前对象的字节码文件
Class clazz = this.getClass();
try {
//根据前面的方法名，获取方法
Method method = clazz.getMethod(methodName,...);
//执行方法
method.invoke(this,...)
} catch (NoSuchMethodException | InvocationTargetException | IllegalAccessException e) {
throw new RuntimeException(e);
}
}
}通过上面代码发现根据方法名获取对应方法的 Method 对象时需要指定方法参数的字节码对象。解决这个问题，可以将方法的参数类型规定死，而方法中可能需要用到 request 对象和 response 对象，所以指定方法的参数为 HttpServletRequest 和 HttpServletResponse，那么 BrandServlet 代码就可以改进为：
public class BrandServlet extends BaseServlet{
//用户实现分页查询
public void selectAll(HttpServletRequest req, HttpServletResponse resp) {}
//添加企业信息
public void add(HttpServletRequest req, HttpServletResponse resp) {}
//修改企业信息
public void update(HttpServletRequest req, HttpServletResponse resp) {}
//删除企业信息
public void delete(HttpServletRequest req, HttpServletResponse resp) {}
}
BaseServlet代码可以改进为：
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取请求路径
String uri = req.getRequestURI(); // 例如路径为：/brand_case/brand/selectAll
// 找到最后一个 / ，以此来划分方法名
int index = uri.lastIndexOf('/');
// 获取到资源的二级路径 selectAll
String methodName = uri.substring(index + 1);
//获取BrandServlet /UserServlet 字节码对象 Class
Class cls = this.getClass();
//获取根据上面获取的方法名，来Method对象
try {
Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
//执行方法
method.invoke(this,req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException 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 {
//1. 调用service查询
List brands = brandService.selectAll();
//2. 转为JSON
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 {
//处理乱码问题
request.setCharacterEncoding("utf-8");
//1. 获取输入流，接收品牌数据json字符串
BufferedReader br = request.getReader();
String params = br.readLine();
//将json字符串转为Brand对象
Brand brand = JSON.parseObject(params, Brand.class);
//2. 调用service添加
brandService.add(brand);
//3. 响应成功的标识
response.getWriter().write("success");
}
} 前端优化
页面中之前发送的请求的路径都需要进行修改，selectAll() 和addBrand()函数中发送异步请求的 url 应该改为http://localhost:8080/brand-case/brand/selectAll和http://localhost:8080/brand-case/brand/add
selectAll(){
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/brand-case/brand/selectAll"
}).then(function (resp){
_this.tableData = resp.data;
})
},
addBrand() {
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/brand-case/brand/add",
data:_this.brand
}).then(function (resp){
if(resp.data == "success"){
_this.dialogVisible = false
_this.selectAll();
_this.$message({
message: '恭喜你，添加成功',
type: 'success'
});
}
})批量删除
点击多条数据前的复选框就意味着要删除这些数据，而点击了 批量删除 按钮后，需要让用户确认一下，因为有可能是用户误操作的，当用户确定后需要给后端发送请求并携带者需要删除数据的多个id值，前端发送请求时需要将要删除的多个id值以json格式提交给后端
后端实现
dao方法实现
-
接口方法声明如下
/** * 批量删除 * * @param ids */ void deleteByIdIs(@Param("ids") int[] ids); - 在
BrandMapper.xml映射配置文件中添加 statement，需要用到动态sql的知识delete from tb_brand where id in #{id} service方法实现
-
在
BrandService接口中定义deleteByIds()批量删除的业务逻辑方法/** * 批量删除 * @param ids */ void deleteByIds(int[] ids); -
在
BrandServiceImpl类中重写deleteByIds()方法，并进行业务逻辑实现@Override public void deleteByIds(int[] ids) { //2. 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //3. 获取BrandMapper BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); //4. 调用方法 mapper.deleteByIds(ids); sqlSession.commit();//提交事务 //5. 释放资源 sqlSession.close(); }servlet方法实现
-
在
BrandServlet类中定义deleteByIds()方法。而该方法的逻辑如下：- 接收页面提交的数据。页面到时候提交的数据是 json 格式的数据，所以此处需要使用输入流读取数据
- 将接收到的数据转换为
int[]数组 - 调用 service 的
deleteByIds()方法进行批量删除的业务逻辑处理 - 给浏览器响应添加成功的标识，这里直接给浏览器响应
success字符串表示成功
-
servlet 中
deleteByIds()方法代码实现如下：/** * 批量删除 * * @param request * @param response * @throws ServletException * @throws IOException */ public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //处理乱码问题 request.setCharacterEncoding("utf-8"); //1. 获取输入流，接收品牌数据json字符串 BufferedReader br = request.getReader(); String params = br.readLine(); //将json字符串转为int[]数组 int[] ids = JSON.parseObject(params, int[].class); //2. 调用service添加 brandService.deleteByIds(ids); //3. 响应成功的标识 response.getWriter().write("success"); }前端实现
- 先去ElementUI官网看看复选框都有什么属性，发现表单绑定了一个事件
@selection-change="handleSelectionChangehandleSelectionChange(val) { this.multipleSelection = val; } -
该事件是当选择项发生变化时会触发。该事件绑定了
handleSelectionChange函数，而该函数有一个参数val，该参数是获取选中行的数据，选中多行也就是相当于选中了一个brand数组，我们可以通过遍历brand数组来获取其id，然后使用 axios 发送异步请求并经刚刚获取到的存储所有的 id 数组作为请求参数，那么现在就分析完毕了，开始敲代码 -
给批量删除绑定一个点击事件，并绑定触发时的调用函数
deleteByIds批量删除 -
我们要在
deleteByIds函数中遍历选中的brand数组，也就是遍历this.multipleSelection，获取brand.id，将其加入到id数组，所以我们先在Vue对象的data中添加selectedIds: []//获取选中的id值，并加入到selectedIds数组中 for (let i = 0; i < this.multipleSelection.length; i++) { this.selectedIds[i] = this.multipleSelection[i].id; } var _this = this; axios({ //发送异步请求提交json数据，用post method: "post", url: "http://localhost:8080/brand-case/brand/deleteByIds", //地址就是BrandServlet中的批量删除方法 data: _this.selectedIds //提交的数据就是的selectedIds }).then(function (resp) { if (resp.data == "success") { //获取响应标识 _this.selectAll(); //如果成功添加了，就重新查询数据，删除完毕，不用手动刷新页面就能看到删除结果 _this.$message({ //给出提示信息 message: '恭喜你，删除成功', type: 'success' }); } }) -
由于删除操作是一个危险的操作，所以在删除之前，我们需要让用户确认一下是否删除，要完成这个需求，我们继续去ElementUI中找个组件，MessageBox弹框
点击打开 Message Box -
直接把这个open函数的函数体搬走就可以，修改完成的
deleteByIds函数代码如下deleteByIds() { this.$confirm('此操作将删除数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { for (let i = 0; i < this.multipleSelection.length; i++) { this.selectedIds[i] = this.multipleSelection[i].id; } var _this = this; axios({ method: "post", url: "http://localhost:8080/brand-case/brand/deleteByIds", data: _this.selectedIds }).then(function (resp) { if (resp.data == "success") { _this.selectAll(); _this.$message({ message: '恭喜你，删除成功', type: 'success' }); } }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }分页查询
我们之前做的
查询所有功能中将数据库中所有的数据查询出来并展示到页面上，试想如果数据库中的数据有很多（假设有十几万条）的时候，将数据全部展示出来肯定不现实，那如何解决这个问题呢？几乎所有的网站都会使用分页解决这个问题。每次只展示一页的数据，比如一页展示10条数据，如果还想看其他的数据，可以通过点击页码进行查询
分析
分页查询sql
- 分页查询也是从数据库进行查询的，所以我们要分页对应的SQL语句应该怎么写。分页查询使用
LIMIT关键字，格式为：LIMIT 开始索引 每页显示的条数。以后前端页面在发送请求携带参数时，它并不明确开始索引是什么，但是它知道查询第几页。所以开始索引需要在后端进行计算，计算的公式是 ：开始索引 = （当前页码 - 1）* 每页显示条数
前后端数据分析
分页查询功能时候比较复杂的，所以我们要先分析清楚以下两个问题：
-
前端需要传递什么参数给后端
根据上一步对分页查询 SQL 语句分析得出，前端需要给后端两个参数- 当前页码 ：currentPage
- 每页显示条数：pageSize
-
后端需要响应什么数据给前端
- 当前页需要展示的数据。我们在后端一般会存储到 List 集合中
- 总共记录数。在上图页面中需要展示总的记录数，所以这部分数据也需要。总的页面 ElementUI 的分页组件会自动计算，我们不需要关心
- 将以上两部分封装到 PageBean 对象中，并将该对象转换为 json 格式的数据响应回给浏览器
-
通过上面的分析我们需要先在
pojo包下创建PageBean类，为了做到通用性会将其定义成泛型类，代码如下：//分页查询的JavaBean public class PageBean{ // 总记录数 private int totalCount; // 当前页数据 private List rows; public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } } 后端实现
dao方法实现
-
在
BrandMapper接口中定义selectByPage()方法进行分页查询，代码如下：/** * 分页查询 * @param begin * @param size * @return */ @Select("select * from tb_brand limit #{begin} , #{size}") @ResultMap("brandResultMap") ListselectByPage(@Param("begin") int begin,@Param("size") int size); - 在
BrandMapper接口中定义selectTotalCount()方法进行统计记录数，代码如下：/** * 查询总记录数 * @return */ @Select("select count(*) from tb_brand ") int selectTotalCount();service方法实现
在
BrandService接口中定义selectByPage()分页查询数据的业务逻辑方法/** * 分页查询 * @param currentPage 当前页码 * @param pageSize 每页展示条数 * @return */ PageBeanselectByPage(int currentPage,int pageSize); 在
BrandServiceImpl类中重写selectByPage()方法，并进行业务逻辑实现@Override public PageBeanselectByPage(int currentPage, int pageSize) { //获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //获取BrandMapper BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); //计算索引 int begin = (currentPage - 1) * pageSize; //计算当前条目数 int size = pageSize; //查询当前页数据 List rows = mapper.selectByPage(begin, size); //查询总记录数 int totalCount = mapper.selectTotalCount(); //封装成PageBean对象 PageBean brandPageBean = new PageBean (); brandPageBean.setRows(rows); brandPageBean.setTotalCount(totalCount); //释放资源 sqlSession.close(); return brandPageBean; } servlet方法实现
- 在
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 { //1. 接收 当前页码 和 每页展示条数 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); //2. 调用service查询 PageBeanpageBean = brandService.selectByPage(currentPage, pageSize); //2. 转为JSON String jsonString = JSON.toJSONString(pageBean); //3. 写数据 response.setContentType("text/json;charset=utf-8"); response.getWriter().write(jsonString); } 测试
在浏览器上地址栏输入
http://localhost:8080/brand-case/brand/selectByPage?currentPage=1&pageSize=5，可以查询到数据
- 在
前端实现
selectAll 代码改进
selectAll() 函数之前是查询所有数据，现需要改成分页查询。 请求路径应改为 http://localhost:8080/brand-case/brand/selectByPage?currentPage=1&pageSize=5 ，而 currentPage 和 pageSize 是需要携带的参数，分别是 当前页码 和 每页显示的条目数。
刚才我们对后端代码进行测试可以看出响应回来的数据，所以在异步请求的成功回调函数（then 中的匿名函数）中给页面表格的数据模型赋值。整体代码如下
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;
})
}改变当前页的条目数和当前页码
先来看看分页条的代码@size-change 就是每页显示的条目数发生变化时会触发的事件，而该事件绑定了一个 handleSizeChange 函数@current-change 就是页码发生变化时会触发的事件，而该事件绑定了一个 handleSizeChange 函数
我们只需要在这两个函数中重新设置当前页的条目数和当前页码，然后调用selectAll函数重新分页查询数据
handleSizeChange(val) {
//重新设置每页的条目数
this.pageSize=val;
this.selectAll();
},
handleCurrentChange(val) {
this.currentPage=val;
this.selectAll();
}条件查询
要做条件查询功能，先明确以下三个问题
- 3个条件之间什么关系？
- 同时满足，所用 SQL 中多个条件需要使用 and 关键字连接
- 3个条件必须全部填写吗？
- 不需要。想根据哪儿个条件查询就写那个，所以这里需要使用动态 sql 语句
- 条件查询需要分页吗？
- 需要
后端实现
dao实现
在 BrandMapper 接口中定义 selectByPageAndCondition() 方法 和 selectTotalCountByCondition 方法，用来进行条件分页查询功能，方法如下：
/**
* 分页条件查询
* @param begin
* @param size
* @return
*/
List selectByPageAndCondition(@Param("begin") int begin,@Param("size") int size,@Param("brand") Brand brand);
/**
* 根据条件查询总记录数
* @return
*/
int selectTotalCountByCondition(Brand brand); 参数：
begin分页查询的起始索引size分页查询的每页条目数brand用来封装条件的对象
由于这是一个复杂的查询语句，需要使用动态sql；所以我们在映射配置文件中书写 sql 语句。brand_name 字段和 company_name 字段需要进行模糊查询，所以需要使用 % 占位符。映射配置文件中 statement 书写如下：
service实现
在 BrandService 接口中定义 selectByPageAndCondition() 分页查询数据的业务逻辑方法
/**
* 分页条件查询
* @param currentPage
* @param pageSize
* @param brand
* @return
*/
PageBean selectByPageAndCondition(int currentPage,int pageSize,Brand brand); 在 BrandServiceImpl 类中重写 selectByPageAndCondition() 方法，并进行业务逻辑实现
@Override
public PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
//2. 获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//3. 获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//4. 计算开始索引
int begin = (currentPage - 1) * pageSize;
// 计算查询条目数
int size = pageSize;
// 处理brand条件，模糊表达式
String brandName = brand.getBrandName();
if (brandName != null && brandName.length() > 0) {
brand.setBrandName("%" + brandName + "%");
}
String companyName = brand.getCompanyName();
if (companyName != null && companyName.length() > 0) {
brand.setCompanyName("%" + companyName + "%");
}
//5. 查询当前页数据
List rows = mapper.selectByPageAndCondition(begin, size, brand);
//6. 查询总记录数
int totalCount = mapper.selectTotalCountByCondition(brand);
//7. 封装PageBean对象
PageBean pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
//8. 释放资源
sqlSession.close();
return pageBean;
} 注意：brandName 和 companyName 属性值到时候需要进行模糊查询，所以前后需要拼接上 %
servlet实现
在 BrandServlet 类中定义 selectByPageAndCondition() 方法。而该方法的逻辑如下：
servlet 中 selectByPageAndCondition() 方法代码实现如下：
-
获取页面提交的
当前页码和每页显示条目数两个数据。这两个参数是在url后进行拼接的，格式是url?currentPage=1&pageSize=5。获取这样的参数需要使用requet.getparameter()方法获取。 -
获取页面提交的
条件数据，并将数据封装到一个Brand对象中。由于这部分数据到时候是需要以 json 格式进行提交的，所以我们需要通过流获取数据，具体代码如下：// 获取查询条件对象 BufferedReader br = request.getReader(); String params = br.readLine();//json字符串 //转为 Brand Brand brand = JSON.parseObject(params, Brand.class); -
调用 service 的
selectByPageAndCondition()方法进行分页查询的业务逻辑处理 -
将查询到的数据转换为 json 格式的数据
-
响应 json 数据
/**
* 分页条件查询
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收 当前页码 和 每页展示条数 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字符串
//转为 Brand
Brand brand = JSON.parseObject(params, Brand.class);
//2. 调用service查询
PageBean pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);
//2. 转为JSON
String jsonString = JSON.toJSONString(pageBean);
//3. 写数据
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(jsonString);
} 前端实现
前端代码我们从以下几方面实现：
- 查询表单绑定查询条件对象模型
这一步在页面上已经实现了，页面代码如下：查询 -
点击查询按钮查询数据
从上面的代码可以看到给查询按钮绑定了onSubmit()函数，而在onSubmit()函数中只需要调用selectAll()函数进行条件分页查询。 -
改进 selectAll() 函数
子页面加载完成后发送异步请求，需要携带当前页码、每页显示条数、查询条件对象。接下来先对携带的数据进行说明：当前页码和每页显示条数这两个参数我们会拼接到 URL 的后面查询条件对象这个参数需要以 json 格式提交给后端程序- 修改
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; })
前端代码优化
咱们已经将所有的功能实现完毕。而针对前端代码中的发送异步请求的代码，如下
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;
}) 需要在成功的回调函数（也就是then 函数中的匿名函数）中使用this，都需要在外边使用 _this 记录一下 this 所指向的对象；因为在外边的 this 表示的是 Vue 对象，而回调函数中的 this 表示的不是 vue 对象。这里我们可以使用 ECMAScript6 中的新语法（箭头函数）来简化这部分代码，如上面的代码可以简化为:
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;
})箭头函数语法：
(参数) => { 逻辑代码 }
箭头函数的作用：
替换（简化）匿名函数。
删除功能
删除功能的难点在于如果获取本行数据的id，但成功获取id之后的操作就与批量删除的操作一样了
批量删除是选中多行数据，然后将多行数据的id放到ids数组中，那么单行数据就只需要将当前行的id放到ids数组中
具体操作就是this.selectedIds[0] = this.currentRow.id;，前端代码也只需要将for循环替换掉
那现在我们只需要复制一份deleteByIds，然后改个名，将for循环替换掉，就大功告成了
deleteById() {
this.$confirm('此操作将删除数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//唯一的区别就是不用这个for循环来获取id了
/*for (let i = 0; i < this.multipleSelection.length; i++) {
this.selectedIds[i] = this.multipleSelection[i].id;
}
*/
this.selectedIds[0] = this.currentRow.id;
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case/brand/deleteByIds",
data: _this.selectedIds
}).then(function (resp) {
if (resp.data == "success") {
_this.selectAll();
_this.$message({
message: '恭喜你，删除成功',
type: 'success'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}如何获取当前行数据
其实我们在写前端页面的时候，就已经遇到过了，那现在我们仔细看看
Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
提取一下信息就是我们要在table中配置highlight-current-row属性，current-change事件，和事件绑定的handleCurrentChange函数，然后在Vue的data中配置currentRow属性（默认为null）
data中新增属性
currentRow: nullmethods中新增方法
handleCurrentChangeRow(val) {
this.currentRow = val;
}修改功能
- 修改功能依旧是分为
回显和修改两部分 - 修改功能的需求就是当我们点击
修改按钮（给修改按钮绑定echo()回显函数）时，会弹出一个对话框，里面是已经填好了的品牌信息，我们只需要修改我们需要改的部分，其他部分不用动，然后点击提交按钮（给提交按钮绑定update()更新函数），完成修改功能
前端页面
- 前端页面我们直接照抄新增页面即可，注意将设置
:visible.sync="updateVisible"，同时在Vue对象的data中，新增updateVisible属性updateVisible: false，该属性默认为false，用来控制修改对话框是否显示提交 取消 回显功能
- 回显功能是要当我们点击
修改按钮时，弹出对话框，同时显示原有数据，那我们就给修改按钮的点击事件绑定一个回显函数 - 而回显函数的功能就是刚刚说的，弹出对话框（设置
updateVisible为true），显示原有数据（将本行数据赋给brand即可，因为修改对话框已经绑定了brand模型） - 代码如下
echo(){ this.updateVisible = true; this.brand = this.currentRow; }修改功能
dao实现
- 接口方法声明如下
/** * 更新数据 * @param brand */ @Update("update tb_brand set brand_name=#{brandName},company_name=#{companyName},ordered=#{ordered},`description`=#{description},`status`=#{status} where id =#{id}") @ResultMap("brandResultMap") void update(Brand brand); -
service实现
-
在
BrandService接口中定义update()更新数据的业务逻辑方法/** * 更新数据 * @param brand */ void update(Brand brand); - 在
BrandServiceImpl类中重写update()方法，并进行业务逻辑实现@Override public void update(Brand brand) { SqlSession sqlSession = sqlSessionFactory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); mapper.update(brand); sqlSession.commit(); sqlSession.close(); }
-
servlet实现
- servlet 中
update()方法代码实现如下：public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //处理乱码问题 request.setCharacterEncoding("utf-8"); //1. 获取输入流，接收品牌数据json字符串 BufferedReader br = request.getReader(); String params = br.readLine(); //将json字符串转为brand对象 Brand brand = JSON.parseObject(params, Brand.class); Integer id = brand.getId(); String brandName = brand.getBrandName(); String companyName = brand.getCompanyName(); String description = brand.getDescription(); Integer ordered = brand.getOrdered(); Integer status = brand.getStatus(); Brand b = new Brand(); b.setId(id); b.setBrandName(brandName); b.setCompanyName(companyName); b.setDescription(description); b.setOrdered(ordered); b.setStatus(status); //2. 调用service更新 brandService.update(brand); //3. 响应成功的标识 response.getWriter().write("success"); }前端实现
-
前面当我们点击
修改按钮时，已经帮我们弹出对话框，且对话框中有原有的数据，当我们修改完毕之后，点击提交按钮，就会帮我们完成更新操作
那现在我们只需要来写一个update()函数就完事儿了，而update()函数和addBrand()函数几乎没有区别，只需要将url改成update，然后提示信息改一下，就大功告成了（区别就是底层的SQL语句不一样，addBrand()执行insert，update()执行update）update() { var _this = this; axios({ method: "post", url: "http://localhost:8080/brand-case/brand/update", data: _this.brand }).then(function (resp) { if (resp.data == "success") { _this.updateVisible = false _this.selectAll(); _this.$message({ message: '恭喜你，修改成功', type: 'success' }); } }) }前端代码
Title 查询 批量删除 新增 提交 取消 提交 取消 修改 删除
页面展示
查询所有
删除数据
添加数据
修改数据
批量删除
