一、login.jsp登陆界面实现

解压bootmetro-master.zip,然后将\bootmetro-master\src\下的assets文件夹拷贝到工程里。

bootmetro下载地址:https://github.com/aozora/bootmetro,使用说明:http://www.guoxiaoming.com/bootmetro/

创建head.jsp文件,用于将一些药固定引用的css、js文件放到这里,作为公共调用文件。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

 <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="assets/css/datepicker.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="assets/css/site.css">

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="assets/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="assets/js/modernizr-2.6.2.min.js"></script>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<title>Insert title here</title>
</head>

</html>

创建login.jsp文件:

 <%@ include file="head.jsp"%>
 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
    
    
<body style="text-align:center;margin-bottom:100px;">
		 <div class="navbar" >
	     <div class="navbar-inner">
	       <a class="brand" href="#" style="margin-left:200px;">网盘</a>
	   
	     </div>
	   </div>
      	<div  style="text-align:left;margin:0px auto;margin-top:50px; width:1200px;height:500px;">
	      	<div style="float:left;width:800px; height:100%;background:#009900"></div>
 			<div style="float:left;width:400px; height:100%; background:#00CC33">
 			<fieldset>
 				<form  action="LoginServlet" method="post" class="form-horizontal" style="margin-top:150px;margin-left:100px;">
			 
			             用户  <input type="text" id="inputEmail" name="username" >
		 			<br><br>
			            密码  <input type="password" id="inputPassword"  name="password">
	 				<br><br>
		           <button type="submit" class="btn">登陆</button>    
		            <button type="submit" class="btn">注册</button>
			       
			   </form>
   			</fieldset>
 			</div>
      
      	</div>
      	 
</body>
 

启动tomcat服务器测试效果,想要更多绚丽的小姑,大家可以自己去实现。(这里还无法实现登陆)

二、连接数据库

(1)将mysql-connector-java-commercial-5.1.25.jar复制到/WEB-INF/lib目录下。

(2)创建user表和添加数据

打开navicat for mysql 软件,连接hadoop数据库并创建user表,然后向表里添加3个数据。

三、创建操作数据库的model文件

(1)ConnDB.java

package com.model;

import java.sql.Connection;
import java.sql.DriverManager;

public class ConnDB {
	private Connection ct = null;
	public Connection getConn(){
		
	try {
	//加载驱动
	Class.forName("com.mysql.jdbc.Driver");
			
	//得到连接
	ct = DriverManager.getConnection("jdbc:mysql://localhost:3306/hadoop?user=root&password=");
	} catch (Exception e) {
	// TODO Auto-generated catch block
	e.printStackTrace();
	}
		
		
	return ct;
	}
}

(2)UserBean.java

package com.model;

public class UserBean {
	String id;
	String username;
	String email;
	String password;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}

}

(3)UserBeanCl.java

package com.model;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
 

public class UserBeanCl {
	private Statement sm = null;
	private Connection ct = null;
	private ResultSet rs = null;
	
	
	public void close(){
		try {
			
			
		if(sm != null){	
			sm.close();
			sm = null;
		}
		
		if(ct != null){
			ct.close();
			ct = null;
		}
		
		
		if(rs != null){
			rs.close();
			rs = null;
		}
		
		
		}
		catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	
	
	//检查登录用户是否合法
		public boolean checkUser(String user, String password){
			boolean b = false;		
			try {
				
				//获得连接
				ct = new ConnDB().getConn();
				//创建statement
				sm = ct.createStatement();
				
				rs = sm.executeQuery("select * from user where username=\""+user+"\"");
				
				
				if(rs.next()){
					//说明用户存在
					String pwd = rs.getString(3);
					if(password.equals(pwd)){
						//说明密码正确
						b = true;
					}else{
						b = false;
					}
					
				}else{
					b = false;
				}	
			} catch (SQLException e) {
				e.printStackTrace();
			}finally{
				this.close();
			}
			
			return b;
		}


		
}

(3)创建LoginServlet文件处理登陆的用户

package com.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.hadoop.fs.FileStatus;
import org.apache.hadoop.mapred.JobConf;



import com.model.*;

/**
 * Servlet implementation class ListServlet
 */
public class LoginServlet extends HttpServlet {
 

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		String username = request.getParameter("username");
		String password = request.getParameter("password");

		UserBeanCl ubc = new UserBeanCl();
		if(ubc.checkUser(username, password)){
			//用户合法,跳转到界面
			HttpSession session = request.getSession(); 
			session.setAttribute("username", username);
			
			JobConf conf = HdfsDAO.config();
	        HdfsDAO hdfs = new HdfsDAO(conf);
			FileStatus[] list = hdfs.ls("/"+username);
			request.setAttribute("list",list);
			request.getRequestDispatcher("index.jsp").forward(request, response);
		}else{
			//用户不合法,调回登录界面,并提示错误信息
			request.getRequestDispatcher("login.jsp").forward(request, response);
		}

		
	 
	}

}

(4)重启tomcat服务器测试,这次就可以实现用户登陆页面跳转了(从login.jsp跳转到index.jsp)

打赏

发表评论

电子邮件地址不会被公开。