一、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;
      }


      
}

(4)创建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)

打赏

发表评论

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