基于bootstrap的web登陆实例
2024-05-09 02:35:46
-
前情提要
之前已经搭好的springMVC+myBatis项目骨架,详情请看–>传送门。获取bootstrap
方法一
使用 Bootstrap 中文网提供的免费 CDN 加速服务（同时支持 http 和 https 协议）
将下面的代码copy到自己的JSP页面中即可。<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
好处，不需要下载bootstrap的JS和CSS文件，只要有网络就能引用到。
方法二
- 到官网下载编译好的bootstrap–>传送门，它是编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。当然你也可以下载源码版，源码包含编译好的文件。
- 另外bootstrap是完全基于jQuery开发的，要使用bootstrap，必须依赖jQuery。所以再把jQuery下载下来。
- 把下载下来的文件copy到项目里面，如图：
这样我们就能使用bootstrap给我提供的前端框架开发漂亮的web应用了。
添加JSP页面
在此之前，为了避免重复劳动，我们先创建一个JSP模板。
点击window–>搜索JSP–>templent–>new， Name随便输入，Context选择New JSP，如图:
- JSP模板代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html><!--Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型--> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Document</title><link rel="stylesheet" href="<%=basePath %>resources/css/bootstrap/bootstrap.css"> </head> <body><!--bootstrap需要依赖jQuery，所以必须在他之前先引入jQuery--><script src="<%=basePath %>resources/js/bootstrap/jquery-1.11.3.min.js"></script><script src="<%=basePath %>resources/js/bootstrap/bootstrap.js"></script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
在webapp目录下新建login.jsp
- login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>login</title><link rel="stylesheet" href="<%=basePath %>resources/css/bootstrap/bootstrap.css"><link rel="stylesheet" href="<%=basePath %>resources/css/myCss/login.css"> </head> <body><!--引入头部JSP--><jsp:include page="head.jsp" ></jsp:include><!--使用模态框的方式模拟一个登陆框--><div class="modal show" id="loginModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close">×</button><h1 class="text-center text-primary">登录</h1></div><div class="modal-body"><form class="form col-md-12 center-block" id="loginForm" action="main/successLogin.do" method="post"><div class="form-group-lg" id="accountDiv"><label class="sr-only" for="inputAccount">账号</label><div class="input-group"><div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div><input class="form-control" id="inputAccount" name="accountNo" type="text" placeholder="账号" required autofocus></div><div class="hidden text-center" id="accountMsg"><span class="glyphicon glyphicon-exclamation-sign"></span>用户名不存在</div></div><br><div class="form-group-lg" id="pwdDiv"><label class="sr-only" for="inputPassword">密码</label><div class="input-group"><div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div><input class="form-control" id="inputPassword" name="pwd" type="password" placeholder="密码" required><div class="input-group-addon"><span class="glyphicon glyphicon-eye-open"></span></div></div><div class="hidden text-center" id="pwdMsg"><span class="glyphicon glyphicon-exclamation-sign"></span>用户名密码错误</div></div><div class="checkbox"><label> <input type="checkbox" value="remember-me">记住我</label></div><div class="form-group"><button class="btn btn-default btn-lg col-md-6" id="btn_register" type="submit">注册</button><button class="btn btn-primary btn-lg col-md-6" id="btn_login" type="button" >登录</button></div></form></div><div class="modal-footer"></div></div></div></div><!-- /container --><script src="<%=basePath %>resources/js/bootstrap/jquery-1.11.3.min.js"></script><script src="<%=basePath %>resources/js/bootstrap/bootstrap.js"></script><script src="<%=basePath %>resources/js/myJs/login.js"></script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- login.js
$("#btn_login").click(function(){var loginObj = new Object();loginObj.accountNo= $("#inputAccount").val();loginObj.pwd= $("#inputPassword").val();var loginJson = JSON.stringify(loginObj); //将JSON对象转化为JSON字符 $.post('main/validateLogin.do',{"loginObj":loginJson},function(e){e=JSON.parse(e); //由JSON字符串转换为JSON对象if(e.accountMsg){$("#accountDiv").addClass("has-error");$("#accountMsg").removeClass("hidden");$("#pwdDiv").removeClass("has-error");$("#pwdMsg").addClass("hidden");}else if (e.pwdMsg){$("#accountDiv").removeClass("has-error");$("#accountMsg").addClass("hidden");$("#pwdDiv").addClass("has-error");$("#pwdMsg").removeClass("hidden");}else if (e.user){//location.href="main/successLogin.do";$("#loginForm").submit();}}); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- login.css
#loginModal{position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);background-color: #eee; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
完了之后效果基本就像这样了：
接下来就得来写后台代码了
在controller包下面新增一个LoginController.class
- LoginController.class
package com.dimon.xwater.controller;import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView;import com.alibaba.fastjson.JSONObject; import com.dimon.xwater.dao.XUserMapper; import com.dimon.xwater.pojo.XUser; import com.dimon.xwater.utils.RequestUtils; import com.dimon.xwater.utils.ResponseUtils;@Controller @RequestMapping("/main") public class LoginController {@Resourceprivate XUserMapper userDao;/*** 登陆跳转* @param request* @param model* @return*/@RequestMapping("/successLogin")public ModelAndView login(HttpServletRequest request,ModelAndView model){String accountNo = RequestUtils.getString(request, "accountNo");String pwd = RequestUtils.getString(request, "pwd");XUser user = new XUser();user.setAccountNo(accountNo);user.setPwd(pwd);model.addObject("user", user);//跳转到/jsp/main.jsp页面model.setViewName("main");return model;}/*** 登陆表单校验* @param request* @param response*/@RequestMapping("/validateLogin")public void login(HttpServletRequest request, HttpServletResponse response){//获取form表单数据String loginObj = RequestUtils.getString(request, "loginObj");//JSON字符串序列化成JSON对象JSONObject loginJosn = JSONObject.parseObject(loginObj);String accountNo = loginJosn.getString("accountNo");String pwd = loginJosn.getString("pwd");//根据账号查询用户名是否存在XUser selectUser = userDao.selectByAcccountNo(accountNo);JSONObject result = new JSONObject();if (null == selectUser){result.put("accountMsg", "用户名不存在");}else if (!pwd.equals(selectUser.getPwd())){result.put("pwdMsg", "用户名密码错误");}else {result.put("user",selectUser);}String resultStr = result.toJSONString();ResponseUtils.send(response, resultStr);} }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
用到的两个工具方法，也记录一下。
- RequestUtils.getString();/*** 返回字符串,删除了首尾空格,如果不存在则返回null* * @param request* @param key* @return*/public static String getString(HttpServletRequest request, String key) {String value = request.getParameter(key);if (StringUtils.isEmpty(value)) {return StringUtils.trimWhitespace(value);}return value;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- ResponseUtils.send();
/*** 发送json格式数据到页面* * @param response* @param content*/public static void send(HttpServletResponse response, String content) {response.setCharacterEncoding("UTF-8");response.setContentType("text/html");PrintWriter out = null;try {out = response.getWriter();//若发送数据为null 则默认为""if(content == null){content = "";}out.write(content);}catch (IOException e) {log.error(e.getLocalizedMessage(), e);}finally {if (out != null){out.close();}}}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
还有根据账号去查询用户是否存在，因为账号不是表的主键，所以自动生成的mapping.xml中没有相应的查询SQL语句，需要我们手动给它加上：
<select id="selectByAcccountNo" resultMap="BaseResultMap" parameterType="java.lang.String" ><!--WARNING - @mbggeneratedThis element is automatically generated by MyBatis Generator, do not modify.-->select <include refid="Base_Column_List" />from X_USERwhere ACCOUNT_NO = #{id,jdbcType=VARCHAR}</select>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
同时再到XUserMapping.java中添加一个
selectByAcccountNo接口：XUser selectByAcccountNo(String accountNo);- 1
这样一个登陆页面实例就算完成了，登陆验证一下：
- 输入错误的账号或密码：
- 输入正确的账号和密码：
附上数据库表结构：
--系统用户表 truncate table xuser; drop table xuser; create table xuser( xuser_id number(10), xuser_name varchar2(32), xuser_realName varchar2(64), xuser_acctno varchar2(64), xuser_pwd varchar2(64), xuser_email varchar2(64), xuser_mphone varchar2(11), xuser_addrId number(10), xuser_lastLogin timestamp, CONSTRAINT pk_xuser PRIMARY KEY (xuser_id), CONSTRAINT uk_xuser UNIQUE (xuser_acctno) );COMMENT ON TABLE xuser IS '用户表'; COMMENT ON COLUMN xuser.xuser_name IS '昵称'; COMMENT ON COLUMN xuser.xuser_realName IS '真实姓名'; COMMENT ON COLUMN xuser.xuser_acctno IS '登陆账号'; COMMENT ON COLUMN xuser.xuser_pwd IS '密码'; COMMENT ON COLUMN xuser.xuser_email IS '邮箱'; COMMENT ON COLUMN xuser.xuser_mphone IS '手机号码'; COMMENT ON COLUMN xuser.xuser_addrId IS '地址ID，外键关联地址表'; COMMENT ON COLUMN xuser.xuser_lastLogin IS '最后登陆时间';--创建序列 drop sequence xUser_seq; CREATE SEQUENCE xUser_seq INCREMENT BY 1 START WITH 1 NOMAXVALUE NOCYCLE NOCACHE;--ID自增长的触发器 CREATE OR REPLACE TRIGGER ins_xUser_trigerBEFORE INSERT ON xuserFOR EACH ROWWHEN (new.xuser_id is null) beginselect xUser_seq.Nextval into :new.xuser_id from dual; end;--地址表 drop table xaddr; create table xaddr( xaddr_id number(10), xaddr_prov varchar2(32), xaddr_ctiy varchar2(32), xaddr_dist varchar2(32), xaddr_detail varchar2(100), xaddr_type char, CONSTRAINT pk_xaddr PRIMARY KEY (xaddr_id) );COMMENT ON TABLE xaddr IS '地址表'; COMMENT ON COLUMN xaddr.xaddr_prov IS '省'; COMMENT ON COLUMN xaddr.xaddr_ctiy IS '市'; COMMENT ON COLUMN xaddr.xaddr_dist IS '区'; COMMENT ON COLUMN xaddr.xaddr_detail IS '详细地址'; COMMENT ON COLUMN xaddr.xaddr_type IS '地址类型';--枚举字典表 drop table xdic; create table xdic( xdic_id number(10), xdic_tab varchar2(32) not null, xdic_col varchar2(32) not null, xdic_key char(2), xdic_val varchar2(32), constraint pk_xdic primary key (xdic_id) ); COMMENT ON TABLE xdic IS '枚举字典表'; COMMENT ON COLUMN xdic.xdic_id IS '所属表'; COMMENT ON COLUMN xdic.xdic_col IS '所属字段'; COMMENT ON COLUMN xdic.xdic_key IS '字典key'; COMMENT ON COLUMN xdic.xdic_val IS '字典值';--登陆登出记录 create table xlogin( xlogin_id number(10), xlogin_localip varchar2(32), xlogin_netip varchar2(32), xlogin_logintime timestamp, xlogin_logouttime timestamp, xlogin_ipaddr varchar2(32), constraint pk_xlogin primary key (xlogin_id) );COMMENT ON TABLE xlogin IS '登陆记录'; COMMENT ON COLUMN xlogin.xlogin_localip IS '本地地址'; COMMENT ON COLUMN xlogin.xlogin_netip IS '网络地址'; COMMENT ON COLUMN xlogin.xlogin_logintime IS '登陆时间'; COMMENT ON COLUMN xlogin.xlogin_logouttime IS '登出时间'; COMMENT ON COLUMN xlogin.xlogin_ipaddr IS 'IP所在地';- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
版权声明：本文为Dimon Ho整理，请随意转载 →_→ 知识共享，共创IT文明。
基于bootstrap的web登陆实例相关推荐
- 利用bootstrap实现web登陆
原文链接:基于bootstrap的web登陆实例 前情提要 之前已经搭好的springMVC+myBatis项目骨架,详情请看-->传 送 门. 获取bootstrap 方法一 使用 Boots ...
- 基于Java的webapp_几乎所有基于Java的web app都需要Model 2 (part II) (转)
几乎所有基于Java的web app都需要Model 2 (part II) (转)[@more@] 几乎所有基于的 app都需要Model 2 当Web容器从客户端接收到一个请求时,控制流开始运行. ...
- 《Flask Web开发：基于Python的Web应用开发实战》笔记（原创）
内容提要 在学习"狗书"<Flask Web开发:基于Python的Web应用开发实战>的过程中,一直遇到各种各样的坑.该书的第一部分是"Flask简介&qu ...
- Flask Web开发：基于Python的Web应用开发实战
<Flask Web开发:基于Python的Web应用开发实战> 虽然简单的网站(Flask+Python+SAE)已经上线,但只是入门.开发大型网站,系统地学习一遍还是有必要的. 201 ...
- java metronic_基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理...
大家对Bootstrap框架知识了解多少 Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也 ...
- 基于JAVA的Web浏览器
摘要 网页浏览器是一个软件程序,用于与www建立联结,并与之进行通信.它可以在www系统中根据链接确定信息资源的位置,并将用户感兴趣的信息资源取回来,对HTML文件进行解释,然后将文字图像显示出来,或 ...
- 在Autodesk应用程序商店发布基于浏览器的Web应用程序
你一定已经听说过Autodesk应用程序商店了,通过Autodesk应用程序商店,你可以免费下载或购买来自全球的优秀开发者发布的应用程序,来帮助你更快更方便的完成你的工作.而且作为开发者,您也可以在A ...
- 基于Spring的Web缓存
缓存的基本思想其实是以空间换时间.我们知道,IO的读写速度相对内存来说是非常比较慢的,通常一个web应用的瓶颈就出现在磁盘IO的读写上.那么,如果我们在内存中建立一个存储区,将数据缓存起来,当浏览器端 ...
- 基于bootstrap实现简单用户管理功能
基于bootstrap实现简单用户管理功能,包括增删改以及列表分页展示功能. 1.web.xml配置servlet映射: <servlet><servlet-name>User ...
最新文章
- (24)：(行为型模式) Visitor 访问者模式
- 漫画：臭长臭长的高频贪心面试题
- iMeta期刊顾问James M Tiedje当选中国科学院外籍院士
- 如何基于Redis Replication设计并实现Redis-replicator？
- python 协程原理_Python协程greenlet实现原理
- 客户连接多个服务端_Dubbo源码解析之客户端Consumer
- axure web组件_AXURE原型设计：移动端选择器的应用
- git merge 回退_Git 基础学习总结2(学不会你锤我)
- 判断大小简单算法_算法浅谈——人人皆知却很多人写不对的二分法
- 计算机主板知识,小白必看电脑主板知识扫盲，主板是什么？有什么用？
- C和指针---第八章：数组
- java 访问 usb
- Java Web底层（1）
- 30. Element parentNode 属性
- 〖Python〗-- 函数闭包的理解
- 使用客户端工具SecureCRT连接linux
- excel表格末尾添加一行_Excel2007：给excel表格添加边框线
- VirtualBox安装增强功能
- datepicker的具体用法
- 数据库DataBase