如何从SQL数据库获取姓氏(nom)与名字(prenom)到前端（Java后端）

一、Java后端实现（以Spring Boot为例，可适配其他Java Web框架） #

1. 实体类映射数据库表 #

确保实体类与用户表字段对应，包含nom（姓氏）和prenom（名字）：

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;

@Entity
@Table(name = "users") // 替换为你的数据库表名
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String nom;
    private String prenom;
    // 其他登录相关字段（如username、password）
    // 对应getter/setter
    public String getNom() { return nom; }
    public void setNom(String nom) { this.nom = nom; }
    public String getPrenom() { return prenom; }
    public void setPrenom(String prenom) { this.prenom = prenom; }
}

2. 数据访问层（Repository/DAO） #

定义查询方法，按需获取用户数据：

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
    // 根据登录用户名查询用户（适配你的登录校验逻辑）
    User findByUsername(String username);
}

3. 接口控制器（Controller） #

编写REST接口，返回封装后的姓名数据：

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;

import java.util.List;
import java.util.stream.Collectors;

@RestController
@RequestMapping("/api/users")
public class UserController {
    private final UserRepository userRepository;

    public UserController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    // 获取当前登录用户的姓名
    @GetMapping("/current/name")
    public ResponseEntity<UserNameVO> getCurrentUserName() {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        String loginUsername = auth.getName(); // 从登录上下文获取当前用户标识
        User user = userRepository.findByUsername(loginUsername);
        UserNameVO vo = new UserNameVO(user.getPrenom(), user.getNom());
        return ResponseEntity.ok(vo);
    }

    // 获取所有用户姓名（按需使用）
    @GetMapping("/all/names")
    public ResponseEntity<List<UserNameVO>> getAllUserNames() {
        List<User> users = userRepository.findAll();
        List<UserNameVO> voList = users.stream()
                .map(user -> new UserNameVO(user.getPrenom(), user.getNom()))
                .collect(Collectors.toList());
        return ResponseEntity.ok(voList);
    }

    // 封装返回数据的VO类，避免暴露实体全部字段
    static class UserNameVO {
        private String prenom;
        private String nom;

        public UserNameVO(String prenom, String nom) {
            this.prenom = prenom;
            this.nom = nom;
        }

        public String getPrenom() { return prenom; }
        public String getNom() { return nom; }
    }
}

二、前端实现（基于原生JavaScript） #

1. 添加HTML展示区域 #

在现有页面中插入姓名展示容器：

<!-- 展示当前登录用户姓名 -->
<div id="currentUserInfo"></div>

<!-- 展示所有用户姓名列表（按需添加） -->
<ul id="userNameList"></ul>

2. 发起请求并渲染数据 #

复用现有JS请求逻辑，调用后端接口并渲染：

// 获取当前登录用户姓名并渲染
async function loadCurrentUserName() {
    try {
        const response = await fetch('/api/users/current/name', {
            method: 'GET',
            credentials: 'include' // 携带登录会话，确保后端识别当前用户
        });
        if (!response.ok) throw new Error('请求失败');
        const data = await response.json();
        document.getElementById('currentUserInfo').textContent = `当前用户：${data.prenom} ${data.nom}`;
    } catch (err) {
        console.error('加载姓名失败:', err);
    }
}

// 获取所有用户姓名并渲染列表（按需调用）
async function loadAllUserNames() {
    try {
        const response = await fetch('/api/users/all/names');
        if (!response.ok) throw new Error('请求失败');
        const dataList = await response.json();
        const listEl = document.getElementById('userNameList');
        dataList.forEach(item => {
            const li = document.createElement('li');
            li.textContent = `${item.prenom} ${item.nom}`;
            listEl.appendChild(li);
        });
    } catch (err) {
        console.error('加载用户列表失败:', err);
    }
}

// 页面加载时执行（按需选择调用方法）
window.addEventListener('load', () => {
    loadCurrentUserName();
    // loadAllUserNames(); // 需要展示所有用户时取消注释
});

关键注意事项 #

• 跨域处理：若前后端分离部署，后端需配置CORS（如Spring Boot添加@CrossOrigin注解）
• 会话校验：确保接口能通过登录上下文正确识别当前用户，避免数据泄露
• 异常兼容：前后端都要添加异常捕获逻辑，提升页面容错性

内容的提问来源于stack exchange，提问作者soso