【技巧速记】SSM从数据库获取照片信息并显示在前端页面中#idea#mysql#png

一，相关工具

mysql，idea，Tomact，SSM，mybatis

二，温馨提示

该教程仅适用于了解SSM框架并能自行配置好相关配置文件代码的人，初学者会看得一头雾水。由ai生成，只保证能成功运行，因为不是专门做这一个功能，请自行甄别关键代码。源码在文章顶部文件中。

三，效果展示

输入地址和条件从数据库获取对应的图片信息并显示在前端界面上

四，代码展示

1/8.SQL

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT,
  `password` varchar(100) DEFAULT NULL,
  `avatar` mediumblob COMMENT '头像',
  `name` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=888889 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

2/8.User

public class User {

    private Integer id;
    private String password;
    private String name;
    private byte[] avatar;

3/8.UserController

@RequestMapping(value = "/user/avatar/{id}", method = RequestMethod.GET)
    public String getUserAvatar(@PathVariable int id, Model model) {
        User user = userService.getUserById(id); // 或者直接调用 userMapper.getUserById(id)
        if (user != null && user.getAvatar() != null) {
            // 将头像数据以字节数组的形式传递给 JSP 页面
            // 注意：在 JSP 页面中显示图片时，您可能需要将字节数组转换为 Base64 编码的字符串
            String avatarBase64 = Base64.getEncoder().encodeToString(user.getAvatar());
            model.addAttribute("avatarBase64", avatarBase64);

        } else {
            // 处理用户不存在或头像为空的情况
            model.addAttribute("avatar", null);
        }
        // 返回 JSP 页面的名称
        return "userAvatar";
    }

4/8.UserMapper

User getUserById(Integer id);

5/8.UserMapper.xml

 <select id="getUserById" parameterType="int" resultType="com.photo.pojo.User">
        SELECT id, password, name, avatar
        FROM user
        WHERE id = #{id}
    </select>

6/8.UserService

 User getUserById(Integer id);

7/8.UserServiceImpl

 @Override
    public User getUserById(Integer id) {
        return userMapper.getUserById(id);
    }

8/8.User.jsp

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: yangw
  Date: 2024/12/19
  Time: 17:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>User Avatar</h1>
<img id="avatar" src="data:image/jpeg;base64,${avatarBase64}" alt="User Avatar">
<script type="text/javascript">
    // 假设从服务器传递过来的 avatar 数据已经被转换为 Base64 编码的字符串
    // 这里我们模拟一个 Base64 编码的字符串作为示例
    var avatarBase64 = "${fn:escapeXml(avatarBase64)}"; // 注意：这里 avatarBase64 应该是从服务器传递过来的 Base64 编码字符串
    if (avatarBase64) {
        document.getElementById('avatar').src = 'data:image/jpeg;base64,' + avatarBase64;
    } else {
        // 处理没有头像的情况
        document.getElementById('avatar').src = 'path/to/default/avatar.jpg';
    }
</script>
<!-- 注意：上面的 JavaScript 代码中的 avatarBase64 变量应该由服务器传递，并且需要确保它是安全的（避免 XSS 攻击） -->
<!-- 在实际应用中，您可能需要通过 AJAX 请求来获取 Base64 编码的头像数据，并在成功获取后更新 <img> 标签的 src 属性 -->
</body>
</html>