ssm框架-图书管理系统前端界面
2024-05-13 12:45:21
登陆首页界面：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> --><divstyle="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><tdstyle="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><tdstyle="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"/> <a href="#" >忘记密码?</a></td></tr> <tr><td></td><tdstyle="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;elsereturn 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,id3grid.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>
页面展示：
ssm框架-图书管理系统前端界面相关推荐
- 基于SSM框架图书管理系统开发与设计(附源码资料)-毕业设计
文章目录 1. 适用人群 2. 你将收获 3.项目简介 4.技术实现 5.系统功能 5.1.管理员身份登录 5.1.1.登录 5.1.2.管理员登录首页 5.1.3.借阅管理 5.1.4.图书管理 5 ...
- 含文档+PPT+源码等]精品基于SSM的图书管理系统[包运行成功]
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 含文档+PPT+源码等]精品基于SSM的图书管理系统[包运行成功] 系统介绍 & ...
- ❤️《集成SSM框架—图书系统》Mybatis+Spring+SpirngMVC
<集成SSM框架-图书系统>Mybatis+Spring+SpirngMVC 希望各位博友给个三连+关注,谢谢!!! 全部源码地址:链接:https://pan.baidu.com/s/1 ...
- 基于SSM框架便利店管理系统(进销存管理系统)(java+spring+springmvc+mybatis+maven+mysql+html)
一.项目简介 本项目是一套基于SSM框架便利店管理系统(进销存管理系统),主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者. 包含:项目源码.项目文档.数据库脚本.软件工具等 ...
- java+ssm+mysql图书管理系统
项目介绍: 一个图书管理系统,界面很精美. 包含普通用户和管理员用户, 普通用户可以注册.登录系统,修改密码,查看图书,借阅和退还,修改个人信息.借阅记录等等. 管理员用户主要包括用户管理.图书管理. ...
- 基于SSM框架宠物管理系统
一.项目简介 本项目是一套基于ssm框架宠物管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者. 包含:项目源码.数据库脚本等,该项目附带全部源码可作为毕设使用. 项 ...
- 【JAVA程序设计】基于SSM的图书管理系统-有论文文档
基于SSM的图书管理系统-有文档 项目获取 项目简介 开发环境 项目技术 功能结构 文档目录 运行截图 项目获取 获取方式(点击下载):是云猿实战 项目经过多人测试运行,可以确保100%成功运行. 项 ...
- 基于SSM框架的管理系统【完整项目源码】
基于SSM框架的管理系统 [文末附源码] 1前言 基于SSM框架的管理系统简洁版: 实现登录.注册.增.删.改.查: 可继续完善增加前端.校验.其他功能等: 可作为SSM项目开发练习基础模型: 课程设 ...
- Python基于mysql+Django框架图书管理系统源代码(含mysql文件)
项目前台和后台界面模板都是自己编写,前台采用Bootstrap框架UI,后台EasyUI框架UI,没有采用Django自动生成的那个后台管理,因为那个后台实在是太丑了,丑得惨不忍睹!整个项目主要负责图 ...
最新文章
- 【机器学习算法专题（蓄力计划）】十一、特征数据预处理
- LeetCode 2114. 句子中的最多单词数
- 第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例(原创)
- cf 189B - Counting Rhombi
- 迅捷pdf转换器——PDF批量转化成JPG
- java界面添加mid音乐,网页添加背景音乐的源代码
- 巨头特斯拉的进击之路
- 【网络科普】宽带电缆 vs DSL vs 光纤
- 少年，我看你骨骼精奇，见与你有缘，这套算法赠你
- 阿里P6和P7待遇差别有多大网友干的活差不多，工资差很多
- C++ 模板函数的使用
- easyUI的基本知识
- ES9023音频解码芯片的工作原理
- WebLogic 10.3.1 下载地址
- 【pandas之DataFrame相关函数】loc（）函数、iloc函数
- :-1: error: [debug/qrc_image.cpp] Error 1
- MySql学习笔记（2）--数据库操作及数据管理
- 【2023秋招】近期硬件公司秋招内推合集以及笔试面试准备
- SAP 设置定时任务
- [Origin]三维柱状图绘制
热门文章
- 支持v4l2 linux内核选项 s3c2440,linux内核移植-移植2.6.35.4内核到s3c2440
- 51nod 1278 相离的圆 (排序)
- vue element-ui 项目使用双色主题（白天，黑夜模式）
- 解决dataTable在element下的tab切换时表头与内容错位问题
- C#压缩、解压缩文件（夹）（rar、zip）
- 2019年的计划，做最好的自己。
- 需求分析师如何提高核心竞争力
- Python pandas库｜任凭弱水三千，我只取一瓢饮（5）
- python画车辆轨迹图_如何利用 Python 绘制酷炫的 车辆轨迹 — 速度时空图？三维数据用二维图像呈现...
- 英语论文格式有什么要求？