SSM+Bootstrap 登录设计和实现
程序员文章站
2022-06-23 11:06:27
先放几张效果图Login.jsp页面（顶部框+图片循环播放+栅格排版， 验证码 用 kaptcha生成的）登陆后的页面显示 (手风琴效果、下拉菜单，置顶导航栏、模态框）用户设置 （增、删、改、查功能，分页工具用的是 jqgrid)代码实现验证码实现： 生成验证码后，除了返回验证码之外，还写入 session中。后续登陆时验证 @RequestMapping("/getCode") public void getCode(HttpServletRespo......
先放几张效果图
Login.jsp页面（顶部框+图片循环播放+栅格排版， 验证码 用 kaptcha生成的）
登陆后的页面显示 (手风琴效果、下拉菜单，置顶导航栏、模态框）
用户设置 （增、删、改、查功能，分页工具用的是 jqgrid)
代码实现
验证码实现： 生成验证码后，除了返回验证码之外，还写入 session中。后续登陆时验证
@RequestMapping("/getCode")
public void getCode(HttpServletResponse response , HttpServletRequest request) throws Exception{
// 创建字节数组用于存放图片信息
byte[] imgByte = null;
// 获得二进制输出流
ByteArrayOutputStream baos = new ByteArrayOutputStream();
try {
//生成验证码
String kaptchaText = defaultKaptcha.createText();
//放入session中
request.getSession().setAttribute("servletCode",kaptchaText);
BufferedImage image = defaultKaptcha.createImage(kaptchaText);
ImageIO.write(image,"jpg",baos);
}catch (Exception e){
System.err.println("将图片写入到输入流出现错误！");
}
// 使用HttpServletResponse将图片写入到浏览器中
imgByte = baos.toByteArray();
// 通过response设定响应请求类型
// no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用 缓存。
response.setHeader("Cache-Control","no-store");
// no-cache指示请求或响应消息不能缓存
response.setHeader("Pragma","no-cache");
/* expires是response的一个属性,它可以设置页面在浏览器的缓存里保存的时间 ,超过设定的时 间后就过期 。过期后再次
* 浏览该页面就需要重新请求服务器发送页面数据，如果在规定的时间内再次访问次页面 就不需从服务器传送 直接从缓存中读取。
* */
response.setDateHeader("Expires", 0);
// servlet接受request请求后接受图片形式的响应
response.setContentType("image/jpeg");
//通过response获得输出流
ServletOutputStream sos = response.getOutputStream();
sos.write(imgByte);
sos.close();
}验证码校验实现
@RequestMapping("/getLogin")
public String getLogin(@Param("code")String code, HttpServletRequest request, Model model, User user){
String servletCode = (String)request.getSession().getAttribute("servletCode");
if(!servletCode.equals(code)){
model.addAttribute("info","验证码错误！");
} else {
User loginUser = userService.selectByLoginAndPwd(user.getLoginname(), user.getPwd());
if(loginUser!=null){
model.addAttribute("info","欢迎："+loginUser.getName());
model.addAttribute("userId",loginUser.getId());
return "dkh/index";
} else {
model.addAttribute("info","账号或密码错误！");
}
}
return "forward:/login.jsp";
}
登陆页面 login.jsp （图片轮播，验证码刷新）
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<% application.setAttribute("cpt",request.getContextPath()); %>
<html>
<head>
<link href="${cpt}/boot/css/bootstrap.min.css" rel="stylesheet">
<script src="${cpt}/js/jquery.min.js"></script>
<script src="${cpt}/boot/js/bootstrap.min.js"></script>
<title>login</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--加上这一段，在最小窗口时，有折叠效果 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">客户管理<span class="badge">V1.1</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- <li class="active"><a href="#">首页</a></li>-->
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >下拉 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="divider"></li>
<li><a href="#">4</a></li>
<li class="divider"></li>
<li><a href="#">5</a></li>
</ul>
</li>-->
</ul>
<!-- 靠右显示-->
<%-- <ul class="nav navbar-nav navbar-right">--%>
<%-- <li><a href="#">欢迎:<span class="text-danger">陈星星</span> </a></li>--%>
<%-- <li class="dropdown">--%>
<%-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" >个人设置 <span class="caret"></span></a>--%>
<%-- <ul class="dropdown-menu">--%>
<%-- <li><a href="#">修改密码</a></li>--%>
<%-- <li class="divider"></li>--%>
<%-- <li><a href="#">退出</a></li>--%>
<%-- </ul>--%>
<%-- </li>--%>
<%-- </ul>--%>
</div>
</div>
</nav>
<div class="container">
<div class="row" style="margin-top: 100px">
<div class="col-sm-9">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" >
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="${cpt}/img/2.jpg" >
</div>
<div class="item">
<img src="${cpt}/img/3.jpg" >
</div>
<div class="item">
<img src="${cpt}/img/4.jpg" >
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-sm-3" >
<h3 class="text-center">用户登陆</h3>
<form action="${cpt}/getLogin" method="post">
<div class="form-group">
<label for="loginname"> <span class="glyphicon glyphicon-user"></span> 用户名：</label>
<input type="text" class="form-control" id="loginname" name="loginname" placeholder="请输入用户名">
<span>${errMsg.loginname}</span>
</div>
<div class="form-group">
<label for="pwd"> <span class="glyphicon glyphicon-asterisk"></span> 密码：</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
<span>${errMsg.pwd}</span>
</div>
<div class="form-group">
<div class="col-sm-6" style="padding-left: 0">
<label for="code"> <span class="glyphicon glyphicon-asterisk"></span> 验证码：</label>
<input type="text" class="form-control" id="code" name="code" placeholder="请输入验证码">
</div>
<div class="col-sm-6">
<img src="${cpt}/getCode" title="看不清？换一张" id="CodeImg" >
<br/>
<br/>
</div>
</div>
<div class="form-group">
<input type="submit" value="登陆" class="btn btn-info btn-block">
</div>
<div class="form-group">
<span style="color: red">${info}</span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" >
$(function () {
// 刷新验证码
$("#CodeImg").bind("click", function () {
$(this).hide().attr('src', '${cpt}/getCode').fadeIn();
});
});
</script>登陆后的页面 index.jsp (主要有修改密码的模态框）加载其他页面的js
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<% application.setAttribute("cpt",request.getContextPath()); %>
<html>
<head>
<link href="${cpt}/boot/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jqgrid核心CSS-->
<link href="${cpt}/grid/ui.jqgrid-bootstrap.css" rel="stylesheet">
<!-- 引入jqery-->
<script src="${cpt}/js/jquery.min.js"></script>
<!-- 引用bootstrap、jqgrid js 核心 jqgrid国际化js-->
<script src="${cpt}/grid/jquery.jqGrid.min.js"></script>
<script src="${cpt}/boot/js/bootstrap.min.js"></script>
<script src="${cpt}/grid/grid.locale-cn.js" ></script>
<title>客户管理</title>
<style>
th,td{
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--加上这一段，在最小窗口时，有折叠效果 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">客户管理<span class="badge">V1.1</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >下拉 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="divider"></li>
<li><a href="#">4</a></li>
<li class="divider"></li>
<li><a href="#">5</a></li>
</ul>
</li>-->
</ul>
<!-- 靠右显示-->
<ul class="nav navbar-nav navbar-right">
<li><a><span class="text-danger">${info}</span> </a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >个人设置 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:getPwdModal();">修改密码</a></li>
<script>
//调用模态框
function getPwdModal() {
$("#updatePwdModal").modal({
show:true,
backdrop:'static', //点外部不会关闭
})
}
</script>
<li class="divider"></li>
<li><a href="${cpt}/getOut">退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="padding-top: 80px" >
<div class="row">
<div class="col-sm-2">
<div class="panel-group" id="accordion" >
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
用户管理
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" >
<div class="panel-body">
<ul class="nav">
<li><a href="javascript:$('#content').load('${cpt}/getAllUser');" id="userBtn">用户设置</a></li>
<%-- <script>--%>
<%-- $(function () {--%>
<%-- $("#userBtn").click(function () {--%>
<%-- $("#content").load("${cpt}/getAllUser");--%>
<%-- })--%>
<%-- })--%>
<%-- </script>--%>
<li><a href="javascript: alert('还在建设中。。。');">登陆情况</a> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" >
系统设置
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav">
<li><a href="javascript: alert('还在建设中。。。');">类型设置</a> </li>
<li><a href="javascript: alert('还在建设中。。。');">职业设置</a> </li>
<li><a href="javascript: alert('还在建设中。。。');">行业设置</a> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" >
大客户归属
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav">
<li><a href="javascript: alert('还在建设中。。。');">店端</a> </li>
<li><a href="javascript: alert('还在建设中。。。');">集团端</a> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" >
大客户信息
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav">
<li><a href="javascript: alert('还在建设中。。。');">店端</a> </li>
<li><a href="javascript: alert('还在建设中。。。');">集团端</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<%--主体内容，用 <div id="content"> 包括起来。后面通过---%>
<%-- <li><a href="javascript:$('#content').load('${cpt}/getAllUser');" id="userBtn">用户设置</a></li>--%>
<%--这一段语句。直接替换主体内容--%>
<div id="content">
<div class="col-sm-10">
<div class="jumbotron">
<h1>欢迎登陆</h1>
<p>....</p>
<p>不知道写啥。</p>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
<!--修改密码的模态框-->
<div class="modal fade" id="updatePwdModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 头部信息-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <span class="glyphicon glyphicon-user"></span> 密码修改</h4>
</div>
<!-- 主体内容-->
<div class="modal-body">
<form id="editPwdForm" >
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-group">
<label for="id">用户编号</label>
<p class="form-control-static">${userId}</p>
<input type="hidden" class="form-control" name="id" id="id" value="${userId}" >
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-group">
<label for="oldPwd">原密码</label>
<input type="password" class="form-control" name="oldPwd" id="oldPwd" placeholder="请输入原密码...">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-group">
<label for="newPwd">新密码</label>
<input type="password" class="form-control" name="newPwd" id="newPwd" placeholder="请输入新密码...">
</div>
</div>
</div>
</form>
</div>
<!-- 页尾-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button onclick="editPwd()" class="btn btn-primary">提交</button>
<script>
function editPwd() {
console.log( $("#editPwdForm").serialize());//表单序列化
//发送请求修改
$.post("${cpt}/user/updatePwd", $("#editPwdForm").serialize(),function (res) {
console.log(res);
if(res.status){
alert(res.msg);
$("#updatePwdModal").modal('hide'); //关闭
}else{
alert(res.msg);
}
},"JSON")
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>
重点！！！！
JQGRID 首次加载方法
$(function () {
var url ="${cpt}/user/getAllUser";
loadList(url);
})
function loadList(url) {
$("#userList").jqGrid({
styleUI:"Bootstrap",//用来指定jqgrid的主题样式 固定写死
url:url, //用来远程获取数据的址。返回json格式
datatype:"json", //用来指定服务器返回的数据类型； 默认是XML
mtype:"get", //用来指定请求方式
colNames:["编号","登陆名","密码","姓名","手机号","邮箱","状态","创建日期","最后编辑日期","编辑"], //用来指定表格中的标题列的名称
colModel:[ //colNames、colModel 需要成对出现
{name: "id"}, //居中
{name: "loginname"}, //单元格可编辑
{name: "pwd"}, //单元格可编辑
{name: "name"}, //单元格可编辑
{name: "phone"}, //单元格可编辑
{name: "email"}, //单元格可编辑
{name: "starts",
formatter:function (cellvalue) {
if(cellvalue ==0){
return '正常';
}
return '停用';
}}, //单元格可编辑
{name: "createdate",width:"260"}, //单元格可编辑
{name: "editdate",width:"260"}, //单元格可编辑
// {name: "age",
// formatter:function(cellvalue, options, rowObject){ //用来对数据进行二次处理
// //cellvalue 这一列的值 //options 当前对象的属性
// //rowObject 当前行的所有值
// console.log(cellvalue);
// console.log(options);
// console.log( rowObject);
// // var age = rowObject.age;
// // if(age>30){
// // return "真大";
// // }else{
// // return "还小";
// // }
// if(cellvalue>30){
// return "<font color='red'>"+cellvalue+"</font>"
// }
// return "<font color='green'>"+cellvalue +"</font>"
// }},
// {name: "bir"},
// {name:"dept.name"},
{name:"id",
formatter:function (cellvalue, options, rowObject) {
var temps='<button onclick="return selectUserById('+cellvalue+')" class="btn btn-danger btn-sm">修改</button> ' +
'<button onclick="return deleteUser('+cellvalue+')" class="btn btn-warning btn-sm">删除</button>'
return temps;
}},
],
pager:"#gridPage",//用来定义分页工具栏 后台可以定义 page(当前面) row(每页显示多少页)
viewrecords:true, //展示总条数
rowNum:20, //每页显示多少条。默认20
rowList:[10,20,30,40,50], //用来定义一个下拉列表，可选页面展示多少条
caption:"人员信息表",
hidegrid:false, //不显示收缩按钮
autowidth: true, //自适应父容器
height:"600px",//默认高度
})
}
本文地址：https://blog.csdn.net/kangtroo/article/details/111067800
上一篇： JDK8:HashMap
推荐阅读
-
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
-
Android SharedPreferences实现记住密码和自动登录
-
Python Django框架实现商城项目源码加设计文档和注释
-
详解JS实现系统登录页的登录和验证
-
.NET微信开发之PC 端微信扫码注册和登录功能实现
-
Linux密钥登录原理和ssh使用密钥实现免密码登陆
-
用node和express连接mysql实现登录注册的实现代码
-
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
-
Laravel实现用户注册和登录
-
Springboot+SpringSecurity+JWT实现用户登录和权限认证示例