Hello everyone, this introduction project is based on a campus second-hand book management system developed by SpringBoot . Some functions are completed by myself (such as: front-end style, precise query, fuzzy query, export to Excel). This article focuses on technical points , Inform in advance the pre-knowledge required for modifying the project!
use technology
The project built by Maven, the technology stack is composed of SpringBoot+Mybatis+Thymeleaf, in which the project introduces some middleware, such as PageHelper (paging plug-in), Lombok (data layer configuration), easyexcel (export execel form data)
-
What is Lombok?
Using the annotations provided by Lombok, you can quickly generate class getters, setters, constructors, etc. When variables change, you no longer need to modify these methods, and Lombok will take care of it.
For example, the @AllArgsConstructor annotation of the following code is the full-parameter construction method of the generated class, and the function of the @Data annotation is to add getter and setter methods to the member variables of the class
@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;
}
System functions
1. User login (including verification code)
2. Used book management
3. Order management
4. Cancellation order management
5. Faculty management
6. Professional management
7. User information management
function brief
-
What is the difference between precise query and fuzzy query?
Take the order query function as an example, the precise query will match all the characters entered by the user in the database, which is equivalent to where column = ? in the SQL statement. The fuzzy query uses the mysql keyword like to perform fuzzy query on all search conditions. However, the selected conditions in the drop-down list are still queried with exact matches
Find the corresponding OrderMapper.xml file below
<!-- 订单精准查询-->
<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>
-
How to export data in the form of Excel file?
EasyExcel is a simple Java-based, memory-saving open source project for reading and writing Excel, provided by Alibaba, learning link: EasyEcel official website
Note: In this project, all export Excel functions default to export all page data currently retrieved
Step 1: Import easyexcel coordinates
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>3.0.5</version>
</dependency>
Step 2: Set the column name and style of the cell (take exporting user data as an example)
@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;
}
Among them, the @ExcelProperty annotation represents the column name corresponding to the value of the exported member variable, and @ContentStyle is to set the table style
Step 3: Define the js export event and write the back-end interface
Front-end core code:
<!-- 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>
Front-end js handles events
function exportSumbit() {
var myform = document.getElementById("queryform");
myform.setAttribute("action", "/user/export");
myform.submit();
}
Main work: Get the form DOM, automatically submit it to the back-end controller (Controller), the controller will query all the data according to the search conditions after receiving the request, and then return the data to the front-end in the form of an excel file
Backend controller:
/*
导出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 "";
}
Show results:
Summary: Using EasyExcel to export data does not depend on the front-end controls, or is it that the back-end changes the response header information and feeds back the real data to the front-end
Source code acquisition method
wx "Source Code Inn", reply to "campus" or "second-hand book" to get a complete explanation article,
The source code is obtained from the menu bar "Source Code" -> "Java"