图书馆管理系统——后台静态界面设计（类型增删改查）
LayUi：介绍
优点：
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
入门技术
点击查看，LayUi官网
1、查询功能
1.1图书类型的主页映射
Typecontroller.java
@Autowired
private ClassInfoService classService;
@GetMapping("/typeIndex")
public String typeIndex(){
return "type/typeIndex";
}
1.2图书类型的页面设计
typeIndex.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>layuititle>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=basePath%>lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="<%=basePath%>css/public.css" media="all">
head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div class="demoTable">
类型名称：
<div class="layui-inline">
<input class="layui-input" name="name" id="name" autocomplete="off">
div>
<button class="layui-btn" data-type="reload">搜索button>
div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
</div>
script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter">table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
script>
div>
div>
<script src="<%=basePath%>lib/layui-v2.5.5/layui.js" charset="utf-8">script>
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
elem: '#currentTableId',
url: '<%=basePath%>typeAll',//查询类型数据
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 100, title: 'ID', sort: true},
{field: 'name', width: 180, title: '类型名称'},
{field: 'remarks', width: 280, title: '备注'},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
id:'testReload'
});
var $ = layui.$, active = {
reload: function(){
var name = $('#name').val();
console.log(name)
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
name: name
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
/**
* tool操作栏监听事件
*/
table.on('tool(currentTableFilter)', function (obj) {
var data=obj.data;
if (obj.event === 'edit') { // 监听添加操作
var index = layer.open({
title: '修改图书类型',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['60%', '60%'],
content: '<%=basePath%>queryClassInfoById?id='+data.id,
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
layer.confirm('真的删除行么', function (index) {
//调用删除功能
deleteInfoByIds(data.id,index);
layer.close(index);
});
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
/**
* 获取选中记录的id信息
*/
function getCheackId(data){
var arr=new Array();
for(var i=0;i<data.length;i++){
arr.push(data[i].id);
}
//拼接id
return arr.join(",");
};
/**
* 提交删除功能
*/
function deleteInfoByIds(ids ,index){
//向后台发送请求
$.ajax({
url: "deleteType",
type: "POST",
data: {ids: ids},
success: function (result) {
if (result.code == 0) {//如果成功
layer.msg('删除成功', {
icon: 6,
time: 500
}, function () {
parent.window.location.reload();
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
});
} else {
layer.msg("删除失败");
}
}
})
};
/**
* toolbar监听事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var index = layer.open({
title: '添加类型',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['60%', '60%'],
content: '<%=basePath%>typeAdd',
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') {
/*
1、提示内容，必须删除大于0条
2、获取要删除记录的id信息
3、提交删除功能 ajax
*/
//获取选中的记录信息
var checkStatus=table.checkStatus(obj.config.id);
var data=checkStatus.data;
if(data.length==0){//如果没有选中信息
layer.msg("请选择要删除的记录信息");
}else{
//获取记录信息的id集合
var ids=getCheackId(data);
layer.confirm('真的删除行么', function (index) {
//调用删除功能
deleteInfoByIds(ids,index);
layer.close(index);
});
}
}
});
});
script>
body>
html>
1.3、查询数据内容
TypeController.java
/**
* 获取type数据信息 分页
*/
@RequestMapping("/typeAll")
@ResponseBody
public R typeAll(String name, @RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "15") Integer limit){
PageInfo<ClassInfo> pageInfo= classService.queryClassInfoAll(name,page,limit);
return R.ok("成功",pageInfo.getTotal(),pageInfo.getList());
}
1.4、加入分页依赖
pom.xml
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>5.1.2version>
dependency>
mybatis配置文件中进行配置
SqlMapConfig.xml
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<property name="helperDialect" value="mysql"/>
plugin>
plugins>
1.5、dao层接口以及实现
ClassInfoDao.java
package com.zhaolei.dao;
import com.zhaolei.po.ClassInfo;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Component;
import java.util.List;
@Component("classDao")
public interface ClassInfoDao {
/*
*查询所有的图书类型信息
*/
// @Select("select * from class_info")
// List queryClassInfoAll();
List<ClassInfo> queryClassInfoAll(@Param(value = "name")String name);
}
ClassInfoDao.xml
<mapper namespace="com.zhaolei.dao.ClassInfoDao">
<select id="queryClassInfoAll" resultType="com.zhaolei.po.ClassInfo">
select * from class_info
<where>
<if test="name!=null">
and name like '%${name}%'
if>
where>
select>
mapper>
1.6、service层接口以及实现
接口ClassInfoServicr.java
package com.zhaolei.service;
import com.github.pagehelper.PageInfo;
import com.zhaolei.po.ClassInfo;
public interface ClassInfoService {
/*
*查询所有记录
*/
public PageInfo<ClassInfo> queryClassInfoAll(String name,int page,int limit);
}
实现
ClassInfoServiceImpl.java
package com.zhaolei.service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zhaolei.dao.ClassInfoDao;
import com.zhaolei.po.ClassInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("classService")
public class ClassInfoServiceImpl implements ClassInfoService {
@Autowired
private ClassInfoDao classDao;
@Override
public PageInfo<ClassInfo> queryClassInfoAll(String name,int page,int limit) {
//传入参数，每页条数，当前页
PageHelper.startPage(page,limit);
List<ClassInfo> list=classDao.queryClassInfoAll(name);
//通过包装获取分页的其他值信息
PageInfo<ClassInfo> pageInfo=new PageInfo<>(list);
return pageInfo;
}
}
1.7、db.properties 无法读取数据库请看
数据库版本8.0.22，导致连接数据库但是无法读取数据库中的内容。在url后面追加下面内容：
useUnicode=true&&characterEncoding=utf-8&serverTimezone=UTC
添加完成后的代码
jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/library?useUnicode=true&&characterEncoding=utf-8&serverTimezone=UTC
jdbc.username=root
jdbc.password=123456
查询成功
2、dao层接口和实现
实现数据库的 增、删、改