软件系统开发定制用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

目录 

相关文章

jsp软件系统开发定制实现简单登入注册界面功能
JDBC 连接 MySQL

一、写在前面

       哈喽~大家好，软件系统开发定制这篇呢我们来看看用 JSP 连接 MySQL 软件系统开发定制登入注册项目实践，软件系统开发定制这里就可能有人问了，唉？追桑~软件系统开发定制前些天不是写了 jsp 软件系统开发定制登入注册的项目吗？软件系统开发定制怎么这次还在写呢？哈哈，您别担心，这次呢，软件系统开发定制肯定和上次不同，我们先来看看效果吧！

二、效果图

数据库界面

感觉是不是不一样了，哈哈哈，那么接下来我们来看看是怎么实现的。

三、实现思路

首先我们这里很明显，有四个总页面分别是 login(登入界面)、logout(注销界面)、amend(修改界面)、register(注册界面)，这四个总页面分别对应着检查页面(check)、成功页面(success)、失败页面(fail)。建立之好后，通过 from 的 action 来进行跳转，我们先来看看 MySQL (数据库)表名叫 login。

我们这里数据库共三列，第一列叫 name （用户名）、pass（密码）、time（注册时间），name 与 pass 都是 int（整型） 类型的，time 是 varchar （可变长类型），如图。

四、实现代码

1、login总界面

首先我们先有个页面，有基本的用户名框，密码框，两按钮，一个注册，一个注销，通过 from进行跳转，代码如下

  1.     <form method="post" action="check.jsp">
  2.         <input type="text" name="user" style="width: 300px;height: 50px" placeholder="请输入用户名："
  3.         > <br>
  4.         <input type="password" name="pass" style="width: 300px;height: 50px" placeholder="请输入密码：" > <br>
  5.         <button type="submit" style="width:80px;height:40px; font-size: 20px" class="clear">登录</button>
  6.         <button type="reset" style="width:80px;height:40px; font-size: 20px" class="clear">重置</button>
  7.         <br>
  8.         没有账号?<a href="register.jsp">点击注册</a><br>
  9.         不想用了?<a href="logout.jsp">点击注销</a>
  10.     </form>

用 check 连接数据库(如何连接数据库，前面文章已经给出了，有兴趣的小伙伴可以看看前面写的文章，也放在前面了) 同样的道理，还是那五个步骤（这里就不过多的解释，可以看看上面表格给出的文章），先来看看代码。

  1.         String user = request.getParameter("user"); // getParameter  与 getAttribute  区别
  2.         String pass = request.getParameter("pass");
  3.         // String getParameter(String name):根据参数名称获取参数值
  4.         // getAttribute()获取的是服务器设置的数据。getAttribute() 方法返回指定属性名的属性值。
  5.  
  6.         try {
  7.             Class.forName("com.mysql.cj.jdbc.Driver");
  8.             String url = "jdbc:mysql://localhost:3306/db1?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC";
  9.             String user1 = "root";
  10.             String pass1 = "123456";
  11.             Connection connection = DriverManager.getConnection(url,user1,pass1);
  12.             String sql = "select * from login where name=? and pass=?";
  13.  
  14.             PreparedStatement ps = connection.prepareStatement(sql);
  15.             ps.setString(1,user);
  16.             ps.setString(2,pass);
  17.             ResultSet re = ps.executeQuery();
  18.  
  19.             if (re.next()){
  20.                 response.sendRedirect("loginsuccess.jsp");
  21.                 session.setAttribute("user",user);
  22.             }else {
  23.                 response.sendRedirect("loginfail.jsp");
  24.             }
  25.  
  26.         } catch (ClassNotFoundException e) {
  27.             e.printStackTrace();
  28.         } catch (SQLException e) {
  29.             e.printStackTrace();
  30.         }

这里 response. 跳转了两个页面一个 loginsuccess 和 loginfail 的两个界面，下面我们来看看，这两个文件（其实很简单）

loginsuccess 代码

  1.             <div class="form">
  2.                 <h2> <h22>登录成功</h22><br>
  3.                 </h2>
  4.                 <fon>恭喜您成功登入 <br> &nbsp;&nbsp; 欢迎使用 <br>
  5.                     <a class="a1" href="login.jsp">返回登入界面</a>
  6.                 </fon>
  7.             </div>

loginfail 代码：

  1.                 <h2> <h22>登录失败</h22><br>
  2.                 </h2>
  3.                 <fon>宝~是不是账号或密码记错惹？ <br>
  4.                     <a class="a1" href="login.jsp">返回登入界面</a><br>
  5.                     <p1><a href="amend.jsp">点击修改密码</a></p1>
  6.                 </fon>

这里我们点击运行看看效果

这里我们用两个升级 大装备（html）(css) 来美化一下我们的页面，这里我们页面美化的，用的是这位大佬的页面（博主名为键盘奏鸣曲），大家可以来看看，

HTML 代码

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <link rel="stylesheet" href="css.css">
  6.     <title>123</title>
  7.  
  8.  
  9. </head>
  10. <body>
  11.  
  12. <section>
  13.     <div class="color"></div>
  14.     <div class="color"></div>
  15.     <div class="color"></div>
  16.     <div class="box">
  17.         <div class="circle" style="--x:0"></div>
  18.         <div class="circle" style="--x:1"></div>
  19.         <div class="circle" style="--x:2"></div>
  20.         <div class="circle" style="--x:3"></div>
  21.         <div class="circle" style="--x:4"></div>
  22.         <div class="container">
  23.             <div class="form">
  24.                 <h2>登录</h2>
  25.                 <form method="post" action="check.jsp">
  26.                     <div class="inputBox">
  27.                         <input type="text" placeholder="姓名" name="user">
  28.  
  29.                     </div>
  30.                     <div class="inputBox">
  31.                         <input type="password" placeholder="密码" name="pass">
  32.  
  33.                     </div>
  34.                     <div class="inputBox">
  35.                         <input type="submit" value="登录">
  36.  
  37.                     </div>
  38.                     <p class="forget">不想用了?<a href="logout.jsp">
  39.                         点击这里
  40.                     </a></p>
  41.                     <p class="forget">没有账户?<a href="register.jsp">
  42.                         注册
  43.                     </a></p>
  44.                 </form>
  45.             </div>
  46.         </div>
  47.     </div>
  48. </section>
  49. </body>
  50.  
  51. </html>

 CSS 代码

  1. /*.center{*/
  2. /*    text-align:center;*/
  3. /*    margin-top: 50px;*/
  4. /*}*/
  5. .fon{
  6.     font-size: 40px;
  7. }
  8. /*body{*/
  9. /*    background: url("images/image-2.jpg") no-repeat 0 0;*/
  10. /*    background-size: 100% 100%;*/
  11. /*    text-decoration:none;*/
  12. /*}*/
  13.  
  14. /*input {*/
  15. /*    background-color: transparent;*/
  16. /*    outline: none;*/
  17. /*    color: black;*/
  18. /*}*/
  19. /*.clear{*/
  20. /*    opacity:0.3;*/
  21. /*}*/
  22.  
  23. * {
  24.     margin: 0;
  25.     padding: 0;
  26.     box-sizing: border-box;
  27. }
  28.  
  29. /* 使用flex布局，让内容垂直和水平居中 */
  30.  
  31. section {
  32.     /* 相对定位 */
  33.     position: relative;
  34.     overflow: hidden;
  35.     display: flex;
  36.     justify-content: center;
  37.     align-items: center;
  38.     min-height: 100vh;
  39.     /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
  40.     background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
  41. }
  42.  
  43. /* 背景颜色 */
  44.  
  45. section .color {
  46.     /* 绝对定位 */
  47.     position: absolute;
  48.     /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
  49.     filter: blur(200px);
  50. }
  51.  
  52. /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
  53.  
  54. section .color:nth-child(1) {
  55.     top: -350px;
  56.     width: 600px;
  57.     height: 600px;
  58.     background: #ff359b;
  59. }
  60.  
  61. section .color:nth-child(2) {
  62.     bottom: -150px;
  63.     left: 100px;
  64.     width: 500px;
  65.     height: 500px;
  66.     background: #fffd87;
  67. }
  68.  
  69. section .color:nth-child(3) {
  70.     bottom: 50px;
  71.     right: 100px;
  72.     width: 500px;
  73.     height: 500px;
  74.     background: #00d2ff;
  75. }
  76.  
  77. .box {
  78.     position: relative;
  79. }
  80.  
  81. /* 背景圆样式 */
  82.  
  83. .box .circle {
  84.     position: absolute;
  85.     background: rgba(255, 255, 255, 0.1);
  86.     /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
  87.     backdrop-filter: blur(5px);
  88.     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  89.     border: 1px solid rgba(255, 255, 255, 0.5);
  90.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  91.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  92.     border-radius: 50%;
  93.     /* 使用filter(滤镜) 属性，改变颜色。
  94.     hue-rotate(deg)  给图像应用色相旋转
  95.     calc() 函数用于动态计算长度值
  96.     var() 函数调用自定义的CSS属性值x*/
  97.     filter: hue-rotate(calc(var(--x) * 70deg));
  98.     /* 调用动画animate，需要10s完成动画，
  99.     linear表示动画从头到尾的速度是相同的，
  100.     infinite指定动画应该循环播放无限次*/
  101.     animation: animate 10s linear infinite;
  102.     /* 动态计算动画延迟几秒播放 */
  103.     animation-delay: calc(var(--x) * -1s);
  104. }
  105.  
  106. /* 背景圆动画 */
  107.  
  108. @keyframes animate {
  109.     0%, 100% {
  110.         transform: translateY(-50px);
  111.     }
  112.     50% {
  113.         transform: translateY(50px);
  114.     }
  115. }
  116.  
  117. .box .circle:nth-child(1) {
  118.     top: -50px;
  119.     right: -60px;
  120.     width: 100px;
  121.     height: 100px;
  122. }
  123.  
  124. .box .circle:nth-child(2) {
  125.     top: 150px;
  126.     left: -100px;
  127.     width: 120px;
  128.     height: 120px;
  129.     z-index: 2;
  130. }
  131.  
  132. .box .circle:nth-child(3) {
  133.     bottom: 50px;
  134.     right: -60px;
  135.     width: 80px;
  136.     height: 80px;
  137.     z-index: 2;
  138. }
  139.  
  140. .box .circle:nth-child(4) {
  141.     bottom: -80px;
  142.     left: 100px;
  143.     width: 60px;
  144.     height: 60px;
  145. }
  146.  
  147. .box .circle:nth-child(5) {
  148.     top: -80px;
  149.     left: 140px;
  150.     width: 60px;
  151.     height: 60px;
  152. }
  153.  
  154. /* 登录框样式 */
  155.  
  156. .container {
  157.     position: relative;
  158.     width: 400px;
  159.     min-height: 400px;
  160.     background: rgba(255, 255, 255, 0.1);
  161.     display: flex;
  162.     justify-content: center;
  163.     align-items: center;
  164.     backdrop-filter: blur(5px);
  165.     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  166.     border: 1px solid rgba(255, 255, 255, 0.5);
  167.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  168.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  169. }
  170.  
  171. .form {
  172.     position: relative;
  173.     width: 100%;
  174.     height: 100%;
  175.     padding: 50px;
  176. }
  177.  
  178. /* 登录标题样式 */
  179.  
  180. .form h2 {
  181.     text-align: center;
  182.     position: relative;
  183.     color: #fff;
  184.     font-size: 40px;
  185.     font-weight: 600;
  186.     letter-spacing: 5px;
  187.     margin-bottom: 30px;
  188.     cursor: pointer;
  189. }
  190.  
  191. .form h2 h22 {
  192.     top: -40px;
  193.     text-align: center;
  194.     position: relative;
  195.     color: #fff;
  196.     font-size: 40px;
  197.     font-weight: 600;
  198.     letter-spacing: 5px;
  199.     margin-bottom: 30px;
  200.     cursor: pointer;
  201. }
  202.  
  203. .form .a1, .form p1 {
  204.     bottom: -90px;
  205.     left: 50px;
  206.     position: relative;
  207.     color: #fff;
  208.     font-size: 18px;
  209.     font-weight: 600;
  210.     letter-spacing: 5px;
  211.     /*margin-bottom: 10px;*/
  212.     cursor: pointer;
  213.     text-decoration: none;
  214. }
  215.  
  216. .form p1 a{
  217.  
  218.     position: relative;
  219.     color: #fff;
  220.     font-size: 18px;
  221.     font-weight: 600;
  222.     letter-spacing: 5px;
  223.     /*margin-bottom: 10px;*/
  224.     cursor: pointer;
  225.     text-decoration: none;
  226. }
  227.  
  228. .form fon {
  229.     top: -30px;
  230.     left: 30px;
  231.     position: relative;
  232.     color: #fff;
  233.     font-size: 28px;
  234.     font-weight: 600;
  235.     letter-spacing: 5px;
  236.     margin-bottom: 30px;
  237.     cursor: pointer;
  238. }
  239. /* 登录标题的下划线样式 */
  240.  
  241. .form h2::before {
  242.     content: "";
  243.     position: absolute;
  244.     left: 0;
  245.     bottom: -10px;
  246.     width: 0px;
  247.     height: 3px;
  248.     background: #fff;
  249.     transition: 0.5s;
  250. }
  251.  
  252. .form h2 h22::before {
  253.     content: "";
  254.     position: absolute;
  255.     /*left: 0;*/
  256.     /*bottom: -10px;*/
  257.     /*width: 0px;*/
  258.     /*height: 3px;*/
  259.     /*background: #fff;*/
  260.     /*transition: 0.5s;*/
  261. }
  262.  
  263. .form h2:hover:before {
  264.     width: 53px;
  265. }
  266.  
  267. .form .inputBox {
  268.     width: 100%;
  269.     margin-top: 20px;
  270. }
  271.  
  272. /* 输入框样式 */
  273.  
  274. .form .inputBox input {
  275.     width: 100%;
  276.     padding: 10px 20px;
  277.     background: rgba(255, 255, 255, 0.2);
  278.     outline: none;
  279.     border: none;
  280.     border-radius: 30px;
  281.     border: 1px solid rgba(255, 255, 255, 0.5);
  282.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  283.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  284.     font-size: 16px;
  285.     letter-spacing: 1px;
  286.     color: #fff;
  287.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  288. }
  289.  
  290. .form .inputBox input::placeholder {
  291.     color: #fff;
  292. }
  293.  
  294. /* 登录按钮样式 */
  295.  
  296. .form .inputBox input[type="submit"],.form .inputBox input[type="reset"]  {
  297.     background: #fff;
  298.     color: #666;
  299.     max-width: 100%;
  300.     margin-bottom: 20px;
  301.     font-weight: 600;
  302.     cursor: pointer;
  303. }
  304.  
  305. .forget {
  306.     margin-top: 6px;
  307.     color: #fff;
  308.     letter-spacing: 1px;
  309. }
  310.  
  311. .forget a {
  312.     color: #fff;
  313.     font-weight: 600;
  314.     text-decoration: none;
  315. }

同样的道理我们来升级一下 loginsuccess 与 loginfail 。

loginsuccess 代码

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>登入成功界面</title>
  5.     <link rel="stylesheet" href="css.css" type="text/css">
  6. </head>
  7. <body>
  8. <%--<div class="center">--%>
  9. <%--    <p class="fon">登入成功界面</p>--%>
  10. <%--    <p class="fon1">恭喜您成功登入，欢迎使用</p>--%>
  11. <%--    <a href="login.jsp">点击退出,返回登入界面</a>--%>
  12. <%--</div>--%>
  13.  
  14. <section>
  15.     <div class="color"></div>
  16.     <div class="color"></div>
  17.     <div class="color"></div>
  18.     <div class="box">
  19.         <div class="circle" style="--x:0"></div>
  20.         <div class="circle" style="--x:1"></div>
  21.         <div class="circle" style="--x:2"></div>
  22.         <div class="circle" style="--x:3"></div>
  23.         <div class="circle" style="--x:4"></div>
  24.         <div class="container">
  25.             <div class="form">
  26.                 <h2> <h22>登录成功</h22><br>
  27.                 </h2>
  28.                 <fon>恭喜您成功登入 <br> &nbsp;&nbsp; 欢迎使用 <br>
  29.                     <a class="a1" href="login.jsp">返回登入界面</a>
  30.                 </fon>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </section>
  35.  
  36. </body>
  37. </html>

loginfail 代码

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>登入失败界面</title>
  5.     <link rel="stylesheet" href="css.css" type="text/css">
  6. </head>
  7. <body>
  8. <%--<div class="center">--%>
  9. <%--    <p class="fon">登入失败界面</p>--%>
  10. <%--    <p class="fon1">对不起，您账号或密码有误，请返回登入界面</p>--%>
  11. <%--    <a href="login.jsp">返回登入界面</a><br>--%>
  12. <%--    忘记密码？<a href="amend.jsp">点击修改密码</a>--%>
  13. <%--</div>--%>
  14.  
  15. <section>
  16.     <div class="color"></div>
  17.     <div class="color"></div>
  18.     <div class="color"></div>
  19.     <div class="box">
  20.         <div class="circle" style="--x:0"></div>
  21.         <div class="circle" style="--x:1"></div>
  22.         <div class="circle" style="--x:2"></div>
  23.         <div class="circle" style="--x:3"></div>
  24.         <div class="circle" style="--x:4"></div>
  25.         <div class="container">
  26.             <div class="form">
  27.                 <h2> <h22>登录失败</h22><br>
  28.                 </h2>
  29.                 <fon>宝~是不是账号或密码记错惹？ <br>
  30.                     <a class="a1" href="login.jsp">返回登入界面</a><br>
  31.                     <p1><a href="amend.jsp">点击修改密码</a></p1>
  32.                 </fon>
  33.                 
  34.             </div>
  35.         </div>
  36.     </div>
  37. </section>
  38.  
  39. </body>
  40. </html>

点击运行，我们来看看效果

 那么这里我们是完成了，login总界面的效果，同样的道理，代码都差不多，我们直接 cv 大法，这里就给出重点要改的代码。

2、registercheck总代码

里面要重点改的代码，一个是 sql 语句插入，另一个是。

String sql = "insert into login(name, pass,time)VALUES(?,?,?)";
  1. SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 时间转换，要不然就会是国际时间格式
  2.             String data = formatter.format(new Date());// 记录的是当前的时间
  3.             ps.setString(3,data);

3、logoutcheck总代码

里面要重点改的代码，是 sql 语句删除。

String sql = "DELETE FROM login WHERE name =? and pass =?";

4、amendcheck总代码

里面要重点改的代码，是 sql 语句更新。

String sql = "update login set pass='"+pass+"'";

然后分别是各个总页面的 success 与 fail 页面来实现好，这里有一个小细节，我们在作抛出异常，这里可以 out.println 来打印出信息来测试，可以输出在网页上，这样可以方便知道那里有异常。

  1. catch (ClassNotFoundException e) {
  2.             e.printStackTrace();
  3.             out.println("1");
  4.             // response.sendRedirect("registerfail.jsp");
  5.         } catch (SQLException e) {
  6.             e.printStackTrace();
  7.             out.println("2");
  8.             // response.sendRedirect("registerfail.jsp");
  9.         }

 好了，点击运行，完成总效果。

（求关注）持续更新中…… 

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