应用系统定制开发用jsp实现简单登入注册界面功能（css美化）（软件idea）

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

第一步

首先我们来看看效果

登入界面（login）

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


注册界面（register）

注册成功(registersuccess)

第二步

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

在login文件写入

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html>  <head>    <title>登入界面</title>  </head>  <body>  <h1>登录界面</h1>  <form method="post" action="check.jsp">    <input type="text" name="user"><br>    <input type="password" name="pass"><br>    <button type="submit" value="login">登入</button>    <a href="register.jsp">注册</a>  </form>  </body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在register文件写入

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title></head><body><h2>注册界面</h2>    <form method="post" action="registersuccess.jsp">    请输入您的用户名：<input type="text" name="user" size="20"><br>    请输入您的密码：<input type="password" name="pass" size="20"><br>    <button type="submit" value="login">注册</button>    <button type="reset" value="reset">重置</button></form></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在registersuccess文件写入

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title></head><body><form method="post" action="check.jsp"><%    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);    }%><h2>恭喜您注册成功！</h2><br>您的用户名是：<%=user%> <br>您的密码是：<%=pass%></form><a href="login.jsp">返回登录界面</a></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

在loginsuccess文件写入

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title></head><body><h2 align="center">登录成功</h2></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在loginfail文件写入

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title></head><body><h2 align="center">登录失败</h2><h3 align="center"><a href="login.jsp" style="color:#FAAF46; font-size:10px">返回登录页面</a></h3></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在check文件写入

<%--  Created by IntelliJ IDEA.  User: 小熊  Date: 2022/3/24  Time: 15:53  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title></head><body><form method="post" action="">    <%        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");    %></form></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

那么我们来看看效果：


巨丑无比

第三步

我们加点css美化一下：

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>注册失败界面</title>    <style type="text/css">        .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;        }    </style></head><body><h2></h2><div class="center">    <p class="fon">注册失败界面</p>    <p class="fon1">对不起，您输入的有误，请返回注册界面</p>    <a href="register.jsp">返回注册界面</a></div></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>登入成功界面</title>    <style type="text/css">        .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;        }    </style></head><body><div class="center">    <p class="fon">登入成功界面</p>    <p class="fon1">恭喜您成功登入，欢迎使用</p></div></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>登入失败界面</title>    <style type="text/css">        .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;        }    </style></head><body><div class="center">    <p class="fon">登入失败界面</p>    <p class="fon1">对不起，您账号或密码有误，请返回登入界面</p>    <a href="login.jsp">返回登入界面</a></div></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>注册界面</title>    <style type="text/css">        .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;        }    </style></head><body><div class="center">    <p class="fon">注册界面</p>    <p>请输入您的用户名和密码进行注册</p>    <form method="post" action="registersuccess.jsp">        用户名：<input type="text" name="user"  name="user" style="width: 300px;height: 50px" placeholder="请输入用户名：" > <br>        密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="pass"  name="user" style="width: 300px;height: 50px" placeholder="请输入密码：" > <br>        <button type="submit" style="width:80px;height:40px; font-size: 20px" class="clear">注册</button>        <button type="reset" style="width:80px;height:40px; font-size: 20px" class="clear">重置</button>        <br>    </form></div></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>注册成功界面</title>    <style type="text/css">        .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;        }    </style></head><body><form method="post" action="check.jsp">    <%        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);        }    %>    <div class="center">        <p class="fon">注册成功界面</p>        <p class="fon1">恭喜您已经注册成功 !</p>        <p class="fon1">您的用户名是：<%=user%></p>        <p class="fon1">您的密码是：<%=pass%></p>        <a href="login.jsp">返回登入界面</a>    </div></form></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

check不变

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>检查界面</title></head><body><form method="post" action="">    <%        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");        }    %></form></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

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

<%--/*#                       _oo0oo_#                      o8888888o#                      88" . "88#                      (| -_- |)#                      0\  =  /0#                    ___/`---'\___#                  .' \\|     |// '.#                 / \\|||  :  |||// \#                / _||||| -:- |||||- \#               |   | \\\  -  /// |   |#               | \_|  ''\---/''  |_/ |#               \  .-\__  '-'  ___/-. /#             ___'. .'  /--.--\  `. .'___#          ."" '<  `.___\_<|>_/___.' >' "".#         | | :  `- \`.;`\ _ /`;.`/ - ` : | |#         \  \ `_.   \_ __\ /__ _/   .-` /  /#     =====`-.____`.___ \_____/___.-`___.-'=====#                       `=---='###     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~##               佛祖保佑         永无BUG*/--%>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

（求关注）写代码写的好累啊，今天八节课，写代码写博客写到22点了，洗澡去了。
后面会更新android，jquery，jsp，蓝桥杯等等。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发