基于bootstrap的web登陆实例

发布时间：2020-12-17 21:02:37 所属栏目：安全来源：网络整理

导读：前情提要之前已经搭好的springMVC+myBatis项目骨架,详情请看–传送门。获取bootstrap 方法一使用 Bootstrap 中文网提供的免费 CDN 加速服务（同时支持 http 和 https 协议）将下面的代码copy到自己的JSP页面中即可。 !-- 新 Bootstrap 核心 CSS 文件 --

前情提要
之前已经搭好的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>

好处，不需要下载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>

在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">&times;</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>

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();
                }
    });
});

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; }

完了之后效果基本就像这样了：

这里写图片描述

接下来就得来写后台代码了

在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 {
    @Resource
    private 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);
    }
}

用到的两个工具方法，也记录一下。
- 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;
    }

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();
            }
        }
    }

还有根据账号去查询用户是否存在，因为账号不是表的主键，所以自动生成的mapping.xml中没有相应的查询SQL语句，需要我们手动给它加上：

<select id="selectByAcccountNo" resultMap="BaseResultMap" parameterType="java.lang.String" >
    <!-- WARNING - @mbggenerated This element is automatically generated by MyBatis Generator,do not modify. -->
    select 
    <include refid="Base_Column_List" />
    from X_USER
    where ACCOUNT_NO = #{id,jdbcType=VARCHAR}
  </select>

同时再到XUserMapping.java中添加一个selectByAcccountNo接口：

XUser selectByAcccountNo(String accountNo);

这样一个登陆页面实例就算完成了，登陆验证一下：

输入错误的账号或密码：
输入正确的账号和密码：

附上数据库表结构：

--系统用户表
drop table x_user;
create table x_user(
id number(10) CONSTRAINT x_user_id_pk PRIMARY KEY,name varchar2(32),real_name varchar2(64),account_no varchar2(64) CONSTRAINT x_user_accountNo_uk unique,pwd varchar2(64),email varchar2(64),mobile_phone number(11),addr_id number(10),last_login timestamp
);

COMMENT ON TABLE x_user IS '用户表';
COMMENT ON COLUMN x_user.name IS '昵称';
COMMENT ON COLUMN x_user.real_name IS '真实姓名';
COMMENT ON COLUMN x_user.account_no IS '登陆账号';
COMMENT ON COLUMN x_user.pwd IS '密码';
COMMENT ON COLUMN x_user.email IS '邮箱';
COMMENT ON COLUMN x_user.mobile_phone IS '手机号码';
COMMENT ON COLUMN x_user.addr_id IS '地址ID，外键关联地址表';
COMMENT ON COLUMN x_user.last_login IS '最后登陆时间';

drop sequence xUser_seq;
CREATE SEQUENCE xUser_seq
INCREMENT BY 1
START WITH 1
NOMAXVALUE
NOCYCLE
NOCACHE;

--这里原本是想做一个ID自增长的触发器的，但是我用pl/sql developer每次向x_user表中
--插入数据的时候就会报一个#通信信道结尾#的错误，
--找了半天没找出原因o(╯□╰)o，没办法，我的数据库太渣了，还请知道的高手不吝赐教。
CREATE OR REPLACE TRIGGER ins_xUser_triger BEFORE
INSERT ON x_user FOR EACH ROW WHEN (new.id is null)
begin
select xUser_seq.Nextval into: new.id from dual;
end;

--地址表
drop table x_addr;
create table x_addr(
id number(10) CONSTRAINT x_addr_id_pk PRIMARY KEY,prov_addr varchar2(32),ctiy_addr varchar2(32),dist_addr varchar2(32),detail_addr varchar2(100),addr_type char
);

COMMENT ON TABLE x_addr IS '地址表';
COMMENT ON COLUMN x_addr.prov_addr IS '省';
COMMENT ON COLUMN x_addr.ctiy_addr IS '市';
COMMENT ON COLUMN x_addr.dist_addr IS '区';
COMMENT ON COLUMN x_addr.detail_addr IS '详细地址';
COMMENT ON COLUMN x_addr.addr_type IS '地址类型';

--枚举字典表
drop table x_dic;
create table x_dic(
id number(10) constraint x_dic_id_pk primary key,rel_table varchar2(32) not null,rel_col varchar2(32) not null,dic_key char,dic_value varchar2(32)
);
COMMENT ON TABLE x_dic IS '枚举字典表';
COMMENT ON COLUMN x_dic.rel_table IS '所属表';
COMMENT ON COLUMN x_dic.rel_col IS '所属字段';
COMMENT ON COLUMN x_dic.dic_key IS '字典key';
COMMENT ON COLUMN x_dic.dic_value IS '字典值';

--登陆登出记录
create table x_login(
id number(10) constraint x_login_id_pk primary key,local_ip varchar2(32),internet_ip varchar2(32),login_time timestamp,logout_time timestamp,ip_addr varchar2(32)
);
COMMENT ON TABLE x_login IS '登陆记录';
COMMENT ON COLUMN x_login.local_ip IS '本地地址';
COMMENT ON COLUMN x_login.internet_ip IS '网络地址';
COMMENT ON COLUMN x_login.login_time IS '登陆时间';
COMMENT ON COLUMN x_login.logout_time IS '登出时间';
COMMENT ON COLUMN x_login.ip_addr IS 'IP所在地';

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!