端框架：vue.js

效果图：

页面css样式：

<style>

* {

margin: 0;

padding: 0;

}

#app {

width: 900px;

padding: 20px;

margin: 50px auto;

box-shadow: 0 0 10px #828282;

}

table,

td,

th {

border-collapse: collapse;

border-spacing: 0

}

table {

width: 100%

}

td,

th {

border: 1px solid #bcbcbc;

padding: 5px 10px

}

th {

background: #42b983;

font-size: 1.2rem;

font-weight: 400;

color: #fff;

cursor: pointer

}

tr:nth-of-type(odd) {

background: #fff

}

tr:nth-of-type(even) {

background: #eee

}

p{

padding:20px;

}

button{

display: inline-block;

border:none;

background: #42b983;

padding:10px;

color:#fff;

width:80px;

border-radius: 20px;

cursor: pointer;

}

input{

width:80%;

padding:10px;

}

</style>

html代码：

<div id="app">

<h1>图书管理系统</h1>

<p>

<label>图书名称：</label>

<input type="text" v-model="bookName" placeholder="请输入图书名称关键字..." />

</p>

<table>

<thead>

<th>名称</th>

<th>作者</th>

<th>单价</th>

<th>操作</th>

</thead>

<tbody>

<tr v-for="(book,index) in books">

<td>{{ book.name }}</td>

<td>{{ book.author }}</td>

<td>¥{{ book.price | prodFormart }}元</td>

<td><button type="button" @click="doRemove(index)">删除</button></td>

</tr>

</tbody>

</table>

</div>

js代码：

<!---导入外部vue.js->

<script src="./js/vue.min.js"></script>

<script>

var vm=new Vue({

el: "#app",

data: {

bookList: [// 模拟数据源

{

name: "原则",

author: "[美] 瑞·达利欧 / 刘波、綦相 / 中信出版社",

price: 98.00

},

{

name: "爸爸，穷爸爸",

author: "[美] 罗伯特?T?清崎、莎伦?L?莱希特 / 杨君，杨明 / 世界图书出版公司",

price: 18.80

},

{

name: "影响力",

author: "[美] 罗伯特·西奥迪尼 / 陈旭 / 中国人民大学出版社",

price: 45.00

},

],

bookName: ""

},

methods: {

doRemove: function (index) {

if (confirm("是否删除该图书？")) {

this.books.splice(index, 1);

}

}

},

computed: {// 实现查询

books: function () {

var _this=this;

return _this.bookList.filter(function (book) {

return book.name.indexOf(_this.bookName) !=-1;

});

}

},

filters: {

prodFormart: function (val) {

return val.toFixed(2);

}

}

});

</script>

最终效果展示：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

需要源码的私信我噢

就废话不多说了，大家还是直接看代码吧

//执行的是删除信息的操作
 String a=request.getParameter("name");
 a=URLEncoder.encode(a, "ISO-8859-1");
 String name=URLDecoder.decode(a, "UTF-8");
 String num=request.getParameter("num");
 System.out.println("name:"+name+"num:"+num);
 String sql="delete from person_info where name=? and num=?";
 String sz[]={name,num};
 JdbcUtils.update(sql, sz);

 //刷新操作\

 String sqls="select * from person_info";
 ResultSet rs=JdbcUtils.select(sqls, null);
 ArrayList<Person_info> list=new ArrayList<Person_info>();
 try {
 while(rs.next()){
 Person_info pi=new Person_info(rs.getString(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getString(5), rs.getString(6));
 list.add(pi);
 }
 request.setAttribute("list", list);
 request.getRequestDispatcher("Personnel_definition.jsp").forward(request, response);
 } catch (SQLException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 } 
  
 }

image.png

补充知识：关于分页时怎么实现当本页面最后一条记录被删除时,自动向上一个页面跳转的实现（java实现）

问题详解

在做批量删除时，发现若批量删除整页时，会自动跳到第一页首页，而不是返回删除当前页的上一页，不符合产品要求且使界面交互不好，给用户带来糟糕体验。

思路详解

在controller层传参时要考虑到不仅要传入需要删除的id集合，同时传入pageSize,pageNum以及总条数集合的查询条件（如：本示例会传入groupId(分组id)）,在删除成功后初始化当前页，先根据查询条件查询出总条数数量，在pageSize不等于null或为0的情况下。算出余数[（pageSize*pageNum-count）%pageSize ].若余数为0，则当前页等于pageNum-1;若余数不为0，则当前页=pageNum.将结果当前页传给前台即可。

后台代码实现

controller层#

@Api(description="分组下的学生",value="分组下的学生")
@RestController
@RequestMapping("studentGroup")
public class StudentGroupController {
 @Autowired
 private RestStudentGroupService restStudentGroupService;
 
 @RequestMapping(value="deleteGroupStudent",method=RequestMethod.POST)
 @ApiOperation(value="删除分组中的学生",notes="删除分组中的学生")
 public ResponseObj deleteGroupStudent(@RequestParam(value="groupId",required=true)Long groupId,
   @RequestParam(value="ids",required=true)String ids,
   @RequestParam(value="pageSize",required=false)Integer pagesize,
   @RequestParam(value="pageNum",required=false)Integer pageNum){
 
 return restStudentGroupService.deleteGroupStudent(groupId,ids,pagesize,pageNum);
 }
 }

service层#

@FeignClient(value=ServiceName.VALUE)
public interface RestStudentGroupService {
 
 @RequestMapping(value="/school/cloud/student/deleteGroupStudent",method=RequestMethod.POST)
 public ResponseObj deleteGroupStudent(@RequestParam(value="groupId")Long groupId,
   @RequestParam(value="ids")String ids,
   @RequestParam(value="pageSize")Integer pagesize,
   @RequestParam(value="pageNum")Integer pageNum);
   }

serviceImpl层#

@Service
public class RestStudentGroupServiceImpl implements RestStudentGroupService {
 
 @Autowired
 private DubboStudentGroupService dubboStudentGroupService ;
 @Override
 public ResponseObj deleteGroupStudent(Long groupId,String ids,Integer pageSize,Integer pageNum) {
 
 List<Long> idList=TextUtils.split(ids);
 if(groupId==null || idList==null || idList.size()==0){
 ResponseObj responseObj=ResponseObj.ERROR("参数错误");
 responseObj.setSuccess(true);
 return responseObj;
 }
 ServiceResult<Long> serviceResult=dubboStudentGroupService .deleteCorpGroup(idList, groupId);
 if(!serviceResult.getSuccess()){
 throw new RuntimeException("分组下学生查询失败");
 }
 //应前端要求加此dto，封装传给前台的当前页属性
 CurrenPageDto currenPageDto=new CurrenPageDto();
 //初始化当前页
 Integer currentPage=1;
 //查出该分组id下的学生数量
 ServiceResult<Long> itemCountLongs=dubboStudentGroupService.getTotalCount(groupId);
 Long itemCountLong=itemCountLongs.getResult();
 Integer itemCount=itemCountLong!=null ? itemCountLong.intValue() : 0;
 //"查询到学生数量：{},pageSize:{}", itemCount,pageSize;
 if(pageSize !=null && pageSize !=0){
 //算出余数
 Integer temp=(pageNum*pageSize-itemCount)%pageSize;
 if(temp==0){
 //余数为0的话就pageNum-1
 currentPage=(pageNum - 1)==0 ? 1 : (pageNum -1) ;
 }else {
 //余数不为0则等于pageNum
 currentPage=pageNum;
 }
 currenPageDto.setPresentPage(currentPage);
 }
 ResponseObj responseObj=ResponseObj.SUCCESS();
 responseObj.setData(currenPageDto);
 return responseObj;
 }
}

dubbo接口的service层#

①：//删除分组下的学生
ServiceResult<Long> deleteCorpGroup(List<Long> idList,Long groupId);
②：//根据条件查询对应的条目总数
ServiceResult<Long> getTotalCount(Long groupId);

dubbo接口的serviceImpl层#

`①：``//删除分组下的学生`

`@Override`

`public` `ServiceResult<Long> deleteCorpGroup(List<Long> idList, Long groupId) {`

`ServiceResult<Long> result=` `new` `ServiceResult<>();`

`try` `{`

`studentGroupDao.deleteCorpGroup(idList, groupId);`

`}` `catch` `(Exception e) {`

`log.error(``"调用{}方法 异常"``,` `"[RestStudentGroupServiceImpl .deleteCorpGroup]"``);`

`log.error(``"方法使用参数：[idList:{},groupId:{}]"``, idList, groupId);`

`log.error(``"异常信息：{}"``, e);`

`result.setErrMessage(``"调用deleteCorpGroup方法异常，异常信息："` `+ e.getMessage());`

`}`

`return` `result;`

`}`

`②：``//根据条件查询对应的条目总数`

`@Override`

`public` `ServiceResult<Long> getTotalCount(Long groupId) {`

`ServiceResult<Long> result=` `new` `ServiceResult<>();`

`try` `{`

`long` `count=studentGroupDao.getFindCorpGroupDirectoryCount(groupId);`

`result.setResult(count);`

`}` `catch` `(Exception e) {`

`log.error(``"调用{}方法 异常"``,` `"[RestStudentGroupServiceImpl .getTotalCount]"``);`

`log.error(``"方法使用参数：[groupId:{}]"``, groupId);`

`log.error(``"异常信息：{}"``, e);`

`result.setErrMessage(``"调用getTotalCount方法异常，异常信息："` `+ e.getMessage());`

`}`

`return` `result;`

`}`

 |

[](javascript：; "全选")[](javascript：; "复制java代码")

<textarea style="margin: 0px; padding: 0px; outline: none; font: 16px / 24px tahoma, arial, 宋体;"></textarea>

#dubbo接口的dao层#

`①：``//删除分组下的学生`

`Long deleteCorpGroup(``@Param``(value=` `"idList"``) List<Long> idList,``@Param``(value=` `"groupId"``) Long groupId);`

`②：``//根据条件查询对应的条目总数`

`Long getFindCorpGroupDirectoryCount(``@Param``(value=` `"groupId"``) Long groupId);`

 |

dubbo接口的sql#

①：//删除分组下的学生
 <delete id="deleteCorpGroup">
 delete from student_group where group_id=#{groupId} and id in
 <foreach collection="idList" index="index" separator="," item="id"
  open="(" close=")">
 #{id}
 </foreach>
 </delete>
②：//根据条件查询对应的条目总数
 <select id="getFindCorpGroupDirectoryCount" resultType="long">
 SELECT COUNT(1)
 FROM student_group 
 where group_id=#{groupId}
 </select>

Entity类(学生分组类)#（get,set函数省略）

|

public class StudentGroup implements java.io.Serializable {

/**

*

*/

private static final long serialVersionUID=1L;

/**

* @描述:

* @字段:id BIGINT(19)

*/

private Long StudentGroupId;

/**

* @描述:

* @字段:group_id BIGINT(19)

*/

private Long groupId;

/**

* @描述:

* @字段:id BIGINT(19)

* 此id为学生表id

*/

private Long id;

/**

* @描述:创建时间

* @字段:create_time DATETIME(19)

*/

private java.util.Date createTime;

* @描述:创建人用户名

* @字段:create_user_name VARCHAR(``30``)

*/

private String createUserName;

/**

* @描述:创建人用户ID

* @字段:create_user_id BIGINT(19)

*/

private Long createUserId;

/**

* @描述:更新时间

* @字段:update_time DATETIME(19)

*/

private java.util.Date updateTime;

* @描述:更新人用户名

* @字段:update_user_name VARCHAR(``30``)

*/

private String updateUserName;

/**

* @描述:更新人用户ID

* @字段:update_user_id BIGINT(19)

*/

private Long updateUserId;

}

|

[](javascript：; "全选")[](javascript：; "复制java代码")

<textarea style="margin: 0px; padding: 0px; outline: none; font: 16px / 24px tahoma, arial, 宋体;"></textarea>