登陆界面的简单制作：

首先说一下制作的大概流程

1.在SQLyog（图形化操作数据库的软件）中建立一个连接，然后建立表，并设立主键和其他属性。

2.将表建立好之后，进行数据库的链接。

3.写出基本的增删改查方法。

4.建立所需要的登录，注册界面。

下面是详细过程和代码：

1>

1.建立一个了名称为“student”，用户名为“root”，密码为“linlin”的链接。

2.创建一个名为“user”的数据库，并建立一个名称为“user”的表。

2>

1.创建一个名称为“Success”的“Web Servic Project”类型的工程。

2.建立一个名称为“model”的包，并在其中建立名称为“User”的类，声明属性及其get，set方法。代码如下：

package model;

public class User {
 private int tel;
 private String password;
 private int ide;
 
 
 
 public int getTel() {
  return tel;
 }
 public void setTel(int tel) {
  this.tel = tel;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public int getIde() {
  return ide;
 }
 public void setIde(int ide) {
  this.ide = ide;
 }

}

3.进行对数据库进行连接的方法的构建：建立一个名称为“db”的包，并在其中建立一个名称为“DBO”的类，在其中写入建立连接的方法。代码如下：

package db;

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

public class DBO {
 private final static  String driver = "com.mysql.jdbc.Driver";
 private final static String url =  "jdbc:mysql://localhost:3306/user";
//first
 static{
 try {
  Class.forName(driver);
 } catch (ClassNotFoundException e) {
 // TODO Auto-generated catch block
  e.printStackTrace();
 }
 }
//second
 public static Connection getConnection(){
  Connection conn = null;
 try {
  
   conn =  DriverManager.getConnection(url,"root","linlin");
 } catch (SQLException e) {
 // TODO Auto-generated catch block
  e.printStackTrace();
 }
 return conn;
 }
//third
 public static void close(ResultSet rs, Statement st, Connection conn)
 {
  try
  {
   if(rs != null)
   {
    rs.close();
   }
   if(st != null)
   {
    st.close();
   }
   if(conn != null)
   {
    conn.close();
   }
   
  }catch(Exception ex)
  {
   ex.printStackTrace();
  }
  
 }
 
 public static void close(Statement st, Connection conn)
 {
  close(null,st,conn);
 }
 

}

4.进行所需方法的接口的创建：建立一个名称为“jiekou”的包，并在其中建立一个名称为“UserManager”的接口，注意不是类，而是接口，所以不能选“class”，而应该选用“interface”，然后在创建一个实现“UserManager”接口的名称为“UserManagerImplement”的类，并在其中写入“UserManager”中方法的实现。代码如下：

“UserManager”：

package jiekou;

import java.util.List;

import model.User;

 

public interface UserManager {
 
     //添加注册
  public boolean add(User u);
  //检验用户名及密码是否正确
  public boolean checkout(int tel, String password);
  //删除用户
  public boolean del(int tel);
     //更新用户数据
  public boolean update(User u);
  //查找用户
  public User getUserByTel(int tel);
  //获得用户表
  public List<User> getUsers();

}

“UserManagerImplement”：

package jiekou;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import db.DBO;

import model.User;

public class UserManagerImplement implements UserManager {

 //添加注册
  public boolean add(User u) {
  // TODO Auto-generated method stub
  boolean flag = false;
  Connection conn = null;
  PreparedStatement pst = null;
  
  
  conn = DBO.getConnection();
  String sql = "insert into user(tel,password,ide) value(?,?,?)";
  
   try {
    pst = conn.prepareStatement(sql);
    pst.setInt(1,u.getTel());
    pst.setString(2,u.getPassword());
    pst.setInt(3, u.getIde());
    int rows = pst.executeUpdate();
    if(rows > 0){
     flag = true;
        }
   } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  
  
 
  return flag;
 }

  //检验用户名及密码是否正确
 public boolean checkout(int tel, String password){
  boolean flag = false;
  Connection conn = null;
  Statement st = null;
  ResultSet rs = null;
  conn =  DBO.getConnection();
  
   try {
    st =  (Statement) conn.createStatement();
    String sql = "select * from user where tel = " + tel;
    rs = (ResultSet) st.executeQuery(sql);
    while(rs.next()){
     if(rs.getString("password").equals(password)){
     
      flag = true;
     }
    }
   }
   catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
 
     finally{
             DBO.close(rs, st, conn);
     }
  
      return flag;
 }

 //删除用户
 public boolean del(int tel) {
  // TODO Auto-generated method stub
  boolean flag = false;
  Connection conn = null;
  PreparedStatement pst = null;
  conn = DBO.getConnection();
  String sql = "delete from user where tel =  ?";
  try {
   pst = conn.prepareStatement(sql);
   pst.setInt(1, tel);
   int rows = pst.executeUpdate();
   if(rows > 0){
    flag = true;
   }
  }
  catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  finally {
   DBO.close(pst, conn);
  }
  
  return flag;
 }
  //更新用户数据
 public boolean update(User u) {
  // TODO Auto-generated method stub
  boolean flag = false;
  Connection conn = null;
  PreparedStatement pst = null;
  conn = DBO.getConnection();
  String sql = "update user set  password = ?, ide = ? where tel = ?";
  try {
   pst = conn.prepareStatement(sql);
   pst.setString(1, u.getPassword());
   pst.setInt(2, u.getIde());
   pst.setInt(3, u.getTel());
   int rows = pst.executeUpdate();
   if (rows > 0){
    flag = true;
   }
  }
  catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  finally{
   
   DBO.close(pst, conn);
  }
  return flag;
 }
 //查找用户
 public User getUserByTel(int tel) {
  // TODO Auto-generated method stub
  User u = new User();
  Connection conn = null;
  Statement st = null;
  ResultSet rs = null;
  conn = DBO.getConnection();
  String sql = "select * from user where tel = " + tel;
  try {
   st = conn.createStatement();
   rs = st.executeQuery(sql);
   if(rs.next()){
    u.setTel(rs.getInt("tel"));
    u.setPassword(rs.getString("password"));
    u.setIde(rs.getInt("ide"));
      }
  }
   catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  finally {
   DBO.close(rs, st, conn);
  }
  return u;
 }
 //获得用户表
 public List<User> getUsers() {
  // TODO Auto-generated method stub
  List<User> list = new ArrayList<User>();//建好对象
  Connection conn = null;
  Statement st = null;
  ResultSet rs = null;
  conn = DBO.getConnection();
  String sql = "select * from user";
  try {
   st = conn.createStatement();
   rs = st.executeQuery(sql);
   while(rs.next()){
       User u = new User();
       u.setTel(rs.getInt("tel"));
       u.setPassword(rs.getString("password"));
       u.setIde(rs.getInt("ide"));
       list.add(u);
   }
  }
  catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  finally {
   DBO.close(rs, st, conn);
  }
  return list;
 }
 }

5.编写测试程序，对所写方法进行测试。分别对上述所写的

 //添加注册
  public boolean add(User u);
  //检验用户名及密码是否正确
  public boolean checkout(int tel, String password);
  //删除用户
  public boolean del(int tel);
     //更新用户数据
  public boolean update(User u);
  //查找用户
  public User getUserByTel(int tel);
  //获得用户表
  public List<User> getUsers();

这些方法进行测试。因为共有五个方法，为了看起来更加明了，让初学者更明白，所以创建了五个不同的类，分别对它们进行测试程序的编写。

       1>创建一个名称为“ceshi”的包，并在其中创建一个名称为“TestAdd”的类对 add(User u)方法进行测试代码如下：

package ceshi;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

import model.User;

import jiekou.UserManager;
import jiekou.UserManagerImplement;

import db.DBO;

public class TestAdd {

 public static void main(String[] args) {
  
  Connection conn = DBO.getConnection();
  if(conn != null){
   System.out.println("数据库连接成功");

   String sql = "insert into user(tel,password,ide) values(?,?,?)";
   PreparedStatement pst;
   try {
    pst = conn.prepareStatement(sql);
    pst.setInt(1, 666);
    pst.setString(2, "abd");
          pst.setInt(3,666);
    int rows = pst.executeUpdate();
    if(rows > 0){
     System.out.println("添加数据完成");
       }
    else{
     System.out.println("添加数据失败");
    }  
   }
      catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  
  }
  else{
   System.out.println("数据库连接失败");
  }
  
  UserManager um = new UserManagerImplement();
  for(int i = 40;i < 50;i++){
   User u = new User();
  
      u.setTel(i);
   u.setPassword("pwd" + i);
   u.setIde(i);
   
   boolean flag = um.add(u);
   System.out.println("添加数据完成");
   
  }
     }
 }

       2>创建一个名称为“TestDelete”的类对del(int tel)方法进行测试。代码如下：

package ceshi;

import jiekou.UserManager;
import jiekou.UserManagerImplement;

public class TestDelete {
 public static void main(String[] args) {
  // TODO Auto-generated method stub
  UserManager u = new UserManagerImplement();
  boolean flag = u.del(40);
  if(flag == true){
   System.out.println("删除成功");
  }
  else{
   System.out.println("删除失败");
  }
  

 }

 

         3>创建一个名称为“TestUpdate”的类对update(User u)方法进行测试。代码如下：

package ceshi;

import jiekou.UserManager;
import jiekou.UserManagerImplement;
import model.User;

public class TestUpdate {
 public static void main(String[] args) {
  // TODO Auto-generated method stub
  UserManager suc = new UserManagerImplement();
  User u = suc.getUserByTel(6);
  u.setPassword("23456");
  u.setIde(436);
  boolean flag = suc.update(u);
  if(flag){
   System.out.println("数据更新成功");
  }else{
   System.out.println("数据更新失败");
  }
  

 }

}

        4.>创建一个名称为“TestGetUser”的类对getUserByTel()方法进行测试。代码如下：

package ceshi;

import jiekou.UserManager;
import jiekou.UserManagerImplement;
import model.User;

public class TestGetUser {
 public static void main(String[] args) {
  // TODO Auto-generated method stub
  UserManager suc = new UserManagerImplement();
  User u = suc.getUserByTel(6);
  if(u.getTel() == 6){
   System.out.println("成功找到用户");
   System.out.println("TEL:" + u.getTel());
   System.out.println("密码:" + u.getPassword());
   System.out.println("验证码：" + u.getIde());
  }
  else{
   System.out.println("寻找用户失败");
  }

 }

}

        5.>创建一个名称为“TestGetList”的类对 getUsers()方法进行测试。代码如下：

package ceshi;

import java.util.List;

import jiekou.UserManager;
import jiekou.UserManagerImplement;
import model.User;

public class TestGetList {

 public static void main(String[] args) {
  // TODO Auto-generated method stub
  UserManager suc = new UserManagerImplement();
  List<User> list = suc.getUsers();
  for(User u : list){
  
   System.out.println("TEL:   " + u.getTel() + "   密码:" + u.getPassword() + "    验证码：" + u.getIde());
   
  }
  

 }

}

6.下面进行前台页面与后台数据库交流的程序编写。

所需要的共分为三种页面：1.登录页面；2.注册页面；3.所查看内容页面。

后台需要将前台注册页面的内容写入到数据库，所以需要建立Servlet。

编写一个名称为“kongzhi”的类，并在其中建立名为“add”的Servlet，将前台数据写入到后台数据库。代码如下：

package kongzhi;

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 model.User;

import jiekou.UserManager;
import jiekou.UserManagerImplement;

public class add extends HttpServlet {

 
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost( request, response);

  
 }

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("UTF-8");
  

  int tel = Integer.parseInt(request.getParameter("tel"));
  String password = request.getParameter("password");
  //int ide = Integer.parseInt(request.getParameter("ide"));
  
  //chuang jian dui xiang
  UserManager um = new UserManagerImplement();
  User u = new User();
  
  //jin ru shu ju kong zhi liu
  u.setTel(tel);
  u.setPassword(password);
//  u.setIde(ide);
  boolean flag;
  flag=um.add(u);
  if(flag==true){
   response.sendRedirect("denglu.jsp");
  }
  }
 }

“add”的功能就是就是将数据写到后台，并且从这个页面跳转到"denglu.jsp"登录页面。

而在登录页面还需要有这样的一个方法，它能够判断输入的用户名，密码以及验证码是否正确，如果正确，则页面跳转到所需要查看页面，否则给出提示信息。所以同样在“kongzhi”包下，建立一个名为“thesec”的Servlet。代码如下：

package kongzhi;

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 jiekou.UserManager;
import jiekou.UserManagerImplement;

public class thesec extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  doPost(request,response);
 }

 
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  //jie jue zhong wen lun ma
     request.setCharacterEncoding("utf-8");
     response.setCharacterEncoding("utf-8");
     //liang ge lie ming can shu de ding yi
     int tel = Integer.parseInt(request.getParameter("tel"));//yong hu ming
   
     String password = request.getParameter("password"); //mi ma
     String diannao = (String) request.getSession().getAttribute("diannao");//dian nao yan zheng ma
     String ren = request.getParameter("ren");//ren de yan zheng ma
     //can shu ding yi
     UserManager um=new UserManagerImplement();
      boolean flag;
      //jian ce shi fou zheng que ,bing taio zhuan dao xiang ying ye mian
      flag=um.checkout(tel,password);
   if(flag == true && diannao.equalsIgnoreCase(ren)){
    response.sendRedirect("index.jsp");
   }
   else{
     response.setContentType("text/html");
     PrintWriter out = response.getWriter();
     out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
     out.println("<HTML>");
     out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
     out.println("  <BODY>");
     out.println("<h1>");
     out.println("用户名或密码错误登录失败！！");
     out.println("<h1>");
     out.println("  </BODY>");
     out.println("</HTML>");
     out.flush();
     out.close();
    } 

 }

}

然后，登录界面还需要动态随机生成验证码，所以就建立一个名为“ImageServlet”的“Servlet”来生成验证码图片。代码如下：

package kongzhi;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.imageio.ImageIO;

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

import java.awt.Font;

public class ImageServlet extends HttpServlet {

 
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request, response);

 }

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  /**
   * BufferedImage(int width, int height, int imageType)
           构造一个类型为预定义图像类型之一的 BufferedImage。
           1、定义BufferedImage图片缓冲区对象
   */
  BufferedImage bi = new BufferedImage(70,40,BufferedImage.TYPE_INT_RGB);
  /**
   * getGraphics()
           此方法返回 Graphics2D，但此处是出于向后兼容性的考虑。
           2、得到画笔工具
   */
  Graphics g = bi.getGraphics();
  /**Color(int r, int g, int b)
     创建具有指定红色、绿色和蓝色值的不透明的 sRGB 颜色，这些值都在 (0 - 255) 的范围内。
          3、得到画笔工具，并设置画板的背景颜色及大小
         */
  Color c = new Color(1,1,1);
  g.setColor(c);
  /**fillRect(int x, int y, int width, int height)
     填充指定的矩形。*/
  g.fillRect(0, 0, 73, 20);
  /**
   * 设置验证码
   */
  char ch[] = "abcdefghigklmnopqrstuvwxyz0123456789".toCharArray();
  Random r = new Random();
  StringBuffer sb = new StringBuffer();
  for(int i = 0; i < 4;i++){
   int in = r.nextInt(ch.length);
   //设置字体大小
   Font f = new Font("宋体",Font.BOLD ,20); //把字体对象放到这new
   g.setFont(f);
   //为四个随机数设置随机的颜色
   g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
   /**
    * drawString(String str, int x, int y)
           使用此图形上下文的当前字体和颜色绘制由指定 string 给定的文本。
    */
   g.drawString(ch[in]+"",i*15+3,18);
   sb.append(ch[in]);
  }
  request.getSession().setAttribute("diannao", sb.toString());  //将生成的字符串保存到session中
  /**
   * write(RenderedImage im, String formatName, OutputStream output)
            使用支持给定格式的任意 ImageWriter 将一个图像写入 OutputStream。
   */
   ImageIO.write(bi, "JPG", response.getOutputStream());
 

 }

}
有了验证码图片，还需要有一个能够判断所输入验证码与给出验证码是否相同的方法。所以就建立一个名为“YanZhengMa”的Servlet。代码如下：

package kongzhi;

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;

public class YanZhengMa extends HttpServlet {

 
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost( request,response);

 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
         //luan ma
   request.setCharacterEncoding("utf-8");
   response.setCharacterEncoding("utf-8");
  
      //1、获取页面验证码
   String ren = request.getParameter("ren");
   //2、获取session保存的验证码
   String diannao = (String) request.getSession().getAttribute("diannao");
   PrintWriter out = response.getWriter();
   //3、比较验证码
   if(ren.equalsIgnoreCase(diannao)){
    out.print("正确");
   }else{
    out.print("错误");
   }
 }

}；

7.后台做完了，下面就开始前台jsp页面的设计了。前台页面共分为三种：1.登录页面；2.注册页面；3.所要访问的页面。在工程“Sueecss”中，“WebRoot”下的“WEB-INF”下分别建立“denglu.jsp”，“zhuce.jsp”，“index.jsp”分别为登录界面，注册界面以及所需访问的界面。

登录界面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'denglu.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <script type="text/javascript">
 function reLoadCode(){
  var t = new Date().getTime();
  //设置唯一的时间，防止IE缓存。
  document.getElementById("imageCode").src="ImageServlet?t="+t;
 }
 </script>
 <style type="text/css">
    <!--
 .body{padding-left:630px;padding-top: 100px;}
     -->
    </style> 

  </head>
  <body>
  
    <form action="thesec" method="post" >
     <center><h1>登录界面</h1></center>
     <div class="body">
        <table>
     <tr><td>用户名：</td> <td><input type="text"     name="tel">     </td><td>&nbsp;</td></tr>
     
     <tr><td>好密码：</td> <td><input type="password" name="password"></td><td>&nbsp;</td></tr>
     
     <tr><td>验证码：</td> <td><input type="text"     name="ren"/></td>
     <td> <img src="ImageServlet" id="imageCode" alt="验证码" title="验证码">&nbsp;</td>
     <td>  <a href="javaScript:reLoadCode()">看不清</a></td>
     <td> </td></tr>
     
   
     
        <tr>
        <td></td>
        <td><input name="submit"  type="submit" class="button"  style="width:150px; height:30px " value="登录" /></td>
        </tr>
       
        <tr>
        <td></td>
        <td><font  size="+1"  color="#000099">
        <a href="zhuce.jsp">注册新用户</a>
        </td></font>
        </tr>
       
     
     
         
          </table>
          </div>
     </form>
   </body>
</html>

登陆界面效果图：

 

注册界面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'zhuce.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
<style type="text/css">
<!--
 .body{padding-left: 630px;padding-top: 100px;}
-->
</style> 

  </head>
 
  <body>
  <form action = "add" method = "post">
  
   <center><h1>新用户注册</h1></center>
    <div class="body">
   <table>
   <tr><td>用户名:</td><td><input name="tel" type="text" value=""/></td></tr>
    <tr><td>密码:</td><td><input name="password" type="password" value=""/></td></tr>
   
    <tr><td></td><td><input type="submit" style="width:160px; height:30px "value="注册" /></td></tr>
   
    
    </table>
  
     
    </div> <br>
    </form>
  </body>
</html>

注册界面效果图如下：

 

所需访问的界面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  </head>
 
  <body>
<h1>恭喜成功</h1>
  </body>
</html>

这就是制作登录界面的所有过程了，虽然制作有点粗糙，但是过程很详细，希望对有些朋友有用，也是记录自我成长的一步。