简单的前后端数据交互_实现前后端数据交互的方法-优快云博客

简单的前后端数据交互

（注：新手小白，以下内容仅为个人理解）

前端框架：Vue

后端框架：Spring boot

大体上为三个步骤，分别为:

前后端部署
完成前端对后端的访问
实现后端对数据库的访问

访问

格式：

数据传输格式为JSON，采用Fetch API进行访问

import { ref } from 'vue';

const username = ref('');
const password = ref('');
const errorMessage = ref('');

const handleSubmit = async () => {
  try {
    const response = await fetch('http://localhost:8088/api/login', {//后端服务端口
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: username.value,
        password: password.value,
      }),//JSON格式定义
    });

跨域方法：

通过spring注解规定 CORS 响应头使前端代码可以通过5173端口对后端服务进行访问

@CrossOrigin(origins = "http://localhost:5173")

后端对数据库的访问（ORM框架选择）

1. MyBatis

MyBatis是一种半自动的 ORM 框架，通过 SQL 映射文件（XML 文件）将 Java 对象映射到关系型数据库中的表。它提供了强大的 SQL 映射功能和动态 SQL 语句生成，使开发人员可以更好地控制 SQL 语句的生成和执行。MyBatis 适合那些需要更高的 SQL 控制权和更多灵活性的项目。

2. Spring JDBC:

它是 Spring 框架的一部分，提供了访问关系型数据库的简单和直接的方式。它不需要任何 ORM 映射或配置文件，通过使用 JdbcTemplate 类，开发人员可以轻松地编写类型安全的 SQL 语句和查询结果映射。Spring JDBC 适合那些需要更直接的 JDBC 访问并且不需要高级 ORM 功能的项目

3. Spring Data JPA:

它是 Spring Data 子项目的一部分，提供了 JPA 规范的实现。JPA 是 Java 持久化 API 的标准，可以让开发人员将 Java 对象映射到关系型数据库中的表，同时提供了高级 ORM 功能，如缓存和关系映射。Spring Data JPA 通过提供一些简单的接口和默认实现，极大地简化了 JPA 的使用，并提供了多种数据访问的方式。Spring Data JPA 适合那些需要高级 ORM 功能和开发效率的项目。

前后端部署

前端部署

项目模板创建：

npm create vite@latest (使用vite，可创建vue3项目模板)
# 或 
npm init vue@latest (使用Vue CLI，可创建vue2、vu3项目模板)

代码编写
App.vue

<template>
  <div id="app">
    <Login />
  </div>
</template>

<script>
import Login from './components/Login.vue'; // 导入 Login 组件

export default {
  name: 'App',
  components: {
    Login, // 注册 Login 组件
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleSubmit">//绑定submit的点击触发事件
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');
const errorMessage = ref('');

const handleSubmit = async () => {
  try {
    const response = await fetch('http://localhost:8088/api/login', {//后端服务端口
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: username.value,
        password: password.value,
      }),//JSON格式定义
    });

    if (response.ok) {
      const message = await response.text();
      alert(message); // 登录成功提示
      // 可以在这里执行后续操作，例如导航到另一个页面
    } else {
      const errorText = await response.text();
      errorMessage.value = errorText; // 显示错误信息
    }
  } catch (error) {
    console.error('Error:', error);
    errorMessage.value = '登录请求失败，请稍后再试。';
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f7f7f7;
}
.form-group {
  margin-bottom: 15px;
}
.error-message {
  color: red;
}
</style>

部署前端项目

启动项目
npm run dev

后端部署

配置application

spring.application.name=dma
spring.datasource.url=jdbc:mysql://localhost:3306/dma?useUnicode=true&characterEncoding=UTF-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update

server.port=8088

AuthController.class

package com.example.dma.controller;

import com.example.dma.pojo.LoginRequest;
import com.example.dma.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.bind.annotation.CrossOrigin;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173")
public class AuthController {
    @Autowired
    private UserService userService;
    @PostMapping("/login")
    public ResponseEntity<String> login(@RequestBody LoginRequest loginRequest) {
        // 简单的逻辑检查，您可以用数据库验证替代
        boolean isValid = userService.validateUserCredentials(loginRequest.getUsername(), loginRequest.getPassword());
        if (isValid) {
            return ResponseEntity.ok("登录成功！");
        } else {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");
        }
    }
}

UserService.class

package com.example.dma.service;

import com.example.dma.pojo.User;
import com.example.dma.repository.UserRepository;
import jakarta.persistence.EntityManager;
import jakarta.persistence.PersistenceContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
    @PersistenceContext
    private EntityManager entityManager;

    @Autowired
    private UserRepository userRepository;

    public User addUser(User user) {
        return userRepository.save(user); // 保存用户到数据库
    }

    public User updateUser(User user) {
        return userRepository.save(user);
    }

    public User deleteUser(User user) {
        userRepository.delete(user);
        return user;
    }

    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    public boolean validateUserCredentials(String username, String password) {
        User user = userRepository.findByUsername(username); // 查找用户
        if (user != null) {
            return user.getPassword().equals(password); // 验证密码是否匹配
        }
        return false; // 用户未找到
    }


}