java学习day51（AdminLTE）AdminLTE快速入门与应用

最新推荐文章于 2024-04-22 09:37:27 发布

Andy393939

最新推荐文章于 2024-04-22 09:37:27 发布

阅读量1.2k

点赞数

分类专栏： JAVA学习笔记文章标签： AdminLTE

本文链接：https://blog.csdn.net/gaosong0623/article/details/127633454

版权

JAVA学习笔记专栏收录该内容

79 篇文章 5 订阅

订阅专栏

简述

第一章 - 快速入门

第一节 - 概述与基本使用

第二节 - 快速入门案例

第二章 -SSM 界面

第一节 - 首页

第二节 - 登录页面

第三节 - 用户管理页面

第四节 - 角色管理页面

第五节 - 资源权限管理页面

第六节 - 产品管理页面

第七节 - 订单管理页面

第一章快速入门

本章节主要介绍 AdminLTE 基本使用及入门案例。

第一节概述与基本使用

1.AdminLTE 介绍

AdminLTE 是一款建立在 bootstrap 和 jquery 之上的开源的模板主题工具，它提供了一系列响应的、

可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容 PC 和移动端。通

过 AdminLTE ，我们可以快速的创建一个响应式的 Html5 网站。 AdminLTE 框架在网页架构与设计

上，有很大的辅助作用，尤其是前端架构设计师，用好 AdminLTE 不但美观，而且可以免去写很大

CSS 与 JS 的工作量。

2.GitHub 获取 AdminLTE

https://github.com/ColorlibHQ/AdminLTE

我们可以从上面网址获取 AdminLTE 源代码

3.AdminLTE 结构介绍

AdminLTE/

├── dist/

│ ├── CSS/

│ ├── JS

│ ├── img

├── build/

│ ├── less/

│ │ ├── AdminLTE's Less files

│ └── Bootstrap-less/ (Only for reference. No modifications have been made)

│ ├── mixins/

│ ├── variables.less

│ ├── mixins.less

└── plugins/

├── All the customized plugins CSS and JS files

AdminLTE 依赖于两个框架 Bootstrap3 与 JQuery1.11+

4.AdminLTE 布局与皮肤

布局

.wrapper 包住了 body 下的所有代码

.main-header 里是网站的 logo 和导航栏的代码

.main-sidebar 里是用户面板和侧边栏菜单的代码

.content-wrapper 里是页面的页面和内容区域的代码

.main-footer 里是页脚的代码

.control-sidebar 里是页面右侧侧边栏区域的代码

布局选项

fixed ：固定

layout-boxed ：盒子布局

layout-top-nav ：顶部隐藏

sidebar-collapse ：侧边栏隐藏

sidebar-mini ：侧边栏隐藏时有小图标

皮肤

skin-blue ：蓝色

skin-black ：黑色

skin-purple ：紫色

skin-yellow ：黄色

skin-red ：红色

skin-green ：绿色

以上项我们可以查看 start.html 页面中查看。

5.AdminLTE2 -汉化定制版定制版

下载地址

https://github.com/itheima2017/adminlte2-itheima

下载解压的目录结构如下：

由于 AdminLTE2 定制版是基于 FIS3 进行开发，在目录结构中 assets 、 modules 、 pages 、

plugins 都是前端开发时所使用到的，最终发布的就是 release 。所以对于我们使用定制版，我们只需要关注 release 目录下的结构就可以。

在 release 目录下有 css 、 img 、 pages 、 plugins 目录。前两者就不在解决 pages 是产生的一些定制

的页面，而 plugins 中是相关的插件，例如 jquery 、 bootstrap 等相关的 css 与 js 文件。

第二节快速入门案例

本次入门案例我们基于 AdminLTE2- 定制版来完成

1. 搭建环境

将 AdminLTE2 - 定制版下的 release 目录下的 css 、 img 、 plugins 目录导入到我们自己的工程

中

2. 案例代码

编译 index.html 页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" type="text/css" href="plugins/adminLTE/css/skins/_allskins.css"/>
<title>AdminLTE入门</title>
</head>
<body class="skin-blue sidebar-mini">
<!--
wrapper包住body下所有代码
-->
<div class="wrapper">
<!--
描述：main-header是网站的logo和导航栏的代码
-->
<header class="main-header">
<a class="logo">
网站的logo
</a>
<nav class="navbar navbar-static-top" role="navigation">
导航栏的代码
</nav>
</header>
<!--
描述：是用户面板和侧边栏菜单的代码
-->
<aside class="main-sidebar">
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
</aside>
<!--
描述：页面的页面和内容区域的代码
-->
<div class="content-wrapper">
页面的页面和内容区域的代码
</div>
<!--
描述：页脚的代码
-->
<footer class="main-footer">
页脚的代码
</footer>
</div>
</body>
</html>

第二章 SSM 界面

本章节主要介绍使用 AdminLTE2-IT 黑马 - 定制版来完成 SSM 综合练习中首页、登录页面、用户管

理、角色管理、资源权限管理、产品管理、订单管理页面的创建，由于定制版本 (pages 目录 ) 中提

供了常用的基本页面，我们只需要在此基础上进行简单修改就可以满足我们的需求。

查看 pages 目录中页面

其中有两种文件 , 一种是以 all 开头的 html 页面，一种不是。例如 admin-404.html 与 all-admin-

404.html 页面，这两个文件的区别在于 all 开头的文件可以直接运行显示页面全部信息，而未以 all 开

头的文件它是需要与其它文件进行组合而展示页面全部信息。

SSM 综合练习项目结构

第一节 - 首页

all-admin-index.html

<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ITCAST - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=
no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<!-- Font Awesome -->
<!-- Ionicons -->
<!-- iCheck -->
<!-- Morris chart -->
<!-- jvectormap -->
<!-- Date Picker -->
<!-- Daterange picker -->
<!-- Bootstrap time Picker -->
<!--<link rel="stylesheet" href="../../../plugins/timepicker/bootstrap-timepick
er.min.css">-->
<!-- bootstrap wysihtml5 - text editor -->
<!--数据表格-->
<!-- 表格树 -->
<!-- select2 -->
<!-- Bootstrap Color Picker -->
<!-- bootstrap wysihtml5 - text editor -->
<!--bootstrap-markdown-->
<!-- Theme style -->
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<!-- Ion Slider -->
<!-- ion slider Nice -->
<!-- bootstrap slider -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries
-->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery 2.2.3 -->
<!-- jQuery UI 1.11.4 -->
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.6 -->
<!-- Morris.js charts -->
<!-- Sparkline -->
<!-- jvectormap -->
<!-- jQuery Knob Chart -->
<!-- daterangepicker -->
<!-- datepicker -->
<!-- Bootstrap WYSIHTML5 -->
<!-- Slimscroll -->
<!-- FastClick -->
<!-- iCheck -->
<!-- AdminLTE App -->
<!-- 表格树 -->
<!-- select2 -->
<!-- bootstrap color picker -->
<!-- bootstrap time picker -->
<!--<script src="../../../plugins/timepicker/bootstrap-timepicker.min.js"></scr
ipt>-->
<!-- Bootstrap WYSIHTML5 -->
<!--bootstrap-markdown-->
<!-- CK Editor -->
<!-- InputMask -->
<!-- DataTables -->
<!-- ChartJS 1.0.1 -->
<!-- FLOT CHARTS -->
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized
-->
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<!-- jQuery Knob -->
<!-- Sparkline -->
<!-- Morris.js charts -->
<!-- Ion Slider -->
<!-- Bootstrap slider -->
<!-- 页面meta /-->
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="../plugins/morris/morris.css">
<link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml
5.min.css">
<link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.defaul
t.css">
<link rel="stylesheet" href="../plugins/select2/select2.css">
<link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.c
ss">
<link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdo
wn.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>数据</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="bu
tton">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdo
wn">
<img src="../img/user2-160x160.jpg" class="user-ima
ge" alt="User Image">
<span class="hidden-xs">黑马</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../img/user2-160x160.jpg" class="imgcircle" alt="User Image">
<p>
黑马 - 数据管理员
<small>最后登录 11:20AM</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat"
>修改密码</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat"
>注销</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="
User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</
a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index">
<a href="all-admin-index.html"><i class="fa fa-dashboard"></
i> <span>首页</span></a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cogs"></i> <span>系统管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting">
<a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a>
</li>
<li id="system-setting">
<a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a>
</li>
<li id="system-setting">
<a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a>
</li>
<li id="system-setting">
<a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cube"></i> <span>基础数据</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting">
<a href="all-admin-productlist.html">
<i class="fa fa-circle-o"></i> 产品管理
</a>
</li>
<li id="system-setting">
<a href="all-order-manage-list.html">
<i class="fa fa-circle-o"></i> 订单管理
</a>
</li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<img src="../img/center.jpg" width="100%" height="100%" />
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a href="http://www.itcast.cn">研究
院研发部</a>.</strong> All rights reserved.
</footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></scr
ipt>
<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></
script>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></scr
ipt>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></s
cript>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script
>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale: 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if(liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("admin-index");
});
</script>
</body>
</html>
<!---->

第二节-登录页面

all-admin-login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.6 -->
<!-- Font Awesome -->
<!-- Ionicons -->
<!-- Theme style -->
<!-- iCheck -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="./plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="./plugins/iCheck/square/blue.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="all-admin-index.html"><b>ITCAST</b>后台管理系统</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">登录系统</p>
<form action="all-admin-index.html" method="get">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></
span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label><input type="checkbox"> 记住 下次自动登录</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat"
>登录</button>
</div>
<!-- /.col -->
</div>
</form>
<a href="#">忘记密码</a><br>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.2.3 -->
<!-- Bootstrap 3.3.6 -->
<!-- iCheck -->
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="./plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./plugins/iCheck/icheck.min.js"></script>
<script>
$(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>

第三节-用户管理页面

1. 用户查询

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
tom
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
tom
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>全部用户</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">全部用户</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-controlfeedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover d
ataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
id="selall" type="checkbox" class="icheckbo
x_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">用户名</th>
<th class="sorting_asc sorting_asc_disabled">邮箱
</th>
<th class="sorting_desc sorting_desc_disabled">
联系电话</th>
<th class="sorting">状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>tom</td>
<td>tom@itcast.cn</td>
<td>12345678900</td>
<td>启用</td>
<td class="text-center">
<a href="../user/findById.do?id=1" class
="btn bg-olive btn-xs">详情</a>
</td>
</tr>
</tbody>
<!--
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></scri
pt>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script
>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document)
.ready(
function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']")
.iCheck(
{
checkboxClass : 'icheckbox_square-b
lue',
increaseArea : '20%'
});
// 全选操作
$("#selall")
.click(
function() {
var clicks = $(this).is(
':checked');
if (!clicks) {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck(
"uncheck");
} else {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck("check");
}
$(this).data("clicks",
!clicks);
});
});
</script>
</body>
</html>

2.用户添加

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>用户表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">用户表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../user/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">用户信息</div>
<div class="row data-type">
<div class="col-md-2 title">用户名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="username"
placeholder="用户名称" value="">
</div>
<div class="col-md-2 title">密码</div>
<div class="col-md-4 data">
<input type="password" class="form-control" name="password"
placeholder="密码" value="">
</div>
<div class="col-md-2 title">邮箱</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="email"
placeholder="邮箱" value="">
</div>
<div class="col-md-2 title">联系电话</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="phoneNum"
placeholder="联系电话" value="">
</div>
<div class="col-md-2 title">用户状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="status">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>

3. 用户详情

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>全部用户</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">全部用户</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<div class="tab-pane" id="tab-treetable">
<table id="collapse-table"
class="table table-bordered table-hover dataTable">
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tr data-tt-id="0">
<td colspan="2">tom</td>
</tr>
<tbody>
<tr data-tt-id="1" data-tt-parent-id="0">
<td>admin</td>
<td>管理员权限</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>产品修改</td>
<td>/product/update.do</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>产品详情</td>
<td>/product/findById.do</td>
</tr>
</tbody>
</table>
</div>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
$("#collapse-table").treetable({
expandable : true
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
</script>
</body>
</html>

4. 用户添加角色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>添加角色表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">添加角色表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form
action="../user/addRoleToUser.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <input type="hidden" name="userId"
value="1">
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">角色名称</th>
<th class="sorting">角色描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox" value="2">
</td>
<td>2</td>
<td>user</td>
<td>普通用户</td>
</tr>
<tr>
<td><input name="ids" type="checkbox" value="3">
</td>
<td>3</td>
<td>guest</td>
<td>测试帐号</td>
</tr>
</tbody>
</table>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>

第四节 - 角色管理页面

1. 角色查询

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
角色管理 <small>全部角色</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../role/findAll.do">角色管理</a></li>
<li class="active">全部角色</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建" onclick="location.href='../pages/role-add.jsp'">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-controlfeedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover d
ataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
id="selall" type="checkbox" class="icheckbo
x_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">角色名称</th>
<th class="sorting">角色描述</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>admin</td>
<td>管理员权限</td>
<td class="text-center">
<a href="../role/findRoleByIdAndAllPerm
ission.do?id=1" class="btn bg-olive btn-xs">添加权限</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>user</td>
<td>普通用户</td>
<td class="text-center">
<a href="../role/findRoleByIdAndAllPerm
ission.do?id=2" class="btn bg-olive btn-xs">添加权限</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>3</td>
<td>guest</td>
<td>测试帐号</td>
<td class="text-center">
<a href="../role/findRoleByIdAndAllPerm
ission.do?id=3" class="btn bg-olive btn-xs">添加权限</a>
</td>
</tr>
</tbody>
<!--
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></scri
pt>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script
>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document)
.ready(
function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']")
.iCheck(
{
checkboxClass : 'icheckbox_square-b
lue',
increaseArea : '20%'
});
// 全选操作
$("#selall")
.click(
function() {
var clicks = $(this).is(
':checked');
if (!clicks) {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck(
"uncheck");
} else {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck("check");
}
$(this).data("clicks",
!clicks);
});
});
</script>
</body>
</html>

2. 角色添加

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
角色管理 <small>角色表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../role/findAll.do">角色管理</a></li>
<li class="active">角色表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../role/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">角色信息</div>
<div class="row data-type">
<div class="col-md-2 title">角色名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="roleName"
placeholder="角色名称" value="">
</div>
<div class="col-md-2 title">角色描述</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="roleDesc"
placeholder="角色描述" value="">
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>

3. 角色添加权限

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
角色管理 <small>添加权限资源表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../role/findAll.do">角色管理</a></li>
<li class="active">添加权限资源表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form
action="../role/addPermissionToRole.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <input type="hidden" name="roleId"
value="2">
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">权限名称</th>
<th class="sorting">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox" value="1">
</td>
<td>1</td>
<td>产品修改</td>
<td>/product/update.do</td>
</tr>
</tbody>
</table>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>

第五节 - 资源权限管理页面

1. 权限查询

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
权限管理 <small>全部权限</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">权限管理</a></li>
<li class="active">全部权限</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建" onclick='location.href="../pages/permission-add.jsp"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-controlfeedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover d
ataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
id="selall" type="checkbox" class="icheckbo
x_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">权限名称</th>
<th class="sorting_asc sorting_asc_disabled">URL
</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>产品修改</td>
<td>/product/update.do</td>
<td class="text-center">
<a href="../permission/findById.do?id=1"
class="btn bg-olive btn-xs">详情</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>产品详情</td>
<td>/product/findById.do</td>
<td class="text-center">
<a href="../permission/findById.do?id=2"
class="btn bg-olive btn-xs">详情</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>3</td>
<td>订单详情</td>
<td>/order/findById.do</td>
<td class="text-center">
<a href="../permission/findById.do?id=3"
class="btn bg-olive btn-xs">详情</a>
</td>
</tr>
</tbody>
<!--
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></scri
pt>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script
>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document)
.ready(
function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']")
.iCheck(
{
checkboxClass : 'icheckbox_square-b
lue',
increaseArea : '20%'
});
// 全选操作
$("#selall")
.click(
function() {
var clicks = $(this).is(
':checked');
if (!clicks) {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck(
"uncheck");
} else {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck("check");
}
$(this).data("clicks",
!clicks);
});
});
</script>
</body>
</html>

2. 权限添加

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
&#26446;&#22235;
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
&#26446;&#22235;
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
权限资源管理 <small>权限资源表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../permission/findAll.do">权限资源管理</a></li>
<li class="active">权限资源表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../permission/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">权限资源信息</div>
<div class="row data-type">
<div class="col-md-2 title">权限资源名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="permissionName
"
placeholder="权限资源名称" value="">
</div>
<div class="col-md-2 title">权限资源URL</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="url"
placeholder="url" value="">
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>

第六节 - 产品管理页面

1 产品查询

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>全部产品</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../product/findAll.do">产品管理</a></li>
<li class="active">全部产品</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="../pages/product-add.js
p"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input id="
selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">产品编号</th>
<th class="sorting">产品名称</th>
<th class="sorting">出发城市</th>
<th class="sorting">出发时间</th>
<th class="sorting">产品价格</th>
<th class="sorting">产品状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>itcast-001</td>
<td>广州五日游</td>
<td>￥广州</td>
<td>2018-03-30 19:00:00</td>
<td>850.0</td>
<td>关闭</td>
<td class="text-center">
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=1&type=find"'>详情</button>
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=1&type=update"'>编辑</button>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>itcast-002</td>
<td>北京三日游</td>
<td>￥北京</td>
<td>2018-03-28 00:00:00</td>
<td>350.0</td>
<td>开启</td>
<td class="text-center">
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=2&type=find"'>详情</button>
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=2&type=update"'>编辑</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="all-order-manage-edit.h
tml"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>10</option>
<option>15</option>
<option>20</option>
<option>50</option>
<option>80</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
</script>
</body>
</html>

2 产品详情

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>产品表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../product/findAll.do">产品管理</a></li>
<li class="active">产品表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../product/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">产品信息</div>
<div class="row data-type">
<div class="col-md-2 title">产品编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productNum"
placeholder="产品编号" value="1" readonly="readonly">
</div>
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productName"
placeholder="产品名称" value="广州五日游"
readonly="readonly">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
name="departureTime" value="2018-03-30 19:00:00"
readonly="readonly">
</div>
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="cityName"
placeholder="出发城市" value="广州"
readonly="readonly">
</div>
<div class="col-md-2 title">产品价格</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="850.0"
readonly="readonly">
</div>
<div class="col-md-2 title">产品状态</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="关闭"
readonly="readonly">
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息
"
name="productDesc">不错不错，好多好吃的</textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
$('#datepicker-a3').datepicker({
autoclose : true,
format : 'yyyy-mm-dd'
});
});
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
});
</script>
</body>
</html>

3 产品添加

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>产品表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../product/findAll.do">产品管理</a></li>
<li class="active">产品表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../product/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">产品信息</div>
<div class="row data-type">
<div class="col-md-2 title">产品编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productNum"
placeholder="产品编号" value="">
</div>
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productName"
placeholder="产品名称" value="">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a3" name="departureTime">
</div>
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="cityName"
placeholder="出发城市" value="">
</div>
<div class="col-md-2 title">产品价格</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="">
</div>
<div class="col-md-2 title">产品状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="productStatus">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息
"
name="productDesc"></textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
$('#datepicker-a3').datetimepicker({
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
language: "zh-CN"
});
});
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
$("#datepicker-a3").datetimepicker({
format:"yyyy-mm-dd hh:ii",
});
});
</script>
</body>
</html>

4 产品修改

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>产品表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../product/findAll.do">产品管理</a></li>
<li class="active">产品修改</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../product/update.do"
method="post">
<input type="hidden" name="id" value="1">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">产品信息</div>
<div class="row data-type">
<div class="col-md-2 title">产品编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productNum"
placeholder="产品编号" value="itcast-001"
readonly="readonly">
</div>
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productName"
placeholder="产品名称" value="广州五日游">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a3" name="departureTime"
value="2018-03-30 19:00:00">
</div>
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="cityName"
placeholder="出发城市" value="广州">
</div>
<div class="col-md-2 title">产品价格</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="850.0">
</div>
<div class="col-md-2 title">产品状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="productStatus">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息
"
name="productDesc">不错不错，好多好吃的</textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">修改</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
$('#datepicker-a3').datetimepicker({
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
language: "zh-CN"
});
});
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
});
</script>
</body>
</html>

第七节-订单管理页面

1. 订单查询

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
订单管理 <small>全部订单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../order/findAll.do">订单管理</a></li>
<li class="active">全部订单</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="all-order-manage-edit.h
tml"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input id="
selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">订单编号</th>
<th class="sorting">名称</th>
<th class="sorting">金额</th>
<th class="sorting">下单时间</th>
<th class="sorting">订单状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>12345</td>
<td>广州五日游</td>
<td>￥850.0</td>
<td>2018-03-02 00:00:00</td>
<td>已支付</td>
<td class="text-center"><a class="btn bg-olive
btn-xs"
href='../order/findById.do?id=1'>详情</a>
<a class="btn bg-olive btn-xs"
href='../order/deleteById.do?id=1'>删除</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>54321</td>
<td>北京三日游</td>
<td>￥350.0</td>
<td>2018-03-02 00:00:00</td>
<td>已支付</td>
<td class="text-center"><a class="btn bg-olive
btn-xs"
href='../order/findById.do?id=2'>详情</a>
<a class="btn bg-olive btn-xs"
href='../order/deleteById.do?id=2'>删除</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>3</td>
<td>67890</td>
<td>北京三日游</td>
<td>￥350.0</td>
<td>2018-03-02 00:00:00</td>
<td>已支付</td>
<td class="text-center"><a class="btn bg-olive
btn-xs"
href='../order/findById.do?id=3'>详情</a>
<a class="btn bg-olive btn-xs"
href='../order/deleteById.do?id=3'>删除</a>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="all-order-manage-edit.h
tml"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共4 条数据。 每页 <select
class="form-control" onchange="getPageSize()" id="pageS
izeSelect">
<option value="1">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a
href="../order/findAll.do?page=1&pageSize=3"
aria-label="Previous">首页</a></li>
<li><a
href="../order/findAll.do?page=0&pageSize=3">上一页</a>
</li>
<li><a
href="../order/findAll.do?page=1&pageSize=3">1</a></
li>
<li><a
href="../order/findAll.do?page=2&pageSize=3">2</a></
li>
<li><a
href="../order/findAll.do?page=2&pageSize=3">下一页</a>
</li>
<li><a
href="../order/findAll.do?page=2&pageSize=3"
aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
function getPageSize() {
var pageSize = $("#pageSizeSelect").val();
location.href = "../order/findAll.do?page=1&pageSize="
+ pageSize;
}
</script>
</body>
</html>

2 订单详情

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel=“stylesheet”
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
订单管理 <small>全部订单</small>
</h1>
<ol class="breadcrumb">
<li><a href="all-admin-index.html"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="all-order-manage-list.html">订单管理</a></li>
<li class="active">订单详情</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!--订单信息-->
<div class="panel panel-default">
<div class="panel-heading">订单信息</div>
<div class="row data-type">
<div class="col-md-2 title">订单编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="订单编号"
value="12345" readonly="readonly">
</div>
<div class="col-md-2 title">下单时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a3" readonly="readonly"
value="2018-03-02 00:00:00">
</div>
</div>
<div class="col-md-2 title">路线名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="路线名称"
value="广州五日游" readonly="readonly">
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="路线名称"
value="广州" readonly="readonly">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a6" value="Fri Mar 30 19:00:00 CST 2018"
readonly="readonly">
</div>
</div>
<div class="col-md-2 title">出游人数</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="出游人数"
value="2" readonly="readonly">
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息">
没什么
</textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--游客信息-->
<div class="panel panel-default">
<div class="panel-heading">游客信息</div>
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="">人群</th>
<th class="">姓名</th>
<th class="">性别</th>
<th class="">手机号码</th>
<th class="">证件类型</th>
<th class="">证件号码</th>
</tr>
</thead>
<tbody>
<tr>
<td>成人</td>
<td><input type="text" size="10" value="张龙"
readonly="readonly"></td>
<td><input type="text" size="10" value="男"
readonly="readonly"></td>
<td><input type="text" size="20"
value="13333333333" readonly="readonly"></td>
<td><input type="text" size="15"
value="身份证" readonly="readonly"></td>
<td><input type="text" size="28"
value="123456789009876543" readonly="readonly"></td>
</tr>
<tr>
<td>儿童</td>
<td><input type="text" size="10" value="张小龙"
readonly="readonly"></td>
<td><input type="text" size="10" value="男"
readonly="readonly"></td>
<td><input type="text" size="20"
value="15555555555" readonly="readonly"></td>
<td><input type="text" size="15"
value="身份证" readonly="readonly"></td>
<td><input type="text" size="28"
value="987654321123456789" readonly="readonly"></td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!--游客信息/--> <!--联系人信息-->
<div class="panel panel-default">
<div class="panel-heading">联系人信息</div>
<div class="row data-type">
<div class="col-md-2 title">会员</div>
<div class="col-md-4 data text">小三</div>
<div class="col-md-2 title">联系人</div>
<div class="col-md-4 data text">张三</div>
<div class="col-md-2 title">手机号</div>
<div class="col-md-4 data text">18888888888</div>
<div class="col-md-2 title">邮箱</div>
<div class="col-md-4 data text">zs@163.com</div>
</div>
</div>
<!--联系人信息/--> <!--费用信息-->
<div class="panel panel-default">
<div class="panel-heading">费用信息</div>
<div class="row data-type">
<div class="col-md-2 title">支付方式</div>
<div class="col-md-4 data text">在线支付-支付宝</div>
<div class="col-md-2 title">金额</div>
<div class="col-md-4 data text">￥850.0</div>
</div>
</div>
<!--费用信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright &copy; 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
</script>
</body>
</html>

Andy393939

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
java学习day51（AdminLTE）AdminLTE快速入门与应用

供了常用的基本页面，我们只需要在此基础上进行简单修改就可以满足我们的需求。理、角色管理、资源权限管理、产品管理、订单管理页面的创建，由于定制版本。头的文件它是需要与其它文件进行组合而展示页面全部信息。之上的开源的模板主题工具，它提供了一系列响应的、上，有很大的辅助作用，尤其是前端架构设计师，用好。开头的文件可以直接运行显示页面全部信息，而未以。都是前端开发时所使用到的，最终发布的就是。，我们可以快速的创建一个响应式的。里是页面的页面和内容区域的代码。里是页面右侧侧边栏区域的代码。基本使用及入门案例。
复制链接

扫一扫