一、项目演示
项目演示地址： 视频地址
二、项目介绍
项目描述：这是一个基于SpringBoot+Vue框架开发的高校图书馆管理系统。首先，这是一个前后端分离的项目，代码简洁规范，注释说明详细，易于理解和学习。其次，这项目功能丰富，具有一个高校图书馆管理系统该有的所有功能。
项目功能：此项目分为两个角色：学生和管理员。学生有登录注册、管理个人信息、浏览座位信息、预约选座、浏览图书信息、借阅图书、浏览借阅信息、管理预约信息等等功能。管理员有管理所有用户新息、管理所有座位信息、管理所有时刻信息、管理所有信誉积分信息、管理所有图书信息、管理所有预约选座、借阅信息等等功能。
应用技术：SpringBoot + Vue + MySQL + MyBatis + Redis + ElementUI
运行环境：IntelliJ IDEA2019.3.5 + MySQL5.7（项目压缩包中自带) + Redis5.0.5（项目压缩包中自带） + JDK1.8 + Gradle5.6.4（项目压缩包中自带）+ Node14.16.1（项目压缩包中自带）
三、项目运行截图
项目运行截图：
四、主要代码
1.前端预约选座页面代码：
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home/dash-board' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>选座页面</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索筛选 -->
<el-form :inline="true" :model="searchParams" class="user-search">
<el-form-item label="搜索：">
<el-date-picker
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
size="small"
v-model="searchParams.openTime"
type="date"
:picker-options="pickerOptions"
:clearable="false"
:editable="false">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-select v-model="searchParams.scheduleId" size="small" placeholder="请选择时刻">
<el-option v-for="(item, index) in scheduleList" :key="index" :label="item.name + '(' + item.rangeTime + ')'" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="searchByTime">搜索</el-button>
<el-button size="small" v-if="loginUser.roleId === 1" type="primary" icon="el-icon-date" @click="pickOrderSeat">预约</el-button>
</el-form-item>
</el-form>
<el-table :key="index" v-if="seat.row !== 0 && seat.col !== 0" size="small" :data="tableData" v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column width="55">
<template slot-scope="scope">
<span style="color: #909399; font-weight: bold;">第{
{scope.$index + 1}}行</span>
</template>
</el-table-column>
<el-table-column :width="seat.col > 9 ? 150 : ''" v-for="n in seat.col" :key="n" align="center" :label="'第' + n + '列'" >
<template slot-scope="scope">
<el-badge v-if="scope.row.picked[n-1] === 0" type="danger" value="占座" style="margin-top: 10px">
<img style="width: 30px; height: 30px; margin-top: 10px"
src="../../assets/img/sold_seat.jpg" />
<div>第{
{scope.$index + 1}}行第{
{n}}列</div>
</el-badge>
<el-badge v-else-if="scope.row.picked[n-1] === 1" type="primary" value="可选" style="margin-top: 10px">
<div @click="pickSeat(scope.$index, n-1)">
<img style="width: 30px; height: 30px; margin-top: 10px"
src="../../assets/img/selectable_seat.jpg" />
<div>第{
{scope.$index + 1}}行第{
{n}}列</div>
</div>
</el-badge>
<el-badge v-else-if="scope.row.picked[n-1] === 2" type="success" value="选中" style="margin-top: 10px">
<div @click="cancelSeat(scope.$index + 1, n)">
<img style="width: 30px; height: 30px; margin-top: 10px"
src="../../assets/img/selected_seat.jpg" />
<div>第{
{scope.$index + 1}}行第{
{n}}列</div>
</div>
</el-badge>
</template>
</el-table-column>
</el-table>
<el-empty v-else :image-size="200"></el-empty>
</div>
</template>
<script>
export default {
name: 'PickList',
data() {
return {
pickerOptions: {
disabledDate: (time) => {
return time.getTime() < Date.now() - 8.64e7
}
},
searchParams: {
openTime: '',
scheduleId: ''
},
seat: {
row: 0,
col: 0
},
scheduleList: [],
loading: false,
tableData: [],
pickSeatList: [],
seatItemList: [],
index: 0,
loginUser: {
}
}
},
created() {
this.searchParams.openTime = this.getNowDay();
this.getLoginUser();
this.getAllScheduleList();
},
methods: {
getNowDay() {
let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
},
getLoginUser() {
this.$ajax.post("/user/getLoginUser", {
token: Tool.getLoginUser()}).then((response)=>{
let resp = response.data;
if(resp.code === 0){
if(resp.data) {
this.loginUser = resp.data;
} else {
this.$message.error(resp.msg);
this.$router.push("/login");
}
}
});
},
pickSeat(row, col) {
if(this.pickSeatList.length >= 1) {
this.$message.warning("一次最多只能选1个座位！");
return false;
}
this.tableData[row].picked[col] = 2;
// 动态刷新表格
this.index = this.index + 1;
this.pickSeatList.push({
row: row + 1, col: col + 1});
},
cancelSeat(row, col) {
this.tableData[row-1].picked[col-1] = 1;
// 动态刷新表格
this.index = this.index + 1;
let nowSeatList = [];
this.pickSeatList.forEach(item => {
if(item.col !== col || item.row !== row) {
nowSeatList.push(item);
}
});
this.pickSeatList = nowSeatList;
},
getSeatBySearch() {
this.loading = true;
this.$ajax.post("/seat/getByTime", this.searchParams).then((response)=>{
let resp = response.data;
if(resp.code === 0){
if(resp.data) {
this.seat = resp.data;
this.getSeatItem();
} else {
this.seat = {
row: 0, col: 0};
}
}
});
},
initSeatDetailList() {
this.tableData = [];
for(let i=1; i<=this.seat.row; i++) {
let item = {
picked: []};
for(let j=1; j<=this.seat.col; j++) {
item.picked.push(this.isPicked(i, j));
}
this.tableData.push(item);
}
this.loading = false;
},
isPicked(row, col) {
let result = 1;
this.seatItemList.forEach(item => {
if(item.row === row && item.col === col) {
result = 0; // 已被占座
}
});
return result; // 未被占座
},
getSeatItem() {
this.$ajax.post("/seat/getItemBySeatId", {
id: this.seat.id}).then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.seatItemList = resp.data;
this.initSeatDetailList();
} else {
this.$message.error(resp.msg);
}
});
},
pickOrderSeat() {
if(this.pickSeatList.length === 0) {
this.$message.warning("请至少选择一个座位！");
return false;
}
let seat = this.pickSeatList[0];
this.$confirm('确定要预约第'+ seat.row +'行第'+ seat.col +'列的座位？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$ajax.post("/seat/pick", {
...seat, seatId: this.seat.id, userId: this.loginUser.id}).then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.$message.success(resp.msg);
this.getSeatBySearch();
this.pickSeatList = [];
} else {
this.$message.error(resp.msg);
}
});
});
},
searchByTime() {
this.$confirm('搜索将导致当前选中的记录丢失，确认继续此操作？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.pickSeatList = [];
this.getSeatBySearch();
});
},
getAllScheduleList() {
this.$ajax.post("/schedule/all").then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.scheduleList = resp.data;
this.searchParams.scheduleId = this.scheduleList[0] ? this.scheduleList[0].id : '';
this.getSeatBySearch();
}
});
}
}
}
</script>
<style scoped>
.user-search {
margin-top: 20px;
}
/deep/ .el-table tbody tr:hover>td {
background-color:unset !important
}
</style>
2.借阅图书业务逻辑代码：
/**
* 借阅图书操作
* @param rentalItemDTO
* @return
*/
@Override
public ResponseDTO<Boolean> rentalBook(RentalItemDTO rentalItemDTO) {
// 进行统一表单验证
CodeMsg validate = ValidateEntityUtil.validate(rentalItemDTO);
if(!validate.getCode().equals(CodeMsg.SUCCESS.getCode())){
return ResponseDTO.errorByMsg(validate);
}
User user = userMapper.selectByPrimaryKey(rentalItemDTO.getUserId());
if(user == null) {
return ResponseDTO.errorByMsg(CodeMsg.USER_NOT_EXIST);
}
if (user.getCreditRate() < 80) {
return ResponseDTO.errorByMsg(CodeMsg.CREDIT_RENTAL_ERROR);
}
Book book = bookMapper.selectByPrimaryKey(rentalItemDTO.getBookId());
if(book == null) {
return ResponseDTO.errorByMsg(CodeMsg.BOOK_NOT_EXIST);
}
if(CommonUtil.differentDaysByMillisecond(new Date(), rentalItemDTO.getPredictTime()) > 180) {
return ResponseDTO.errorByMsg(CodeMsg.BOOK_RENTAL_TIME_OVER);
}
// 修改图书状态 乐观锁控制
BookExample bookExample = new BookExample();
bookExample.createCriteria().andIdEqualTo(book.getId()).andVersionEqualTo(book.getVersion());
book.setState(BookStateEnum.RENTAL.getCode());
book.setVersion(book.getVersion() + 1);
if(bookMapper.updateByExampleSelective(book, bookExample) == 0) {
return ResponseDTO.errorByMsg(CodeMsg.BOOK_EDIT_ERROR);
}
// 写入借阅详情信息
RentalItem rentalItem = CopyUtil.copy(rentalItemDTO, RentalItem.class);
rentalItem.setId(UuidUtil.getShortUuid());
rentalItem.setCreateTime(new Date());
rentalItem.setBookName(book.getName());
rentalItem.setBookPhoto(book.getPhoto());
rentalItem.setState(RentalItemStateEnum.RENTAL.getCode());
if(rentalItemMapper.insertSelective(rentalItem) == 0) {
throw new RuntimeException(CodeMsg.BOOK_RENTAL_ERROR.getMsg());
}
return ResponseDTO.successByMsg(true, "借阅成功！");
}
3.用户登录业务逻辑代码：
/**
* 用户登录操作
* @param userDTO
* @return
*/
@Override
public ResponseDTO<UserDTO> login(UserDTO userDTO) {
// 进行是否为空判断
if(CommonUtil.isEmpty(userDTO.getUsername())){
return ResponseDTO.errorByMsg(CodeMsg.USERNAME_EMPTY);
}
if(CommonUtil.isEmpty(userDTO.getPassword())){
return ResponseDTO.errorByMsg(CodeMsg.PASSWORD_EMPTY);
}
if(CommonUtil.isEmpty(userDTO.getCaptcha())){
return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_EMPTY);
}
if(CommonUtil.isEmpty(userDTO.getCorrectCaptcha())){
return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_EXPIRED);
}
// 比对验证码是否正确
String value = stringRedisTemplate.opsForValue().get((userDTO.getCorrectCaptcha()));
if(CommonUtil.isEmpty(value)){
return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_EXPIRED);
}
if(!value.toLowerCase().equals(userDTO.getCaptcha().toLowerCase())){
return ResponseDTO.errorByMsg(CodeMsg.CAPTCHA_ERROR);
}
// 对比昵称和密码是否正确
UserExample userExample = new UserExample();
// select * from user where username = ? and password = ?
userExample.createCriteria().andUsernameEqualTo(userDTO.getUsername()).andPasswordEqualTo(userDTO.getPassword());
List<User> userList = userMapper.selectByExample(userExample);
if(userList == null || userList.size() != 1){
return ResponseDTO.errorByMsg(CodeMsg.USERNAME_PASSWORD_ERROR);
}
// 生成登录token并存入Redis中
UserDTO selectedUserDto = CopyUtil.copy(userList.get(0), UserDTO.class);
String token = UuidUtil.getShortUuid();
selectedUserDto.setToken(token);
//把token存入redis中 有效期1小时
stringRedisTemplate.opsForValue().set("USER_" + token, JSON.toJSONString(selectedUserDto), 3600, TimeUnit.SECONDS);
return ResponseDTO.successByMsg(selectedUserDto, "登录成功！");
}