type
status
date
slug
summary
tags
category
icon
password

后端实现

创建文章dto

先实现创建文章DTO。
在dto文件夹下创建ArticleCreationDto类,代码如下:
 

创建文章的服务层

在服务层添加一个创建文章的接口并实现。
ArticleService中添加
在Impl下的ArticleServiceImpl中添加

创建文章的控制器

ArticleController类中添加
注意这个@SacheckLogin 它用于检测用户是否登录,在我们的设计中,创建文章不会是公共接口,它必须要用户登录后进行鉴权才可调用这个接口。如果未登录,则会报错,后端返回code 500。

全局异常处理

上文提到,如果鉴权失败则会返回异常,不管是何种失败,后端都会返回code 500,很显然没法对具体报错进行分类。
我们来实现一个全局异常处理来接管后端的报错。
创建一个handler软件包,在handler下创建一个GlobalExceptionHandler类,代码如下:
 
至此,后端部分已完成
 

前端实现

前端接口

在interface下的Article.ts中添加如下代码:
为什么少了userId,原因是后端是通过我们传递的token来获取userId的,不需要我们前端显式地传递。如果你仔细观察后端控制器的代码,userId是由StpUtil.getLoginIdAsInt()方法获取的。
 

对接api

在api下的Api.ts中,添加
 

请求拦截器

请求拦截器的作用就是在你发送一个请求前都要过一遍请求拦截器的代码。在这里,我们要实现鉴权,所以每次请求都要带上我们的token。token是通过登录时,后端传到前端保存好了的。
在api下的index.ts中,添加。
注意,务必把export default api放在最后
 

文章创建视图

在文件夹views下创建ArticleCreate.vue 代码如下:
 

路由

在文件夹router下打开index.ts
const router = createRouter里添加
 
另起一行添加路由守卫
路由守卫就是在进行路由前,统一都要运行一遍的代码,我们在这里用作检查用户是否登录,如果没有登录,那它就不能路由到创建文章这一视图
 
运行检查效果,结束。