注意
:下面所有代码有关文件路径的改为自己的路径
如:
表单提交中的action要对应servlet的名称
按钮跳转改为自己跳转的路径
文件路径改为自己的文件路径
一.开发环境
- JDK
- NetBeans8.02
二.功能
1 启动首页为登录页
2 如果用户还没有用户名和密码,则请他/她先进行注册,注册信息写入一个文本文件中,注册成功后直接回到登录页
3 登录成功后则提示XXX登录成功
4 登录不成功则提示究竟是用户名不存在还是密码错误
5 其它你想到的情况,请多参看别的软件的登录页
三.新建项目
- 1.新建项目->JavaWeb->Web应用程序->下一步
- 2填写项目名称->选择项目位置(我这里选择默认)->下一步
- 3选择默认->完成(因为我们不需要其他插件,所以直接完成,不需要下一步)
四.创建登录和注册页面(login.html和register.html)
五.改写login.html和register.html内容
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
/* 让页面所有元素的padding和margin都设置为0 */
*{margin:0;padding:0;box-sizing:border-box;}
/*字体设置为微软雅黑 */
body{font-family: "微软雅黑", sans-serif;}
/* 高度设置为28px,就是页面最上方像屋檐一样的黑色图 */
.headtop{height:28px;}
/* 整个登录框的css,并使用绝对定位居中 */
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
/* 前面分析过的h1标签的css,text-shadow设置阴影使文字更好看,letter-spacing设置字符间距 */
.login h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
/* 两个输入框的css,border属性设置边框线粗细以及颜色,border-radius设置边框的圆角角度 */
input{
padding:10px;
width:100%;
color:white;
margin-bottom:10px;
background-color:#555555;
border: 1px solid black;
border-radius:4px;
letter-spacing:2px;
}
/* 登录按钮的css,cursor:pointer当鼠标移到按钮上面时变成小手形状 */
form button{
width:100%;
padding:10px;
background-color:#CDC673;
border:1px solid black;
border-radius:4px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
<h1>登录</h1>
<form action="Login" method="post">
<input type="text" name="username" placeholder="用户名" required="required">
<input type="password" name="password" placeholder="密 码" required="required">
<button type="submit">登录</button>
<button onclick="window.location.href='./register.html'">前往注册</button>
</form>
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
/* 让页面所有元素的padding和margin都设置为0 */
*{margin:0;padding:0;box-sizing:border-box;}
/* 设置背景图,字体设置为微软雅黑 */
body{background:url(bg.jpg);font-family: "微软雅黑", sans-serif;}
/* 引用图片高度设置为28px,就是页面最上方像屋檐一样的黑色图 */
.headtop{background:url(topbg.jpg);height:28px;}
/* 整个登录框的css,并使用绝对定位居中 */
.register {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
/* 前面分析过的h1标签的css,text-shadow设置阴影使文字更好看,letter-spacing设置字符间距 */
.register h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
/* 两个输入框的css,border属性设置边框线粗细以及颜色,border-radius设置边框的圆角角度 */
input{
padding:10px;
width:100%;
color:white;
margin-bottom:10px;
background-color:#555555;
border: 1px solid black;
border-radius:4px;
letter-spacing:2px;
}
/* 登录按钮的css,cursor:pointer当鼠标移到按钮上面时变成小手形状 */
form button{
width:100%;
padding:10px;
background-color:#CDC673;
border:1px solid black;
border-radius:4px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="register">
<h1>注册</h1>
<form action="Register" method="post">
<input type="text" name="username" placeholder="用户名" required="required">
<input type="password" name="password" placeholder="密 码" required="required">
<input type="password" name="qrpassword" placeholder="确认密码" required="required">
<button type="submit">注册</button>
<button onclick="window.location.href='./login.html'">返回登录</button>
</form>
</div>
</body>
</html>
六.为这两个文件添加Servlet来响应
- 创建 Servlet
Login
- 创建 Servlet
Register
记得填写包名
将信息添加到部署描述符(web.html),这一步暂时不需要也用不着打钩,要不后面改配置很麻烦
七.改写两个Servlet里面的内容
Login.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import javax.servlet.annotation.WebServlet;
/**
*
* @author Administrator
*/
@WebServlet(name = "Login", urlPatterns = {"/Login"})
public class Login extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try {
boolean flag = false;
// 使用字符缓冲输入流读取user.txt文件中的内容
BufferedReader br = null;
br = new BufferedReader(new FileReader("C:\\Users\\Administrator\\Documents\\NetBeansProjects\\201741404234LiTianci\\src\\java\\com\\servlet\\user.txt"));
// 一次读取一行
String line = null;
PrintWriter pw=response.getWriter();
while ((line = br.readLine()) != null) {
// 字符串的分割功能
String[] datas = line.split(":");
// 判断
if (datas[0].equals(request.getParameter("username")))
{ if(datas[1].equals(request.getParameter("password")))
{
flag = true;
break;
}
else
{
pw.println("<center><button οnclick=\"window.location.href='./login.html'\">重新登录</button></center>");
pw.println("<script language='javascript'>alert('密码错误,请重新输入')</script>");
break;
}
}
}
if(flag==true)
{
pw.println("<h1 align='center'>"+request.getParameter("username")+"您已经成功登录系统"+"<h1>");
}
if(line==null)
{
pw.println("<center><button οnclick=\"window.location.href='./login.html'\">重新登录</button></center>");
pw.println("<center><button οnclick=\"window.location.href='./register.html'\">前往注册</button></center>");
pw.println("<script language='javascript'>alert('用户不存在,请重新登录或者前往注册')</script>");
}
}
finally {
}
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
Register.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.servlet;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Administrator
*/
@WebServlet(name = "Register", urlPatterns = {"/Register"})
public class Register extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
boolean flag = true;
//中文乱码
response.setContentType("text/html;charset=utf-8");
PrintWriter pw=response.getWriter();
BufferedReader br = null;
br = new BufferedReader(new FileReader("C:\\Users\\Administrator\\Documents\\NetBeansProjects\\201741404234LiTianci\\src\\java\\com\\servlet\\user.txt"));
// 一次读取一行
String line = null;
while ((line = br.readLine()) != null) {
// 字符串的分割功能
String[] datas = line.split(":");
// 判断
if (datas[0].equals(request.getParameter("username")))
{
flag=false;
pw.println("<script language='javascript'>alert('用户名已经存在,请重新输入')</script>");
pw.println("<center><button οnclick=\"window.location.href='./register.html'\">重新注册</button></center>");
break;
}}
if(flag)
{
FileWriter f=new FileWriter("C:\\Users\\Administrator\\Documents\\NetBeansProjects\\201741404234LiTianci\\src\\java\\com\\servlet\\user.txt",true);
BufferedWriter bw=new BufferedWriter(f);
if(request.getParameter("password").equals(request.getParameter("qrpassword")))
{
String info=request.getParameter("username")+":"+request.getParameter("password");
//在文件中写入数据
bw.write(info);
bw.newLine();
bw.flush();
//关闭文件流
bw.close();
pw.println("<center><button οnclick=\"window.location.href='./login.html'\">注册成功,返回登录</button></center>");
}
else
{
pw.println("两次密码不一致,请重新注册");
pw.println("<center><button οnclick=\"window.location.href='./register.html'\">返回注册</button></center>");
}
out.println(
"<BODY BGCOLOR=\"#FDF5E6\">\n" +
"<H1 ALIGN=CENTER>" + "用户信息 " + "</H1>\n" +
"<UL>\n" +
" <LI><B>username</B>: "
+ request.getParameter("username") + "\n" +
" <LI><B>password</B>: "
+ request.getParameter("password") + "\n" +
" <LI><B>repassword</B>:"
+ request.getParameter("qrpassword") + "\n" +
"</UL>\n" +
"</BODY></HTML>");
}
}
finally {
out.close();
}
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
八.大功告成,去部署和运行文件吧
看看效果如何
项目结构
登录界面
注册页面
注册用户名已经存在
两次密码不一致
注册成功页面
登录成功页面
密码错误
用户不存在