思路：创建登入界面（login），再创建登入成功与登入失败界面（loginsuccess与loginfail），再创建注册成功界面（registersuccess）与注册界面（register）以及总控制文件（check）通过form标签的action将他们连接起来。

号外号外，我最近发现了一个非常棒的人工智能学习网站，它的内容通俗易懂，风趣幽默，让人印象深刻。我想和大家分享这个网站，点击链接即可访问。

第一步

首先我们来看看效果

登入界面（login）

登入成功与登入失败（loginsuccess与loginfail）

注册界面（register）

注册成功(registersuccess)

第二步

创建项目，再添加框架支持，把文件全部创建到通一个目录里面，新建image文件夹，放入我们的背景图片（可爱的小姐姐），如图：

在login文件写入

  
    
  
  
  
登录界面
  
    

    

    登入
    注册
  
  

在register文件写入

    


注册界面
    
    请输入您的用户名：

    请输入您的密码：

    注册
    重置

在registersuccess文件写入

    




<%
    String user = "a";
    String pass = "b";
    if(request.getParameter("user")!=null && request.getParameter("pass") != null)
    {
        user = request.getParameter("user");
        session.setAttribute("user",user);
        pass = request.getParameter("pass");
        session.setAttribute("pass",pass);
    }

%>
恭喜您注册成功！


您的用户名是： 

您的密码是：

返回登录界面

在loginsuccess文件写入

    


登录成功

在loginfail文件写入

    


登录失败
返回登录页面

在check文件写入

    



    <%
        String user=(String)session.getAttribute("user");
        String pass=(String)session.getAttribute("pass");
        String name=request.getParameter("user");
        session.setAttribute("name", name);
        String password1=request.getParameter("pass");
        session.setAttribute("password", password1);
        if(user.equals(name)&&password1.equals(pass))
        { response.sendRedirect("loginsuccess.jsp");}
        else
            response.sendRedirect("loginfail.jsp");
    %>

那么我们来看看效果：

巨丑无比

第三步

我们加点css美化一下：

在login文件加入（字体居中效果，背景图片，按钮的透明度，输入框的透明度等）

    
    
        .center{
            text-align:center;
            margin-top: 50px;
        }
        .fon{
            font-size: 40px;
        }
        .fon1{
            font-size: 20px;
        }
        body{
            background: url("images/wallhaven-wqrm7r.jpg");
            background-size: 100% 100%;
        }
        input {
            background-color: transparent;
            outline: none;
            color: black;
        }

    






    
注册失败界面
    
对不起，您输入的有误，请返回注册界面
    返回注册界面

在loginsuccess文件加入（字体居中效果，背景图片）

    
    
        .center{
            text-align:center;
            margin-top: 50px;
        }
        .fon{
            font-size: 40px;
        }
        body{
            background: url("images/wallhaven-wqrm7r.jpg");
            background-size: 100% 100%;
        }
        input {
            background-color: transparent;
            outline: none;
            color: black;
        }

    



    
登入成功界面
    
恭喜您成功登入，欢迎使用

在loginfail文件加入（字体居中效果，背景图片）

    
    
        .center{
            text-align:center;
            margin-top: 50px;
        }
        .fon{
            font-size: 40px;
        }
        body{
            background: url("images/wallhaven-wqrm7r.jpg");
            background-size: 100% 100%;
        }
        input {
            background-color: transparent;
            outline: none;
            color: black;
        }
    



    
登入失败界面
    
对不起，您账号或密码有误，请返回登入界面
    返回登入界面

在register文件加入（字体居中效果，背景图片，按钮的透明度，输入框的透明度等）

    
    
        .center{
            text-align:center;
            margin-top: 50px;
        }
        .fon{
            font-size: 40px;
        }
        body{
            background: url("images/wallhaven-wqrm7r.jpg");
            background-size: 100% 100%;
        }
        input {
            background-color: transparent;
            outline: none;
            color: black;
        }
        .clear{
            opacity:0.3;
        }
    




    
注册界面
    
请输入您的用户名和密码进行注册
    
        用户名： 

        密码： 

        注册
        重置
        

    

在registersuccess文件加入（字体居中效果，背景图片）

    
    
        .center{
            text-align:center;
            margin-top: 50px;
        }
        .fon{
            font-size: 40px;
        }
        .fon1{
            font-size: 20px;
        }
        body{
            background: url("images/wallhaven-wqrm7r.jpg");
            background-size: 100% 100%;
        }
        input {
            background-color: transparent;
            outline: none;
            color: black;
        }
    



    <%
        String user = null;
        String pass = null;
        if(request.getParameter("user")!=null && request.getParameter("pass") != null)
        {
            user = request.getParameter("user");
            session.setAttribute("user",user);
            pass = request.getParameter("pass");
            session.setAttribute("pass",pass);
        }
    %>

    
        
注册成功界面
        
恭喜您已经注册成功 !
        
您的用户名是：
        
您的密码是：
        返回登入界面
    

check不变

    





    <%
        String user = (String) session.getAttribute("user");
        String pass = (String) session.getAttribute("pass");
        String user1 = request.getParameter("user");
        session.setAttribute("user1",user1);
        String pass1 = request.getParameter("pass");
        session.setAttribute("pass1",pass1);

        if (user.equals(user1) && pass.equals(pass1)) {
            response.sendRedirect("loginsuccess.jsp");
        }
        else {
            response.sendRedirect("loginfail.jsp");
        }
    %>

（编辑好配置）点击运行效果就出来了。

<%--
/*
#                       _oo0oo_
#                      o8888888o
#                      88" . "88
#                      (| -_- |)
#                      0\  =  /0
#                    ___/`---'\___
#                  .' \\|     |// '.
#                 / \\|||  :  |||// \
#                / _||||| -:- |||||- \
#               |   | \\\  -  /// |   |
#               | \_|  ''\---/''  |_/ |
#               \  .-\__  '-'  ___/-. /
#             ___'. .'  /--.--\  `. .'___
#          ."" '<  `.___\__/___.' >' "".
#         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
#         \  \ `_.   \_ __\ /__ _/   .-` /  /
#     =====`-.____`.___ \_____/___.-`___.-'=====
#                       `=---='
#
#
#     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#
#               佛祖保佑         永无BUG
*/
--%>

（求关注）写代码写的好累啊，今天八节课，写代码写博客写到22点了，洗澡去了。

后面会更新android，jquery，jsp，蓝桥杯等等。