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

时间:2023-03-08 16:40:09

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

一、首先得配置环境 和导入必要的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根目录文件下的以下文件

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

。。。

此外,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="width: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="width: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("用户为:\n"+sysuser.getWpy_name());
  //将服务端返回的用户对象数据存入一个map(10个字段的数据)
  argsMap.put("Id", sysuser.getId());
  argsMap.put("name", sysuser.getName());
  System.out.println("开始创建session:\n");
  //将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("用户不存在:\n");
    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("密码匹配成功!\n");
      }
    }  
  }
   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);
}
}