JavaEE 实现 登录+注册（采用注解方式链接数据库）

尚未崩坏  金牌会员 | 2024-11-24 10:07:08 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 859|帖子 859|积分 2577

（Spring MVC的Controller练习）
工具：Tomcat 10.0.23，MySQL，JDK18
一、运行效果展示

点击运行Tomcat起首进入index.jsp页面

若已有账号点击登录即可进行登录，这里先点击“获取ROY6账号”去注册，进入register.jsp页面

注册乐成后跳转到success.jsp页面，此时数据库中user表会增加一条用户信息

点击“前去探索ROY6商城”此时，此时为login.jsp页面

输入已经注册过的账号，登录，进入welcome.jsp页面

这里我简单的写了两个小功能，就不进行展示了，本文重要展示登录注册功能。
下面进入详细操纵步骤，请逐步食用代码！
二、项目代码

先查看项目结构图：
赤色框出部分为本次实行用到代码
 

1、建立数据库，建表

起首创建数据库spring_db，然后建立所需要的用户表user

  1. CREATE DATABASE IF NOT EXISTS spring_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
  3. USE spring_db;
  5. CREATE TABLE user (
  6.                       id INT AUTO_INCREMENT PRIMARY KEY,
  7.                       username VARCHAR(50) NOT NULL UNIQUE,
  8.                       password VARCHAR(100) NOT NULL
  9. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
复制代码
 2、创建第一个index.jsp页面

页面重要包罗注册以及登陆，很简单，直接放代码
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>欢迎</title>
  8.     <style>
  9.         /* 页面背景 */
  10.         body {
  11.             font-family: 'Arial', sans-serif;
  12.             margin: 0;
  13.             padding: 0;
  14.             background: url('https://wx3.sinaimg.cn/mw690/007doFNOgy1hf8lzl0rs2j323u16q7wh.jpg') no-repeat center center fixed;
  15.             background-size: cover;
  16.             display: flex;
  17.             justify-content: center;
  18.             align-items: center;
  19.             height: 100vh;
  20.             overflow: hidden;
  21.             animation: backgroundAnimation 10s infinite alternate;
  22.         }
  24.         /* 页面内容容器 */
  25.         .container {
  26.             text-align: center;
  27.             background-color: white;
  28.             padding: 40px;
  29.             border-radius: 12px;
  30.             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  31.             background-color: rgba(255, 255, 255, 0.95); /* 背景半透明 */
  32.             width: 100%;
  33.             max-width: 500px;
  34.         }
  36.         /* 标题样式 */
  37.         h3 {
  38.             font-family: 'Comic Sans MS', cursive, sans-serif; /* 卡通风格字体 */
  39.             font-size: 28px;
  40.             color: #00BFFF; /* 天青色 */
  41.             margin-bottom: 20px;
  42.         }
  44.         /* 链接列表样式 */
  45.         ul {
  46.             list-style-type: none;
  47.             padding: 0;
  48.         }
  50.         li {
  51.             margin: 15px 0;
  52.         }
  54.         /* 链接按钮样式 */
  55.         a {
  56.             text-decoration: none;
  57.             padding: 12px 25px;
  58.             background-color: #607d8b; /* 莫兰迪蓝绿色 */
  59.             color: white;
  60.             font-size: 18px;
  61.             border-radius: 10px;
  62.             display: inline-block;
  63.             transition: background-color 0.3s ease, transform 0.2s ease;
  64.         }
  66.         a:hover {
  67.             background-color: #78909c;
  68.             transform: translateY(-2px);
  69.         }
  71.         a:active {
  72.             background-color: #546e7a;
  73.             transform: translateY(0);
  74.         }
  76.         /* 响应式设计 */
  77.         @media (max-width: 480px) {
  78.             .container {
  79.                 padding: 20px;
  80.                 width: 90%;
  81.             }
  83.             h3 {
  84.                 font-size: 24px;
  85.             }
  87.             a {
  88.                 font-size: 16px;
  89.                 padding: 10px 20px;
  90.             }
  91.         }
  92.     </style>
  93. </head>
  94. <body>
  96. <div class="container">
  97.     <h3>${username} 欢迎你的探索！</h3>
  98.     <ul>
  99.         <li><a href="index/login">登录</a></li>
  100.         <li><a href="index/register">获取ROY6账号</a></li>
  101.     </ul>
  102. </div>
  104. </body>
  105. </html>
复制代码
 3、注册页面 register.jsp页面

由index.jsp页面点击注册按钮跳转而来，重要实现注册功能。这里连接数据库，判断用户的合法性。注册乐成跳转success.jsp页面，失败跳转到error.jsp页面，已经注册过则继续停留在此页面，提示“注册失败，用户名已存在“。
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>注册</title>
  8.     <style>
  9.         body {
  10.             font-family: 'Arial', sans-serif;
  11.             margin: 0;
  12.             padding: 0;
  13.             background: url('https://wx4.sinaimg.cn/mw690/007btvx7ly1h7zumoa5l8j30u01mtgru.jpg') no-repeat center center fixed;
  14.             background-size: cover;
  15.             display: flex;
  16.             justify-content: center;
  17.             align-items: center;
  18.             height: 100vh;
  19.             overflow: hidden;
  20.             animation: backgroundAnimation 10s infinite alternate;
  21.         }
  23.         .container {
  24.             width: 100%;
  25.             max-width: 400px;
  26.             background-color: #ffffff;
  27.             padding: 30px;
  28.             border-radius: 12px;
  29.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  30.             animation: fadeIn 0.8s ease-in-out;
  31.         }
  33.         @keyframes fadeIn {
  34.             from {
  35.                 opacity: 0;
  36.                 transform: translateY(-20px);
  37.             }
  38.             to {
  39.                 opacity: 1;
  40.                 transform: translateY(0);
  41.             }
  42.         }
  44.         h2 {
  45.             font-size: 28px;
  46.             color: #7a7975; /* 莫兰迪灰色 */
  47.             margin-bottom: 20px;
  48.             text-align: center;
  49.             font-family: 'Comic Sans MS', cursive;
  50.         }
  52.         .form-group {
  53.             margin-bottom: 20px;
  54.         }
  56.         .form-group label {
  57.             font-size: 16px;
  58.             color: #8A9A8E; /* 深莫兰迪灰褐色 */
  59.             margin-bottom: 5px;
  60.             display: block;
  61.             text-align: left;
  62.         }
  64.         .form-group input {
  65.             width: 100%;
  66.             padding: 12px;
  67.             font-size: 16px;
  68.             border: 1px solid #ddd;
  69.             border-radius: 8px;
  70.             box-sizing: border-box;
  71.             outline: none;
  72.             transition: all 0.3s ease;
  73.         }
  75.         .form-group input:focus {
  76.             border-color: #a6a398; /* 莫兰迪绿灰色 */
  77.             box-shadow: 0 0 10px rgba(166, 163, 152, 0.3);
  78.         }
  80.         .form-group p {
  81.             color: #c94e50; /* 柔和的莫兰迪红色 */
  82.             font-size: 14px;
  83.         }
  85.         .button-container {
  86.             display: flex;
  87.             gap: 10px;
  88.             justify-content: space-between;
  89.         }
  91.         .button-container button {
  92.             width: 48%;
  93.             padding: 12px;
  94.             font-size: 16px;
  95.             border-radius: 8px;
  96.             border: none;
  97.             cursor: pointer;
  98.             transition: all 0.3s ease;
  99.         }
  101.         .reset-button {
  102.             background-color: #d7d3cc; /* 莫兰迪浅灰色 */
  103.             color: #4f4d49; /* 深莫兰迪灰 */
  104.         }
  106.         .reset-button:hover {
  107.             background-color: #c8c4bb; /* 更深的莫兰迪灰 */
  108.         }
  110.         .submit-button {
  111.             background-color: #A8B3A5; /* 莫兰迪绿灰色 */
  112.             color: #ffffff;
  113.         }
  115.         .submit-button:hover {
  116.             background-color: #8f8c80; /* 更深的莫兰迪绿灰色 */
  117.         }
  119.         @media (max-width: 480px) {
  120.             .container {
  121.                 padding: 20px;
  122.             }
  124.             h2 {
  125.                 font-size: 24px;
  126.             }
  128.             .form-group label {
  129.                 font-size: 14px;
  130.             }
  132.             .form-group input {
  133.                 font-size: 14px;
  134.                 padding: 10px;
  135.             }
  137.             .button-container button {
  138.                 font-size: 14px;
  139.                 padding: 10px;
  140.             }
  141.         }
  142.     </style>
  143. </head>
  144. <body>
  145. <div class="container">
  146.     <h2>注册</h2>
  147.     <%
  148.         String error = (String) request.getAttribute("error");
  149.         if (error != null) {
  150.     %>
  151.     <div class="form-group">
  152.         <p><%= error %></p>
  153.     </div>
  154.     <%
  155.         }
  156.     %>
  157.     <form action="${pageContext.request.contextPath}/doRegister" method="post">
  158.         <div class="form-group">
  159.             <label for="registerUsername">用户名</label>
  160.             <input type="text" id="registerUsername" name="username" required>
  161.         </div>
  162.         <div class="form-group">
  163.             <label for="password">密码</label>
  164.             <input type="password" id="password" name="password" required>
  165.         </div>
  166.         <div class="form-group">
  167.             <label for="confirmPassword">确认密码</label>
  168.             <input type="password" id="confirmPassword" name="confirmPassword" required>
  169.         </div>
  170.         <div class="button-container">
  171.             <button type="reset" class="reset-button">重置</button>
  172.             <button type="submit" class="submit-button">注册</button>
  173.         </div>
  174.     </form>
  175. </div>
  176. </body>
  177. </html>
复制代码
 4、注册乐成success.jsp页面

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>注册成功</title>
  8.     <style>
  9.         body {
  10.             font-family: 'Arial', sans-serif;
  11.             margin: 0;
  12.             padding: 0;
  13.             background: url('https://wx2.sinaimg.cn/mw690/006Gi90nly1h6p18g6sipj31h40u0791.jpg') no-repeat center center fixed;
  14.             background-size: cover;
  15.             display: flex;
  16.             justify-content: center;
  17.             align-items: center;
  18.             height: 100vh;
  19.             overflow: hidden;
  20.             animation: backgroundAnimation 10s infinite alternate;
  21.         }
  23.         .container {
  24.             background-color: white;
  25.             padding: 40px;
  26.             background-color: rgba(255, 255, 255, 0.95); /* 背景半透明 */
  27.             border-radius: 16px;
  28.             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  29.             width: 100%;
  30.             max-width: 420px;
  31.             text-align: center;
  32.         }
  34.         h1 {
  35.             font-family: 'Comic Sans MS', cursive, sans-serif; /* 可爱的卡通字体 */
  36.             font-size: 36px;
  37.             color: #c58e72;
  38.             margin-bottom: 20px;
  39.             font-weight: 600;
  40.         }
  42.         p {
  43.             font-size: 18px;
  44.             color: #333;
  45.             margin-bottom: 30px;
  46.         }
  48.         a {
  49.             display: inline-block;
  50.             font-size: 18px;
  51.             color: white;
  52.             background-color: #607d8b; /* Morandi blue */
  53.             padding: 12px 24px;
  54.             text-decoration: none;
  55.             border-radius: 10px;
  56.             transition: background-color 0.3s ease, transform 0.2s ease;
  57.         }
  59.         a:hover {
  60.             background-color: #78909c;
  61.             transform: translateY(-2px);
  62.         }
  64.         a:active {
  65.             background-color: #546e7a;
  66.             transform: translateY(1px);
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  72. <div class="container">
  73.     <h1>注册成功</h1>
  74.     <p>欢迎，您已成为ROY6新成员！</p>
  75.     <a href="${pageContext.request.contextPath}/login">前往探索ROY6商城</a>
  76. </div>
  78. </body>
  79. </html>
复制代码
5、注册失败error.jsp页面

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>注册失败</title>
  8.     <style>
  9.         /* 设置背景色 */
  10.         body {
  11.             font-family: Arial, sans-serif;
  12.             background-color: #f8d7da; /* 轻微红色背景，表示失败 */
  13.             margin: 0;
  14.             height: 100vh;
  15.             display: flex;
  16.             justify-content: center;
  17.             align-items: center;
  18.         }
  20.         .container {
  21.             text-align: center;
  22.             background-color: white;
  23.             padding: 30px 50px;
  24.             border-radius: 10px;
  25.             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  26.             width: 100%;
  27.             max-width: 400px;
  28.         }
  30.         h1 {
  31.             font-size: 24px;
  32.             color: #721c24; /* 错误提示的红色 */
  33.             margin-bottom: 20px;
  34.         }
  36.         p {
  37.             font-size: 18px;
  38.             color: #721c24;
  39.             margin-bottom: 30px;
  40.         }
  42.         a {
  43.             text-decoration: none;
  44.             padding: 12px 20px;
  45.             background-color: #4CAF50;
  46.             color: white;
  47.             font-size: 16px;
  48.             font-weight: bold;
  49.             border-radius: 6px;
  50.             display: inline-block;
  51.             transition: background-color 0.3s ease, transform 0.2s ease;
  52.         }
  54.         a:hover {
  55.             background-color: #45a049;
  56.             transform: translateY(-2px);
  57.         }
  59.         a:active {
  60.             transform: translateY(0);
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  66. <div class="container">
  67.     <h1>注册失败</h1>
  68.     <p>抱歉，您的注册未能成功。请重试</p>
  69.     <a href="${pageContext.request.contextPath}/register">返回注册页面</a>
  70. </div>
  71. </body>
  72. </html>
复制代码
6、登录login.jsp页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>登录</title>
  8.     <style>
  10.         /* 页面基础样式 */
  11.         body {
  12.             font-family: 'Arial', sans-serif;
  13.             margin: 0;
  14.             padding: 0;
  15.             background: url('https://wx4.sinaimg.cn/mw690/007btvx7ly1h7zumt0ty2j31hc0u0wkx.jpg') no-repeat center center fixed;
  16.             background-size: cover;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             height: 100vh;
  21.             overflow: hidden;
  22.             animation: backgroundAnimation 10s infinite alternate;
  23.         }
  25.         .container {
  26.             width: 100%;
  27.             max-width: 400px;
  28.             padding: 40px;
  29.             background-color: rgba(255, 255, 255, 0.95); /* 背景半透明 */
  30.             border-radius: 12px;
  31.             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  32.             text-align: center;
  33.             animation: fadeIn 1s ease-in-out;
  34.         }
  36.         /* 标题样式：使用莫兰迪色系 */
  37.         h2 {
  38.             font-size: 30px;
  39.             color: #A8B3A5; /* 莫兰迪绿 */
  40.             font-weight: 600;
  41.             margin-bottom: 30px;
  42.             letter-spacing: 1px;
  43.             font-family: 'Georgia', serif;
  44.         }
  46.         /* 表单样式 */
  47.         form {
  48.             display: flex;
  49.             flex-direction: column;
  50.             gap: 20px;
  51.         }
  53.         .form-group {
  54.             display: flex;
  55.             flex-direction: column;
  56.             align-items: flex-start;
  57.         }
  59.         .form-group label {
  60.             margin-bottom: 8px;
  61.             font-weight: bold;
  62.             color: #6D7D6E; /* 莫兰迪灰绿 */
  63.         }
  65.         .form-group input {
  66.             width: 100%;
  67.             padding: 12px;
  68.             border: 1px solid #ddd;
  69.             border-radius: 8px;
  70.             font-size: 16px;
  71.             transition: border-color 0.3s ease, box-shadow 0.3s ease;
  72.         }
  74.         /* 输入框聚焦效果 */
  75.         .form-group input:focus {
  76.             border-color: #A8B3A5; /* 莫兰迪绿 */
  77.             outline: none;
  78.             box-shadow: 0 0 8px rgba(169, 179, 165, 0.6);
  79.         }
  81.         /* 按钮样式 */
  82.         .form-group button {
  83.             padding: 12px 20px;
  84.             border: none;
  85.             border-radius: 6px;
  86.             background-color: #A8B3A5; /* 莫兰迪绿 */
  87.             color: white;
  88.             font-size: 16px;
  89.             font-weight: bold;
  90.             cursor: pointer;
  91.             transition: background-color 0.3s ease, transform 0.2s ease;
  92.         }
  94.         .form-group button:hover {
  95.             background-color: #8A9A8E; /* 更深的莫兰迪绿 */
  96.             transform: translateY(-3px);
  97.         }
  99.         .form-group button:active {
  100.             transform: translateY(0);
  101.         }
  103.         /* 提交按钮 */
  104.         .submit-button {
  105.             background-color: #A8B3A5;
  106.         }
  108.         .submit-button:hover {
  109.             background-color: #8A9A8E;
  110.         }
  112.         /* 动画效果 */
  113.         @keyframes fadeIn {
  114.             from {
  115.                 opacity: 0;
  116.                 transform: translateY(-20px);
  117.             }
  118.             to {
  119.                 opacity: 1;
  120.                 transform: translateY(0);
  121.             }
  122.         }
  124.         /* 响应式设计 */
  125.         @media (max-width: 480px) {
  126.             .container {
  127.                 padding: 20px;
  128.             }
  130.             .form-group input {
  131.                 padding: 10px;
  132.             }
  134.             .form-group button {
  135.                 padding: 12px 16px;
  136.             }
  138.             h2 {
  139.                 font-size: 26px;
  140.             }
  141.         }
  142.     </style>
  143. </head>
  144. <body>
  146. <div class="container">
  147.     <h2>登录</h2>
  148.     <form action="${pageContext.request.contextPath}/doLogin" method="post">
  149.         <div class="form-group">
  150.             <label for="username">用户名</label>
  151.             <input type="text" id="username" name="username" required>
  152.         </div>
  153.         <div class="form-group">
  154.             <label for="password">密码</label>
  155.             <input type="password" id="password" name="password" required>
  156.         </div>
  157.         <div class="form-group">
  158.             <button type="submit" class="submit-button">登录</button>
  159.         </div>
  160.     </form>
  161. </div>
  163. </body>
  164. </html>
复制代码
7、欢迎welcome.jsp页面

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>欢迎来到ROY6商城</title>
  8.     <style>
  9.         body {
  10.             font-family: 'Arial', sans-serif;
  11.             margin: 0;
  12.             padding: 0;
  13.             background: url('https://wx4.sinaimg.cn/mw690/007doFNOgy1hf8lzljzodj323u16qqv5.jpg') no-repeat center center fixed;
  14.             background-size: cover;
  15.             display: flex;
  16.             justify-content: center;
  17.             align-items: center;
  18.             height: 100vh;
  19.             overflow: hidden;
  20.         }
  22.         .container {
  23.             text-align: center;
  24.             background-color: rgba(255, 255, 255, 0.9);
  25.             padding: 30px 40px;
  26.             border-radius: 15px;
  27.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  28.             width: 100%;
  29.             max-width: 500px;
  30.             animation: fadeIn 1s ease-in-out;
  31.             position: relative;
  32.             z-index: 1;
  33.         }
  35.         h1 {
  36.             font-size: 30px;
  37.             color: #444;
  38.             margin-bottom: 20px;
  39.             font-family: 'Comic Sans MS', cursive;
  40.         }
  42.         p {
  43.             font-size: 18px;
  44.             color: #666;
  45.             margin-bottom: 20px;
  46.         }
  48.         a {
  49.             display: inline-block;
  50.             text-decoration: none;
  51.             padding: 12px 25px;
  52.             margin: 10px 0;
  53.             background-color: #A8B3A5; /* 修改为莫兰迪绿色 */
  54.             color: white;
  55.             font-size: 16px;
  56.             border-radius: 8px;
  57.             transition: background-color 0.3s ease, transform 0.2s ease;
  58.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  59.         }
  61.         a:hover {
  62.             background-color: #8A9A8E; /* 悬停时更深的莫兰迪绿色 */
  63.             transform: translateY(-3px);
  64.         }
  66.         a:active {
  67.             transform: translateY(0);
  68.         }
  70.         @keyframes fadeIn {
  71.             from {
  72.                 opacity: 0;
  73.                 transform: translateY(-20px);
  74.             }
  75.             to {
  76.                 opacity: 1;
  77.                 transform: translateY(0);
  78.             }
  79.         }
  81.         /* 新增样式：绝对定位文本 */
  82.         .text-overlay {
  83.             position: absolute;
  84.             top: 10%;
  85.             left: 50%;
  86.             transform: translateX(-50%);
  87.             background-color: rgba(255, 255, 255, 0.7);
  88.             padding: 20px;
  89.             border-radius: 15px;
  90.             text-align: center;
  91.             font-size: 17px;
  92.             color: #444;
  93.             width: 80%;
  94.             max-width: 600px;
  95.             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  96.             animation: fadeIn 1s ease-in-out;
  97.         }
  99.         @media (max-width: 480px) {
  100.             .container {
  101.                 padding: 20px;
  102.                 width: 90%;
  103.             }
  105.             h1 {
  106.                 font-size: 24px;
  107.             }
  109.             p {
  110.                 font-size: 16px;
  111.             }
  113.             a {
  114.                 font-size: 14px;
  115.             }
  117.             .text-overlay {
  118.                 font-size: 16px;
  119.                 width: 90%;
  120.             }
  121.         }
  122.     </style>
  123. </head>
  124. <body>
  125. <!-- 新增的文字容器 -->
  126. <div class="text-overlay">
  127.     ROY6住在一个未知的BAOBAO森林里，<br>
  128.     它们喜欢音乐、舞蹈，还喜欢用自己被赋予的神秘力量，帮助地球上的人们。<br>
  129.     如果你忽然感到幸福，不再孤单，那是因为ROY6来到了你身边！<br>
  130.     在日常生活中，当你想要获得小小的幸运时，就请呼叫ROY6吧！
  131. </div>
  133. <div class="container">
  134.     <h1>${username} 欢迎来到ROY6！</h1>
  135.     <p>请选择您想进行的操作：</p>
  136.     <a href="${pageContext.request.contextPath}/add">新增Roy6商品</a>
  137.     <a href="${pageContext.request.contextPath}/list">查看Roy6商品</a>
  138. </div>
  139. </body>
  140. </html>
复制代码
8、相关配置

（1）web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  5.          version="4.0">
  7.     <servlet>
  8.         <servlet-name>springmvc</servlet-name>
  9.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  10.         <init-param>
  11.             <param-name>contextConfigLocation</param-name>
  12.             <param-value>classpath:applicationContext.xml</param-value>
  13.         </init-param>
  14.         <load-on-startup>1</load-on-startup>
  15.     </servlet>
  17.     <servlet-mapping>
  18.         <servlet-name>springmvc</servlet-name>
  19.         <url-pattern>/</url-pattern>
  20.     </servlet-mapping>
  21. </web-app>
复制代码
（2）lib包

这里因为我用的是 Tomcat10.0.23 的版本，以是使用了6.0的 jar 包，各人使用对应本身的就行，大概采用Maven配置

（3）spring配置（applicationContext.xml）

创建配置文件applicationContext.xml，在该文件中配置id为dataSource的数据源Bean和id为jdbcTemplate的JDBC模板Bean，并将数据源注入到JDBC模板中。
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
  4.        xmlns:context="http://www.springframework.org/schema/context"
  5.        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
  7.     <!-- Enable Spring MVC components and default configuration -->
  8.     <mvc:annotation-driven />
  10.     <!-- Scan for components (controllers, services, repositories) in the specified package -->
  11.     <context:component-scan base-package="com.example.demo" />
  12.     <context:component-scan base-package="com.example.demo.controller"/>
  14.     <!-- 视图解析器 -->
  15.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
  16.         <!-- 前缀 -->
  17.         <property name="prefix" value="/WEB-INF/views/" />
  18.         <!-- 后缀 -->
  19.         <property name="suffix" value=".jsp" />
  20.     </bean>
  22.     <!-- DataSource configuration for connecting to MySQL database -->
  23.     <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
  24.         <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
  25.         <property name="url" value="jdbc:mysql://localhost:3306/spring_db?useUnicode=true characterEncoding=UTF-8 useSSL=false serverTimezone=UTC" />
  26.         <property name="username" value="root" />
  27.         <property name="password" value="这里写你的数据库密码" />
  28.     </bean>
  30.     <!-- JdbcTemplate bean for database operations -->
  31.     <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
  32.         <property name="dataSource" ref="dataSource" />
  33.     </bean>
  35.     <bean id="txManage" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
  36.         <property name="dataSource" ref="dataSource"/>
  37.     </bean>
  39.     <bean id="transactionTemplate" class="org.springframework.transaction.support.TransactionTemplate">
  40.             <property name="transactionManager" ref="txManage"/>
  41.     </bean>
  43.     <bean id="resourceHttpRequestHandler" class="org.springframework.web.servlet.resource.ResourceHttpRequestHandler">
  44.         <property name="locations">
  45.             <list>
  46.                 <value>classpath:/static/</value>
  47.             </list>
  48.         </property>
  49.     </bean>
  50. </beans>
复制代码
9、后端代码

（1）编写Controller层

创建IndexController类，用于实现首页跳转登录注册操纵。
IndexController.java

  1. package com.example.demo.controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RequestMethod;
  7. @Controller
  8. @RequestMapping("/index")
  9. public class IndexController {
  10.     @RequestMapping(value = "/login",method = RequestMethod.GET)
  11.     public String login(){
  12.         return "login";
  13.     }
  14.     @RequestMapping("/register")
  15.     public String register(){
  16.         return "register";
  17.     }
  18. }
复制代码
创建IndexController类，用于实现用户登录注册操纵。
UserController.java

  1. package com.example.demo.controller;
  3. import com.example.demo.service.UserService;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.GetMapping;
  7. import org.springframework.web.bind.annotation.PostMapping;
  8. import org.springframework.web.bind.annotation.RequestParam;
  9. import org.springframework.web.servlet.ModelAndView;
  12. @Controller
  13. public class UserController {
  15.     @Autowired
  16.     private UserService userService;
  18.     @GetMapping("/login")
  20.     public String showLoginForm() {
  21.         return "login";
  22.     }
  24.     @PostMapping("/doLogin")
  25.     public ModelAndView login(@RequestParam("username") String username, @RequestParam("password") String password){
  26.         ModelAndView modelAndView = new ModelAndView();
  27.         String result = userService.Login(username,password);
  28.         if("success".equals(result)){
  29.             modelAndView.addObject("username",username);
  30.             modelAndView.setViewName("welcome"); //设置视图为welcome.jsp
  31.         }else{
  32.             modelAndView.addObject("error",true);
  33.             modelAndView.setViewName("login");
  35.         }
  36.         return modelAndView;
  37.     }
  40.     @GetMapping("/register")
  41.     public String showRegisterForm(){
  42.         return "register";
  43.     }
  45.     @PostMapping("/doRegister")
  46.     public ModelAndView Register(@RequestParam("username") String username, @RequestParam("password") String password, @RequestParam("confirmPassword") String confirmPassword) {
  47.         ModelAndView modelAndView = new ModelAndView();
  48.         if (!confirmPassword.equals(password)) {
  49.             modelAndView.addObject("error", "两次密码不一致");
  50.             modelAndView.setViewName("register");  // 返回注册页面
  51.             return modelAndView;
  52.         }
  53.         try {
  54.             userService.Register(username, password);
  55.             modelAndView.setViewName("success"); // 注册成功后跳转到success.jsp页面
  56.             modelAndView.addObject("username", username);
  57.         } catch (IllegalArgumentException e) {
  58.             modelAndView.addObject("error", "注册失败，用户名已存在");
  59.             modelAndView.setViewName("register"); // 注册失败，仍然在注册页面
  60.         }
  61.         return modelAndView;
  62.     }
  64. }
复制代码
（2）编写Dao层方法

创建UsersDAO接口，在UsersDAO接口中声明查询所有效户信息和更新的方法。
UsersDAO.java

  1. package com.example.demo.dao;
  3. import com.example.demo.model.Users;
  5. import java.util.List;
  7. public interface UsersDAO {
  8.     public int update(String sql, Object[] params);
  9.     public List<Users> query(String sql, Object[] params);
  10. }
复制代码
（3）实现Dao层方法

创建UsersDAOImpl实现类，在UsersDAOImpl类中实现UsersDAO接口中的 update() 和 query() 方法。
UsersDAOImpl.java

  1. package com.example.demo.dao;
  3. import com.example.demo.model.Users;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.jdbc.core.BeanPropertyRowMapper;
  6. import org.springframework.jdbc.core.JdbcTemplate;
  7. import org.springframework.jdbc.core.RowMapper;
  8. import org.springframework.stereotype.Repository;
  10. import java.util.List;
  12. @Repository
  13. public class UsersDAOImpl implements UsersDAO {  // 加上 implements UsersDAO
  15.     @Autowired
  16.     private JdbcTemplate jdbcTemplate;
  18.     @Override
  19.     public int update(String sql, Object[] params) {
  20.         return jdbcTemplate.update(sql, params);
  21.     }
  23.     @Override
  24.     public List<Users> query(String sql, Object[] params) {
  25.         RowMapper<Users> rowMapper = new BeanPropertyRowMapper<>(Users.class);
  26.         return jdbcTemplate.query(sql, rowMapper, params);
  27.     }
  28. }
复制代码
（4）编写实体类

创建Users类，在该类中定义username、password属性，以及属性对应的getter/setter方法。
Users.java

  1. package com.example.demo.model;
  3. public class Users {
  4.     private String username;
  5.     private String password;
  7.     public String getName() {
  8.         return username;
  9.     }
  11.     public void setUsername(String username) {
  12.         this.username = username;
  13.     }
  15.     public String getPassword() {
  16.         return password;
  17.     }
  19.     public void setPassword(String password) {
  20.         this.password = password;
  21.     }
  22. }
复制代码
（5）编写服务层接口

创建UserService接口，在UserService接口中声明登录和注册的方法。
UserService.java

  1. package com.example.demo.service;
  3. public interface UserService {
  4.     public String Login(String username, String password);
  6.     public void Register(String username, String password);
  7. }
复制代码
（6）实现服务层方法

创建UserServiceImpl实现类，在UserServiceImpl类中实现UserService接口中的 Login() 和 Register() 方法。
UserServiceImpl.java

  1. package com.example.demo.service;
  3. import com.example.demo.dao.UsersDAO;
  4. import com.example.demo.model.Users;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  8. import java.util.List;
  10. @Service
  11. public class UserServiceImpl implements UserService {
  12.     @Autowired
  13.     private UsersDAO usersDAO;
  15.     @Override
  16.     public String Login(String username, String password) {
  17.         // 使用占位符避免SQL注入
  18.         String sql = "SELECT * FROM user WHERE username = ? AND password = ?";
  19.         List<Users> users = usersDAO.query(sql, new Object[]{username, password});
  20.         if (!users.isEmpty()) {
  21.             return "success";
  22.         }
  23.         return "login?error=true";
  24.     }
  26.     @Override
  27.     public void Register(String username, String password) {
  28.         String checkUserSql = "SELECT * FROM user WHERE username = ?";
  29.         List<Users> existingUsers = usersDAO.query(checkUserSql, new Object[]{username});
  30.         if (!existingUsers.isEmpty()) {
  31.             throw new IllegalArgumentException("Username already exists");
  32.         }
  33.         String insertUserSql = "INSERT INTO user (username, password) VALUES (?, ?)";
  34.         usersDAO.update(insertUserSql, new Object[]{username, password});
  35.     }
  36. }
复制代码
10、 查看运行效果

运行效果当然在上边就展示了哈哈哈，会遇到同样喜欢Roy6家族的友友嘛~嘻嘻~
哈哈，到这里就结束了~

码字不易，别忘记 点赞收藏哦！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

尚未崩坏

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表