这篇博客详细介绍了JavaWeb中进行条件查询的后端和前端实现，包括新增品牌的前后端代码、批量删除功能、Servlet代码的优化以及品牌删除和修改的操作。通过实例展示了如何在实际开发中优化程序，解决一些小漏洞，提供了完整的程序代码参考。
续知乎上的文章
目录
3.条件查询
条件查询后端代码
条件查询前端实现
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</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.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" 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%">
<el-form ref="addFormData" :model="addFormData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="addFormData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="addFormData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addFormData.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="addFormData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addFormData.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">立即添加</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--修改对话框-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<el-form ref="editFormData" :model="editFormData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="editFormData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="editFormData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="editFormData.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="editFormData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="editFormData.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="update">立即修改</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--展示数据的table表格-->
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@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"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="statusStr"
label="当前状态"
align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
//定义搜索表单模型数据
brand: {
status: '',
brandName: '',
companyName: ''
},
//新增对话框显示或隐藏模型数据
dialogVisible: false,
//新增对话框表单模型数据
addFormData: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
//编辑对话框显示或隐藏模型数据
editDialogVisible: false,
//编辑对话框表单模型数据
editFormData: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '1'
},
//表格模型数据
tableData: [],
//保存复选框选中条目数据对象数组
multipleSelection: [],
//分页条当前页数
currentPage: 1,
//每页条数模型数据
pageSize:5,
//分页条总条数
total:0,
}
},
mounted(){
this.selectByPage();
},
methods: {
/*分页查询*/
selectByPage(){
var _this=this;
axios.post("SelectByPageServlet?currentSize="+_this.currentPage+"&pageSize="+_this.pageSize,_this.brand).then(resp=>{
_this.tableData = resp.data.list;
_this.total = resp.data.total;
});
},
//搜索表单查询按钮单击事件绑定的函数
onSubmit() {
console.log(this.brand);
this.selectByPage(this.brand)
},
//新增对话框"立即添加"按钮单击事件绑定函数
add() {
console.log(this.addFormData);
},
//表格复选框选中时间绑定函数
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection);
},
//表格中“修改”和“删除”按钮单击事件函数
handleEdit(index, row) {
//index表示当前条目索引，row表示当前条目数据对象
console.log(index, row);
//展示修改对话框
this.editDialogVisible=true;
//给表单模型数据赋值，展示要修改的数据
this.editFormData={
id:row.id,
brandName:row.brandName,
companyName:row.companyName,
ordered:row.ordered,
description:row.description,
status:row.status
};
//status属性只有转换成字符串开关才可以正常显示。
this.editFormData.status+=""
},
handleDelete(index, row) {
console.log(index, row);
//index表示当前条目索引，row表示当前条目数据对象，row.id表示当前条目数据对象的id值
},
//点击编辑弹出框上的"立即修改"按钮单击事件函数
update(){
console.log(this.editFormData);
},
//分页条事件
//选择每页条数触发的事件函数
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize=val;
this.selectByPage();
},
//点击页码、上一页、下一页触发的事件函数
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage=val;
this.selectByPage();
}
}
});
</script>
</body>
</html>BrandMapper.xml
<select id="selectAll" resultType="com.itheima.pojo.Brand">
select * from tb_brand
<where>
<if test="status!=null">
status=#{status}
</if>
<if test="brandName!=null and brandName!=''">
and brand_name like concat('%',#{brandName},'%')
</if>
<if test="companyName!=null and companyName!=''">
and company_name like concat('%',#{companyName},'%')
</if>
</where>
</select>SelectByPageServlet
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.PageInfo;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/SelectByPageServlet")
public class SelectByPageServlet extends HttpServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
String pageSize = request.getParameter("pageSize");
String currentSize = request.getParameter("currentSize");
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
PageInfo<Brand> pageInfo= bs.SelectByPage(Integer.parseInt(currentSize),Integer.parseInt(pageSize),brand);
objectMapper.writeValue(response.getWriter(),pageInfo);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
BrandService
public class BrandService {
SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
public PageInfo<Brand> SelectByPage(int currentSize, int pageSize, Brand brand){
SqlSession sqlSession = sqlSessionFactory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
PageHelper.startPage(currentSize, pageSize);
List<Brand> brands = mapper.selectAll(brand);
for (Brand brand1 : brands) {
System.out.println(brand1);
}
PageInfo<Brand> pageInfo=new PageInfo<>(brands);
return pageInfo;
};BrandMapper
List<Brand> selectAll(Brand brand);新增品牌
新增前端代码的实现
新增后端代码的实现
批量删除
Servlet 代码优化
代码优化1
前端改变访问地址
Brand.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</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.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" 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" @click="deleteByIds" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--添加对话框-->
<el-dialog
title="添加品牌"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="addFormData" :model="addFormData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="addFormData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="addFormData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addFormData.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="addFormData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addFormData.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">立即添加</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--修改对话框-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<el-form ref="editFormData" :model="editFormData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="editFormData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="editFormData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="editFormData.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="editFormData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="editFormData.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="update">立即修改</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--展示数据的table表格-->
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@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"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="statusStr"
label="当前状态"
align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
//定义搜索表单模型数据
brand: {
status: '',
brandName: '',
companyName: ''
},
//新增对话框显示或隐藏模型数据
dialogVisible: false,
//新增对话框表单模型数据
addFormData: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
//编辑对话框显示或隐藏模型数据
editDialogVisible: false,
//编辑对话框表单模型数据
editFormData: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '1'
},
//表格模型数据
tableData: [],
//保存复选框选中条目数据对象数组
multipleSelection: [],
//分页条当前页数
currentPage: 1,
//每页条数模型数据
pageSize:5,
//分页条总条数
total:0,
}
},
mounted(){
this.selectByPage();
},
methods: {
/*分页查询*/
selectByPage(){
var _this=this;
axios.post("brand/SelectByPage?currentSize="+_this.currentPage+"&pageSize="+_this.pageSize,_this.brand).then(resp=>{
_this.tableData = resp.data.list;
_this.total = resp.data.total;
});
},
/*批量删除方法*/
deleteByIds(){
axios.post("brand/deleteByIds",this.multipleSelection).then(resp=>{
if(resp.data=="success"){
this.$message({
message: '批量删除成功！',
type: 'success'
});
this.selectByPage();
}
})
},
/*提示新增成功消息*/
open2(){
this.$message({
message: '恭喜你，添加',
type: 'success'
});
},
//搜索表单查询按钮单击事件绑定的函数
onSubmit() {
console.log(this.brand);
this.selectByPage(this.brand)
},
//新增对话框"立即添加"按钮单击事件绑定函数
add() {
var _this=this;
console.log(this.addFormData);
axios.post("brand/add",this.addFormData).then(resp=>{
if ( resp.data=="success"){
this.dialogVisible=false;
this.selectByPage();
_this.addFormData={
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
this.open2();
}
})
},
//表格复选框选中时间绑定函数
handleSelectionChange(val) {
for (let i = 0; i < val.length; i++) {
this.multipleSelection[i]=val[i].id
}
console.log(this.multipleSelection);
},
//表格中“修改”和“删除”按钮单击事件函数
handleEdit(index, row) {
//index表示当前条目索引，row表示当前条目数据对象
console.log(index, row);
//展示修改对话框
this.editDialogVisible=true;
//给表单模型数据赋值，展示要修改的数据
this.editFormData={
id:row.id,
brandName:row.brandName,
companyName:row.companyName,
ordered:row.ordered,
description:row.description,
status:row.status
};
//status属性只有转换成字符串开关才可以正常显示。
this.editFormData.status+=""
},
handleDelete(index, row) {
console.log(index, row);
//index表示当前条目索引，row表示当前条目数据对象，row.id表示当前条目数据对象的id值
},
//点击编辑弹出框上的"立即修改"按钮单击事件函数
update(){
console.log(this.editFormData);
},
//分页条事件
//选择每页条数触发的事件函数
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize=val;
this.selectByPage();
},
//点击页码、上一页、下一页触发的事件函数
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage=val;
this.selectByPage();
}
}
});
</script>
</body>
</html>brand.servlet
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.PageInfo;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/brand/*")
public class brandServlet extends HttpServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String URI = request.getRequestURI();
//第一种方法
int i = URI.lastIndexOf("/");//最后一个/所处的位置
String NamePath=URI.substring(i+1);//截取索引为/后面一位字符到末尾
if("add".equals(NamePath)){
add(request,response);
}else if("deleteByIds".equals(NamePath)){
deleteByIds(request,response);
}else if("SelectByPage".equals(NamePath)){
SelectByPage(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
bs.add(brand);
objectMapper.writeValue(response.getWriter(),"success");
}
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int[] ints = objectMapper.readValue(request.getReader(), int[].class);
bs.deleteByIds(ints);
objectMapper.writeValue(response.getWriter(),"success");
}
public void SelectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
String pageSize = request.getParameter("pageSize");
String currentSize = request.getParameter("currentSize");
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
PageInfo<Brand> pageInfo= bs.SelectByPage(Integer.parseInt(currentSize),Integer.parseInt(pageSize),brand);
objectMapper.writeValue(response.getWriter(),pageInfo);
}
}
代码优化二
BaseService
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.Method;
@WebServlet("/BaseServlet")
public class BaseServlet extends HttpServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String URI = request.getRequestURI();
//第一种方法
int i = URI.lastIndexOf("/");//最后一个/所处的位置
String NamePath=URI.substring(i+1);//截取索引为/后面一位字符到末尾
try {
Class<? extends BaseServlet> aClass = this.getClass();
Method method = aClass.getDeclaredMethod(NamePath, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this,request,response);
} catch (Exception e) {
e.printStackTrace();
}
}
}
brandServlet
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.PageInfo;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/brand/*")
public class brandServlet extends BaseServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
/* @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String URI = request.getRequestURI();
//第一种方法
int i = URI.lastIndexOf("/");//最后一个/所处的位置
String NamePath=URI.substring(i+1);//截取索引为/后面一位字符到末尾
if("add".equals(NamePath)){
add(request,response);
}else if("deleteByIds".equals(NamePath)){
deleteByIds(request,response);
}else if("SelectByPage".equals(NamePath)){
SelectByPage(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
*/
public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
bs.add(brand);
objectMapper.writeValue(response.getWriter(),"success");
}
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int[] ints = objectMapper.readValue(request.getReader(), int[].class);
bs.deleteByIds(ints);
objectMapper.writeValue(response.getWriter(),"success");
}
public void SelectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
String pageSize = request.getParameter("pageSize");
String currentSize = request.getParameter("currentSize");
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
PageInfo<Brand> pageInfo= bs.SelectByPage(Integer.parseInt(currentSize),Integer.parseInt(pageSize),brand);
objectMapper.writeValue(response.getWriter(),pageInfo);
}
}
UserServlet(注意这个Servlet是copy的brandServlet，因为这个案例里没有操作UserServlet的,之后若是一个案例里写不同类的servlet，可以按照自己的写）
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.PageInfo;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/User/*")
public class UserServlet extends BaseServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
/* @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String URI = request.getRequestURI();
//第一种方法
int i = URI.lastIndexOf("/");//最后一个/所处的位置
String NamePath=URI.substring(i+1);//截取索引为/后面一位字符到末尾
if("add".equals(NamePath)){
add(request,response);
}else if("deleteByIds".equals(NamePath)){
deleteByIds(request,response);
}else if("SelectByPage".equals(NamePath)){
SelectByPage(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}*/
public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
bs.add(brand);
objectMapper.writeValue(response.getWriter(),"success");
}
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int[] ints = objectMapper.readValue(request.getReader(), int[].class);
bs.deleteByIds(ints);
objectMapper.writeValue(response.getWriter(),"success");
}
public void SelectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
String pageSize = request.getParameter("pageSize");
String currentSize = request.getParameter("currentSize");
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
PageInfo<Brand> pageInfo= bs.SelectByPage(Integer.parseInt(currentSize),Integer.parseInt(pageSize),brand);
objectMapper.writeValue(response.getWriter(),pageInfo);
}
}删除一个品牌
handleDelete(index, row) {
console.log(index, row);
this. multipleSelection[0]=row.id;
this.deleteByIds();
//index表示当前条目索引，row表示当前条目数据对象，row.id表示当前条目数据对象的id值
},修改品牌
前端代码
//点击编辑弹出框上的"立即修改"按钮单击事件函数
update(){
console.log(this.editFormData);
var _this=this;
axios.post("brand/update",this.editFormData).then(resp=>{
if ( resp.data=="success") {
this.editDialogVisible = false;
this.selectByPage();
_this.editFormData = {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
this.$message({
message: '恭喜你，修改成功',
type: 'success'
});
}
})
},程序优化几个小漏洞
<!--搜索表单-->
<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=""></el-option>
<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.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>2.删除玩这一整页数据，显示后一页内容
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!--配置驼峰命名-->
<settings>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!--reasonable：分页合理化参数，默认值为false,直接根据参数进行查询。
当该参数设置为 true 时，pageNum<=0 时会查询第一页， pageNum>pages（超过总数时），会查询最后一页。-->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///brand_demo?useSSL=false"/>
<property name="username" value="root"/>
<property name="password" value="root"/>
</dataSource>
</environment>
</environments>
<mappers>
<!--扫描mapper-->
<package name="com.itheima.mapper"/>
</mappers>
</configuration>整个程序的代码
Brand.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</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=""></el-option>
<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.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" 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" @click="deleteByIds" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--添加对话框-->
<el-dialog
title="添加品牌"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="addFormData" :model="addFormData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="addFormData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="addFormData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addFormData.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="addFormData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addFormData.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">立即添加</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--修改对话框-->
<el-dialog
title="修改品牌"
:visible.sync="editDialogVisible"
width="30%">
<el-form ref="editFormData" :model="editFormData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="editFormData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="editFormData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="editFormData.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="editFormData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="editFormData.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="update">立即修改</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--展示数据的table表格-->
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@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"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="statusStr"
label="当前状态"
align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
//定义搜索表单模型数据
brand: {
status: '',
brandName: '',
companyName: ''
},
//新增对话框显示或隐藏模型数据
dialogVisible: false,
//新增对话框表单模型数据
addFormData: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
//编辑对话框显示或隐藏模型数据
editDialogVisible: false,
//编辑对话框表单模型数据
editFormData: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '1'
},
//表格模型数据
tableData: [],
//保存复选框选中条目数据对象数组
multipleSelection: [],
//分页条当前页数
currentPage: 1,
//每页条数模型数据
pageSize:5,
//分页条总条数
total:0,
}
},
mounted(){
this.selectByPage();
},
methods: {
/*分页查询*/
selectByPage(){
var _this=this;
axios.post("brand/SelectByPage?currentSize="+_this.currentPage+"&pageSize="+_this.pageSize,_this.brand).then(resp=>{
_this.tableData = resp.data.list;
_this.total = resp.data.total;
});
},
/*批量删除方法*/
deleteByIds(){
axios.post("brand/deleteByIds",this.multipleSelection).then(resp=>{
if(resp.data=="success"){
this.$message({
message: '删除成功！',
type: 'success'
});
this.selectByPage();
}
})
},
/*提示新增成功消息*/
open2(){
this.$message({
message: '恭喜你，添加成功',
type: 'success'
});
},
//搜索表单查询按钮单击事件绑定的函数
onSubmit() {
console.log(this.brand);
this.selectByPage(this.brand)
},
//新增对话框"立即添加"按钮单击事件绑定函数
//新增对话框"立即添加"按钮单击事件绑定函数
add() {
var _this=this;
console.log(this.addFormData);
axios.post("brand/add",this.addFormData).then(resp=>{
if ( resp.data=="success"){
this.dialogVisible=false;
this.selectByPage();
_this.addFormData={
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
this.open2();
}
})
},
//表格复选框选中时间绑定函数
handleSelectionChange(val) {
for (let i = 0; i < val.length; i++) {
this.multipleSelection[i]=val[i].id
}
console.log(this.multipleSelection);
},
//表格中“修改”和“删除”按钮单击事件函数
handleEdit(index, row) {
//index表示当前条目索引，row表示当前条目数据对象
console.log(index, row);
//展示修改对话框
this.editDialogVisible=true;
//给表单模型数据赋值，展示要修改的数据
this.editFormData={
id:row.id,
brandName:row.brandName,
companyName:row.companyName,
ordered:row.ordered,
description:row.description,
status:row.status
};
//status属性只有转换成字符串开关才可以正常显示。
this.editFormData.status+=""
},
handleDelete(index, row) {
console.log(index, row);
this. multipleSelection[0]=row.id;
this.deleteByIds();
//index表示当前条目索引，row表示当前条目数据对象，row.id表示当前条目数据对象的id值
},
//点击编辑弹出框上的"立即修改"按钮单击事件函数
update(){
console.log(this.editFormData);
var _this=this;
axios.post("brand/update",this.editFormData).then(resp=>{
if ( resp.data=="success") {
this.editDialogVisible = false;
this.selectByPage();
_this.editFormData = {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: '0'
},
this.$message({
message: '恭喜你，修改成功',
type: 'success'
});
}
})
},
//分页条事件
//选择每页条数触发的事件函数
handleSizeChange(val){
console.log(`每页 ${val} 条`);
this.pageSize=val;
this.selectByPage();
},
//点击页码、上一页、下一页触发的事件函数
handleCurrentChange(val){
console.log(`当前页: ${val}`);
this.currentPage=val;
this.selectByPage();
}
}
});
</script>
</body>
</html>BaseServlet
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.Method;
@WebServlet("/BaseServlet")
public class BaseServlet extends HttpServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String URI = request.getRequestURI();
//第一种方法
int i = URI.lastIndexOf("/");//最后一个/所处的位置
String NamePath=URI.substring(i+1);//截取索引为/后面一位字符到末尾
try {
Class<? extends BaseServlet> aClass = this.getClass();
Method method = aClass.getDeclaredMethod(NamePath, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this,request,response);
} catch (Exception e) {
e.printStackTrace();
}
}
}
brandServlet
package com.itheima.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.PageInfo;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/brand/*")
public class brandServlet extends BaseServlet {
private BrandService bs = new BrandService();
private ObjectMapper objectMapper = new ObjectMapper();
/* @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String URI = request.getRequestURI();
//第一种方法
int i = URI.lastIndexOf("/");//最后一个/所处的位置
String NamePath=URI.substring(i+1);//截取索引为/后面一位字符到末尾
if("add".equals(NamePath)){
add(request,response);
}else if("deleteByIds".equals(NamePath)){
deleteByIds(request,response);
}else if("SelectByPage".equals(NamePath)){
SelectByPage(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
*/
public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
bs.add(brand);
objectMapper.writeValue(response.getWriter(),"success");
}
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int[] ints = objectMapper.readValue(request.getReader(), int[].class);
bs.deleteByIds(ints);
objectMapper.writeValue(response.getWriter(),"success");
}
public void SelectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
String pageSize = request.getParameter("pageSize");
String currentSize = request.getParameter("currentSize");
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
PageInfo<Brand> pageInfo= bs.SelectByPage(Integer.parseInt(currentSize),Integer.parseInt(pageSize),brand);
objectMapper.writeValue(response.getWriter(),pageInfo);
}
public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Brand brand = objectMapper.readValue(request.getReader(), Brand.class);
bs.update(brand);
objectMapper.writeValue(response.getWriter(),"success");
}
}
BrandMapper
package com.itheima.mapper;
import com.itheima.pojo.Brand;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Update;
import java.util.List;
public interface BrandMapper {
List<Brand> selectAll(Brand brand);
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);
void deleteByIds( @Param("ids")int[] ids);
@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
package com.itheima.service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.itheima.mapper.BrandMapper;
import com.itheima.pojo.Brand;
import com.itheima.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import java.util.List;
public class BrandService {
SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
public PageInfo<Brand> SelectByPage(int currentSize, int pageSize, Brand brand){
SqlSession sqlSession = sqlSessionFactory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
PageHelper.startPage(currentSize, pageSize);
List<Brand> brands = mapper.selectAll(brand);
for (Brand brand1 : brands) {
System.out.println(brand1);
}
PageInfo<Brand> pageInfo=new PageInfo<>(brands);
return pageInfo;
};
public void add(Brand brand) {
SqlSession sqlSession = sqlSessionFactory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.add(brand);
System.out.println(brand);
sqlSession.commit();
sqlSession.close();
}
public void deleteByIds(int[] ints) {
SqlSession sqlSession = sqlSessionFactory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.deleteByIds(ints);
sqlSession.commit();
sqlSession.close();
}
public void update(Brand brand) {
SqlSession sqlSession = sqlSessionFactory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.update(brand);
System.out.println(brand);
sqlSession.commit();
sqlSession.close();
}
}
工具类
package com.itheima.util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class SqlSessionFactoryUtils {
private static SqlSessionFactory sqlSessionFactory;
static {
//静态代码块会随着类的加载而自动执行，且只执行一次
try {
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
public static SqlSessionFactory getSqlSessionFactory(){
return sqlSessionFactory;
}
}
BrandMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.mapper.BrandMapper">
<!--手动映射结果集，解决查询结果字段名和Bean的属性名不一样无法自动封装的问题。-->
<resultMap id="brandResultMap" type="com.itheima.pojo.Brand">
<result property="brandName" column="brand_name" />
<result property="companyName" column="company_name" />
</resultMap>
<delete id="deleteByIds">
delete from tb_brand where id in
<foreach collection="ids" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</delete>
<select id="selectAll" resultType="com.itheima.pojo.Brand">
select * from tb_brand
<where>
<if test="status!=null">
status=#{status}
</if>
<if test="brandName!=null and brandName!=''">
and brand_name like concat('%',#{brandName},'%')
</if>
<if test="companyName!=null and companyName!=''">
and company_name like concat('%',#{companyName},'%')
</if>
</where>
</select>
</mapper>(配置文件老师资料里面有）
扫一扫
2215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
