用Struts2做一个简单的的用户登陆界面

男娘i 2022-03-15 19:46 228阅读 0赞

**做一个简单的Struts2框架的用户登陆网页**

写这篇文章时，我和你们一样也是初学者，接下来我分享一下我的学习成果给大家！  
首先我是在 Java IDE 下开发的，直接去官网下载即可。相信大家已经把tomcat，jdk，环境变量等弄好了，接下来开始我的学习过程。

**1. 熟悉下载安装Struts2开发包**  
直接在官网下载相应的压缩包即可，我用的是同学给我的解压包  
直接复制粘贴在lib目录下即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70]  
**2. 配置相应的dtd文件**  
解压上图的struts2-core-2.3.24.jar包，复制struts-2.3.dtd在方便找到的位置（我放在的是桌面，并且我是直接在IDE里查看的）  
![在这里插入图片描述][20190308203354941.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70 1]  
在上图箭头的指示找到该操作框，Location中的是2.3.dtd的位置，key的在该文件中可以找到，完成后基本就配置成功了。

**3.配置struts.xml**  
我在开始创建项目时src包下并没有这个文件，需要自己手动添加，鼠标点击src包再ctrl+N，搜索xml file,在相应位置添加配置文件，一路next即可（因为我已经创建过了，无法创建一个同名的文件，所以显示报错）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70 2]  
struts.xml的代码

<?xml version="1.0" encoding="UTF-8"?>
    
    <!DOCTYPE struts PUBLIC
    	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    	"http://struts.apache.org/dtds/struts-2.3.dtd">
    <struts>
    <constant name="struts.devMode" value="flase"></constant>
    
    <package name="text" namespace="/" extends="struts-default">
    
    <action name="login" class="com.LoginAction" method="execute">
    
    <result name="success">/welcome.jsp</result>
    <result name="error">/error.jsp</result>
    </action>
    </package> 
    </struts>

里面的一些注释是我写实验报告时附上的，也不确定完全正确，希望能帮到你。

**4.配置web.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
    
    <filter>
      
      	<filter-name>struts</filter-name>
      	
      	<filter-class>org.apache.struts2.dispatcher.ng.filter.
    StrutsPrepareAndExecuteFilter</filter-class>
      </filter>
      
      <filter-mapping>
      
      	<filter-name>struts</filter-name>
      	
      	<url-pattern>/*</url-pattern>
     </filter-mapping>
    
      <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</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> 
         
    
    </web-app>

其中Filter的实现类可从core.jar包中的filter文件的StrutsPrepareAndExecuteFilter.class中查找到  
![在这里插入图片描述][20190308210803805.png]  
**5.LoginAction类**

package com;
    
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.apache.struts2.interceptor.ServletRequestAware;
    
    import com.opensymphony.xwork2.ActionSupport;
    import com.valueBean.User;
    
    public class LoginAction extends ActionSupport {
    
    	private User u;
     public String execute(){
         if(("076".equals(u.getUsername())) && ("076".equals(u.getUserpass()))||
        	("103".equals(u.getUsername())) && ("103".equals(u.getUserpass()))||
            ("104".equals(u.getUsername())) && ("104".equals(u.getUserpass()))||
            ("130".equals(u.getUsername())) && ("130".equals(u.getUserpass()))||
            ("115".equals(u.getUsername())) && ("115".equals(u.getUserpass())))
         {
        	 return SUCCESS;
         }else {
    		 return ERROR;
         }
     }
    public User getU() {
    	return u;
    }
    public void setU(User u) {
    	this.u = u;
    }
     
    }

.equals() 判断值是否相等，使用函数GetUserName获取当前用户名称。  
我定义了一个javabean来封装用户信息（u）

**6.我的javabean**

package com.valueBean;
    
    public class User {
    	public User() {}
    	public User(String username,String userpass) {
    		this.username = username;
    		this.userpass = userpass;
    	}
    	private String username;
    	private String userpass;
    	public String getUsername() {
    		return username;
    	}
    	public void setUsername(String username) {
    		this.username = username;
    	}
    	public String getUserpass() {
    		return userpass;
    	}
    	public void setUserpass(String userpass) {
    		this.userpass = userpass;
    	}
    }

**7.开始界面和成功或失败的界面**  
顺便写点就可以了，只要定义的用户名和密码和我的一样就行了（username，userpass），我的初始界面是login.jsp，成功的界面是welcome.jsp,失败的是error.jsp，下面的是我项目的全部东西  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70 3]  
**login.jsp**

<%@page language="java" contentType="text/html;charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>登录页面</title>
    		<style>
    			table{
    				background-size:100% 100%;
    				border:2px solid gray;
    				margin:10% auto;
    			}
    			td{
    				border:1px solid gray;
    				text-align:center;
    			}
    			img{
    				width: 15px;
    				height: 10px;
    				opacity:0.5;
    				left: 180px; 
    				position:relative;
    				top:0px;
    			}
    			img:hover{
    				border-color:blue;
    				opacity:1;
    			}
    		</style>
    		<script>
    			function hideShowPsw(){
    				var demoImg = document.getElementById("demo_img");
    				var demoInput = document.getElementById("demo_input");
    				if (demoInput.type == "password") {
    					demoInput.type = "text";
    					demo_img.src = "image/visible.png";
    				}else {
    					demoInput.type = "password";
    					demo_img.src = "image/invisible.png";
    				}
    			}
    			function checkpost(){
    				if((document.forms[0].username.value=="")){
    					alert("用户名不能为空！");
    					document.forms[0].username.focus();
    					return false;
    				}
    				else if((document.forms[0].demo_input.value=="")){
    					alert("密码不能为空！");
    					document.forms[0].demo_input.focus();
    					return false;
    				}
    				else{
    					return true;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form action="login" onsubmit="return checkpost()" method="post">
    			<table>
    				<tr>
    					<td colspan="2"><font size="6" color="gray">用户登录界面</font></td>
    				</tr>
    				<tr>
    					<td>用 户 名:</td>
    					<td>
    						<input type="text" id="username" name="u.username" list="text_list" />
    						<datalist id="text_list">
    							<option label="a" value="076" />
    							<option label="b" value="103" />
    							<option label="c" value="104" />
    							<option label="d" value="115" />
    							<option label="e" value="130" />
    						</datalist>
    					</td>
    				</tr>
    				<tr>
    					<td>密 <img id="demo_img" onclick="hideShowPsw()" src="image/invisible.png"/> 码:</td>
    					<td>
    						<input type="password" id="demo_input" name="u.userpass" />
    					</td>
    				</tr>
    				<tr><td colspan="2">
    				<input type="reset" value="重置"/> ||
    				<input type="submit" name="submit" value="登录"/>
    				</td></tr>
    			</table>
        	</form>
    	</body>
    </html>

**welcome.jsp**

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <font>登录成功</font>
      </body>
    </html>

**error.jsp**

<%@ page language="java"  pageEncoding="GB2312"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <font>登录失败</font>
      </body>
    </html>

这就是我项目的全部7个文件，希望能帮到你们，我们一起进步！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70]: /images/20220311/2c12b8a1414a4ebcbe43b76a320aa4f0.png
[20190308203354941.png]: /images/20220311/5a1a628118e14e4a930272fed338ff5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70 1]: /images/20220311/a31c0a5ae9da464e8739519f233d5c99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70 2]: /images/20220311/461fc17d38a348aa8f6c35ab3fd19fa6.png
[20190308210803805.png]: /images/20220311/1c9b47a946ea4135870410f225d4456e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzMDA5_size_16_color_FFFFFF_t_70 3]: /images/20220311/f1ff8b76eac74212a0bcc8fd5c275f60.png