前后端分离实现审核功能

一、前言

在实际开发中,审核功能是一个非常常用的功能,例如管理后台的文章审核等等。本篇博文将介绍如何基于SpringBoot+Vue的前后端分离技术实现审核功能。

二、项目准备

本项目使用的技术栈为:

  • 前端:Vue+ElementUI
  • 后端:SpringBoot+MySQL

首先,你需要在本地搭建好Vue和SpringBoot的开发环境,建议使用最新版本。

三、数据库设计

本项目需要用到一个审核表,设计如下:

CREATE TABLE `audit` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `title` varchar(50) NOT NULL COMMENT '标题',
  `content` text NOT NULL COMMENT '内容',
  `status` tinyint(4) NOT NULL COMMENT '状态,0-待审核,1-审核通过,2-审核不通过',
  `create_time` datetime NOT NULL COMMENT '创建时间',
  `update_time` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='审核表';

四、后端实现

1. 数据库操作

首先,我们需要在后端设计一个操作数据库的Dao层来实现对审核表的增删改查操作。

@Repository
public interface AuditDao extends JpaRepository<Audit, Long> {
   
}

以上是使用Spring Data JPA实现的Dao层。

2. 业务逻辑

在Service层中,我们需要实现审核操作的相关逻辑:

@Service
public class AuditService {
   

    @Autowired
    private AuditDao auditDao;

    /**
     * 提交审核
     *
     * @param audit 审核实体类
     * @return 审核实体类
     */
    public Audit submitAudit(Audit audit) {
   
        audit.setStatus(Constant.AUDIT_STATUS_WAIT); // 默认状态为未审核
        audit.setCreateTime(LocalDateTime.now());
        audit.setUpdateTime(LocalDateTime.now());
        return auditDao.save(audit);
    }

    /**
     * 审核通过
     *
     * @param auditId 审核ID
     * @return 审核实体类
     */
    public Audit auditPass(Long auditId) {
   
        Audit audit = auditDao.findById(auditId).orElse(null);
        if (audit == null) {
   
            throw new RuntimeException("审核ID不存在!");
        }
        audit.setStatus(Constant.AUDIT_STATUS_PASS);
        audit.setUpdateTime(LocalDateTime.now());
        return auditDao.save(audit);
    }

    /**
     * 审核不通过
     *
     * @param auditId 审核ID
     * @return 审核实体类
     */
    public Audit auditReject(Long auditId) {
   
        Audit audit = auditDao.findById(auditId).orElse(null);
        if (audit == null) {
   
            throw new RuntimeException("审核ID不存在!");
        }
        audit.setStatus(Constant.AUDIT_STATUS_REJECT);
        audit.setUpdateTime(LocalDateTime.now());
        return auditDao.save(audit);
    }

    /**
     * 查询审核列表
     *
     * @param pageNum  分页页码
     * @param pageSize 分页大小
     * @return 审核列表数据
     */
    public Page<Audit> getAuditList(int pageNum, int pageSize) {
   
        return auditDao.findAll(PageRequest.of(pageNum - 1, pageSize, Sort.by(Sort.Order.desc("createTime"), Sort.Order.desc("id"))));
    }
}
3. 接口实现

在Controller层中,我们需要实现审核相关接口的实现:

@RestController
@RequestMapping("/audit")
public class AuditController {
   

    @Autowired
    private AuditService auditService;

    /**
     * 提交审核
     *
     * @param audit 审核实体类
     * @return 审核实体类
     */
    @PostMapping("/submitAudit")
    public Audit submitAudit(@RequestBody Audit audit) {
   
        return auditService.submitAudit(audit);
    }

    /**
     * 审核通过
     *
     * 
### 若依框架前后端分离实现审核功能 #### 后端配置与开发 为了实现在若依框架中的审核功能,首先需要在后端创建相应的服务层逻辑。这涉及到修改 `SecurityConfig` 文件以适应新的业务需求。 ```java // SecurityConfig.java 中新增方法支持特定于审核操作的安全策略设置 @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/audit/**").hasAuthority("AUDITOR") // 设置只有拥有 AUDITOR 权限的角色可以访问 /audit 路径下的资源 ... } ``` 接着,在控制器层面定义处理审核请求的具体API接口[^2]: ```java @RestController @RequestMapping("/api/audits") public class AuditController { @Autowired private IAuditService auditService; /** * 提交待审项目 */ @PostMapping("/submit") public ResponseEntity<?> submitAudit(@RequestBody AuditRequest request){ try{ Boolean result = auditService.submitForReview(request); if(result != null && result){ return new ResponseEntity<>(HttpStatus.CREATED); }else{ return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR); } }catch (Exception e){ log.error(e.getMessage(),e); throw new RuntimeException("提交失败"); } } /** * 获取所有待审列表 */ @GetMapping("/pendingList") public List<AuditItem> getPendingAudits(){ return auditService.findPendingItems(); } // 更多关于审核的操作... } ``` #### 前端页面设计 前端部分则主要依赖 Vue.js 和 Element UI 组件库构建交互界面。对于审核模块而言,通常会有一个专门的表格用来展示所有的待审项,并允许管理员通过点击按钮来进行批准或拒绝的动作。 ```html <template> <div id="app"> <!-- 使用 el-table 展示待审记录 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="status" label="状态"></el-table-column> <el-table-column fixed="right" label="操作" width="180"> <template slot-scope="scope"> <el-button type="text" size="small">查看</el-button> <el-button type="primary" size="mini" @click="handleApprove(scope.row)">同意</el-button> <el-button type="danger" size="mini" @click="handleReject(scope.row)">驳回</el-button> </template> </el-table-column> </el-table> <!-- 添加分页组件以便更好地管理大量数据 --> <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"/> </div> </template> <script> export default { data() { return { tableData: [], // 存储从服务器获取到的数据 total: 0, // 数据总量 listQuery: { page: 1, limit: 20 }, // 分页参数初始化 }; }, methods:{ handleApprove(row){ /* 处理同意 */}, handleReject(row){ /* 处理驳回 */} }, created() { this.fetchData(); // 页面加载完成后立即调用 fetchData 方法刷新表格内容 } }; </script> ``` 上述代码片段展示了如何利用Vue.js和Element UI快速搭建起一个简单的审核系统前端视图结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沙漠真有鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值