Java前后端分离开发的步骤以及注意事项（使用前端三件套，原生开发）

Eric,会点编程

已于 2024-07-17 20:23:32 修改

阅读量825

点赞数 30

分类专栏： java教程文章标签： java 前端开发语言

于 2024-07-17 20:20:55 首次发布

本文链接：https://blog.csdn.net/qq_72290695/article/details/140504485

版权

java教程专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在现代Web应用程序开发中，前后端分离是一种常见的架构模式。这种模式将前端（HTML、CSS、JavaScript）和后端（业务逻辑和数据处理）分开独立开发和部署，从而提高开发效率、代码的可维护性和团队协作能力。本文将介绍Java前后端分离开发的注意事项，并通过一些实例来说明如何实现。

注意事项

使用vue的前端Java前后端分离开发的步骤以及注意事项-CSDN博客

总体来说，后端是一样的，使用vue的前端也是编译成原生代码运行

1. API设计

API是前后端交互的桥梁，设计良好的API可以显著提高开发效率和用户体验。在设计API时，需要注意以下几点：

RESTful风格：遵循RESTful设计原则，使API简洁明了。
版本控制：通过API版本控制，保证前后端的兼容性。
错误处理：设计统一的错误返回格式，方便前端处理错误。
文档化：使用Swagger等工具生成API文档，便于前端开发者理解和使用API。

2. 跨域问题

由于前后端分离部署在不同的域名或端口下，浏览器会有跨域请求限制。需要在后端配置CORS（跨域资源共享）来解决这一问题。

3. 安全性

前后端分离带来了一些新的安全挑战，需要特别注意以下方面：

身份验证和授权：通常使用JWT（JSON Web Token）进行用户身份验证和授权。
数据加密：敏感数据在传输过程中需要加密，避免被窃取。
CSRF防护：使用CSRF令牌防止跨站请求伪造攻击。

4. 构建和部署

前后端分离后，需要分别构建和部署前端和后端项目。可以使用CI/CD（持续集成/持续部署）工具实现自动化构建和部署，提高发布效率。

实例

1. API设计

假设我们有一个学生管理系统，后端使用Spring Boot，前端使用HTML、CSS和JavaScript。以下是一个简单的API设计：

后端（Spring Boot）

@RestController
@RequestMapping("/api/students")
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping("/{id}")
    public ResponseEntity<Student> getStudentById(@PathVariable Long id) {
        Student student = studentService.getStudentById(id);
        if (student != null) {
            return ResponseEntity.ok(student);
        } else {
            return ResponseEntity.notFound().build();
        }
    }

    @PostMapping
    public ResponseEntity<Student> createStudent(@RequestBody Student student) {
        Student createdStudent = studentService.createStudent(student);
        return ResponseEntity.status(HttpStatus.CREATED).body(createdStudent);
    }
}

前端（HTML、CSS、JavaScript）

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Management</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>Student Management</h1>
        <div>
            <label for="studentId">Student ID:</label>
            <input type="number" id="studentId">
            <button onclick="fetchStudent()">Get Student</button>
        </div>
        <div id="studentInfo"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

#app {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-top: 0;
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

button {
    padding: 10px 15px;
    background: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #0056b3;
}

JavaScript部分（script.js）：

function fetchStudent() {
    const studentId = document.getElementById('studentId').value;
    const studentInfoDiv = document.getElementById('studentInfo');

    fetch(`/api/students/${studentId}`)
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('Student not found');
            }
        })
        .then(student => {
            studentInfoDiv.innerHTML = `
                <p><strong>Name:</strong> ${student.name}</p>
                <p><strong>Age:</strong> ${student.age}</p>
                <p><strong>Gender:</strong> ${student.gender}</p>
            `;
        })
        .catch(error => {
            studentInfoDiv.innerHTML = `<p>${error.message}</p>`;
        });
}

2. CORS配置

在Spring Boot中配置CORS以允许前端访问后端API：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

3. 使用JWT进行身份验证

后端（Spring Boot）

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    @Autowired
    private AuthService authService;

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
        String token = authService.login(loginRequest);
        if (token != null) {
            return ResponseEntity.ok(new JwtResponse(token));
        } else {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid credentials");
        }
    }
}

前端（HTML、CSS、JavaScript）

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>Login</h1>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username">
            <label for="password">Password:</label>
            <input type="password" id="password">
            <button onclick="login()">Login</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）：

function login() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    fetch('/api/auth/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
    })
        .then(response => response.json())
        .then(data => {
            if (data.token) {
                localStorage.setItem('token', data.token);
                alert('Login successful');
            } else {
                alert('Invalid credentials');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

4. CI/CD集成

使用Jenkins或GitHub Actions等工具实现前后端项目的自动化构建和部署。以下是一个简单的GitHub Actions配置示例：

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up JDK 11
      uses: actions/setup-java@v2
      with:
        java-version: '11'

    - name: Build backend
      run: ./mvnw clean package

    - name: Build frontend
      run: |
        cd frontend
        npm install
        npm run build

    - name: Deploy
      run: |
        # 部署脚本
        scp -r backend/target/*.jar user@server:/path/to/backend
        scp -r frontend/dist/* user@server:/path/to/frontend