• Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互


    框架的东西太复杂也难以讲通,直接上代码:

    一、首先得配置环境 和导入必要的jar包

    有一些重要的如下:

    Filter文件夹下的SafetyFilter.java  

    model文件夹下的 GlobalNames.java  

    web文件下的MySpringContext.java    baseAction.java   BusinessException.java

    interceptor文件夹下的 AuthorizationInterceptor.java    ExceptionIntercetor.java   RequestParameter.java  HttpUtil.java  PropertiesUtil.java

    以及src根目录文件下的以下文件

    。。。

    此外,webContent文件夹下的WEB-INF 里面的web.xml里面要部署拦截器和过滤器

    首选写一个登录后进入的欢迎页面,首先是Home.jsp 然后是index.html

    <display-name>工程名字</display-name>
    <welcome-file-list>
    <welcome-file>Home.jsp</welcome-file>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    </welcome-file-list><!-- ==================================================== --<!-- ================== 过滤器配置 ======================== -->

    <!-- ==================================================== -->
    <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
    <param-name>encoding</param-name>
    <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
    <param-name>forceEncoding</param-name>
    <param-value>true</param-value>
    </init-param>
    </filter>
    <filter-mapping>

    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 新增的文件滤波登录时除了/login.action,/pages/login.jsp两文件 其他的过滤掉-->
    <filter>
    <filter-name>SafetyFilter</filter-name>
    <filter-class>******.filter.SafetyFilter</filter-class>
    <init-param>
    <description>不作判断的资源</description>
    <param-name>excludeUrls</param-name>
    <param-value>
    /login.action,
    /pages/login.jsp
    </param-value>
    </init-param>
    </filter>
    <filter-mapping>
    <filter-name>SafetyFilter</filter-name>
    <url-pattern>*.jsp</url-pattern>
    <url-pattern>*.action</url-pattern>
    </filter-mapping>

    除此外,还有自己要写的action,bpo,dto,mapper,common文件夹

    二、先写一个登录页面login.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>登录页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--Basic Styles-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/assets/css/ace.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/assets/css/ace-skins.min.css"/>
    <script src="${pageContext.request.contextPath}/lib/assets/js/ace-extra.min.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/wpyd/login.css"/>
    </head>
    <body class="login-layout" onload="initLoginForm()">
      <div class="main-container">
        <div class="main-content">
          <div class="row">
            <div class="col-lg-11">
              <div class="login-container">
                 <div class="position-relative">
                    <div id="login-box" class="login-box visible widget-box no-border">
                      <div class="widget-body">
                        <div id="widget-main" class="widget-main">
                          <div id="titlePanel" class="center">
                            <img id="aaaa" src="${pageContext.request.contextPath}/images/login/1234.png"/>
                              <div id="title">1234</div>
                          </div>
                          <form id="loginForm" action="${pageContext.request.contextPath }/login.action" method="post">
                            <fieldset>
                              <label class="block clearfix">
                                <span class="block input-icon input-icon-right">
                                  <input type="text" class="form-control" tabindex="1" id="LoginName" name="loginUser.loginName" placeholder="用户名" required="required"/>
                                    <i class="icon-user"></i>
                                </span>
                              </label>
                              <br />
                              <label class="block clearfix">
                                <span class="input-icon input-icon-right" style="100%;">
                                  <input type="password" tabindex="3" id="PassWord" name="loginUser.PassWord" class="form-control" placeholder="密码" required="required"/>
                                     <i class="icon-lock"></i>
                                </span>
                              </label>
                              <div class="error"><s:actionerror /></div>
                                <br />

                              <div class="clearfix">
                                <button type="button" type="submit" tabindex="4" onclick = "checkUser();" class="pull-right btn btn-sm btn-primary" style="100%;">
                                  <i class="icon-key"></i>
                                    登陆
                                </button>
                              </div>

                              <div class="space-4"></div>
                          </fieldset>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </body>
    <script>
      var baseCtx = '${pageContext.request.contextPath}/';
    </script>
    <!--Basic scripts-->
      <script src="${pageContext.request.contextPath}/lib/assets/js/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      if("ontouchend" in document) document.write("<script src='"+"${pageContext.request.contextPath}/"+"assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
    </script>
    <script src="${pageContext.request.contextPath}/lib/assets/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/assets/js/typeahead-bs2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/assets/js/ace-elements.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/assets/js/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function() {
        $("#LoginName").focus();<!-- 登录时自动定位可以输入-->
    });
    function checkUser() {
      var result = $.trim($("#LoginName").val());
      var password = $.trim($("#PassWord").val());

      if (result == "" || result == null) {
        alert("用户名不能为空!");
        return false;
      }
      if (password == "" || password == null) {
        alert("请输入密码!");
        return false;
      }
      $("#loginForm").submit();
    }
    //初始化登录输入
    function initLoginForm(){
      var usr = document.getElementById("LoginName").value;
      var pwd = document.getElementById("PassWord").value;
      if( usr && pwd){
        $("#LoginName").val(""); <!-- 登录时清空用户名和密码-->
        $("#PassWord").val("");<!-- 登录时清空用户名和密码-->
      }
    }
    </script>
    </html>

     三、写一个登陆成功后返回的页面 Home.jsp

    页面内容这里不关注 关注的是登陆成功后返回的用户信息 

    <!-- 其中sys_current_sessioninfo是一个全局变量保存了用户登录成功后的session信息(包括用户名,角色,ID等信息),后续我们要利用到这些信息来展示用户的主页面-->

    <script type="text/javascript">

    var contextPath = "${pageContext.request.contextPath}";
    var Role = '${sessionScope.sys_current_sessioninfo.Role}';
    var Name = '${sessionScope.sys_current_sessioninfo.Name}';
    var Id = '${sessionScope.sys_current_sessioninfo.Id}';

    </script>

     四、写一个登陆的action请求Java文件

    从这里需要先说明一下后续的各个文件的用途

    loginAction.java:登录请求,接收到用户页面上输入的用户名和密码(loginName  passWord)

    LoginUserDTO.java:登陆的客户端用户对象,他也有两个属性 loginName  passWord

    Sysuser.java:登陆的服务端用户对象,由数据库匹配成功后返回的用户对象;他也有多个属性 ID, name,  role, password, phone, age等

    sessionInfo.java:登陆成功后保存的用户信息,在客户端用户访问期间一直有效,保存的属性也有多个ID, name,  role, password, phone, age等

    userSession.java: 主要是session的创建方法和获取session的方法

    /**
    * 取当前操作人员ID号
    * @return
    */
    public static String getCurrentUserid() {
      SessionInfo sessionInfo = (SessionInfo) get(GlobalNames.CURRENT_SESSION_INFO);
      if (sessionInfo != null)
        return sessionInfo.getWpyId();
      return null;
    }

    /**
    * 取当前登录Session
    */
    public static Map<String, Object> getSession() {
      Map<String, Object> map = (Map<String, Object>) session.get();
      return map;
    }

    userMapper.java:内容:public Sysuser selectByLoginName(String loginName);

    //返回类型为Sysuser   

    //方法名:selectByLoginName

    //功能:根据用户输入的登录名来查找是否存在该用户

    usermapper.xml:主要是根据登陆时候提供的用户名进行数据库查询,并返回一个用户对象

    <sql id="userColumns">
    <!-- 用户字段属性名 -->
    ID,

    name,

    age,

    phone,

    role,

    password
    </sql>
    <select id="selectByLoginName" parameterType="string" resultType="*********.Sysuser">
      SELECT
        <include refid="userColumns" />
      FROM table_name WHERE name=#{loginName}
    </select>

    loginAction.java的主要内容为:

    private LoginUserDTO loginUser;
    private String loginName;//前台页面的登录用户名
    private String passWord;//前台页面的登录密码
    @Resource
    LogonBPO logonBPO;

    //
    @Action(value = "/login", results = {
    @Result(location = "hi",type="redirectAction"),
    @Result(name = "login", location = "/pages/login.jsp") })
    public String login(){
      Map<String, String> argsMap = new HashMap<String, String>();
      if (loginUser == null){
      loginUser = new LoginUserDTO();
      }
    try {
      System.out.println("用户和密码验证开始!");
      Sysuser sysuser = logonBPO.checkUser(loginUser.getLoginName(), loginUser.getPassWord());
      System.out.println("用户为: "+sysuser.getWpy_name());
      //将服务端返回的用户对象数据存入一个map(10个字段的数据)
      argsMap.put("Id", sysuser.getId());
      argsMap.put("name", sysuser.getName());
      System.out.println("开始创建session: ");
      //将map数据存入用户session
      logonBPO.createSessionInfo(argsMap);
    }
    catch (BusinessException e) {
      addActionError(e.getMessage());
      return LOGIN;
    }
    return SUCCESS;
    }

    /**
    *
    * 登陆成功后返回的页面是Home.jsp
    * @return
    */
    @Action(value = "/hi",results = { @Result(location = "/pages/Home.jsp") } )
    public String loginDispatch() {
    return SUCCESS;
    }

    /**
    * 退出系统
    */
    @Action(value="/logout", results = { @Result(location = "/pages/login.jsp") })
    public String logout() {
      SessionInfo sessionInfo = (SessionInfo) UserSession.get(GlobalNames.CURRENT_SESSION_INFO);
      this.request.getSession().invalidate();

    if (sessionInfo != null) {
      sessionInfo.getId();
    } else
    {
      logger.warn("logoff");
    }
    if (HttpUtil.isAjaxRequest(this.request)) {
      return NONE;
    } else {
      return SUCCESS;
    }
    // return NONE;
    }

    LogonBPO.java 主要用于检查用户密码是否正确以及用户名是否存在,代码如下:

    public Sysuser checkUser(String loginName, String passWord) {
      //根据登陆的用户名和密码进行验证
      //1.查询后台数据 返回类型为sysuser
      Sysuser user = userMapper.selectByLoginName(loginName);
      //2、判断用户状态
      if (user == null) {
        System.out.println("用户不存在: ");
        throw new BusinessException("该用户不存在!");
      }
      else
      {
        //3.判断密码
        if (passWord == null) {
          throw new BusinessException("密码为空!");
        }
        else
        {
          //4、验证密码是否正确
          if (!passWord.equals(user.getPassword())){
            throw new BusinessException("密码错误!");
          }
          else
          {
            System.out.println("密码匹配成功! ");
          }
        }  
      }
       return user; //返回用户
    }

    /**
    * 建立用户会话信息,将action请求得到的用户信息保存在session中
    */
    public void createSessionInfo(Map<String, String> argsMap) {
      Map<String, Object> session = UserSession.getSession();
      SessionInfo sessionInfo = new SessionInfo();
      sessionInfo.setId(argsMap.get("Id"));
      sessionInfo.setName(argsMap.get("name"));
      //将session数据存入一个全局变量
      session.put(GlobalNames.CURRENT_SESSION_INFO, sessionInfo);
    }
    }

  • 相关阅读:
    es6+最佳入门实践(11)
    es6+最佳入门实践(10)
    es6+最佳入门实践(9)
    es6+最佳入门实践(8)
    es6+最佳入门实践(7)
    cookie、session、sessionid 与jsessionid之间的关系
    百面数据挖掘工程师-题库(1)
    远程桌面最新漏洞CVE-2019-0708 POC利用复现
    jQuery基础
    JavaScript 基础
  • 原文地址:https://www.cnblogs.com/Lxiaojiang/p/6121829.html
Copyright © 2020-2023  润新知