页面内容：

登录注册（记住密码）https://mp.csdn.net/postedit

搜索关键字点击显示到搜索框，搜索跳转页面

发布二货跳转到添加界面

首页图片内容、分页的获取与显示： https://mp.csdn.net/postedit/86216843

点击向上的手跳到顶部

login.jsp

step1:login.jsp 显示登录的界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title>登录</title>
</head>
<body onload="createCode()">
<style type="text/css">
    .logo{
        position: absolute;
        z-index: 9999;
        top: 70px;
        left: 136px;
        display: inline-block;
        width: 253px;
        height: 42px;
        cursor:pointer;
    }
    #header{
        position: relative;
        width: 100%;
        height: 323px;
        background-color: #11cd6e;
    }
    body{
        min-width: 1024px;
        min-height: 100%;
        background-color: #f2f2f2;
        margin: 0;
    }
    #main{
        width: 800px;
        margin: -168px auto 0 auto;
        padding: 50px 47px 60px 57px;
        background-color: #fff;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,.09);
        box-shadow: 0 0 5px rgba(0,0,0,.09);
        display: table;
        position: relative;
        z-index: 1;
    }
    #registe{
        width:500px;
        border-right: 1px solid;
        float: left;
    }
    #sign-in{
        padding-top: 100px;
  		padding-left: 80px;
        float: left;
    }
    #sign-in a{
        color: #11cd6e;
        font-size: 16px;
        line-height: 50px;
    }
}
</style>
<div id="header">
    <img src="img/logo.png" class="logo" onClick="createCode()"></img>
</div>
<div id="main">
    <div id="registe">
        <form action="LoginServlet" id="frame_login" method="POST" class="form-horizontal">
            <div class="form-group">
                <label for="inputUsername" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                    <i class="fa   fa-user-o"></i><input value="${cookie.uname.value }" type="text" class="form-control" name="uname" id="inputUsername" >
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword"  class="col-sm-2 control-label">密码</label>
                <div class="col-sm-8">
                    <i class="fa   fa-key"></i><input type="password" value="${cookie.upass.value }" class="form-control" name="upass" id="inputPassword" >
                </div>
            </div>
             <div class="form-group">
                <div class="Codebutton">
                    <label class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-8">
                        <i class="fa fa-refresh fa-spin"></i><input  type="text"   id="validCode" class="form-control" style="width:200px;" />
                        <input  type="text" onClick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px;cursor:pointer" name="login" /><br />
                        <label style="font-size: 10px"> 看不清？点击图片更换</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <div class="checkbox">
                        <label>
                            <input name="rememberme" ${cookie.uname.value==null? '':'checked="checked"' } type="checkbox" value="1"> Remember me
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">提交</button>
                </div>
            </div>
        </form>
    </div>
    <div id="sign-in">
        <p>没有账户：</p>
        <a href="registe.jsp">立即注册</a>
    </div>
</div>
<script type="text/javascript">
/*验证码*/
var code;
function createCode(){
    code="";
    var codeLength=6;//验证码长度
        var checkCode=document.getElementById("checkCode");

    var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J',
        'K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的
    for(var i=0;i<codeLength;i++)
    {
        var charIndex = Math.floor(Math.random()*36);
        code +=selectChar[charIndex];
    }
    if(checkCode){
        checkCode.className="code";
        checkCode.value=code;
        checkCode.blur();
    }
}
function validate(){
        var inputCode = document.getElementById("validCode").value;

    if(inputCode.length <=0)
    {
        alert("请输入验证码！");
    }
    else if(inputCode.toUpperCase() != code )
    {
        alert("验证码输入错误！");
        createCode();//刷新验证码
    }
    else
    {
        alert("^-^ OK");
    }
}
</script>
</body>
</html>

中间那一块 name 定义是一样的同样跳转到相同的servlet层判断用户名是否正确以及保存密码与否

loginServlet

package cn.trade.servlet;

import java.io.IOException;
import java.io.PipedWriter;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.trade.daoimp.UserDaoImp;
import cn.trade.model.User;

/**
 * Servlet implementation class loginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String uname = request.getParameter("uname");
		String upass = request.getParameter("upass");
		String rememberme = request.getParameter("rememberme");
		User user = new User(uname, upass);
		
		
		int uid = new UserDaoImp().login(user);
		
		if(uid!=0){
			user = new User(uid, uname, upass);

			Cookie uCookie = new Cookie("uname", uname);
			Cookie pCookie = new Cookie("upass", upass);
			
			if("1".equals(rememberme)){
				uCookie.setMaxAge(60*60);
				pCookie.setMaxAge(60*60);
			}else{
				uCookie.setMaxAge(0);
				pCookie.setMaxAge(0);
			}
			
			response.addCookie(uCookie);
			response.addCookie(pCookie);
			
			request.getSession().setAttribute("ss_user", user);
			response.sendRedirect("firststep.jsp");
		}else{
			request.setAttribute("msg", "用户名或密码错误");
			request.getRequestDispatcher("firststep.jsp").forward(request, response);;
		}
	}

}

在remenber me 前边定义一个<input type="checkbox" name="rememberme" value="1">

若勾中：后台getparamater时会获取1 反之null 作为判断条件

cookie、session、登录注册（记住密码）

login.jsp

loginServlet

猜你喜欢