赞
踩
各位好呀,本次介绍项目是基于SpringBoot开发的一个校园二手书管理系统,有部分功能由本人完成(如:前端样式、精准查询、模糊查询、导出Execel),本篇文章,着重聚焦技术要点,提前告知修改项目需要的前置知识!
使用技术
由Maven构建的项目,技术栈是由SpringBoot+Mybatis+Thymeleaf组成,其中项目引入了一些中间件,如PageHelper(分页插件)、Lombok(数据层配置)、easyexcel(导出execel形式数据)
Lombok是什么?
使用Lombok提供的注解,可以快速生成类的getter、setter和构造方法等等,当变量发生改变时,也不再需要修改对这些方法进行修改,Lombok会搞定这件事。
比如以下代码的 @AllArgsConstructor注解就是生成类的全参构造方法, @Data注解作用是给类的成员变量添加getter和setter方法
- @Data
- @NoArgsConstructor
- @AllArgsConstructor
- public class Book {
-
- private int id;
- private String name;
- private String publisher;
- private String code;
- private String author;
- private double price;
- private int newDeg;
-
- private int uId;
- private String uname;
-
- private int state;
- private String sname;
-
- private Date publishTime;
-
- }
系统功能
1.用户登录(含验证码)
2.二手书管理
3.订单管理
4.撤销订单管理
5.院系管理
6.专业管理
7.用户信息管理
功能简读
精准查询和模糊查询的区别?
拿订单查询功能为例,精准查询将会在数据库里匹配用户输入的所有字符,在sql语句里相当于where column = ? 模糊查询使用的是mysql的关键字like来对所有搜索条件进行模糊查询,但是下拉列表选中条件还是以精准匹配进行查询
下面找出对应的OrderMapper.xml文件
- <!-- 订单精准查询-->
- <select id="selectAccuracyOrder" resultType="order">
- select o.id as id,o.id_buy as id_buy,u.nickname as nickname,u.tel as tel,u.address as address,
- o.book_id as book_id,b.name as name,b.publisher as publisher,b.code as code,b.author as author,b.price as
- price,b.newDeg as newDeg,b.uId as uId,
- o.time as time,o.state as state,s.name as sname
- from orders o inner join
- user u on o.id_buy = u.id inner join
- state s on o.state = s.id inner join
- book b on o.book_id = b.id
- <where>
- <if test="oid!=null">
- and o.id = #{oid}
- </if>
-
- <if test="username!=null">
- and u.nickname = #{username}
- </if>
- <if test="status!=null">
- and o.state = #{status}
- </if>
- </where>
- </select>
- <!-- 订单模糊查询-->
- <select id="selectLikeOrder" resultType="order">
- select o.id as id,o.id_buy as id_buy,u.nickname as nickname,u.tel as tel,u.address as address,
- o.book_id as book_id,b.name as name,b.publisher as publisher,b.code as code,b.author as author,b.price as
- price,b.newDeg as newDeg,b.uId as uId,
- o.time as time,o.state as state,s.name as sname
- from orders o inner join
- user u on o.id_buy = u.id inner join
- state s on o.state = s.id inner join
- book b on o.book_id = b.id
- <where>
- <if test="oid!=null">
- and o.id = #{oid}
- </if>
-
- <if test="username!=null">
- and u.nickname like concat('%',#{username},'%')
- </if>
- <if test="status!=null">
- and o.state = #{status}
- </if>
- </where>
- </select>
-
以Execel文件形式导出数据如何实现?
EasyExcel是一个基于Java的简单、省内存的读写Excel的开源项目,由阿里巴巴提供,学习链接:EasyEcel官网
注意:在这个项目中,所有的导出Excel功能默认是导出当前检索的所有页数据
第一步:导入easyexcel坐标
- <dependency>
- <groupId>com.alibaba</groupId>
- <artifactId>easyexcel</artifactId>
- <version>3.0.5</version>
- </dependency>
第二步:设置单元格的列名以及样式(以导出用户数据为例)
- @Data
- @ToString
- @NoArgsConstructor
- @AllArgsConstructor
- @ContentStyle(horizontalAlignment = HorizontalAlignmentEnum.CENTER) //水平居中
- public class UserExcelData {
- @ExcelProperty("编号")
- private Integer id;
-
- @ExcelProperty("用户名")
- private String username;
-
- @ExcelProperty("姓名")
- private String name;
-
- @ExcelProperty("院系")
- @ColumnWidth(20)
- private String depart;
-
- @ExcelProperty("专业")
- @ColumnWidth(20)
- private String major;
-
- @ExcelProperty("年级")
- @ColumnWidth(10)
- private Integer grade;
- }
-
其中@ExcelProperty注解代表导出该成员变量的值对应列名,@ContentStyle是设置表格样式
第三步:定义js导出事件并编写后端接口
前端核心代码:
- <!-- form搜索输入框 -->
- <form th:action="@{/user/query}" method="post" id="queryform">
- <div class="content_right_content">
- <span>
- <input name="btnType" id="btnType" value="1" th:value="${btnType}" hidden>
- <input name="pageNum" id="pageNum" value="1" hidden>
- 用户名:<input type="text" placeholder="请输入用户名" name="username" th:value="${username}">
-
- 姓名:<input type="text" placeholder="请输入姓名" name="name" th:value="${name}">
- 学院:<select name="depart_id">
- <option value="0">全部</option>
- <option th:value="${depart.id}" th:each="depart:${departList}"
- th:selected="${select_depid} == ${depart.id}"
- th:text="${depart.name}"></option>
- </select>
-
- 专业:<select name="major_id">
- <option value="0">全部</option>
- <option th:value="${major.id}" th:each="major:${majorList}"
- th:selected="${select_majorid} == ${major.id}"
- th:text="${major.name}"></option>
- </select>
-
- <button class="btn btn-success btn-sm" onclick="queryTypeSumbit(1)">精确查询</button>
- <button class="btn btn-success btn-sm" onclick="queryTypeSumbit(2)">模糊查询</button>
-
-
- </span>
- </div>
- </form>
-
- <a class="btn btn-primary" style="color: white;position: absolute;left: 0" value="1" onclick="exportSumbit()">导出全部数据</a>
-
前端js处理事件
- function exportSumbit() {
- var myform = document.getElementById("queryform");
- myform.setAttribute("action", "/user/export");
- myform.submit();
- }
主要工作:获取表单DOM,自动提交到后端控制器(Controller),控制器接受到请求就会根据搜索条件查询全部的数据,然后将这些数据以excel文件形式返回给前端
后端控制器:
- /*
- 导出Execel
- */
- @RequestMapping("/user/export")
- @ResponseBody
- public String exportExcel(@RequestParam(value = "username", required = false) String username,
- @RequestParam(value = "name", required = false) String name,
- @RequestParam(value = "depart_id", required = false) Integer depart_id,
- @RequestParam(value = "major_id", required = false) Integer major_id,
- @RequestParam(value = "btnType", defaultValue = "1") Integer btnType,
- @RequestParam(defaultValue = "1") Integer pageNum,
- @RequestParam(defaultValue = "12") Integer pageSize,
- HttpServletResponse response) throws IOException {
- List<User> users = null;
- if (btnType == 1) {
- //精准查询
- users = userService.accuracyQueryUser(StringUtils.isEmpty(username) ? null : username, StringUtils.isEmpty(name) ? null : name,
- depart_id == null || depart_id == 0 ? null : depart_id, major_id == null || major_id == 0 ? null : major_id);
-
- } else if (btnType == 2) {
- //模糊查询(对用户名和姓名模糊查询)
- users = userService.likeQueryUser(StringUtils.isEmpty(username) ? null : username, StringUtils.isEmpty(name) ? null : name,
- depart_id == null || depart_id == 0 ? null : depart_id, major_id == null || major_id == 0 ? null : major_id);
- }
- System.out.println("users size : " + users.size());
- List<UserExcelData> list = new ArrayList<>();
- for (User user : users) {
- list.add(new UserExcelData(user.getId(), user.getNickname(), user.getName(), user.getDepartName(), user.getMajorName(), user.getGrade()));
- }
-
- //设置响应头信息
- response.setContentType("application/vnd.ms-excel");
- response.setCharacterEncoding("utf-8");
- String fileName = URLEncoder.encode("用户信息", "Utf-8");
- response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + fileName + ".xlsx");
- //获得输出流
- ServletOutputStream outputStream = response.getOutputStream();
- //工作簿对象
- ExcelWriterBuilder writerBuilder = EasyExcel.write(outputStream, UserExcelData.class);
- //工作表对象
- ExcelWriterSheetBuilder sheet = writerBuilder.sheet();
- //导出Excel
- sheet.doWrite(list);
- outputStream.close();
- return "";
-
- }
效果展示:
小结:使用EasyExcel进行数据的导出不依赖于前端控件,还是在于后端改变响应头信息将真正数据反馈到前端
源码获取方式
wx《源码小客栈》,回复"校园"或"二手书"获取完整说明文章,
源码从菜单栏 "源码" -> "Java"中获取
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。