mysql 怎么看 binary

原创

mob64ca12d1a59e 2024-04-20 05:26:40 ©著作权

文章标签 二进制数 User MySQL 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者mob64ca12d1a59e的原创作品，请联系作者获取转载授权，否则将追究法律责任

项目方案：基于MySQL的二进制数据查看器

简介

在实际的开发和运维过程中，我们经常需要查看MySQL中存储的二进制数据，例如图片、视频等。但是直接在MySQL命令行或者客户端工具中查看二进制数据并不直观，因此我们需要开发一个二进制数据查看器来更方便地查看和管理这些数据。

技术选型

后端：使用Java语言开发，使用Spring Boot框架提供RESTful API服务。
前端：使用React框架开发Web应用，实现用户界面交互。
数据库：使用MySQL数据库存储二进制数据。
其他：使用Git进行版本管理，使用Docker进行部署。

功能设计

用户登录：提供用户注册、登录功能，实现用户身份认证和权限管理。
上传二进制数据：用户可以上传二进制数据到MySQL数据库。
查看二进制数据：用户可以查看MySQL数据库中存储的二进制数据。
下载二进制数据：用户可以通过界面下载MySQL数据库中存储的二进制数据。

后端实现

// UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public ResponseEntity<?> register(@RequestBody User user) {
        userService.register(user);
        return ResponseEntity.ok("User registered successfully!");
    }

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody User user) {
        String token = userService.login(user);
        return ResponseEntity.ok(token);
    }
}

// BinaryDataController.java
@RestController
@RequestMapping("/api/binaryData")
public class BinaryDataController {

    @Autowired
    private BinaryDataService binaryDataService;

    @GetMapping("/{id}")
    public ResponseEntity<byte[]> getBinaryData(@PathVariable Long id) {
        byte[] data = binaryDataService.getBinaryDataById(id);
        return ResponseEntity.ok(data);
    }

    @PostMapping
    public ResponseEntity<?> uploadBinaryData(@RequestBody byte[] data) {
        Long id = binaryDataService.uploadBinaryData(data);
        return ResponseEntity.ok("Binary data uploaded successfully with ID: " + id);
    }
}

前端实现

// BinaryDataViewer.jsx
import React, { useState } from 'react';
import axios from 'axios';

function BinaryDataViewer() {
    const [data, setData] = useState(null);

    const fetchData = async (id) => {
        const response = await axios.get(`/api/binaryData/${id}`, { responseType: 'blob' });
        const blob = new Blob([response.data]);
        setData(URL.createObjectURL(blob));
    };

    return (
        <div>
            <button onClick={() => fetchData(1)}>Fetch Binary Data</button>
            {data && <img src={data} alt="Binary Data" />}
        </div>
    );
}

数据库设计

CREATE TABLE binary_data (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    data LONGBLOB NOT NULL
);

序列图

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Database

    User->>Frontend: 登录/注册
    Frontend->>Backend: 发送登录/注册请求
    Backend->>Database: 查询用户信息/添加用户信息
    Database-->>Backend: 返回结果
    Backend-->>Frontend: 返回结果

类图

classDiagram
    class User {
        id: Long
        username: String
        password: String
    }
    class BinaryData {
        id: Long
        data: byte[]
    }
    class UserService {
        register(User user)
        login(User user)
    }
    class BinaryDataService {
        getBinaryDataById(Long id)
        uploadBinaryData(byte[] data)
    }
    User <|-- UserService
    BinaryData <|-- BinaryDataService