intellij idea汉化 多进程 摩尔投票法 idea 常用快捷键 elasticsearch caching javafx eking文件 webforms onclick 前端项目实战 java设计模式视频 jquery点击事件 oracle修改字段默认值 oracle分页关键字 xshell搭建ss python面向对象 网页设计公司 python随机整数 python导入文件 filejava java教材 java安装环境 java学习基础 java的运行环境 java定义接口 java文件路径 javalist数组 linuxsudo命令 嵌入式开发教程 俄罗斯方块c语言代码 51脚本 计算机网络自顶向下 js格式化时间 风火云 idataparameter wow怎么赚钱 god2iso tomcat修改端口 js给标签添加属性
当前位置: 首页 > 学习教程  > 编程语言

图书馆管理系统——后台静态界面设计(类型查询)

2020/11/24 10:37:07 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

LayUi:介绍 优点: layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。 入门技术 点击查看,LayUi官网 1、查…

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+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <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.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
    </dependency>

mybatis配置文件中进行配置
SqlMapConfig.xml

<!--    配置分页内容-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!--使用mysql方言进行分页-->
            <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<ClassInfo> queryClassInfoAll();

    List<ClassInfo> queryClassInfoAll(@Param(value = "name")String name);
}

ClassInfoDao.xml

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >

<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&amp&characterEncoding=utf-8&serverTimezone=UTC

添加完成后的代码

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/library?useUnicode=true&amp&characterEncoding=utf-8&serverTimezone=UTC
jdbc.username=root
jdbc.password=123456


查询成功

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_400291.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?