实验9 JSP访问数据库（二）

慢吞云雾缓吐愁  金牌会员 | 2024-11-30 23:42:36 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 898|帖子 898|积分 2694

目的：
1、认识JDBC的数据库访问模式。
2、掌握预处理语句的利用
实验要求：

  • 利用Tomcat作为Web服务器
  • 通过JDBC访问数据库，实现增删改查功能的实现
  • 要求提交实验陈诉，将代码和实验结果页面截图放入陈诉中

实验内容：
1.编写一个网页，实现根据输入门生姓名的暗昧查询，假如查找不到就显示“查无此人”



StudentQueryServlet.java

这是一个Servlet，负责接收用户的哀求，毗连数据库执行查询，并返回查询结果。
  1. package com.example.servlet;
  3. import java.io.*;
  4. import java.sql.*;
  5. import javax.servlet.*;
  6. import javax.servlet.http.*;
  8. public class StudentQueryServlet extends HttpServlet {
  10.     // JDBC数据库连接配置
  11.     private static final String DB_URL = "jdbc:mysql://localhost:3307/student"; // 替换成你的数据库地址,我这里写的是3307不是3306
  12.     private static final String DB_USER = "root"; // 数据库用户名
  13.     private static final String DB_PASS = "123456"; // 数据库密码
  15.     // 处理GET请求
  16.     @Override
  17.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.         // 获取用户输入的学生姓名
  19.         String studentName = request.getParameter("studentName");
  21.         // 设置响应内容类型为HTML
  22.         response.setContentType("text/html;charset=UTF-8");
  23.         PrintWriter out = response.getWriter();
  25.         // 默认返回“查无此人”信息
  26.         String result = "查无此人";
  28.         // 连接数据库并执行查询
  29.         try (Connection conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASS)) {
  30.             String sql = "SELECT * FROM students WHERE name LIKE ?"; // SQL模糊查询
  31.             try (PreparedStatement stmt = conn.prepareStatement(sql)) {
  32.                 stmt.setString(1, "%" + studentName + "%"); // 设置模糊查询的姓名
  33.                 ResultSet rs = stmt.executeQuery();
  35.                 // 如果查询到结果，则显示学生信息
  36.                 if (rs.next()) {
  37.                     result = "<h3>查询结果：</h3>";
  38.                     do {
  39.                         result += "<p>姓名：" + rs.getString("name") + "<br>"
  40.                                 + "年龄：" + rs.getInt("age") + "<br>"
  41.                                 + "专业：" + rs.getString("major") + "</p>";
  42.                     } while (rs.next());
  43.                 }
  44.             }
  45.         } catch (SQLException e) {
  46.             e.printStackTrace();
  47.             result = "数据库连接错误";
  48.         }
  50.         // 输出HTML响应
  51.         out.println("<html><body>");
  52.         out.println("<h1>学生信息查询</h1>");
  53.         out.println("<form method='GET' action='StudentQueryServlet'>");
  54.         out.println("请输入学生姓名：<input type='text' name='studentName' />");
  55.         out.println("<input type='submit' value='查询' />");
  56.         out.println("</form>");
  57.         out.println("<hr>");
  58.         out.println(result);
  59.         out.println("</body></html>");
  60.     }
  61. }
复制代码
web.xml 设置

web.xml 是Web应用的设置文件，用于设置Servlet、映射等信息。
  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_3_1.xsd"
  5.          version="3.1">
  7.     <!-- Web应用名称 -->
  8.     <display-name>sample</display-name>
  10.     <!-- Servlet配置 -->
  11.     <servlet>
  12.         <servlet-name>StudentQueryServlet</servlet-name>
  13.         <servlet-class>com.example.servlet.StudentQueryServlet</servlet-class>
  14.         <load-on-startup>1</load-on-startup> <!-- 应用启动时加载 -->
  15.     </servlet>
  17.     <!-- Servlet映射 -->
  18.     <servlet-mapping>
  19.         <servlet-name>StudentQueryServlet</servlet-name>
  20.         <url-pattern>/StudentQueryServlet</url-pattern> <!-- URL访问路径 -->
  21.     </servlet-mapping>
  23.     <!-- 欢迎文件配置 -->
  24.     <welcome-file-list>
  25.         <welcome-file>index.jsp</welcome-file> <!-- 默认首页 -->
  26.     </welcome-file-list>
  27. </web-app>
复制代码
index.jsp 页面

这是用户输入门生姓名并提交查询哀求的页面。
  1. <%@ page contentType="text/html; charset=UTF-8" %>
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>学生信息查询</title>
  7. </head>
  8. <body>
  9. <h1>学生信息查询</h1>
  10. <form method="GET" action="StudentQueryServlet">
  11.     <label for="studentName">请输入学生姓名：</label>
  12.     <input type="text" id="studentName" name="studentName" required />
  13.     <input type="submit" value="查询" />
  14. </form>
  15. </body>
  16. </html>
复制代码
JDBC驱动

将MySQL JDBC驱动（mysql-connector-java-x.x.x.jar）放入 WEB-INF/lib 目录中，如许Tomcat在启动时可以找到并加载该驱动。或者也可以放在tomcat的lib下

数据库设置

  1. create database student;
  2. use student;
  3. CREATE TABLE students (
  4.                           id INT AUTO_INCREMENT PRIMARY KEY,
  5.                           name VARCHAR(255) NOT NULL,
  6.                           age INT,
  7.                           major VARCHAR(255)
  8. );
  9. INSERT INTO students (name, age, major) VALUES ('John Doe', 21, 'Computer Science');
  10. INSERT INTO students (name, age, major) VALUES ('Jane Smith', 22, 'Physics');
  11. INSERT INTO students (name, age, major) VALUES ('Alice Johnson', 20, 'Mathematics');
复制代码
 




2.实现门生注册和登录功能，输入门生学号（stuId）和暗码(stuPwd)，假如学号不存在，跳转到注册界面，完成注册功能；假如学号存在，暗码匹配显示“登录成功”，否则显示“登录失败”。注：要求用PreparedStatement实现。


java
  1. package com.example.servlet;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.sql.*;
  10. public class StudentLogin extends HttpServlet {
  12.     private static final String DB_URL = "jdbc:mysql://localhost:3307/student";
  13.     private static final String DB_USER = "root";
  14.     private static final String DB_PASS = "123456";
  16.     @Override
  17.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.         String id = request.getParameter("id");
  19.         String pwd = request.getParameter("pwd");
  21.         response.setContentType("text/html;charset=UTF-8");
  23.         String result = null;
  25.         try (Connection conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASS)) {
  26.             String sql = "SELECT * FROM student02 WHERE id = ?";
  27.             try (PreparedStatement pstmt = conn.prepareStatement(sql)) {
  28.                 pstmt.setString(1, id);
  29.                 ResultSet rs = pstmt.executeQuery();
  31.                 if (rs.next()) {
  32.                     String dbPwd = rs.getString("pwd");
  33.                     if (dbPwd.equals(pwd)) {
  34.                         result = "登录成功";
  35.                     } else {
  36.                         result = "密码错误";
  37.                     }
  38.                 } else {
  39.                     result = "学号不存在，请注册";
  40.                     response.sendRedirect("register.jsp"); // 学号不存在，重定向到注册页面
  41.                     return;
  42.                 }
  43.             }
  44.         } catch (SQLException e) {
  45.             e.printStackTrace();
  46.             result = "数据库连接错误";
  47.         }
  49.         response.getWriter().write(result);
  50.     }
  51. }
复制代码
  1. package com.example.servlet;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.sql.*;
  10. public class StudentRegister extends HttpServlet {
  12.     private static final String DB_URL = "jdbc:mysql://localhost:3307/student";
  13.     private static final String DB_USER = "root";
  14.     private static final String DB_PASS = "123456";
  16.     @Override
  17.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.         String id = request.getParameter("id");
  19.         String pwd = request.getParameter("pwd");
  20.         String name = request.getParameter("name");
  22.         response.setContentType("text/html;charset=UTF-8");
  24.         String result = null;
  26.         try (Connection conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASS)) {
  27.             // 检查学号是否已经存在
  28.             String sql = "SELECT * FROM student02 WHERE id = ?";
  29.             try (PreparedStatement pstmt = conn.prepareStatement(sql)) {
  30.                 pstmt.setString(1, id);
  31.                 ResultSet rs = pstmt.executeQuery();
  33.                 if (rs.next()) {
  34.                     result = "学号已存在，请重新输入";
  35.                     response.getWriter().write(result);
  36.                 } else {
  37.                     // 插入新学生
  38.                     sql = "INSERT INTO student02 (id, pwd, name) VALUES (?, ?, ?)";
  39.                     try (PreparedStatement insertStmt = conn.prepareStatement(sql)) {
  40.                         insertStmt.setString(1, id);
  41.                         insertStmt.setString(2, pwd);
  42.                         insertStmt.setString(3, name);
  43.                         insertStmt.executeUpdate();
  44.                         result = "注册成功";
  45.                         response.getWriter().write(result);
  46.                     }
  47.                 }
  48.             } catch (SQLException e) {
  49.                 e.printStackTrace();
  50.                 result = "数据库连接错误";
  51.                 response.getWriter().write(result);
  52.             }
  53.         } catch (SQLException e) {
  54.             e.printStackTrace();
  55.             result = "数据库连接错误";
  56.             response.getWriter().write(result);
  57.         }
  58.     }
  59. }
复制代码
jsp: 
  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: d'd'd
  4.   Date: 2024/11/15
  5.   Time: 14:07
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>登录</title>
  12. </head>
  13. <body>
  14. <h1>学生登录</h1>
  15. <form action="StudentLogin" method="post">
  16.     <label for="id">学号：</label>
  17.     <input type="text" id="id" name="id" required>
  18.     <br>
  19.     <label for="pwd">密码：</label>
  20.     <input type="password" id="pwd" name="pwd" required>
  21.     <br>
  22.     <input type="submit" value="登录">
  23. </form>
  25. <a href="register.jsp">没有账号？去注册</a>
  26. </body>
  27. </html>
复制代码
 
  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: d'd'd
  4.   Date: 2024/11/15
  5.   Time: 14:08
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>注册</title>
  12. </head>
  13. <body>
  14. <h1>学生注册</h1>
  15. <form action="StudentRegister" method="post">
  16.     <label for="id">学号：</label>
  17.     <input type="text" id="id" name="id" required>
  18.     <br>
  19.     <label for="pwd">密码：</label>
  20.     <input type="password" id="pwd" name="pwd" required>
  21.     <br>
  22.     <label for="name">姓名：</label>
  23.     <input type="text" id="name" name="name" required>
  24.     <br>
  25.     <input type="submit" value="注册">
  26. </form>
  28. </body>
  29. </html>
复制代码
 
 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_3_1.xsd"
  5.          version="3.1">
  7.     <!-- Web应用名称 -->
  8.     <display-name>StudentApp</display-name>
  10.     <!-- 登录Servlet配置 -->
  11.     <servlet>
  12.         <servlet-name>StudentLogin</servlet-name>
  13.         <servlet-class>com.example.servlet.StudentLogin</servlet-class>
  14.         <load-on-startup>1</load-on-startup>
  15.     </servlet>
  17.     <!-- 注册Servlet配置 -->
  18.     <servlet>
  19.         <servlet-name>StudentRegister</servlet-name>
  20.         <servlet-class>com.example.servlet.StudentRegister</servlet-class>
  21.         <load-on-startup>2</load-on-startup>
  22.     </servlet>
  24.     <!-- 登录Servlet映射 -->
  25.     <servlet-mapping>
  26.         <servlet-name>StudentLogin</servlet-name>
  27.         <url-pattern>/StudentLogin</url-pattern>
  28.     </servlet-mapping>
  30.     <!-- 注册Servlet映射 -->
  31.     <servlet-mapping>
  32.         <servlet-name>StudentRegister</servlet-name>
  33.         <url-pattern>/StudentRegister</url-pattern>
  34.     </servlet-mapping>
  36.     <!-- 默认欢迎页面 -->
  37.     <welcome-file-list>
  38.         <welcome-file>login.jsp</welcome-file>
  39.     </welcome-file-list>
  41. </web-app>
复制代码
 

 













用springboot+mybatis完成一个门生登录注册系统,并具有增删改查信息功能

后端

1.创建 Spring Boot 项目,依赖包含:


2.建表

  1. -- 删除数据库
  2.     drop database students;
  3. -- 创建数据库
  4. create database students;
  6. -- 使用数据库
  7. use students;
  8. CREATE TABLE students (
  9.       id INT AUTO_INCREMENT PRIMARY KEY,
  10.       username VARCHAR(50) NOT NULL,
  11.       password VARCHAR(255) NOT NULL,
  12.       full_name VARCHAR(100) NOT NULL,
  13.       email VARCHAR(100) NOT NULL,
  14.       phone VARCHAR(20),
  15.       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
  16. );
复制代码
3.设置数据库

设置 application.properties 来毗连 MySQL 数据库。
  1. spring.application.name=M-stu-sys
  3. # 数据库连接配置
  4. # 这一行指定了数据库的连接URL。
  5. spring.datasource.url=jdbc:mysql://localhost:3306/students?useSSL=false&serverTimezone=UTC
  6. # 用于指定连接数据库的用户名，这里设置为root，你需要将其替换为你实际使用的数据库用户名。
  7. spring.datasource.username=root
  8. # 这是连接数据库的密码，将yourpassword替换为你的数据库密码。
  9. spring.datasource.password=123456
  10. # 明确指定使用的MySQL JDBC驱动类，com.mysql.cj.jdbc.Driver是MySQL 8.0及以上版本使用的驱动类。
  11. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  13. # MyBatis配置
  14. # 告诉MyBatis在哪里查找映射文件（XML文件）。classpath:mapper/*.xml表示在类路径下的mapper目录中查找所有以.xml结尾的文件，这些文件包含了SQL语句和数据库操作的映射定义。
  15. mybatis.mapper-locations=classpath:mapper/*.xml
  16. # 用于设置MyBatis的类型别名包。这样在映射文件中可以使用短名称来代替全限定类名，方便书写SQL语句，提高代码的可读性。例如，如果在com.example.demo.model包中有一个User类，在映射文件中可以直接使用User来代替com.example.demo.model.User。
  17. mybatis.type-aliases-package=org.example.mstusys.entity
  19. # JPA配置（如果项目中用到JPA）
  20. # 这个配置用于控制Hibernate（JPA的实现）如何根据实体类自动创建、更新或验证数据库表结构。update表示根据实体类的定义自动更新数据库表结构，例如添加新的字段、创建新的表等。但在生产环境中使用时要谨慎，因为可能会意外修改数据库结构。其他可选值包括create（每次启动应用时创建新的数据库表，删除旧表，慎用）、create-drop（在应用启动时创建表，关闭时删除表）、validate（只验证表结构是否与实体类定义一致，不进行修改）等。如果你的项目中没有使用JPA，可以删除这一行配置。
  21. spring.jpa.hibernate.ddl-auto=update
复制代码
4.实体类

  1. package org.example.mstusys.entity;
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  7. @Data
  8. @AllArgsConstructor
  9. @NoArgsConstructor
  10. public class Student {
  11.     private Integer id;
  12.     private String username;
  13.     private String password;
  14.     private String fullName;
  15.     private String email;
  16.     private String phone;
  17.     private String createdAt;
  18. }
复制代码

5.创建 Mapper 接口和 XML 文件

创建一个 StudentMapper 接口，并提供 SQL 语句映射。
  1. package org.example.mstusys.mapper;
  3. import org.apache.ibatis.annotations.*;
  4. import org.example.mstusys.entity.Student;
  6. import java.util.List;
  8. @Mapper
  9. public interface StudentMapper {
  11.     // 向students表中插入一条学生记录，插入的字段包括用户名、密码、全名、邮箱和电话，参数为一个Student对象
  12.     @Insert("INSERT INTO students (username, password, full_name, email, phone) " +
  13.             "VALUES (#{username}, #{password}, #{fullName}, #{email}, #{phone})")
  14.     int registerStudent(Student student);
  16.     // 根据用户名查找学生记录，返回一个Student对象，如果未找到则返回null
  17.     @Select("SELECT * FROM students WHERE username = #{username}")
  18.     Student findByUsername(String username);
  20.     // 根据学生id查找学生记录，返回一个Student对象，如果未找到则返回null
  21.     @Select("SELECT * FROM students WHERE id = #{id}")
  22.     Student findById(int id);
  24.     // 查询students表中的所有学生记录，返回一个包含所有学生记录的List<Student>集合
  25.     @Select("SELECT * FROM students")
  26.     List<Student> findAll();
  28.     // 根据学生id更新学生记录，更新的字段包括用户名、密码、全名、邮箱和电话，参数为一个Student对象
  29.     @Update("UPDATE students SET username = #{username}, password = #{password}, full_name = #{fullName}, " +
  30.             "email = #{email}, phone = #{phone} WHERE id = #{id}")
  31.     int updateStudent(Student student);
  33.     // 根据学生id删除学生记录，返回受影响的行数，如果删除成功则返回1，否则返回0
  34.     @Delete("DELETE FROM students WHERE id = #{id}")
  35.     int deleteStudent(int id);
  36. }
复制代码

6.创建 Service 层

创建一个 StudentService 类，用于处理业务逻辑。
  1. package org.example.mstusys.service;
  3. import org.example.mstusys.entity.Student;
  4. import org.example.mstusys.mapper.StudentMapper;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  8. import java.util.List;
  10. @Service
  11. public class StudentService {
  12.     // 注入StudentMapper
  13.     @Autowired
  14.     private StudentMapper studentMapper;
  16.     /**
  17.      * 注册学生
  18.      * @param student
  19.      * @return
  20.      */
  21.     public int registerStudent(Student student) {
  22.         return studentMapper.registerStudent(student);
  23.     }
  25.     /**
  26.      * 登录
  27.      * @param username
  28.      * @return
  29.      */
  30.     public Student login(String username){
  31.         return studentMapper.findByUsername(username);
  32.     }
  34.     /**
  35.      * 根据id获取学生信息
  36.      * @param id
  37.      * @return
  38.      */
  40.     public Student getStudentById(int id){
  41.         return studentMapper.findById(id);
  42.     }
  44.     /**
  45.      * 获取所有学生信息
  46.      * @return
  47.      */
  48.     public List<Student> getAllStudents() {
  49.         return studentMapper.findAll();
  50.     }
  52.     /**
  53.      * 更新学生信息
  54.      * @param student
  55.      * @return
  56.      */
  57.     public int updateStudent(Student student) {
  58.         return studentMapper.updateStudent(student);
  59.     }
  61.     /**
  62.      * 删除学生信息
  63.      * @param id
  64.      * @return
  65.      */
  66.     public int deleteStudent(int id) {
  67.         return studentMapper.deleteStudent(id);
  68.     }
  69. }
复制代码
7.创建 Controller 层

创建一个 StudentController 控制器来处理 HTTP 哀求。
  1. package org.example.mstusys.controller;
  3. import org.example.mstusys.entity.Student;
  4. import org.example.mstusys.service.StudentService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.web.bind.annotation.*;
  8. import java.util.List;
  10. @RestController
  11. @RequestMapping("/students")
  12. public class StudentController {
  14.     @Autowired
  15.     private StudentService studentService;
  17.     /**
  18.      * 注册
  19.      * @param student
  20.      * @return
  21.      */
  22.     @PostMapping("/register")
  23.     public String register(@RequestBody Student student){
  24.         int result = studentService.registerStudent(student);
  25.         return result > 0 ? "Registration successful" : "Registration failed";
  26.     }
  28.     /**
  29.      * 登录
  30.      * @param username
  31.      * @param password
  32.      * @return
  33.      */
  34.     @PostMapping("/login")
  35.     public String login(@RequestParam String username,@RequestParam String password){
  36.         Student student = studentService.login(username);
  37.         if(student != null && student.getPassword().equals(password)){
  38.             return "Login successful";
  39.         }else{
  40.             return "Invalid username or password";
  41.         }
  42.     }
  44.     /**
  45.      * 根据id查询学生
  46.      * @param id
  47.      * @return
  48.      */
  49.     @GetMapping("/{id}")
  50.     public Student getStudentById(@PathVariable int id){
  51.         return studentService.getStudentById(id);
  52.     }
  54.     /**
  55.      * 查询所有学生
  56.      * @return
  57.      */
  58.     @GetMapping("/all")
  59.     public List<Student> getAllStudents(){
  60.         return studentService.getAllStudents();
  61.     }
  63.     /**
  64.      * 更新学生信息
  65.      * @param student
  66.      * @return
  67.      */
  68.     @PutMapping("/update")
  69.     public String updateStudent(@RequestBody Student student) {
  70.         int result = studentService.updateStudent(student);
  71.         return result > 0 ? "Student updated successfully" : "Update failed";
  72.     }
  74.     /**
  75.      * 删除学生
  76.      * @param id
  77.      * @return
  78.      */
  79.     @DeleteMapping("/delete/{id}")
  80.     public String deleteStudent(@PathVariable int id) {
  81.         int result = studentService.deleteStudent(id);
  82.         return result > 0 ? "Student deleted successfully" : "Delete failed";
  83.     }
  84. }
复制代码

8.启动 Spring Boot 应用

确保你的 @SpringBootApplication 类设置准确
  1. package org.example.mstusys;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6. @SpringBootApplication
  7. public class MStuSysApplication {
  9.     public static void main(String[] args) {
  10.         SpringApplication.run(MStuSysApplication.class, args);
  11.     }
  13. }
复制代码
 




9. 测试接口

利用 Postman 或其他 API 测试工具来测试接口：


  • POST /students/register：注册门生


  • POST /students/login：登录门生


  • GET /students/{id}：查询单个门生信息


  • GET /students/all：查询全部门生信息


  • PUT /students/update：更新门生信息


  • DELETE /students/delete/{id}：删除门生信息



通过 Postman 测试 Spring Boot + MyBatis 项目中的接口非常方便。你可以发送差异的 HTTP 哀求（如 POST、GET、PUT、DELETE）来测试用户注册、登录、查询、更新和删除等功能。记得在测试时保证服务器已经启动，而且数据库已经设置好。

10. 利用 Spring Security（可选）

假如须要对登录举行更严酷的身份验证，发起集成 Spring Security 举行加密和认证。
前端

确保你已经安装了 Node.js 和 npm。你可以通过以下命令查抄是否安装了：
  1. node -v
  2. npm -v
复制代码
我用的是
docker-compose 部署node.js和mysql

1.设置 docker-compose.yml

我们将在项目根目录（M-stu-sys/）下创建一个 docker-compose.yml 文件。它将定义如何启动 Node.js（前端）和 MySQL 服务。
  1. version: '3.8'
  3. services:
  4.   # 前端服务（Node.js）
  5.   frontend:
  6.     build:
  7.       context: ./frontend  # 假设你的 Vue.js 项目位于 ./frontend 目录中
  8.     ports:
  9.       - "8080:80"  # 映射容器的 80 端口到主机的 8080 端口
  10.     environment:
  11.       - VUE_APP_API_URL=http://backend:8080/api  # Vue.js 调用后端的 API 地址
  12.     depends_on:
  13.       - backend  # 前端依赖后端服务
  14.     networks:
  15.       - mynetwork
  17.   # 后端服务（Spring Boot）
  18.   backend:
  19.     build:
  20.       context: .  # 后端的 Dockerfile 位于根目录下
  21.     ports:
  22.       - "8081:8080"  # 将后端服务暴露在宿主机的 8081 端口
  23.     environment:
  24.       - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/student  # 配置数据库连接
  25.       - SPRING_DATASOURCE_USERNAME=root
  26.       - SPRING_DATASOURCE_PASSWORD=123456
  27.     depends_on:
  28.       - mysql  # 后端依赖 MySQL 服务
  29.     networks:
  30.       - mynetwork
  32.   # MySQL 服务
  33.   mysql:
  34.     image: mysql:8.0
  35.     container_name: mysql8-test05
  36.     environment:
  37.       MYSQL_ROOT_PASSWORD: 123456
  38.       MYSQL_DATABASE: student  # 这里将数据库名改为了mysql8，可按需修改
  39.     ports:
  40.       - "3306:3306"
  41.     volumes:
  42.       - mysql_data:/var/lib/mysql
  43.     networks:
  44.       - mynetwork
  46. # 定义数据卷，持久化 MySQL 数据
  47. volumes:
  48.   mysql_data:
  50. # 定义网络
  51. networks:
  52.   mynetwork:
  53.     driver: bridge  # 使用桥接网络
复制代码
2.设置前端 Dockerfile（Vue.js）
frontend/Dockerfile 内容
  1. # 使用 Node.js 作为构建镜像
  2. FROM node:16-alpine as build
  4. # 设置工作目录
  5. WORKDIR /app
  7. # 复制 package.json 和 package-lock.json 文件
  8. COPY package*.json ./
  10. # 安装前端依赖
  11. RUN npm install
  13. # 复制剩余的项目文件
  14. COPY . .
  16. # 构建 Vue.js 项目
  17. RUN npm run build
  19. # 使用 Nginx 作为生产环境的静态文件服务器
  20. FROM nginx:alpine
  22. # 将构建的 Vue.js 应用拷贝到 Nginx 容器中
  23. COPY --from=build /app/dist /usr/share/nginx/html
  25. # 暴露端口 80
  26. EXPOSE 80
复制代码
3.设置后端 Dockerfile（Spring Boot） 
  1. # 使用 OpenJDK 作为基础镜像
  2. FROM openjdk:17-jdk-slim
  4. # 将 Spring Boot 可执行 JAR 文件复制到容器内
  5. COPY target/*.jar app.jar
  7. # 设置容器启动时执行的命令
  8. ENTRYPOINT ["java", "-jar", "/app.jar"]
  10. # 暴露端口 8080
  11. EXPOSE 8080
复制代码
4.设置 Vue.js 前端的 frontend/package.json
  1. {
  2.   "scripts": {
  3.     "serve": "vue-cli-service serve",
  4.     "build": "vue-cli-service build",
  5.     "lint": "vue-cli-service lint"
  6.   },
  7.   "dependencies": {
  8.     "axios": "^0.21.1",
  9.     "vue": "^2.6.14",
  10.     "vue-router": "^3.5.1"
  11.   },
  12.   "devDependencies": {
  13.     "@vue/cli-service": "^4.5.13"
  14.   },
  15.   "env": {
  16.     "VUE_APP_API_URL": "http://localhost:8080/api"
  17.   }
  18. }
复制代码
 可以在 Vue.js 的代码中利用 process.env.VUE_APP_API_URL 来访问后端 API 所在。
5: 启动 Docker Compose
  1. docker-compose up --build
复制代码
 启动成功后，Vue.js 前端会通过 Nginx 在容器中运行，可以在浏览器中访http://localhost:8080 来查看前端应用

项目结构:
   

  遇到一些错误可以手动拉镜像




  1. docker pull nginx:alpine
  2. docker pull node:16-alpine
复制代码
 




通过以下命令查抄后端是否正常启动：


3.（选做）参考学习平台上“JDBC操作_增删改”的视频，利用表格展示数据库中stuinfo表中的个人信息，每行一条个人信息，表格新增两列，分别提供“修改”和“删除”两个链接。点击“修改”链接时，跳转到新页面可供用户修改和保存；点击“删除”时，跳转到新页面完成删除操作并提示操作结果


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

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

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

本版积分规则

慢吞云雾缓吐愁

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

楼主热帖

标签云

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