vue+springboot+element从mysql回显文件和表单数据并显示

如果你想要实现从 MySQL 数据库中获取文件和表单数据，并在前端页面中显示出来，那么你可以按照以下步骤进行操作：

1. 创建 MySQL 数据库表格，并将文件和表单数据存储在其中。

2. 使用 Spring Boot 创建 RESTful API 接口，从 MySQL 数据库中获取文件和表单数据。

3. 在 Vue.js 前端页面中使用 axios 库调用 Spring Boot 的 RESTful API 接口，获取数据，并将数据展示在页面上。

4. 使用 Element UI 框架中的组件来展示表单数据和文件数据。

下面是具体实现步骤：

1. 创建 MySQL 数据库表格

首先，你需要创建一个 MySQL 数据库表格，来存储文件和表单数据。可以参考以下示例表格：

CREATE TABLE `file` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `type` varchar(255) NOT NULL,
  `size` bigint(20) NOT NULL,
  `content` longblob NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

CREATE TABLE `form_data` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `age` int(11) NOT NULL,
  `gender` varchar(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

2. 使用 Spring Boot 创建 RESTful API 接口

在 Spring Boot 中，你可以使用 JPA 来访问数据库，获取文件和表单数据。以下是示例代码：

@RestController
@RequestMapping("/api")
public class FileController {

    @Autowired
    private FileRepository fileRepository;

    @Autowired
    private FormDataRepository formDataRepository;

    @PostMapping("/file")
    public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        String fileName = StringUtils.cleanPath(file.getOriginalFilename());
        FileModel fileModel = new FileModel(fileName, file.getContentType(), file.getSize(), file.getBytes());
        fileRepository.save(fileModel);
        return new ResponseEntity<>("File uploaded successfully", HttpStatus.OK);
    }

    @GetMapping("/file")
    public ResponseEntity<?> getAllFiles() {
        List<FileModel> files = fileRepository.findAll();
        return new ResponseEntity<>(files, HttpStatus.OK);
    }

    @GetMapping("/form-data")
    public ResponseEntity<?> getAllFormData() {
        List<FormDataModel> formDataList = formDataRepository.findAll();
        return new ResponseEntity<>(formDataList, HttpStatus.OK);
    }

    @PostMapping("/form-data")
    public ResponseEntity<?> createFormData(@RequestBody FormDataModel formDataModel) {
        formDataRepository.save(formDataModel);
        return new ResponseEntity<>("Form data created successfully", HttpStatus.OK);
    }
}

3. 在 Vue.js 前端页面中使用 axios 库调用 Spring Boot 的 RESTful API 接口

在 Vue.js 中，你可以使用 axios 库来发送 HTTP 请求，获取数据。以下是示例代码：

<template>
  <div>
    <el-table :data="formDataList" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="gender" label="Gender"></el-table-column>
    </el-table>
    <el-upload
      class="upload-demo"
      action="/api/file"
      :on-success="handleSuccess"
      :show-file-list="false"
    >
      <el-button slot="trigger" size="small" type="primary">Click to Upload</el-button>
      <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
    </el-upload>
    <el-table :data="fileList" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="type" label="Type"></el-table-column>
      <el-table-column prop="size" label="Size"></el-table-column>
      <el-table-column label="Action">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDownload(scope.row)">Download</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      formDataList: [],
      fileList: []
    }
  },
  mounted() {
    this.getFormDataList()
    this.getFileList()
  },
  methods: {
    getFormDataList() {
      axios.get('http://localhost:8080/api/form-data')
        .then(response => {
          this.formDataList = response.data
        })
        .catch(error => console.log(error))
    },
    getFileList() {
      axios.get('http://localhost:8080/api/file')
        .then(response => {
          this.fileList = response.data
        })
        .catch(error => console.log(error))
    },
    handleSuccess(response) {
      this.$message.success('File uploaded successfully')
    },
    handleDownload(row) {
      const blob = new Blob([row.content])
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.download = row.name
      link.click()
    }
  }
}
</script>

4. 使用 Element UI 框架中的组件来展示表单数据和文件数据

在 Vue.js 中，你可以使用 Element UI 框架中的组件来展示表单数据和文件数据。以上面的示例代码为例，我们使用了 el-table 和 el-upload 组件来展示表单数据和文件数据。你可以根据你的需求选择合适的组件来展示数据。