ssm框架-图书管理系统前端界面

最新推荐文章于 2023-03-15 13:55:25 发布
最新推荐文章于 2023-03-15 13:55:25 发布
阅读量5.1k 收藏 76
点赞数 10
分类专栏： ssm框架-图书管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ckx12138/article/details/108309913
版权

登陆首页界面：index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图示管理系统</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="图书管理" />
    <meta name="description" content="图书管理系统" />
    
    <script src="./scripts/boot.js" type="text/javascript"></script>

    <script src="./scripts/core.js" type="text/javascript"></script>

    <style type="text/css">
    html, body{
        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
    }

    .logo
    {
        font-family:"微软雅黑",	"Helvetica Neue",​Helvetica,​Arial,​sans-serif;
        font-size:28px;
        font-weight:bold;        
        cursor:default;
        position:absolute;top:25px;left:14px;        
        line-height:28px;
        color:#444;
    }    
    .topNav
    {
        position:absolute;right:8px;top:12px;        
        font-size:12px;
        line-height:25px;
    }
    .topNav a
    {
        text-decoration:none;        
        font-weight:normal;
        font-size:12px;
        line-height:25px;
        margin-left:3px;
        margin-right:3px;
        color:#333;        
    }
    .topNav a:hover
    {
        text-decoration:underline;        
    }   
     .mini-layout-region-south img
    {
        vertical-align:top;
    }
    </style>
</head>
<body>
<div class="mini-layout" style="width:100%;height:100%;">
    <div title="north" region="north" class="app-header" bodyStyle="overflow:hidden;" height="80" showHeader="false" showSplit="false">
        <div class="logo" onclick="window.location.href='index.html'" style="cursor:pointer">图书管理系统</div>

        <!-- <div class="topNav">    
            <a href="../index.html">首页</a> |
            <a href="../demo/index.html">在线示例</a> |
            <a href="../docs/api/index.html">Api手册</a> |            
            <a href="../index.html#tutorial">开发教程</a> |
            <a href="../index.html#quickstart">快速入门</a>
        </div> -->

        <div style="position:absolute;right:12px;bottom:8px;font-size:12px;line-height:25px;font-weight:normal;">
            皮肤：
            <select id="selectSkin" onchange="onSkinChange(this.value)" style="width:100px;margin-right:10px;" >
                <optgroup label="传统风格">
                    <option value="default">default</option>
                    <option value="blue">blue</option>
                    <option value="pure">pure</option>
                    <option value="gray">gray</option>                
                    <option value="olive2003">olive2003</option>
                    <option value="blue2003" >blue2003</option>
                    <option value="blue2010" >blue2010</option>
                    <option value="bootstrap">bootstrap</option>   
                    <option value="jqueryui-cupertino">jqueryui-cupertino</option>
                    <option value="jqueryui-smoothness">jqueryui-smoothness</option>                                     
                </optgroup>
                <optgroup label="扁平风格">
                    <option value="cupertino" selected>cupertino</option>
                    <option value="metro-white" >metro-white</option>
                    <option value="metro-green">metro-green</option>
                    <option value="metro-orange">metro-orange</option>
                    <option value="metro-gray">metro-gray</option>
                    <option value="metro-blue">metro-blue</option>                    
                </optgroup>
            </select>
            尺寸：
            <select id="selectMode" onchange="onModeChange(this.value)" style="width:100px;" >
                <option value="default">Default</option>
                <option value="medium" selected >Medium</option>
                <option value="large">Large</option>                
            </select>
        </div>
    </div>
    <div showHeader="false" region="south" style="border:0;text-align:center;" height="25" showSplit="false">
        Copyright © 上海普加软件有限公司版权所有 
    </div>
    <div region="west" title="在线演示" showHeader="true" bodyStyle="padding-left:1px;" showSplitIcon="true" width="230" minWidth="100" maxWidth="350">
        <ul id="demoTree" class="mini-tree" showTreeIcon="true" style="width:100%;height:100%;"
             enableHotTrack="true" onbeforeexpand="onBeforeExpand" >
           

            <li>
			    <span expanded="false">用户信息</span>
			    <ul>    
                    <li><a href="datagrid.html" target="main">用户管理 </a></li>
                    <li><a href="datagrid.html" target="main">部门管理 </a></li>
                    <li><a href="datagrid.html" target="main">部门管理1 </a></li>
			    </ul>
		    </li> 
		    
		    <li>
			    <span expanded="false">图书信息</span>
			    <ul>    
                    <li><a href="book.html" target="main">图书管理</a></li>
                    <li><a href="book.html" target="main">借还管理 </a></li>
                   
			    </ul>
		    </li> 
        </ul>        
    </div>
    <div title="center" region="center" style="border:0;">
        <div id="mainTabs" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" 
            onactivechanged="onTabsActiveChanged" 
        >
            <div title="Demo">
                <iframe onload="onIFrameLoad()" src="welcome.html" id="mainframe" frameborder="0" name="main" style="width:100%;height:100%;" border="0"></iframe>
            </div>
            <div title="Code">
                <iframe id="codeframe" frameborder="0" name="code" style="width:100%;height:100%;" border="0"></iframe>
            </div>
        </div>        
    </div>

    
</div>
</body>
</html>
<script type="text/javascript">
    mini.parse();
    function onBeforeExpand(e) {
        var tree = e.sender;
        var nowNode = e.node;
        var level = tree.getLevel(nowNode);

        var root = tree.getRootNode();        
        tree.cascadeChild(root, function (node) {
            if (tree.isExpandedNode(node)) {
                var level2 = tree.getLevel(node);
                if (node != nowNode && !tree.isAncestor(node, nowNode) && level == level2) {
                    tree.collapseNode(node, true);
                }
            }
        });

    }
       
</script>

登陆的起始界面（登陆窗口）：login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>用户登录</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    body
    {
        width:100%;height:100%;margin:0;overflow:hidden;
    }
    </style>
    <script src="./scripts/boot.js" type="text/javascript"></script>
    
</head>
<body >   
<div id="loginWindow" class="mini-window" title="用户登录" style="width:350px;height:185px;" 
   showModal="true" showCloseButton="false"
    >

    <div id="loginForm" style="padding:15px;padding-top:10px;">
        <table >
            <tr>
                <td style="width:60px;"><label for="username$text">帐号：</label></td>
                <td>
                    <input id="username" name="username"  class="mini-textbox" required="true" style="width:150px;"/>
                </td>    
            </tr>
            <tr>
                <td style="width:60px;"><label for="pwd$text">密码：</label></td>
                <td>
                    <input id="pwd" name="pwd" onvalidation="onPwdValidation" class="mini-password" requiredErrorText="密码不能为空" required="true" style="width:150px;" onenter="onLoginClick"/>
                    &nbsp;&nbsp;<a href="#" >忘记密码?</a>
                </td>
            </tr>            
            <tr>
                <td></td>
                <td style="padding-top:5px;">
                    <a onclick="onLoginClick" class="mini-button" style="width:60px;">登录</a>
                    <a onclick="onResetClick" class="mini-button" style="width:60px;">重置</a>
                </td>
            </tr>
        </table>
    </div>

</div>


    

    
    <script type="text/javascript">
        mini.parse();

        var loginWindow = mini.get("loginWindow");
        loginWindow.show();

        function onLoginClick(e) {
            var form = new mini.Form("#loginWindow");
            form.validate();
            if (form.isValid() == false) return;

            var o = form.getData();
            $.ajax({
                url: "userLogin",
                type: 'post',
                async: false,//非异步 
                data: [o][0],
                cache: false,
                success: function (text) {
                    if(text!="success"){
                    	alert("账号或密码错误！");
                    }else{
                    	loginWindow.hide();
                        mini.loading("登录成功，马上转到系统...", "登录成功");
                        setTimeout(function () {
                            window.location = "./index.html";
                        }, 1500);//每隔1.5秒执行一次当前函数。当前功能：1.5秒以后跳转到首页 
                    }
                }
            });
            
            
        }
        function onResetClick(e) {
            var form = new mini.Form("#loginWindow");
            form.clear();
        }
        /
        function isEmail(s) {
            if (s.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
                return true;
            else
                return false;
        }
        function onUserNameValidation(e) {
            if (e.isValid) {
                if (isEmail(e.value) == false) {
                    e.errorText = "必须输入邮件地址";
                    e.isValid = false;
                }
            }
        }
        function onPwdValidation(e) {
            if (e.isValid) {
                if (e.value.length < 5) {
                    e.errorText = "密码不能少于5个字符";
                    e.isValid = false;
                }
            }
        }
    </script>

</body>
</html>

功能主页界面：datagrid.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DataGrid 数据表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="./css/demo.css" rel="stylesheet" type="text/css" />

    <script src="./scripts/boot.js" type="text/javascript"></script>
</head>
<body>
    <h1>用户管理</h1>      

    <div style="width:100%;">
        <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" onclick="add()">增加</a>
                        <a class="mini-button" iconCls="icon-add" onclick="edit()">编辑</a>
                        <a class="mini-button" iconCls="icon-remove" onclick="remove()">删除</a>       
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
                        <a class="mini-button" onclick="search()">查询</a>
                    </td>
                </tr>
            </table>           
        </div>
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:100%;" allowResize="true"
        url="findUserInfoList"  idField="userid" multiSelect="true" 
    >
        <div property="columns">
            <!--<div type="indexcolumn"></div>        -->
            <div type="checkcolumn" ></div>        
            <div field="userno" width="120" headerAlign="center" allowSort="true">帐号</div>    
            <div field="username" width="120" headerAlign="center" allowSort="true">姓名</div>    
            <div field="sex" width="100" renderer="onGenderRenderer">性别</div>
            <div field="address" width="100" allowSort="true">地址</div>
            <div field="phone" width="100" >电话</div>
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd hh:mm:ss" allowSort="true">创建日期</div>    
        </div>
    </div>

    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("createtime", "desc");

        
        function add() {
            
            mini.open({
                url: bootPATH + "../userInfoWindow.html",
                title: "新增用户", width: 600, height: 260,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {

                    grid.reload();
                }
            });
        }
        function edit() {
         
            var row = grid.getSelected();//选中一条对象
            if (row) {
                mini.open({
                    url: bootPATH + "../userInfoWindow.html",//以boot.js为默认地址
                    title: "编辑员工", width: 600, height: 260,
                    onload: function () {
                        var iframe = this.getIFrameEl();
                        var data = { action: "edit", id: row.userid};
                        iframe.contentWindow.SetData(data);
                        
                    },
                    ondestroy: function (action) {
                        grid.reload();
                        
                    }
                });
                
            } else {
                alert("请选中一条记录");
            }
            
        }
        //删除
        function remove() {
            
            var rows = grid.getSelecteds();//可以选中多条记录
            if (rows.length > 0) {
                if (confirm("确定删除选中记录？")) {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];
                        ids.push(r.userid);
                    }
                    var id = ids.join(',');//id1,id2,id3
                    grid.loading("操作中，请稍后......");
                    $.ajax({
                        url: "deleteUserInfo?userids=" +id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function () {
                        }
                    });
                }
            } else {
                alert("请选中一条记录");
            }
        }
        function search() {
            var key = mini.get("key").getValue();
            grid.load({ key: key });
        }
        function onKeyEnter(e) {
            search();
        }
        /
        function onBirthdayRenderer(e) {
            var value = e.value;
            if (value) return mini.formatDate(value, 'yyyy-MM-dd');
            return "";
        }
        function onMarriedRenderer(e) {
            if (e.value == 1) return "是";
            else return "否";
        }
        var Genders = [{ id: 1, text: '男' }, { id: 0, text: '女'}];        
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
    </script>
</body>
</html>

页面展示：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8秒记忆的鱼丶
关注
专栏目录
图书管理前端页面
www_b的博客
10-29 4593
1.图书管理页面 1.1 http/apis.js 添加后端请求路由 import { get, post, put, del } from './index' // 书籍管理接口 export const getBookList = (params, headers) => get("/books/book/", params,headers) export const addBook = (params, headers) => post("/books/book/", params, he
图书馆管理系统前端
05-08
课支持jsp的操作，内容很全
图书管理借阅系统前端Vue-----前端页面展示(需源码私信免费)
acwing的博客
12-19 9582
图书管理借阅系统 **该篇文章展示前端代码** 开发环境配置 **Mysql+MybatisPlus+Springboot+Shiro+Swagger+Element** 前端开发环境 node.js hbuilder 图书管理借阅前端所含模块的功能 1.图书借阅图书类别 2.图书借阅馆藏图书 3.借阅用户 4.借阅模块 5.借阅日志 6.借阅数据分析 对应的vue文件组成 <!-- 模板区:编写UI标签，切记该标签中只能有一个根标签，单文件规定的、否则报错 --> <t
图书管理系统管理员和用户前端
04-02
该文档是网上图书管理系统的前端代码，包括用户和管理员两部分，主要是HTML，CSS和js写的
图书管理系统前端代码设计
04-16
可以直接用的图书管理系统前端代码，不用麻烦的进行前端的设计，您只需编写后台即可
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
10-24
《基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码解析》 图书管理系统是信息化时代中常见的应用，它能够有效地管理和组织大量的图书信息，为用户提供便捷的查询、借阅、归还等功能。本系统采用的是经典的...
图书管理系统（ssm框架）
01-10
这个“图书管理系统”项目就是基于SSM框架实现的，它整合了Spring的强大功能、SpringMVC的优雅架构以及MyBatis的灵活数据库操作。 1. **Spring框架**：Spring是一个开源的Java平台，核心特性是依赖注入（Dependency...
SSM项目-图书管理系统
07-07
图书管理系统是基于Java Web技术栈的典型应用，SSM框架（Spring、SpringMVC、MyBatis）作为其核心架构，为图书的存储、检索、借阅等业务提供了高效稳定的解决方案。在这个项目中，我们主要探讨以下几个关键知识点： ...
基于ssm框架的图书借阅系统
05-07
【SSM框架详解及其在图书借阅系统中的应用】 SSM框架是Java Web开发中常用的一种集成框架，由Spring、Spring MVC和MyBatis三个组件组成。本篇将详细介绍SSM框架的核心概念，并结合“基于SSM框架的图书借阅系统”这...
基于SSM框架图书管理系统.rar
07-10
本项目"基于SSM框架图书管理系统"旨在帮助初学者熟悉并掌握JavaWeb开发的基本流程和技术栈，同时引入了Maven的项目管理工具，使得项目构建更加规范和高效。下面将对这个项目中的关键知识点进行详细阐述。 1. **...
图书管理系统前端代码
08-14
图书馆里系统前端代码，里面包含很多图书的操作模块，希望对你有用
图书管理系统
02-09
使用springmvc的完整管理系统，前端使用Bootstrap框架，利用json传递数据，实现了前后端分离
图书管理系统前端代码设计.zip
07-15
一个前端的图书管理系统页面，纯HTML，黄色调，可以直接嵌套在项目使用，兼容，如果是vue等项目，直接改改也是可以用的
图书管理系统演示模板
04-19
支持Tomcat与eclipse，是较为简单的演示模板，适合初学者再此基础上进行学习，改善。
图书馆管理系统模板
12-25
图书馆管理系统模板，action，business
前端图书管理系统
qq_61603998的博客
01-06 7781
创建商城管理系统文件 在pycharm里面创建 Django项目 作为
图书管理系统html前端_微前端一二事儿
weixin_39557797的博客
12-01 2085
作者 : 写代码的比熊君如果盘点2019年最火的前端技术，那么微前端肯定占有一席之地。 但是大部分人对于微前端这个架构新贵的了解还是处于懵懵懂懂的状态，本文将会详细介绍微前端的前生今世，带大家了解微前端架构是如何一步步从实际需求中演化而来，以及小桔车服基于微前端所提炼的一套中后台体系建设实践。什么是微前端微前端这个概念最初是对应于微服务这个概念提出的，微服务的核心思想就是将一个大的单体应用基于业务...
图书管理系统前端—项目分析(一)
wjr1229的博客
03-15 1987
◼。
Springboot 图书管理系统 【前端使用 layui】界面美观
热门推荐
zhangbw's blog
08-21 1万+
图书管理系统 ，使用当前最为流行的 SpringBoot 框架，可作为springboot的入门项目练习使用，也可稍加改进做一个毕业设计项目。 文章目录一、相关技术栈二、主要功能三、数据库表结构设计四 、界面设计①、登录界面②、管理员界面③、用户运行界面五、项目部署启动①、部署环境准备②、具体部署数据库配置【必须】 github地址 ： https://github.com/CodeZBW/library_manager_system 如果觉得有用， 帮忙Star一下 一、相关技术栈 前端： .
ssm框架图书管理系统登录界面功能代码
最新发布
05-09
SSM框架的图书管理系统登录功能的代码可以分为前端和后端两部分。 前端代码： HTML部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书管理系统登录</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <style> body{ background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .login-form{ margin-top: 150px; } .login-form h2{ margin-bottom: 40px; } .form-control{ border-radius: 20px; } .btn{ border-radius: 20px; font-weight: bold; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 offset-md-4 login-form"> <h2 class="text-center mb-4">图书管理系统</h2> <form th:action="@{/login}" method="post"> <div class="form-group"> <input type="text" class="form-control" placeholder="用户名" name="username" required="required"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="密码" name="password" required="required"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">登录</button> </div> </form> </div> </div> </div> </body> </html> ``` 后端代码： Controller部分： ```java @Controller public class LoginController { @Autowired private UserService userService; @GetMapping("/login") public String login(){ return "login"; } @PostMapping("/login") public String login(@RequestParam String username, @RequestParam String password, HttpSession session, Model model){ User user = userService.getUserByUsername(username); if(user != null && user.getPassword().equals(password)){ session.setAttribute("user", user); return "redirect:/index"; }else{ model.addAttribute("msg", "用户名或密码错误"); return "login"; } } } ``` Service部分： ```java @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public User getUserByUsername(String username) { return userMapper.getUserByUsername(username); } } ``` Mapper部分： ```java @Mapper public interface UserMapper { User getUserByUsername(String username); } ``` 以上就是SSM框架的图书管理系统登录功能的代码，其中使用了Thymeleaf模板引擎来渲染前端页面，并使用了Spring MVC框架来处理后端请求。同时，也使用了MyBatis框架来进行数据库操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值