1
package com.example.demo.dto;
2

3
import lombok.Data;
4

5
import java.io.Serial;
6
import java.io.Serializable;
7

8
/**
9
 * 用于接收前端创建文章请求的DTO
10
 */
11
@Data
12
public class ArticleCreationDto implements Serializable {
13
    @Serial
14
    private static final long serialVersionUID = 1L;
15

16
    private String title;
17
    private String content;
18
    private Integer userId;
19
}

1
/**
2
 * 创建新文章。作者ID从后端认证上下文获取并传入。
3
 * @param creationDto 包含文章标题、内容的DTO。
4
 * @param userId 作者的用户ID。
5
 * @return 成功创建的文章实体。
6
 */
7
Article createArticle(ArticleCreationDto creationDto, Integer userId);

1
@Override
2
public Article createArticle(ArticleCreationDto creationDto, Integer userId) {
3
    // **修改：添加 userId 参数**
4
    Article article = new Article();
5
    // 将 DTO 中的 title 和 content 复制到 Article 实体
6
    BeanUtils.copyProperties(creationDto, article);
7

8
    // **核心修改：设置从 Sa-Token 获取的 userId**
9
    article.setUserId(userId);
10

11
    // 如果你没有启用 MetaObjectHandler，请手动设置这些字段的值
12
    article.setCreateTime(LocalDateTime.now());
13
    article.setUpdateTime(LocalDateTime.now());
14
    article.setViewCount(0);      // 默认浏览量为0
15
    article.setStatus(1);         // 默认设置为已发布 (1)
16

17
    boolean saveSuccess = save(article);
18

19
    if (!saveSuccess) {
20
        throw new RuntimeException("文章创建失败");
21
    }
22

23
    return article;
24
}

1
/**
2
 * 创建新文章。
3
 * @param creationDto 包含文章标题、内容、作者ID的DTO。
4
 * @return 统一响应体，包含创建成功的文章信息。
5
 */
6
@PostMapping("/create")
7
@SaCheckLogin // 确保用户已登录
8
public SaResult createArticle(@RequestBody ArticleCreationDto creationDto) {
9
    // 直接获取登录ID并转换为 Integer 类型，更简洁安全
10
    Integer userId = StpUtil.getLoginIdAsInt();
11
    System.out.println("当前登录用户ID: " + userId);
12
    // 将 DTO 和 userId 传递给 Service 层
13
    Article newArticle = articleService.createArticle(creationDto, userId);
14
    return SaResult.ok("文章创建成功").setData(newArticle);
15
}

1
package com.example.demo.handler; // 推荐放在 handler 包下
2

3
import cn.dev33.satoken.exception.NotLoginException;
4
import cn.dev33.satoken.exception.NotPermissionException;
5
import cn.dev33.satoken.exception.NotRoleException;
6
import cn.dev33.satoken.util.SaResult;
7
import org.springframework.web.bind.annotation.ExceptionHandler;
8
import org.springframework.web.bind.annotation.RestControllerAdvice;
9

10
/**
11
 * 全局异常处理类
12
 */
13
@RestControllerAdvice // 这是一个组合注解，包含 @ControllerAdvice 和 @ResponseBody
14
public class GlobalExceptionHandler {
15

16
    // --- Sa-Token 异常处理 ---
17

18
    /**
19
     * 处理：未登录异常
20
     * NotLoginException 会根据具体的未登录类型（如：没有token、token无效、token过期、被顶下线等）抛出
21
     */
22
    @ExceptionHandler(NotLoginException.class)
23
    public SaResult handlerNotLoginException(NotLoginException e) {
24
        String msg = "";
25
        if (NotLoginException.NOT_TOKEN.equals(e.getType())) {
26
            msg = "未提供 Token，请登录后重试";
27
        } else if (NotLoginException.INVALID_TOKEN.equals(e.getType())) {
28
            msg = "Token 无效，请重新登录";
29
        } else if (NotLoginException.TOKEN_TIMEOUT.equals(e.getType())) {
30
            msg = "登录已过期，请重新登录"; // 这里使用“登录已过期”更友好
31
        } else if (NotLoginException.BE_REPLACED.equals(e.getType())) {
32
            msg = "您的账号在其他设备登录，请重新登录";
33
        } else if (NotLoginException.KICK_OUT.equals(e.getType())) {
34
            msg = "您的账号已被踢下线，请重新登录";
35
        } else if (NotLoginException.TOKEN_FREEZE.equals(e.getType())) {
36
            msg = "您的账号已被冻结，请稍后再试";
37
        } else {
38
            msg = "用户未登录或登录状态失效，请重新登录"; // 兜底消息
39
        }
40

41
        System.err.println("Sa-Token 未登录异常: " + msg + " - 异常类型: " + e.getType());
42

43
        // 返回 Sa-Token 异常自带的错误码 (例如 10101) 给前端
44
        return SaResult.error(msg).setCode(e.getCode());
45
    }
46

47
    /**
48
     * 处理：缺少权限异常 (@SaCheckPermission)
49
     */
50
    @ExceptionHandler(NotPermissionException.class)
51
    public SaResult handlerNotPermissionException(NotPermissionException e) {
52
        System.err.println("Sa-Token 权限不足异常: " + e.getMessage());
53
        return SaResult.error("权限不足：" + e.getMessage()).setCode(e.getCode());
54
    }
55

56
    /**
57
     * 处理：缺少角色异常 (@SaCheckRole)
58
     */
59
    @ExceptionHandler(NotRoleException.class)
60
    public SaResult handlerNotRoleException(NotRoleException e) {
61
        System.err.println("Sa-Token 角色不足异常: " + e.getMessage());
62
        return SaResult.error("无此角色：" + e.getMessage()).setCode(e.getCode());
63
    }
64

65
    // --- 通用异常处理 ---
66

67
    /**
68
     * 处理：其他所有未被前面特定 @ExceptionHandler 捕获的异常
69
     */
70
    @ExceptionHandler(Exception.class)
71
    public SaResult handlerException(Exception e) {
72
        System.err.println("捕获到未处理异常: " + e.getMessage());
73
        e.printStackTrace(); // 打印堆栈信息，便于调试和排查问题
74
        return SaResult.error("服务器内部错误，请联系管理员！").setCode(500); // 返回 500 状态码
75
    }
76
}

1
export interface ArticleCreationDto {
2
    title: string;
3
    content: string;
4
}

1
/**
2
 * 创建新文章。
3
 * @param data 文章创建数据 (标题、内容、作者ID)
4
 * @returns Promise<Article> 返回创建成功的文章实体
5
 */
6
export function createArticle(data: ArticleCreationDto): Promise<Article> {
7
    // 你的 request 实例可能叫 request.post 或 api.post
8
    return api.post<Result<Article>, Article>('/article/create', data);
9
}

1
api.interceptors.request.use(
2
  config => {
3
    // 1. 从 localStorage 获取到的原始 token 字符串 (实际上是 JSON 字符串)
4
    const tokenJsonString = localStorage.getItem('token');
5

6
    // 2. 如果 tokenJsonString 存在且不为空字符串或 "null"
7
    if (tokenJsonString && tokenJsonString !== '' && tokenJsonString !== 'null') {
8
      try {
9
        // 3. 将 JSON 字符串解析成 JavaScript 对象
10
        const tokenObject: saToken = JSON.parse(tokenJsonString);
11

12
        // **核心修改：从解析后的对象中取出真正的 token 字符串**
13
        // 你的日志显示 tokenValue 就在这个对象里
14
        const realToken = tokenObject.tokenValue;
15

16
        // 4. 如果真实 token 存在，就添加到请求头中
17
        if (realToken) {
18
          config.headers.satoken = `Bearer ${realToken}`;
19
        }
20
      } catch (e) {
21
        // 如果 JSON.parse 失败（例如，存储的不是有效的 JSON 字符串）
22
        // 或者 tokenObject.tokenValue 不存在
23
        console.error('解析 token 或获取 tokenValue 失败:', e);
24
        // 你可以选择在这里给用户一个提示，例如：
25
        // ElMessage.error('获取认证信息失败，请尝试重新登录。');
26
      }
27
    }
28

29
    return config; // 必须返回 config 对象
30
  },
31
  error => {
32
    console.error('请求拦截器错误:', error);
33
    return Promise.reject(error);
34
  }
35
);

1
<template>
2
    <TheHeader />
3
    <div class="create-article-container">
4
        <h1>创建新文章</h1>
5

6
        <el-form :model="articleForm" :rules="rules" ref="articleFormRef" label-width="80px" class="article-form">
7
            <el-form-item label="标题" prop="title">
8
                <el-input v-model="articleForm.title" placeholder="请输入文章标题"></el-input>
9
            </el-form-item>
10

11
            <el-form-item label="内容" prop="content">
12
                <el-input type="textarea" v-model="articleForm.content" :rows="10" placeholder="请输入文章内容"></el-input>
13
            </el-form-item>
14

15
            <el-form-item>
16
                <el-button type="primary" @click="submitForm">立即创建</el-button>
17
                <el-button @click="resetForm">重置</el-button>
18
                <el-button @click="goBack">返回文章列表</el-button>
19
            </el-form-item>
20
        </el-form>
21
    </div>
22
</template>
23

24
<script lang="ts" setup>
25
import { reactive, ref } from 'vue';
26
import { ElMessage, ElNotification, } from 'element-plus';
27
import type { FormInstance, FormRules } from 'element-plus'
28
import { useRouter } from 'vue-router';
29
import { createArticle } from '@/api/Api'; // 导入新的 API 方法
30
import TheHeader from '@/components/TheHeader.vue';
31

32
const router = useRouter();
33

34
// 表单数据模型
35
const articleForm = reactive({
36
    title: '',
37
    content: '',
38
});
39

40
// 表单校验规则
41
const articleFormRef = ref<FormInstance>(); // 用于获取表单实例，进行校验
42
const rules = reactive<FormRules>({
43
    title: [
44
        { required: true, message: '请输入文章标题', trigger: 'blur' },
45
        { min: 3, max: 50, message: '标题长度在 3 到 50 个字符', trigger: 'blur' },
46
    ],
47
    content: [
48
        { required: true, message: '请输入文章内容', trigger: 'blur' },
49
        { min: 10, message: '内容不能少于 10 个字符', trigger: 'blur' },
50
    ]
51
});
52

53
// 提交表单
54
const submitForm = async () => {
55
    if (!articleFormRef.value) return;
56

57
    try {
58
        // **核心修改：validate 方法直接返回 Promise，无需传入回调函数来获取有效性**
59
        // 如果校验通过，Promise 会 resolve
60
        // 如果校验不通过，Promise 会 reject
61
        await articleFormRef.value.validate();
62

63
        // 如果代码执行到这里，说明表单校验通过
64
        const response = await createArticle(articleForm);
65

66
        ElNotification({
67
            title: '成功',
68
            message: '文章创建成功！',
69
            type: 'success',
70
        });
71

72
        resetForm();
73
        console.log('创建成功的文章:', response);
74

75
    } catch (fields) {
76
        // **如果校验不通过，validate Promise 会 reject，并在这里捕获错误信息**
77
        // fields 参数在这里是 ValidateFieldsError 类型，包含了所有校验失败的字段信息
78
        console.error('表单校验失败:', fields);
79
        ElMessage.warning('请检查表单填写是否完整和正确！');
80
    }
81
};
82

83
// 重置表单
84
const resetForm = () => {
85
    if (!articleFormRef.value) return;
86
    articleFormRef.value.resetFields(); // 重置并清除校验状态
87
};
88

89
// 返回文章列表页
90
const goBack = () => {
91
    router.push('/article/list');
92
};
93
</script>
94

95
<style scoped>
96
.create-article-container {
97
    padding: 20px;
98
    max-width: 700px;
99
    margin: 20px auto;
100
    background-color: #fff;
101
    border-radius: 8px;
102
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
103
}
104

105
h1 {
106
    text-align: center;
107
    color: #333;
108
    margin-bottom: 30px;
109
}
110

111
.article-form {
112
    padding: 20px;
113
}
114

115
.el-form-item {
116
    margin-bottom: 22px;
117
}
118

119
/* 调整 input-number 的宽度 */
120
.el-input-number {
121
    width: 100%;
122
}
123
</style>

1
{
2
    path: '/article/create',
3
    name: 'ArticleCreate',
4
    component: () => import('@/views/ArticleCreate.vue'),
5
    meta: {
6
        requiresAuth: true
7
    }
8
}

1
router.beforeEach((to, from, next) => {
2
    // 检查目标路由是否需要登录权限
3
    if (to.meta.requiresAuth) {
4
        const token = localStorage.getItem('token'); // 检查本地是否有 token
5
        const curUser = localStorage.getItem('curUser'); // 检查本地是否有用户信息
6

7
        if (token && curUser) {
8
            // 用户已登录，放行
9
            next();
10
        } else {
11
            // 用户未登录，给出提示并跳转到登录页
12
            ElMessage.warning('请先登录才能访问此页面！');
13
            next({
14
                path: '/login', // 跳转到你的登录页
15
                query: { redirect: to.fullPath } // 将当前路径作为查询参数，登录成功后可以跳转回来
16
            });
17
        }
18
    } else {
19
        // 路由不需要登录，直接放行
20
        next();
21
    }
22
});