网页数据库登录基本步骤

关注

原创最新推荐文章于 2026-03-11 00:12:03 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

思考逻辑：

1.布置登录网页,其中设置表单提交到servlet类，方式设置为post较好
2.servlet类获取请求体内容(参数内容)
3.设置数据库校验类 接收参数内容并进行校验
	1.使用JdbcTemplate简化开发细节，需要设置JavaBean实体类
	2.Druid数据库连接池工具类提供获取DataSource,Connection方法给JDBCTemplate类
	3.Druid使用静态代码块完成配置内容，并生成DataSource类对象
4.检验结果为真假，分别使用服务器内部的请求转发到其他servlet类
5.其他servlet类各自设置response并写入信息

基本步骤：

first:

1.将bootstrap简化开发,(css,fonts,js文件夹应放入WebContent[html也存于此]下)，
	再使用基本框架进行表单的布置，同时也可以使用css进行辅助样式布局，
	并将表单的action引入到Tomcat服务器上的servlet，方法设置为post
	进而完成web登录界面login.html的布置

login.html

(注意： 
 action="http://localhost:8080/WebServlet/RequestDemo1"
	:RequestDemo1为WebServlet工程中的servlet类
		且注解为@WebServlet("/RequestDemo1")
）			


<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <style type="text/css">
    .place{
    	font-size: 30px;
    	border: 2px solid black;
    	padding-top: 100px;
    	padding-bottom: 100px;
    }
    .form-group{
    	align-content: center;
    	margin-top: 40px;
    }
    .login{font-size: 25px;}
    </style>
    


	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <form action="http://localhost:8080/WebServlet/RequestDemo1" class = "form-horizontal place"  method = "post">
		<div class="form-group">
			<label for = "user"  class = "col-sm-5 control-label" >登录:</label>
			<div class = "col-sm-5">
			<input id = "user" name = "username" placeholder="输入用户名"></input>
			</div>
	 	</div>	
	  <div class="form-group">
			<label for = "pwd" class = "col-sm-5 control-label">密码:</label> 
			<div class = "col-sm-5">
				<input id = "pwd" type = "password" name = "password" placeholder="输入密码"></input>
			</div>
	  </div>
	  
   		<div class = "col-sm-5 form-group"> </div>
   		<button type="submit" class="btn btn-danger col-sm-3 login" >登录</button>
	</form>
	
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

second:

2.完成数据库表和表数据的创建和插入，并设置JavaBean实体类User
	成员变量要与数据库表中的数据能一一对应得上

mysql_代码:

CREATE TABLE  IF NOT EXISTS userinfo (
	username VARCHAR(20) PRIMARY KEY,
	PASSWORD VARCHAR(20) NOT NULL,
	loggingTime TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO UserInfo (username,PASSWORD) VALUES ("李白",123456);
INSERT INTO UserInfo (username,PASSWORD) VALUES ("杜甫",123456);
SELECT * FROM UserInfo;

JavaBean实体类要求：

1.类使用public修饰	
2.拥有无参构造器
3.成员变量使用private修饰	
4.对于成员方法都有Getter,Setter方法
JavaBean的属性：
	去掉set,get再将剩余部分首字母变大写即为JavaBean的属性

User

public class User{
	private String username;
	private String password;
	private Timestamp loggingTime;
	public User(String username, String password,Timestamp loggingTime) {
		this.username = username;
		this.password = password;
		this.loggingTime = loggingTime;
	}
	public User() {
		super();
	}
	public Timestamp getLoggingTime() {
		return loggingTime;
	}
	public void setLoggingTime(Timestamp loggingTime) {
		this.loggingTime = loggingTime;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	@Override
	public String toString() {
		return "User [username=" + username + ", password=" + password + ", loggingTime=" + loggingTime + "]";
	}
}

third:

3.在当前工程中的WebContent/WEB-INF/lib下导入一系列jar包，用于辅助JdbcTemplate,
	Druid.properties(Druid配置文件)放入src下
	完成Druid工具类的静态配置 并完成 获取的DataSource的方法，
	用于提供给JdbcTemplate对象

jar

	commons-beanutils-1.8.0.jar
	commons-logging-1.2.jar
	druid-1.0.13.jar
	mysql-connector-java-8.0.16.jar
	spring-beans-5.0.0.RELEASE.jar
	spring-core-5.0.0.RELEASE.jar
	spring-jdbc-5.0.0.RELEASE.jar
	spring-tx-5.0.0.RELEASE.jar

Druid.properties

	driverClassName = com.mysql.cj.jdbc.Driver
	url = jdbc:mysql://localhost:3306/db1?useSSL=false&serverTimezone=UTC
	username = root
	password = 123456
	initialSize = 5
	maxActive = 10
	maxWait = 3000

Druid工具类

(仅用于辅助JdbcTemplate,不必写close释放资源等方法,
					但设置静态配置以及要获取DataSource方法)

public class SQLDruidHelp {
	private static DataSource dSource ;
	static {
		try {
			ClassLoader cLoader = SQLDruidHelp.class.getClassLoader();
			InputStream resourceAsStream = cLoader.getResourceAsStream("druid.properties");
			Properties properties = new Properties();
			properties.load(resourceAsStream);
			dSource =  DruidDataSourceFactory.createDataSource(properties);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public static DataSource getDataSource() {
		return dSource;
	}
}

fourth:

4.通过JdbcTemplate类，实现方法通过User对象参数完成对数据库的查询正确与否

JDBCLogCheck

（注意:JdbcTemplate对象的创建传递了第三步Druid工具类的getDataSource()）

public class JDBCLogCheck {
	public static boolean checkInfo(User user) {
		JdbcTemplate jdbcTemplate = new JdbcTemplate(SQLDruidHelp.getDataSource());
		String sql = "select * from userInfo where username = ? && password = ?";
		List<User> lists = jdbcTemplate.query(sql, new BeanPropertyRowMapper<User>(User.class),user.getUsername(),user.getPassword());
		if(lists.size() > 0 ) {
			return true;
		}
		return false;
	}
}

fifth:

5.实现login.html上表单提交的servlet,获取页面提交的username,password	
	JavaBean实体类:  User user = new User();  
	Map :			request.getParameterMap();
使用：BeanUtils.populate(user, map);
		内部自动执行各个参数的setter()
最后使用第四步完成的JDBCLogCheck检验类校验User类对象，
	如果为存在，则要将Username数据共享出来，因此要设置到request.setAttribute上，
				并将请求转发到"/successdemo"servlet类
	如果为没有，则请求转发到"/faildemo"servlet类

RequestDemo1

@WebServlet("/RequestDemo1")
public class RequestDemo1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		User user = new User();
		Map<String, String[]> map = request.getParameterMap();
			try {
				BeanUtils.populate(user, map);
			} catch (IllegalAccessException | InvocationTargetException e) {
				
				e.printStackTrace();
			}
		
		boolean flag = JDBCLogCheck.checkInfo(user);
		if(flag) {
			request.setAttribute("username",user.getUsername());
			request.getRequestDispatcher("/successdemo").forward(request, response);
			
		}else {
			request.getRequestDispatcher("/faildemo").forward(request, response);
		}
	}

}

sixth:

实现第五步的"/successdemo" 和 "/faildemo" servlet类，
在doGet方法下完成进入doPost方法，因为请求转发后是相当于到另一个servlet类的doGet方法
随后在doPost方法下设置响应Reponse对象响应头的文本类型，并简单输出信息
	（其中sucessdemo还要获取request上的共享数据username，用于reponse输出）

faildemo

@WebServlet("/faildemo")
public class faildemo extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write("密码和用户名存在无法匹配情况");
	}
}

successdemo

@WebServlet("/successdemo")
public class successdemo extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write("欢迎会员："+request.getAttribute("username")+"  你已登陆成功！");
	}
}

收录于