当前位置：首页 > java >正文

CSV 字段映射小工具 Demo

java 2025/7/17 9:44:56

文章目录

- - 一、前言
  - 二、上代码
  - - 2.1 前端 Vue
    - 2.2 后端 SpringBoot
  - 三、运行
  - 四、优化版本1

一、前言

该工具功能：读取 CSV 文件的表头，可自定义数仓映射字段后保存成对应的 json 文件。该工具采用前后端分离，前端使用 Vue，后端使用 SpringBoot。

页面效果截图：

在这里插入图片描述
保存的 mapping.json 效果截图：

在这里插入图片描述
优化版本1：

在这里插入图片描述

二、上代码

目录结构：

在这里插入图片描述

2.1 前端 Vue

App.vue：

<template><div style="padding: 24px;"><h2>CSV字段映射工具</h2><input type="file" accept=".csv" @change="handleFileChange" /><div v-if="headers.length" style="margin-top: 24px;"><table border="1" cellpadding="8"><thead><tr><th>原字段名</th><th>映射到</th></tr></thead><tbody><tr v-for="col in headers" :key="col"><td>{{ col }}</td><td><input v-model="mapping[col]" placeholder="请输入映射字段名" /></td></tr></tbody></table><button style="margin-top: 16px;" @click="saveMapping">保存映射到后端</button></div></div>
</template><script setup>
import { ref } from 'vue'
import Papa from 'papaparse'
import axios from 'axios'const headers = ref([])
const mapping = ref({})function handleFileChange(e) {const file = e.target.files[0]if (!file) returnPapa.parse(file, {complete: (results) => {headers.value = results.data[0] || []mapping.value = {}headers.value.forEach(col => {mapping.value[col] = ''})}})
}async function saveMapping() {try {await axios.post('/api/save-mapping', mapping.value)alert('映射已保存！')} catch (e) {alert('保存失败')}
}
</script>

main.js：

import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

index.html：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSV字段映射工具</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

package.json：

{"name": "frontend","version": "1.0.0","private": true,"scripts": {"dev": "vite","build": "vite build","serve": "vite preview"},"dependencies": {"vue": "^3.4.0","axios": "^1.6.0","papaparse": "^5.4.1"},"devDependencies": {"@vitejs/plugin-vue": "^4.0.0","vite": "^4.0.0"}
}

vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': 'http://localhost:8080'}}
});

package-lock.json：

{"name": "frontend","version": "1.0.0","lockfileVersion": 3,"requires": true,"packages": {"": {"name": "frontend","version": "1.0.0","dependencies": {"axios": "^1.6.0","papaparse": "^5.4.1","vue": "^3.4.0"},"devDependencies": {"@vitejs/plugin-vue": "^4.0.0","vite": "^4.0.0"}},"node_modules/@babel/helper-string-parser": {"version": "7.27.1","resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz","integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==","license": "MIT","engines": {"node": ">=6.9.0"}},"node_modules/@babel/helper-validator-identifier": {"version": "7.27.1","resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz","integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==","license": "MIT","engines": {"node": ">=6.9.0"}},"node_modules/@babel/parser": {"version": "7.28.0","resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz","integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==","license": "MIT","dependencies": {"@babel/types": "^7.28.0"},"bin": {"parser": "bin/babel-parser.js"},"engines": {"node": ">=6.0.0"}},"node_modules/@babel/types": {"version": "7.28.1","resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz","integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==","license": "MIT","dependencies": {"@babel/helper-string-parser": "^7.27.1","@babel/helper-validator-identifier": "^7.27.1"},"engines": {"node": ">=6.9.0"}},"node_modules/@esbuild/android-arm": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz","integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==","cpu": ["arm"],"dev": true,"license": "MIT","optional": true,"os": ["android"],"engines": {"node": ">=12"}},"node_modules/@esbuild/android-arm64": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz","integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["android"],"engines": {"node": ">=12"}},"node_modules/@esbuild/android-x64": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz","integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["android"],"engines": {"node": ">=12"}},"node_modules/@esbuild/darwin-arm64": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz","integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["darwin"],"engines": {"node": ">=12"}},"node_modules/@esbuild/darwin-x64": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz","integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,"os": ["darwin"],"engines": {"node": ">=12"}},"node_modules/@esbuild/freebsd-arm64": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz","integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==","cpu": ["arm64"],"dev": true,"license": "MIT","optional": true,"os": ["freebsd"],"engines": {"node": ">=12"}},"node_modules/@esbuild/freebsd-x64": {"version": "0.18.20","resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz","integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==","cpu": ["x64"],"dev": true,"license": "MIT","optional": true,