项目完成
This commit is contained in:
commit
50fc0045e7
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
21
README.md
Normal file
21
README.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# 多模态文件管理系统前端工程 filemanage-frontend
|
||||||
|
|
||||||
|
## 初始化项目
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## 自定义项目配置
|
||||||
|
1.修改main.js下的后端api请求路径前缀BASE_URL
|
||||||
|
|
||||||
|
2.修改vue.config.js下的前端工程运行端口port
|
||||||
|
|
||||||
|
## 开发环境下启动
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
## 打包工程到生产环境部署
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
20320
package-lock.json
generated
Normal file
20320
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
47
package.json
Normal file
47
package.json
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"name": "filemanage-frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"axios": "^1.6.7",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"element-plus": "^2.6.1",
|
||||||
|
"vue": "^3.2.13",
|
||||||
|
"vue-router": "^4.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie 11"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/background.png
Normal file
BIN
public/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<!-- <title><%= htmlWebpackPlugin.options.title %></title>-->
|
||||||
|
<title>多模态文件管理系统</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
src/App.vue
Normal file
23
src/App.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 样式可以根据需要修改 */
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
307
src/components/FilePage.vue
Normal file
307
src/components/FilePage.vue
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 文件上传表单 -->
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:with-credentials="true"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
drag
|
||||||
|
>
|
||||||
|
<el-button size="small" type="primary">点击上传</el-button>
|
||||||
|
<template v-slot:tip>
|
||||||
|
<div class="el-upload__tip">或将文件拖到此处上传</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<el-divider></el-divider>
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="18">
|
||||||
|
<el-form ref="searchForm" :model="searchForm" >
|
||||||
|
<el-row>
|
||||||
|
<el-input v-model="searchForm.name" placeholder="请输入要查询的文件名" style="width: 240px; padding-right: 10px"></el-input>
|
||||||
|
<el-button type="primary" @click="getFiles" :icon="Search"></el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<!-- 批量操作按钮 -->
|
||||||
|
<el-button-group>
|
||||||
|
<el-button type="primary" @click="handleBatchDownload">批量下载</el-button>
|
||||||
|
<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 图片预览模态框 -->
|
||||||
|
<el-dialog :title="previewImage.name" v-model="previewVisible" width="50%" @close="handleCloseDialog" center>
|
||||||
|
<img :src="previewImage.image" style="width: 100%" alt="预览图片" />
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 文件列表 -->
|
||||||
|
<el-table
|
||||||
|
:data="files"
|
||||||
|
border
|
||||||
|
:v-loading="loading"
|
||||||
|
:default-sort="{ prop: 'name', order: 'ascending' }"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
:show-overflow-tooltip=true
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" type="index" />
|
||||||
|
<el-table-column label="文件名" prop="name" sortable>
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<span v-if="row.type === 0" @click="getPreviewImage(row)" style="color: blue">{{ row.name }}</span>
|
||||||
|
<span v-else>{{ row.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="文件大小" prop="size" sortable>
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
{{getFileSize(row.size)}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="type" label="文件类型" sortable>
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
{{ getFileType(row.type) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="最后更新时间" prop="updateTime" sortable></el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<el-button type="primary" size="small" @click="downloadFile(row)">下载</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:page-sizes="[5, 10, 20, 50]"
|
||||||
|
:total="total"
|
||||||
|
:background="true"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange">
|
||||||
|
</el-pagination>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {BASE_URL} from "@/main";
|
||||||
|
import axios from "axios";
|
||||||
|
import {ElMessage, ElMessageBox} from "element-plus";
|
||||||
|
import { Search } from "@element-plus/icons-vue"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
Search() {
|
||||||
|
return Search
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0,
|
||||||
|
|
||||||
|
selectedRows: [], // 存储选中的行数据
|
||||||
|
searchForm: {name: ''},
|
||||||
|
files: [], // 所有文件数据
|
||||||
|
loading: false, // 加载状态
|
||||||
|
|
||||||
|
previewVisible: false,
|
||||||
|
previewImage: {
|
||||||
|
name: '',
|
||||||
|
image: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadUrl: BASE_URL+'/file/upload',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCloseDialog() {
|
||||||
|
this.previewVisible =false;
|
||||||
|
this.previewImage = {
|
||||||
|
name: '',
|
||||||
|
image: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
//图片预览
|
||||||
|
getPreviewImage(file) {
|
||||||
|
axios.get(BASE_URL + '/file/preview/' + file.id, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
this.previewVisible = true;
|
||||||
|
this.previewImage.name = file.name;
|
||||||
|
this.previewImage.image = response.data.data;
|
||||||
|
} else {
|
||||||
|
ElMessage.error('预览失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 多选框选中状态变化时
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.selectedRows = selection; // 更新选中的行数据
|
||||||
|
},
|
||||||
|
|
||||||
|
handleBatchDownload() {
|
||||||
|
this.selectedRows.forEach(item => {
|
||||||
|
this.downloadFile(item);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleBatchDelete() {
|
||||||
|
let ids = [];
|
||||||
|
this.selectedRows.forEach(item => {
|
||||||
|
ids.push(item.id);
|
||||||
|
});
|
||||||
|
axios.put(BASE_URL+'/file'+'/1', ids, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('文件批量删除失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.getFiles();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.log(error);
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleUploadSuccess() {
|
||||||
|
this.getFiles();
|
||||||
|
},
|
||||||
|
beforeUpload() {
|
||||||
|
// 在这里可以添加一些文件上传前的逻辑，比如文件大小限制等
|
||||||
|
return true; // 返回 true 表示允许上传
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理每页显示条数变化
|
||||||
|
handleSizeChange(size) {
|
||||||
|
this.pageSize = size;
|
||||||
|
this.currentPage = 1; // 重置当前页码为1
|
||||||
|
this.getFiles();
|
||||||
|
},
|
||||||
|
// 处理当前页码变化
|
||||||
|
handleCurrentChange(page) {
|
||||||
|
this.currentPage = page;
|
||||||
|
this.getFiles();
|
||||||
|
},
|
||||||
|
handleDelete(file) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'确认要删除该文件吗(移入回收站)？',
|
||||||
|
'Warning',
|
||||||
|
{
|
||||||
|
confirmButtonText: '是',
|
||||||
|
cancelButtonText: '否',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.logicDeleteFile(file);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取文件列表数据
|
||||||
|
getFiles() {
|
||||||
|
this.loading = true; // 显示加载状态
|
||||||
|
let url = BASE_URL + '/file/page/'+this.currentPage+'/'+this.pageSize+'/0';
|
||||||
|
axios.get(url, {params:{name: this.searchForm.name}, withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
// this.files = response.data.data; // 设置文件列表数据
|
||||||
|
this.files = response.data.data.records; // 设置文件列表数据
|
||||||
|
this.total = response.data.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.error('文件列表获取失败', error);
|
||||||
|
ElMessage.error('文件列表获取失败，'+error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false; // 隐藏加载状态
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getFileSize(size) {
|
||||||
|
if(size/1024 < 1.0)
|
||||||
|
return size.toFixed(1)+'B';
|
||||||
|
if(size/(1024*1024) < 1.0)
|
||||||
|
return (size/(1024)).toFixed(1)+'KB';
|
||||||
|
if(size/(1024*1024*1024) < 1.0)
|
||||||
|
return (size/(1024*1024)).toFixed(1)+'MB';
|
||||||
|
return (size/(1024*1024*1024)).toFixed(1)+'GB';
|
||||||
|
},
|
||||||
|
getFileType(type) {
|
||||||
|
// 根据文件类型代码返回对应的文字描述
|
||||||
|
switch (type) {
|
||||||
|
case 0:
|
||||||
|
return '图片';
|
||||||
|
case 1:
|
||||||
|
return '视频';
|
||||||
|
case 2:
|
||||||
|
return '音频';
|
||||||
|
case 3:
|
||||||
|
return '文档';
|
||||||
|
default:
|
||||||
|
return '其他';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
downloadFile(file) {
|
||||||
|
// 下载文件
|
||||||
|
axios.get(BASE_URL+'/file/download/'+file.id, {
|
||||||
|
responseType: 'blob',
|
||||||
|
withCredentials: true
|
||||||
|
}).then(response => {
|
||||||
|
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', file.name);
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
// 下载完成后销毁 URL 对象
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
}).catch(error => {
|
||||||
|
console.log(error)
|
||||||
|
if(error.response.status === 404){
|
||||||
|
ElMessage.error('文件'+file.name+'下载失败，文件不存在或被删除');
|
||||||
|
this.getFiles();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ElMessage.error("请求失败："+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
logicDeleteFile(file) {
|
||||||
|
// 删除文件的操作
|
||||||
|
//console.log('删除文件:', file);
|
||||||
|
axios.put(BASE_URL+'/file/'+file.id+'/1', {}, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('文件'+file.name+'删除失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.getFiles();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.log(error);
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getFiles();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
126
src/components/HomePage.vue
Normal file
126
src/components/HomePage.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home-container">
|
||||||
|
<!-- 左上角个人信息简要和退出按钮 -->
|
||||||
|
<div class="user-info">
|
||||||
|
<span style="padding-right: 5px">{{ currentUser.username }}</span>
|
||||||
|
<el-button @click="logout" plain>退出</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 左侧菜单 -->
|
||||||
|
<el-aside width="200px" style="margin-top: 50px;">
|
||||||
|
<el-menu :default-active="currentMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
|
||||||
|
<el-menu-item index="myFiles">我的文件</el-menu-item>
|
||||||
|
<el-menu-item index="profile">个人中心</el-menu-item>
|
||||||
|
<el-menu-item index="recycleBin">回收站</el-menu-item>
|
||||||
|
<el-menu-item index="management" v-if="currentUser.isAdmin === 1">管理</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</el-aside>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<el-main>
|
||||||
|
<!-- 根据菜单切换展示不同内容 -->
|
||||||
|
<div v-if="currentMenu === 'myFiles'">
|
||||||
|
<FilePage/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="currentMenu === 'profile'">
|
||||||
|
<ProfilePage :currentUser="currentUser" @update:currentUser="updateUsername"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="currentMenu === 'recycleBin'">
|
||||||
|
<!-- 回收站内容 -->
|
||||||
|
<RecycleBinPage/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="currentMenu === 'management'">
|
||||||
|
<ManagementPage/>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
import {BASE_URL} from "@/main";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
import ProfilePage from '@/components/ProfilePage.vue'
|
||||||
|
import ManagementPage from '@/components/ManagementPage.vue'
|
||||||
|
import FilePage from '@/components/FilePage.vue'
|
||||||
|
import RecycleBinPage from '@/components/RecycleBinPage.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ProfilePage,
|
||||||
|
ManagementPage,
|
||||||
|
FilePage,
|
||||||
|
RecycleBinPage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentUser: {
|
||||||
|
email: '',
|
||||||
|
username: '',
|
||||||
|
isAdmin: 0,
|
||||||
|
storageUsed: 0,
|
||||||
|
storageTotal: 0
|
||||||
|
}, // 从服务端获取的用户信息
|
||||||
|
currentMenu: 'myFiles', // 当前选中的菜单
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleMenuSelect(index) {
|
||||||
|
this.currentMenu = index;
|
||||||
|
},
|
||||||
|
|
||||||
|
getUser() {
|
||||||
|
axios.get(BASE_URL+'/user', {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1) {
|
||||||
|
this.currentUser = response.data.data;
|
||||||
|
} else
|
||||||
|
ElMessage.error('用户信息获取失败，'+response.data.msg);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
// 实现登出逻辑，例如清除本地存储的用户信息等
|
||||||
|
axios.post(BASE_URL+'/user/logout', {}, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1)
|
||||||
|
this.$router.push({name: 'Login'})
|
||||||
|
else ElMessage.error('退出失败，'+response.data.msg)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//接受子组件传递的数据更新
|
||||||
|
updateUsername(newUsername){
|
||||||
|
this.currentUser.username = newUsername;
|
||||||
|
},
|
||||||
|
updateCloudStorageConfig(newConfig){
|
||||||
|
this.cloudStorageConfig = newConfig;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getUser();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
148
src/components/LoginPage.vue
Normal file
148
src/components/LoginPage.vue
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="background"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="welcome-title">欢迎使用文件管理系统</h1>
|
||||||
|
<el-form :model="loginForm" :rules="rules">
|
||||||
|
<el-form-item label="邮箱/用户名" prop="email">
|
||||||
|
<el-input v-model="loginForm.email" placeholder="请输入邮箱/用户名"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="password">
|
||||||
|
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="验证码" prop="captcha">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-input v-model="loginForm.captcha" placeholder="请输入验证码"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<img :src="captchaImageUrl" @click="refreshCaptcha" alt="验证码" style="cursor: pointer; width: 130px; height: 48px;">
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" class="login-button" @click="login">登录</el-button>
|
||||||
|
<el-button @click="goToRegister" plain>注册</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ElForm, ElFormItem, ElInput, ElButton, ElRow, ElCol, ElMessage } from 'element-plus';
|
||||||
|
import axios from "axios";
|
||||||
|
import { BASE_URL } from "@/main";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElButton,
|
||||||
|
ElRow,
|
||||||
|
ElCol
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.refreshCaptcha();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loginForm: {
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
captcha: '',
|
||||||
|
verKey: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
email: [
|
||||||
|
{ required: true, message: '请输入邮箱', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
captcha: [
|
||||||
|
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
captchaImageUrl: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login() {
|
||||||
|
if(!this.loginForm.email || !this.loginForm.password || !this.loginForm.captcha){
|
||||||
|
ElMessage.error('请填写必填项');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//console.log('登录', this.loginForm);
|
||||||
|
axios.post(BASE_URL + '/user/login', this.loginForm, {withCredentials:true})
|
||||||
|
.then(response => {
|
||||||
|
// 请求成功
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
//console.log('登录成功', response.data);
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
this.$router.push({name:'Home'});
|
||||||
|
} else if (response.data.code === 0) {
|
||||||
|
//console.log('登录失败', response.data);
|
||||||
|
ElMessage.error('登录失败，' + response.data.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// 请求失败
|
||||||
|
ElMessage.error('请求失败：'+ error);
|
||||||
|
// 根据错误信息进行处理，比如提示用户或者重试等
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshCaptcha() {
|
||||||
|
// 发送请求获取新的图片验证码
|
||||||
|
axios.get(BASE_URL + '/user/captcha')
|
||||||
|
.then(response => {
|
||||||
|
let data = JSON.parse(response.data.data);
|
||||||
|
this.loginForm.verKey = data.key;
|
||||||
|
this.captchaImageUrl = data.image;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('验证码获取异常：'+error);
|
||||||
|
});
|
||||||
|
//console.log('刷新验证码');
|
||||||
|
},
|
||||||
|
goToRegister() {
|
||||||
|
//console.log('跳转到注册页面');
|
||||||
|
this.$router.push({name:'Registry'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('/public/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 400px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
304
src/components/ManagementPage.vue
Normal file
304
src/components/ManagementPage.vue
Normal file
@ -0,0 +1,304 @@
|
|||||||
|
<template>
|
||||||
|
<h3 style="text-align: left">新增存储策略配置</h3>
|
||||||
|
<div style="text-align: left">
|
||||||
|
<el-radio-group v-model="storageType" @change="handleChange">
|
||||||
|
<!-- <el-radio :value="1">服务端本地存储</el-radio>-->
|
||||||
|
<el-radio :value="2">云存储(腾讯云)</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<!-- <el-button type="primary" @click="handleSave">新增</el-button>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="configs"
|
||||||
|
border
|
||||||
|
:v-loading="loading"
|
||||||
|
:show-overflow-tooltip=true
|
||||||
|
>
|
||||||
|
<el-table-column label="序号" type="index" />
|
||||||
|
<el-table-column label="存储策略名" prop="name" sortable width="120"></el-table-column>
|
||||||
|
<el-table-column label="策略类型" prop="type" sortable width="120">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
{{getConfigType(row.type)}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="配置信息" prop="config" sortable></el-table-column>
|
||||||
|
<el-table-column label="最后更新时间" prop="updateTime" sortable></el-table-column>
|
||||||
|
<el-table-column label="创建者" prop="creator" sortable width="140"></el-table-column>
|
||||||
|
<el-table-column label="更新者" prop="updater" sortable width="140"></el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<el-button v-if="row.isActive === 0" type="primary" size="small" @click="updateConfigStatus(row)">启用</el-button>
|
||||||
|
<el-button type="warning" size="small" @click="handleUpdate(row)">修改</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="腾讯云存储配置"
|
||||||
|
v-model="dialogVisible"
|
||||||
|
@close="handleCloseDialog"
|
||||||
|
>
|
||||||
|
<!-- 在对话框中输入配置项 -->
|
||||||
|
<el-form :model="formConfig" label-width="120px" :rules="rules">
|
||||||
|
<el-form-item label="存储策略名" prop="name">
|
||||||
|
<el-input v-model="formConfig.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Secret Id" prop="secretId">
|
||||||
|
<el-input v-model="formConfig.secretId"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Secret Key" prop="secretKey">
|
||||||
|
<el-input v-model="formConfig.secretKey"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Region Name" prop="regionName">
|
||||||
|
<el-input v-model="formConfig.regionName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Bucket Name" prop="bucketName">
|
||||||
|
<el-input v-model="formConfig.bucketName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Custom Url">
|
||||||
|
<el-input v-model="formConfig.customUrl"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<p> 自2024年1月1日起，腾讯云对象存储新创建的存储桶不支持使用存储桶默认域名（包括存储桶域名、静态网站域名、全球加速域名）在浏览器预览文件，而是直接下载。<a href="https://cloud.tencent.com/document/product/436/96243" target="_blank" referrerpolicy="unsafe-url">了解更多</a></p>
|
||||||
|
<p> 存储桶默认域名存在安全风险，可能暴露敏感信息，建议您为存储桶 配置自定义域名。详情请参见 <a href="https://cloud.tencent.com/document/product/436/102509" target="_blank" referrerpolicy="unsafe-url">存储桶切换自定义域名</a></p>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveCloudConfig">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="存储配置修改"
|
||||||
|
v-model="updateDialogVisible"
|
||||||
|
@close="handleCloseUpdateDialog"
|
||||||
|
>
|
||||||
|
<!-- 在对话框中输入配置项 -->
|
||||||
|
<el-form :model="formConfig" label-width="120px" :rules="rules">
|
||||||
|
<el-form-item label="存储策略名" prop="name">
|
||||||
|
<el-input v-model="formConfig.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Secret Id" prop="secretId">
|
||||||
|
<el-input v-model="formConfig.secretId" :disabled="true" @copy.prevent></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Secret Key" prop="secretKey">
|
||||||
|
<el-input v-model="formConfig.secretKey" :disabled="true" @copy.prevent></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Region Name" prop="regionName">
|
||||||
|
<el-input v-model="formConfig.regionName" :disabled="true" @copy.prevent></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Bucket Name" prop="bucketName">
|
||||||
|
<el-input v-model="formConfig.bucketName" :disabled="true" @copy.prevent></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Custom Url">
|
||||||
|
<el-input v-model="formConfig.customUrl"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="updateDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="updateStorageConfig">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
import {ElMessage, ElMessageBox} from "element-plus";
|
||||||
|
import {BASE_URL} from "@/main";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formConfig: {
|
||||||
|
name: '',
|
||||||
|
secretId: '',
|
||||||
|
secretKey: '',
|
||||||
|
regionName: '',
|
||||||
|
bucketName: '',
|
||||||
|
type: 1,
|
||||||
|
customUrl: ''
|
||||||
|
},
|
||||||
|
configs: [],
|
||||||
|
loading: false, // 加载状态
|
||||||
|
storageType: 1, // 默认选中服务端本地存储
|
||||||
|
dialogVisible: false, // 控制对话框显示隐藏
|
||||||
|
updateDialogVisible: false,// 控制修改对话框显示隐藏
|
||||||
|
updateId: '',//修改配置的id
|
||||||
|
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入存储策略名', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
secretId: [
|
||||||
|
{ required: true, message: '请输入Secret Id', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
secretKey: [
|
||||||
|
{ required: true, message: '请输入Secret Key', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
regionName: [
|
||||||
|
{ required: true, message: '请输入Region Name', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
bucketName: [
|
||||||
|
{ required: true, message: '请输入Bucket Name', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getStorageConfigs() {
|
||||||
|
this.loading = true;
|
||||||
|
axios.get(BASE_URL+'/oss', {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
this.configs = response.data.data;
|
||||||
|
} else {
|
||||||
|
ElMessage.error('配置信息获取失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getConfigType(type) {
|
||||||
|
if(type === 0)
|
||||||
|
return '阿里云';
|
||||||
|
else if(type === 1)
|
||||||
|
return '腾讯云';
|
||||||
|
else if(type === 2)
|
||||||
|
return '七牛云';
|
||||||
|
else return '本地';
|
||||||
|
},
|
||||||
|
|
||||||
|
handleChange(val) {
|
||||||
|
if (val === 2) {
|
||||||
|
this.dialogVisible = true; // 显示对话框
|
||||||
|
this.formConfig.type = 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// handleSave() {
|
||||||
|
// if (this.storageType === 2) {
|
||||||
|
// this.saveCloudConfig();
|
||||||
|
// } else {
|
||||||
|
// // 如果选择服务端本地存储，直接保存
|
||||||
|
// this.saveStorageConfig();
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
handleCloseDialog() {
|
||||||
|
// 关闭对话框时重置配置项
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.storageType = 1;
|
||||||
|
this.formConfig = {};
|
||||||
|
},
|
||||||
|
handleCloseUpdateDialog() {
|
||||||
|
// 关闭修改对话框时重置配置项
|
||||||
|
this.updateDialogVisible = false;
|
||||||
|
this.formConfig = {};
|
||||||
|
this.updateId = '';
|
||||||
|
},
|
||||||
|
|
||||||
|
handleDelete(row) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'确认要删除该存储配置吗？',
|
||||||
|
'Warning',
|
||||||
|
{
|
||||||
|
confirmButtonText: '是',
|
||||||
|
cancelButtonText: '否',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.deleteConfig(row);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteConfig(row) {
|
||||||
|
axios.delete(BASE_URL+'/oss/'+row.id, {withCredentials:true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
this.getStorageConfigs();
|
||||||
|
} else {
|
||||||
|
ElMessage.error('存储配置 '+row.name+' 删除失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.updateId = row.id;
|
||||||
|
this.formConfig.name = row.name;
|
||||||
|
if(row.config !== null) {
|
||||||
|
let config = JSON.parse(row.config);
|
||||||
|
this.formConfig.secretId = config.secretId;
|
||||||
|
this.formConfig.secretKey = config.secretKey;
|
||||||
|
this.formConfig.regionName = config.regionName;
|
||||||
|
this.formConfig.bucketName = config.bucketName;
|
||||||
|
this.formConfig.customUrl = config.customUrl;
|
||||||
|
}
|
||||||
|
this.updateDialogVisible = true;
|
||||||
|
},
|
||||||
|
updateStorageConfig() {
|
||||||
|
// 发送云存储配置到后端保存
|
||||||
|
axios.put(BASE_URL+'/oss/'+this.updateId, this.formConfig, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1) {
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
this.getStorageConfigs();
|
||||||
|
} else {
|
||||||
|
ElMessage.error('修改存储配置失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.handleCloseUpdateDialog();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
updateConfigStatus(row) {
|
||||||
|
axios.put(BASE_URL+'/oss/'+row.id+'/'+row.isActive, {}, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
this.getStorageConfigs();
|
||||||
|
} else {
|
||||||
|
ElMessage.error('修改存储配置失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
saveCloudConfig() {
|
||||||
|
// 发送云存储配置到后端保存
|
||||||
|
axios.post(BASE_URL+'/oss', this.formConfig, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1) {
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
this.getStorageConfigs();
|
||||||
|
} else {
|
||||||
|
ElMessage.error('保存云存储配置失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.handleCloseDialog();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getStorageConfigs();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
176
src/components/ProfilePage.vue
Normal file
176
src/components/ProfilePage.vue
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 个人中心内容 -->
|
||||||
|
<div>
|
||||||
|
<h3 style="text-align: left">个人信息</h3>
|
||||||
|
<p style="text-align: left">用户名：{{ currentUser.username }}</p>
|
||||||
|
<p style="text-align: left">邮箱：{{ currentUser.email }}</p>
|
||||||
|
<p style="text-align: left">当前使用存储空间：{{getSize(this.currentUser.storageUsed) + " / " + getSize(this.currentUser.storageTotal)}} </p>
|
||||||
|
</div>
|
||||||
|
<!-- 修改密码表单 -->
|
||||||
|
<div>
|
||||||
|
<h3 style="text-align: left">修改密码</h3>
|
||||||
|
<el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="80px" style="max-width: 400px;">
|
||||||
|
<el-form-item label="旧密码" prop="oldPassword" >
|
||||||
|
<el-input v-model="passwordForm.oldPassword" type="password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新密码" prop="newPassword">
|
||||||
|
<el-input v-model="passwordForm.newPassword" type="password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="确认密码" prop="confirmPassword">
|
||||||
|
<el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="updatePassword">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 修改用户名表单 -->
|
||||||
|
<div>
|
||||||
|
<h3 style="text-align: left">修改用户名</h3>
|
||||||
|
<el-form ref="usernameForm" :rules="rules" :model="usernameForm" label-width="80px" style="max-width: 400px;">
|
||||||
|
<el-form-item label="新用户名" prop="username">
|
||||||
|
<el-input v-model="usernameForm.username"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="updateUsername">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
import axios from "axios";
|
||||||
|
import {BASE_URL} from "@/main";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
currentUser: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
passwordForm: {
|
||||||
|
oldPassword: '',
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
},
|
||||||
|
usernameForm: {
|
||||||
|
username: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
rules: {
|
||||||
|
username: [{ required: true, message: '请输入新用户名', trigger: 'blur' }],
|
||||||
|
oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
|
||||||
|
newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
if (value === this.passwordForm.oldPassword) {
|
||||||
|
callback(new Error('新密码不能与旧密码相同'));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
if (value === this.passwordForm.newPassword) {
|
||||||
|
callback();
|
||||||
|
} else {
|
||||||
|
callback(new Error('两次输入的密码不一致'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getSize(size) {
|
||||||
|
if(size/1024 < 1.0)
|
||||||
|
return size.toFixed(1)+'B';
|
||||||
|
if(size/(1024*1024) < 1.0)
|
||||||
|
return (size/(1024)).toFixed(1)+'KB';
|
||||||
|
if(size/(1024*1024*1024) < 1.0)
|
||||||
|
return (size/(1024*1024)).toFixed(1)+'MB';
|
||||||
|
return (size/(1024*1024*1024)).toFixed(1)+'GB';
|
||||||
|
},
|
||||||
|
|
||||||
|
updatePassword() {
|
||||||
|
if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.newPassword) {
|
||||||
|
ElMessage.error('请填写必填项');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.passwordForm.newPassword !== this.passwordForm.confirmPassword){
|
||||||
|
ElMessage.error('两次输入的密码不一致');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.passwordForm.newPassword === this.passwordForm.oldPassword){
|
||||||
|
ElMessage.error('新密码不能与旧密码相同');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 发送修改密码请求
|
||||||
|
axios.put(BASE_URL + '/user/updatePassword', {
|
||||||
|
oldPassword: this.passwordForm.oldPassword,
|
||||||
|
newPassword: this.passwordForm.newPassword
|
||||||
|
}, { withCredentials: true })
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1) {
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
// 清空表单
|
||||||
|
this.passwordForm = {
|
||||||
|
oldPassword: '',
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
};
|
||||||
|
this.$router.push({name: 'Login'});
|
||||||
|
} else {
|
||||||
|
ElMessage.error('密码修改失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败：'+ error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateUsername() {
|
||||||
|
this.$refs.usernameForm.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
// 发送修改用户名请求
|
||||||
|
axios.put(BASE_URL + '/user/updateUsername', {
|
||||||
|
username: this.usernameForm.username
|
||||||
|
}, { withCredentials: true })
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1) {
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
// 更新当前用户信息
|
||||||
|
this.$emit('update:currentUser', this.usernameForm.username);
|
||||||
|
// this.currentUser.username = this.usernameForm.username;
|
||||||
|
// 清空表单
|
||||||
|
this.usernameForm = {
|
||||||
|
username: ''
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
ElMessage.error('用户名修改失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
} else ElMessage.error('请输入新用户名');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
259
src/components/RecycleBinPage.vue
Normal file
259
src/components/RecycleBinPage.vue
Normal file
@ -0,0 +1,259 @@
|
|||||||
|
<template>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="18">
|
||||||
|
<el-form ref="searchForm" :model="searchForm" >
|
||||||
|
<el-row>
|
||||||
|
<el-input v-model="searchForm.name" placeholder="请输入要查询的文件名" style="width: 240px; padding-right: 10px"></el-input>
|
||||||
|
<el-button type="primary" @click="getFiles" :icon="Search"></el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<!-- 批量操作按钮 -->
|
||||||
|
<el-button-group>
|
||||||
|
<el-button type="primary" @click="handleBatchRestore">批量恢复</el-button>
|
||||||
|
<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 文件列表 -->
|
||||||
|
<el-table
|
||||||
|
:data="files"
|
||||||
|
border
|
||||||
|
:v-loading="loading"
|
||||||
|
:default-sort="{ prop: 'name', order: 'ascending' }"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
:show-overflow-tooltip=true
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" type="index" />
|
||||||
|
<el-table-column label="文件名" prop="name" sortable></el-table-column>
|
||||||
|
<el-table-column label="文件大小" prop="size" sortable>
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
{{getFileSize(row.size)}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="type" label="文件类型" sortable>
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
{{ getFileType(row.type) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="最后更新时间" prop="updateTime" sortable></el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<el-button type="primary" size="small" @click="restoreFile(row)">恢复</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete(row)">彻底删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:page-sizes="[5, 10, 20, 50]"
|
||||||
|
:total="total"
|
||||||
|
:background="true"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange">
|
||||||
|
</el-pagination>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {ElMessage, ElMessageBox} from "element-plus";
|
||||||
|
import axios from "axios";
|
||||||
|
import {BASE_URL} from "@/main";
|
||||||
|
import {Search} from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
Search() {
|
||||||
|
return Search
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
|
||||||
|
selectedRows: [], // 存储选中的行数据
|
||||||
|
searchForm: {name: ''},
|
||||||
|
files: [], // 所有文件数据
|
||||||
|
loading: false, // 加载状态
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 处理每页显示条数变化
|
||||||
|
handleSizeChange(size) {
|
||||||
|
this.pageSize = size;
|
||||||
|
this.currentPage = 1; // 重置当前页码为1
|
||||||
|
this.getFiles();
|
||||||
|
},
|
||||||
|
// 处理当前页码变化
|
||||||
|
handleCurrentChange(page) {
|
||||||
|
this.currentPage = page;
|
||||||
|
this.getFiles();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 多选框选中状态变化时
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.selectedRows = selection; // 更新选中的行数据
|
||||||
|
},
|
||||||
|
|
||||||
|
handleBatchRestore() {
|
||||||
|
let ids = [];
|
||||||
|
this.selectedRows.forEach(item => {
|
||||||
|
ids.push(item.id);
|
||||||
|
});
|
||||||
|
axios.put(BASE_URL+'/file'+'/0', ids, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('文件批量恢复失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.getFiles();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.log(error);
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleBatchDelete() {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'确认要彻底删除这些文件吗？',
|
||||||
|
'Warning',
|
||||||
|
{
|
||||||
|
confirmButtonText: '是',
|
||||||
|
cancelButtonText: '否',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.batchPermanentDeleteFile();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDelete(file) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'确认要彻底删除该文件吗？',
|
||||||
|
'Warning',
|
||||||
|
{
|
||||||
|
confirmButtonText: '是',
|
||||||
|
cancelButtonText: '否',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.permanentDeleteFile(file);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取文件列表数据
|
||||||
|
getFiles() {
|
||||||
|
this.loading = true; // 显示加载状态
|
||||||
|
let url = BASE_URL + '/file/page/'+this.currentPage+'/'+this.pageSize+'/1';
|
||||||
|
axios.get(url, {params: {name: ''}, withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
// this.files = response.data.data; // 设置文件列表数据
|
||||||
|
this.files = response.data.data.records; // 设置文件列表数据
|
||||||
|
this.total = response.data.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.error('文件列表获取失败', error);
|
||||||
|
ElMessage.error('文件列表获取失败'+error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false; // 隐藏加载状态
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getFileSize(size) {
|
||||||
|
if(size/1024 < 1.0)
|
||||||
|
return size.toFixed(1)+'B';
|
||||||
|
if(size/(1024*1024) < 1.0)
|
||||||
|
return (size/(1024)).toFixed(1)+'KB';
|
||||||
|
if(size/(1024*1024*1024) < 1.0)
|
||||||
|
return (size/(1024*1024)).toFixed(1)+'MB';
|
||||||
|
if(size/(1024*1024*1024*1024) < 1.0)
|
||||||
|
return (size/(1024*1024*1024)).toFixed(1)+'GB';
|
||||||
|
},
|
||||||
|
getFileType(type) {
|
||||||
|
// 根据文件类型代码返回对应的文字描述
|
||||||
|
switch (type) {
|
||||||
|
case 0:
|
||||||
|
return '图片';
|
||||||
|
case 1:
|
||||||
|
return '视频';
|
||||||
|
case 2:
|
||||||
|
return '音频';
|
||||||
|
case 3:
|
||||||
|
return '文档';
|
||||||
|
default:
|
||||||
|
return '其他';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
restoreFile(file) {
|
||||||
|
// 恢复文件
|
||||||
|
//console.log('恢复文件:', file);
|
||||||
|
axios.put(BASE_URL+'/file/'+file.id+'/0', {}, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 0){
|
||||||
|
ElMessage.error('文件'+file.name+'恢复失败，'+response.data.msg);
|
||||||
|
} else {
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
}
|
||||||
|
this.getFiles();
|
||||||
|
}).catch(error => {
|
||||||
|
ElMessage.error("请求失败："+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
permanentDeleteFile(file) {
|
||||||
|
// 删除文件的操作
|
||||||
|
//console.log('删除文件:', file);
|
||||||
|
axios.delete(BASE_URL+'/file/'+file.id, {withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('文件'+file.name+'删除失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.getFiles();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.log(error);
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
batchPermanentDeleteFile() {
|
||||||
|
let ids = [];
|
||||||
|
this.selectedRows.forEach(item => {
|
||||||
|
ids.push(item.id);
|
||||||
|
});
|
||||||
|
axios.delete(BASE_URL+'/file', {data: ids, withCredentials: true})
|
||||||
|
.then(response => {
|
||||||
|
if(response.data.code === 1){
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('文件批量删除失败，'+response.data.msg);
|
||||||
|
}
|
||||||
|
this.getFiles();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//console.log(error);
|
||||||
|
ElMessage.error('请求失败：'+error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getFiles();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
176
src/components/RegistryPage.vue
Normal file
176
src/components/RegistryPage.vue
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="background"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="welcome-title">欢迎注册文件管理系统</h1>
|
||||||
|
<el-form :model="registerForm" :rules="rules" label-width="100px">
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="password">
|
||||||
|
<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="确认密码" prop="confirmPassword">
|
||||||
|
<el-input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="验证码" prop="verificationCode">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-input v-model="registerForm.verificationCode" placeholder="请输入验证码"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" style="padding-left: 10px">
|
||||||
|
<el-button type="primary" @click="sendVerificationCode" :disabled="sendingVerificationCode">{{ sendButtonLabel }}</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="register">注册</el-button>
|
||||||
|
<el-button @click="goToLogin" plain>返回登录</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
import { BASE_URL } from "@/main";
|
||||||
|
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, ElRow, ElCol } from 'element-plus';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElButton,
|
||||||
|
ElRow,
|
||||||
|
ElCol
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
registerForm: {
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
verificationCode: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||||
|
{type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur'}],
|
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||||
|
confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
if (value === this.registerForm.password) {
|
||||||
|
callback();
|
||||||
|
} else {
|
||||||
|
callback(new Error('两次输入的密码不一致'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
verificationCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
||||||
|
},
|
||||||
|
sendingVerificationCode: false,
|
||||||
|
sendButtonLabel: '获取验证码'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendVerificationCode() {
|
||||||
|
if (!this.registerForm.email) {
|
||||||
|
ElMessage.error('请填写邮箱');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用正则表达式来验证邮箱格式是否正确
|
||||||
|
const emailPattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
|
||||||
|
if (!emailPattern.test(this.registerForm.email)) {
|
||||||
|
ElMessage.error('请输入有效的邮箱地址');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sendingVerificationCode) return;
|
||||||
|
|
||||||
|
this.sendingVerificationCode = true;
|
||||||
|
this.sendButtonLabel = '发送中...';
|
||||||
|
|
||||||
|
axios.post(BASE_URL + '/user/sendVerCode', {email: this.registerForm.email})
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
//console.log('验证码发送成功', response.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，' + error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.sendingVerificationCode = false;
|
||||||
|
this.sendButtonLabel = '获取验证码';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
register() {
|
||||||
|
if(!this.registerForm.email || !this.registerForm.password || !this.registerForm.confirmPassword || !this.registerForm.verificationCode){
|
||||||
|
ElMessage.error('请填写必填项');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.registerForm.password !== this.registerForm.confirmPassword){
|
||||||
|
ElMessage.error('两次输入的密码不一致');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log('注册', this.registerForm);
|
||||||
|
axios.post(BASE_URL + '/user/registry', this.registerForm)
|
||||||
|
.then(response => {
|
||||||
|
if (response.data.code === 1) {
|
||||||
|
//console.log('注册成功', response.data);
|
||||||
|
ElMessage.success(response.data.data);
|
||||||
|
this.$router.push({name:'Login'});
|
||||||
|
} else if (response.data.code === 0) {
|
||||||
|
//console.log('注册失败', response.data);
|
||||||
|
ElMessage.error('注册失败，' + response.data.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
ElMessage.error('请求失败，'+error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToLogin() {
|
||||||
|
//console.log('跳转到登录页面');
|
||||||
|
this.$router.push({name:'Login'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('/public/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 400px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
src/main.js
Normal file
30
src/main.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import router from './router/router.js'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
export const BASE_URL = 'http://localhost:8080';
|
||||||
|
|
||||||
|
createApp(App).use(router).use(ElementPlus).mount('#app')
|
||||||
|
|
||||||
|
const debounce = (fn, delay) => {
|
||||||
|
let timer = null;
|
||||||
|
return function () {
|
||||||
|
let context = this;
|
||||||
|
let args = arguments;
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
fn.apply(context, args);
|
||||||
|
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const _ResizeObserver = window.ResizeObserver;
|
||||||
|
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
|
||||||
|
constructor(callback) {
|
||||||
|
callback = debounce(callback, 16);
|
||||||
|
super(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
46
src/router/router.js
Normal file
46
src/router/router.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
import LoginPage from '@/components/LoginPage.vue';
|
||||||
|
import RegistryPage from '@/components/RegistryPage.vue';
|
||||||
|
import HomePage from '@/components/HomePage.vue'
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Login',
|
||||||
|
component: LoginPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/registry',
|
||||||
|
name: 'Registry',
|
||||||
|
component: RegistryPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
name: 'Home',
|
||||||
|
component: HomePage,
|
||||||
|
meta: {requiresAuth: true}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
//console.log(document.cookie);
|
||||||
|
const isAuthenticated = document.cookie.includes('user'); // 检查 cookie 中是否包含 user
|
||||||
|
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
ElMessage.error('尚未登录，请勿非法访问');
|
||||||
|
next({ path: '/' }); // 如果没有登录，则跳转到登录页面
|
||||||
|
} else {
|
||||||
|
next(); // 已登录，继续访问目标页面
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next(); // 不需要验证登录，直接访问
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
17
vue.config.js
Normal file
17
vue.config.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true,
|
||||||
|
lintOnSave: false,
|
||||||
|
devServer: {
|
||||||
|
port: 8088,
|
||||||
|
client: {
|
||||||
|
overlay: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chainWebpack: (config) => {
|
||||||
|
config.plugin('define').tap((definitions) => {
|
||||||
|
definitions[0].__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
|
||||||
|
return definitions;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user