heimoshuiyu/msw-open-music
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

files_search 前端

Browse Source
This commit is contained in:
黑墨水鱼
2021-05-21 16:35:12 +08:00
parent d894163d54
commit 47619888b3
2 changed files with 128 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/index.html Normal file
View File

@@ -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>

112
web/index.js Normal file
View File

@@ -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')