签入版本
This commit is contained in:
@@ -141,14 +141,15 @@ export function getDictItemByCode(code) {
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<el-select v-model="formData.status" placeholder="请选择状态">
|
||||
<el-option
|
||||
<a-select v-model:value="formData.status" placeholder="请选择状态" style="width: 100%">
|
||||
<a-select-option
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -86,6 +86,8 @@
|
||||
## 前端错误处理
|
||||
|
||||
```typescript
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
// Axios 响应拦截器
|
||||
axios.interceptors.response.use(response => {
|
||||
const { code, msg, data } = response.data;
|
||||
@@ -101,12 +103,12 @@ axios.interceptors.response.use(response => {
|
||||
}
|
||||
|
||||
if (code === 403 || response.status === 403) {
|
||||
ElMessage.error(msg || '无权限');
|
||||
message.error(msg || '无权限');
|
||||
return;
|
||||
}
|
||||
|
||||
// 其他错误
|
||||
ElMessage.error(msg || '操作失败');
|
||||
message.error(msg || '操作失败');
|
||||
return Promise.reject(new Error(msg));
|
||||
});
|
||||
```
|
||||
|
||||
@@ -286,16 +286,16 @@ axios.interceptors.response.use(
|
||||
|
||||
// 权限不足
|
||||
if (code === 403 || response.status === 403) {
|
||||
ElMessage.error(msg || '无访问权限');
|
||||
message.error(msg || '无访问权限');
|
||||
return Promise.reject(new Error(msg));
|
||||
}
|
||||
|
||||
// 其他业务错误
|
||||
ElMessage.error(msg || '操作失败');
|
||||
message.error(msg || '操作失败');
|
||||
return Promise.reject(new Error(msg));
|
||||
},
|
||||
error => {
|
||||
ElMessage.error('网络错误');
|
||||
message.error('网络错误');
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
@@ -320,9 +320,9 @@ const handleImport = async (file) => {
|
||||
const res = await importUsers(file);
|
||||
// res = { count: 8, errors: [{ row: 3, name: "...", reason: "..." }] }
|
||||
if (res.errors.length === 0) {
|
||||
ElMessage.success(`成功导入 ${res.count} 条`);
|
||||
message.success(`成功导入 ${res.count} 条`);
|
||||
} else {
|
||||
ElMessage.warning(`成功 ${res.count} 条,失败 ${res.errors.length} 条`);
|
||||
message.warning(`成功 ${res.count} 条,失败 ${res.errors.length} 条`);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@@ -164,11 +164,11 @@ Authorization: Bearer <access_token>
|
||||
|
||||
```bash
|
||||
# curl
|
||||
curl http://localhost:8000/api/user/page \
|
||||
curl http://admin.laravel13.antdvue/api/user/page \
|
||||
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
|
||||
|
||||
# curl(带分页参数)
|
||||
curl "http://localhost:8000/api/user/page?pageNo=1&pageSize=10" \
|
||||
curl "http://admin.laravel13.antdvue/api/user/page?pageNo=1&pageSize=10" \
|
||||
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
|
||||
```
|
||||
|
||||
@@ -363,7 +363,7 @@ Authorization: Bearer <access_token>
|
||||
前端路由守卫支持通过 URL 参数传递 Token,适用于 SSO 单点登录场景:
|
||||
|
||||
```text
|
||||
http://localhost:8001/?token=<access_token>
|
||||
http://localhost:8002/?token=<access_token>
|
||||
```
|
||||
|
||||
**前端处理逻辑:**
|
||||
@@ -403,14 +403,17 @@ config.headers['Authorization'] = `Bearer ${token}`;
|
||||
// code === 401(ResultEnum.TIMEOUT)
|
||||
case ResultEnum.TIMEOUT:
|
||||
if (router.currentRoute.value?.name === PageEnum.BASE_LOGIN_NAME) return;
|
||||
ElMessageBox.confirm('登录身份已失效,请重新登录!', '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: '登录身份已失效,请重新登录!',
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
okText: '确定',
|
||||
onOk: () => {
|
||||
storage.clear();
|
||||
window.location.href = PageEnum.BASE_LOGIN; // '/login'
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
});
|
||||
break;
|
||||
```
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"ok": true,
|
||||
"msg": "上传成功",
|
||||
"data": {
|
||||
"fileUrl": "http://localhost:8000/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
|
||||
"fileUrl": "http://admin.laravel13.antdvue/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
|
||||
"filePath": "temp/20261002/123456_a1b2c3d4e5f6.jpg",
|
||||
"originalName": "photo.jpg",
|
||||
"fileSize": 102400,
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
| 字段 | 类型 | 说明 | 示例 |
|
||||
|------|------|------|------|
|
||||
| `fileUrl` | string | 可访问 URL(`FILE_DOMAIN_URL` 为空时等于相对路径) | `http://localhost:8000/uploads/temp/...` |
|
||||
| `fileUrl` | string | 可访问 URL(`FILE_DOMAIN_URL` 为空时等于相对路径) | `http://admin.laravel13.antdvue/uploads/temp/...` |
|
||||
| `filePath` | string | 相对存储路径(**提交表单建议用此字段**) | `temp/20261002/123456_a1b2....jpg` |
|
||||
| `originalName` | string | 原始文件名 | `photo.jpg` |
|
||||
| `fileSize` | number | 文件大小(字节) | `102400` |
|
||||
@@ -102,52 +102,56 @@ gif, jpg, jpeg, png, bmp, webp
|
||||
|
||||
## 前端使用
|
||||
|
||||
### Element Plus Upload 组件
|
||||
### AntDesign Upload 组件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- 上传文件(默认 type=file) -->
|
||||
<el-upload
|
||||
<a-upload
|
||||
:action="'/api/upload/uploadFile'"
|
||||
:headers="{ Authorization: `Bearer ${token}` }"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="beforeUpload"
|
||||
:show-upload-list="false"
|
||||
@change="handleUploadChange"
|
||||
>
|
||||
<el-button type="primary">上传文件</el-button>
|
||||
</el-upload>
|
||||
<a-button type="primary">上传文件</a-button>
|
||||
</a-upload>
|
||||
|
||||
<!-- 上传图片(指定 type=image) -->
|
||||
<el-upload
|
||||
<a-upload
|
||||
:action="'/api/upload/uploadFile?type=image'"
|
||||
:data="{ type: 'image' }"
|
||||
:headers="{ Authorization: `Bearer ${token}` }"
|
||||
:on-success="handleImageSuccess"
|
||||
:show-upload-list="false"
|
||||
accept="image/*"
|
||||
@change="handleImageChange"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
<a-button type="primary">上传图片</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const token = localStorage.getItem('access_token');
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt10M) {
|
||||
ElMessage.error('文件大小不能超过 10MB');
|
||||
message.error('文件大小不能超过 10MB');
|
||||
}
|
||||
return isLt10M;
|
||||
};
|
||||
|
||||
const handleUploadSuccess = (response) => {
|
||||
if (response.code === 0) {
|
||||
form.value.file = response.data.filePath; // 建议存相对路径
|
||||
const handleUploadChange = ({ file }) => {
|
||||
if (file.status === 'done' && file.response.code === 0) {
|
||||
form.value.file = file.response.data.filePath; // 建议存相对路径
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageSuccess = (response) => {
|
||||
if (response.code === 0) {
|
||||
form.value.avatar = response.data.filePath;
|
||||
const handleImageChange = ({ file }) => {
|
||||
if (file.status === 'done' && file.response.code === 0) {
|
||||
form.value.avatar = file.response.data.filePath;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -167,7 +171,7 @@ const res = await http.request({
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
// res.filePath = "temp/20261002/123456_a1b2....jpg"
|
||||
// res.fileUrl = "http://localhost:8000/uploads/temp/20261002/..."
|
||||
// res.fileUrl = "http://admin.laravel13.antdvue/uploads/temp/20261002/..."
|
||||
|
||||
// 上传图片(指定 type=image)
|
||||
const res2 = await http.request({
|
||||
@@ -199,25 +203,25 @@ await exampleAdd({
|
||||
```vue
|
||||
<template>
|
||||
<div class="avatar-upload">
|
||||
<el-avatar :src="form.avatar" :size="80" />
|
||||
<el-upload
|
||||
<a-avatar :src="form.avatar" :size="80" />
|
||||
<a-upload
|
||||
:action="'/api/upload/uploadFile?type=image'"
|
||||
:headers="{ Authorization: `Bearer ${token}` }"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:show-upload-list="false"
|
||||
accept="image/*"
|
||||
@change="handleAvatarChange"
|
||||
>
|
||||
<el-button size="small">更换头像</el-button>
|
||||
</el-upload>
|
||||
<a-button size="small">更换头像</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const form = ref({ avatar: '' });
|
||||
|
||||
const handleAvatarSuccess = (response) => {
|
||||
if (response.code === 0) {
|
||||
form.value.avatar = response.data.filePath;
|
||||
const handleAvatarChange = ({ file }) => {
|
||||
if (file.status === 'done' && file.response.code === 0) {
|
||||
form.value.avatar = file.response.data.filePath;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user