files_search 前端

2021-05-21 16:35:12 +08:00
parent d894163d54
commit 47619888b3
2 changed files with 128 additions and 0 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,16 @@
+<html>
+
+<head>
+	<meta charset="utf-8" />
+</head>
+
+<body>
+	<div id="app">
+		<component-search-files></component-search-files>
+	</div>
+</body>
+<script src="vue.js"></script>
+<script src="axios.min.js"></script>
+<script src="index.js"></script>
+
+</html>
--- a/web/index.js
+++ b/web/index.js
@@ -0,0 +1,112 @@
+const app = Vue.createApp({
+	data() {
+		return {
+			search_filenames: '',
+			download_total: 0,
+			download_loaded: 0,
+		}
+	},
+	methods: {
+	},
+})
+
+app.component('component-file', {
+	props: ['file'],
+	template: `
+<td>{{ file.id }}</td>
+<td>{{ file.filename }}</td>
+<td>{{ computed_readable_size }}</td>
+<td><button @click="download_file(file)">{{ computed_download_status }}</button></td>
+`,
+	data() {
+		return {
+			download_loaded: 0,
+		}
+	},
+	methods: {
+		download_file(file) {
+			axios({
+				url: '/api/v1/get_file',
+				method: 'POST',
+				responseType: 'blob', // important
+				data: {
+					id: file.id,
+				},
+				onDownloadProgress: ProgressEvent => {
+					console.log(ProgressEvent.loaded)
+					this.download_loaded = ProgressEvent.loaded
+				}
+			}).then((response) => {
+				const url = window.URL.createObjectURL(new Blob([response.data]));
+				const link = document.createElement('a');
+				link.href = url;
+				link.setAttribute('download', file.filename);
+				document.body.appendChild(link);
+				link.click();
+			})
+		},
+	},
+	computed: {
+		computed_download_status() {
+			if (this.download_loaded === 0) {
+				return 'Download'
+			} else {
+				return Math.round(this.download_loaded / this.file.filesize * 100) + '%'
+			}
+		},
+		computed_readable_size() {
+			let filesize = this.file.filesize
+			if (filesize < 1024) {
+				return filesize
+			}
+			if (filesize < 1024 * 1024) {
+				return Math.round(filesize / 1024) + 'K'
+			}
+			if (filesize < 1024 * 1024 * 1024) {
+				return Math.round(filesize / 1024 / 1024) + 'M'
+			}
+			if (filesize < 1024 * 1024 * 1024 * 1024) {
+				return Math.round(filesize / 1024 / 1024 / 1024) + 'G'
+			}
+		},
+	},
+})
+
+app.component('component-search-files', {
+	template: `
+<input type="text" name="filename" v-model="search_filenames" />
+<input type="button" value="Search" @click="search_files(this)" />
+<table border="1">
+	<thead>
+		<tr>
+			<th>ID</th>
+			<th>Filename</th>
+			<th>Size</th>
+			<th>Action</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr v-for="file in files">
+			<component-file :file=file></component-file>
+		</tr>
+	</tbody>
+</table>
+`,
+	data() {
+		return {
+			files: [],
+		}
+	},
+	methods: {
+		search_files(app) {
+			axios.post('http://localhost:8080/api/v1/search_files', {
+				filename: app.search_filenames,
+				limit: 10,
+				offset: 0,
+			}).then(function(response) {
+				app.files = response.data.files
+			})
+		},
+	},
+})
+app.mount('#app')