数据库课程设计（学习笔记）重开版第二天

最新推荐文章于 2024-11-09 21:51:58 发布

Xia0Mo

最新推荐文章于 2024-11-09 21:51:58 发布

阅读量742

点赞数 25

文章标签：数据库课程设计学习

本文链接：https://blog.csdn.net/weixin_73537561/article/details/140433220

版权

现在参考的是B站的视频，参考的是学生在线选课系统，但实际上这些在登录逻辑上都差不多

前端页面的准备

1.Index.html
访问网站的首页面，可以用于登录，当然也可以跳转到注册页面，post请求发送登录
好前端页面代码贴过来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 安全策略，升级不安全的请求 -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线购票系统</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="/static/end/css/styles.css">
    <style>
        /* 添加一些简单的样式来美化加载指示器 */
        .loading-message {
            display: none; /* 默认隐藏加载消息 */
            color: #007bff; /* 设置文本颜色 */
            font-size: 1rem; /* 设置字体大小 */
            margin-top: 1rem; /* 设置上边距 */
        }

        .disabled {
            opacity: 0.6; /* 设置透明度 */
            cursor: not-allowed; /* 设置鼠标指针为不可用状态 */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form-container">
        <h2>登录</h2>
        <!-- 登录表单，提交时调用 handleLogin 函数 -->
        <form id="loginForm" onsubmit="return handleLogin(event)">
            <div class="form-group">
                <label for="loginEmail">电子邮件：</label>
                <input type="email" id="loginEmail" name="loginEmail" required> <!-- 邮箱输入框 -->
            </div>
            <div class="form-group">
                <label for="loginPassword">密码：</label>
                <input type="password" id="loginPassword" name="loginPassword" required> <!-- 密码输入框 -->
            </div>
            <button type="submit" id="loginButton">登录</button> <!-- 登录按钮 -->
        </form>
        <!-- 加载消息，默认隐藏 -->
        <p class="loading-message" id="loadingMessage">登录中，请等待...</p>
        <!-- 注册链接 -->
        <p>还没有账户？<a href="register.html">注册</a></p>
    </div>
</div>

<script>
    function handleLogin(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        const loginButton = document.getElementById('loginButton');
        const loadingMessage = document.getElementById('loadingMessage');

        // 显示加载消息并禁用按钮
        loadingMessage.style.display = 'block';
        loginButton.classList.add('disabled');

        // 获取表单数据
        const loginEmail = document.getElementById('loginEmail').value;
        const loginPassword = document.getElementById('loginPassword').value;

        const data = {
            email: loginEmail,
            password: loginPassword
        };

        // 发送 POST 请求到 /login 路径
        fetch('/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                // 在此处处理登录成功的情况，例如重定向到主页
                loadingMessage.style.display = 'none'; // 隐藏加载消息
                loginButton.classList.remove('disabled'); // 启用按钮
            })
            .catch((error) => {
                console.error('Error:', error);
                // 在此处处理错误情况，例如显示错误消息
                loadingMessage.style.display = 'none'; // 隐藏加载消息
                loginButton.classList.remove('disabled'); // 启用按钮
            });
    }
</script>
</body>
</html>

在这里插入图片描述
register.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 安全策略，升级不安全的请求 -->
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册 - 在线购票系统</title>
  <!-- 引入外部 CSS 文件 -->
  <link rel="stylesheet" href="/static/end/css/styles.css">
</head>
<body>
<div class="container">
  <div class="form-container">
    <h2>注册</h2>
    <!-- 注册表单 -->
    <form id="registerForm">
      <div class="form-group">
        <label for="registerUsername">用户名：</label>
        <!-- 用户名输入框 -->
        <input type="text" id="registerUsername" name="registerUsername" required>
      </div>
      <div class="form-group">
        <label for="registerEmail">电子邮件：</label>
        <!-- 邮箱输入框 -->
        <input type="email" id="registerEmail" name="registerEmail" required>
      </div>
      <div class="form-group">
        <label for="registerPassword">密码：</label>
        <!-- 密码输入框 -->
        <input type="password" id="registerPassword" name="registerPassword" required>
      </div>
      <button type="submit">注册</button>
    </form>
    <!-- 登录链接 -->
    <p>已有账户？<a href="index.html">登录</a></p>
  </div>
</div>

<script>
  // 监听表单提交事件
  document.getElementById('registerForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    // 获取表单数据
    const username = document.getElementById('registerUsername').value;
    const email = document.getElementById('registerEmail').value;
    const password = document.getElementById('registerPassword').value;

    const data = {
      username: username,
      email: email,
      password: password
    };

    // 发送 POST 请求到 /register 路径
    fetch('/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
      // 在此处处理注册成功的情况，例如重定向到登录页面
      alert('注册成功');
      window.location.href = 'index.html'; // 重定向到登录页面
    })
    .catch((error) => {
      console.error('Error:', error);
      // 在此处处理错误情况，例如显示错误消息
      alert('注册失败，请重试');
    });
  });
</script>
</body>
</html>

在这里插入图片描述
注册页面如上
二者之间能够进行快速跳转
注册的后端是/register

遇到的问题

今天一开始就遇到了昨天遇到的问题，就是这个目录就是开不了
IDEA无法在resource下开目录
在这里插入图片描述
就是这样
然后解决办法，

这里的这个设置取消掉group tab就可以了挺好的

后端登录代码

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>org.example</groupId>
  <artifactId>Tickets</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>Tickets Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.7.0</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>javax.persistence</groupId>
      <artifactId>javax.persistence-api</artifactId>
      <version>2.2</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
        <version>5.3.20</version>
    </dependency>
    <dependency>
      <groupId>javax.annotation</groupId>
      <artifactId>javax.annotation-api</artifactId>
      <version>1.3.2</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>6.1.10</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>Tickets</finalName>
  </build>
</project>

配置的依赖
用了spring这个后就好了很多
好了最终配好了这些东西
继续

AccountController
这个对应着
/login路径
凡是传到这个地方的参数后面都会经过数据库查询，这里要防范sql等漏洞

遇到的问题

这个一开始就看到视频里面的和我的大不相同，昨天也奇怪了今天才发现问题的关键
视频中展现的遇到注解就会自动引包这个真没见过

设置：Setting->Editor->General->Auto import

java区域有两个关键选项

Add unambiguous imports on the fly
快速添加明确的导包
IDEA将在我们书写代码的时候自动帮我们导入需要用到的包。
但是对于那些同名的包，还是需要手动Alt+Enter进行导入的。
Optimize imports on the fly (for current project)
动态优化导入(针对当前项目)
(意味着每个项目都要根据自己需求决定是否点这个选项)
IDEA将在我们书写代码的时候自动帮我们优化导入的包，
比如自动去掉一些没有用到的包。

查了一下这样调整之后再看

第二个问题就是重建pom.xml时总是遇见各种报错
好在后面都通过GPT解决了
原因在于视频里的东西有些现在用不了了，删去后环境就好了
在这里插入图片描述
例如这个为啥仍然不能够继续进行自动导包
而且用GPT查之后仍然爆红
好吧查了几个博客后面

运行了提示里面的东西然后就自动加了依赖然后就找到了，可能我设置出了新东西