SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例
更新時間：2024年02月28日 10:58:19 作者：Blet-
在實際開發(fā)中,審核功能是一個非常常用的功能,本文就來介紹一下使用SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例,具有一定的參考價值,感興趣的可以了解一下
一、前言
在實際開發(fā)中，審核功能是一個非常常用的功能，例如管理后臺的文章審核等等。本篇博文將介紹如何基于SpringBoot+Vue的前后端分離技術實現(xiàn)審核功能。
二、項目準備
本項目使用的技術棧為：
- 前端：Vue+ElementUI
- 后端：SpringBoot+MySQL
首先，你需要在本地搭建好Vue和SpringBoot的開發(fā)環(huán)境，建議使用最新版本。
三、數(shù)據(jù)庫設計
本項目需要用到一個審核表，設計如下：
CREATE TABLE `audit` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主鍵', `title` varchar(50) NOT NULL COMMENT '標題', `content` text NOT NULL COMMENT '內(nèi)容', `status` tinyint(4) NOT NULL COMMENT '狀態(tài)，0-待審核，1-審核通過，2-審核不通過', `create_time` datetime NOT NULL COMMENT '創(chuàng)建時間', `update_time` datetime NOT NULL COMMENT '更新時間', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='審核表';
四、后端實現(xiàn)
1. 數(shù)據(jù)庫操作
首先，我們需要在后端設計一個操作數(shù)據(jù)庫的Dao層來實現(xiàn)對審核表的增刪改查操作。
@Repository
public interface AuditDao extends JpaRepository<Audit, Long> {
}
以上是使用Spring Data JPA實現(xiàn)的Dao層。
2. 業(yè)務邏輯
在Service層中，我們需要實現(xiàn)審核操作的相關邏輯：
@Service
public class AuditService {
@Autowired
private AuditDao auditDao;
/**
* 提交審核
*
* @param audit 審核實體類
* @return 審核實體類
*/
public Audit submitAudit(Audit audit) {
audit.setStatus(Constant.AUDIT_STATUS_WAIT); // 默認狀態(tài)為未審核
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 審核列表數(shù)據(jù)
*/
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. 接口實現(xiàn)
在Controller層中，我們需要實現(xiàn)審核相關接口的實現(xiàn)：
@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);
}
/**
* 審核通過
*
* @param auditId 審核ID
* @return 審核實體類
*/
@PostMapping("/auditPass")
public Audit auditPass(@RequestParam("auditId")Long auditId) {
return auditService.auditPass(auditId);
}
/**
* 審核不通過
*
* @param auditId 審核ID
* @return 審核實體類
*/
@PostMapping("/auditReject")
public Audit auditReject(@RequestParam("auditId") Long auditId) {
return auditService.auditReject(auditId);
}
/**
* 查詢審核列表
*
* @param pageNum 分頁頁碼
* @param pageSize 分頁大小
* @return 審核列表數(shù)據(jù)
*/
@GetMapping("/getAuditList")
public Page<Audit> getAuditList(@RequestParam("pageNum") int pageNum, @RequestParam("pageSize") int pageSize) {
return auditService.getAuditList(pageNum, pageSize);
}
}
這樣我們的后端實現(xiàn)就完成了。
五、前端實現(xiàn)
1. 頁面設計
在前端中，我們需要設計審核列表頁面和審核詳情頁面。審核列表頁面用來展示所有未審核通過的審核記錄，審核詳情頁面則用來展示審核詳情并提供審核通過和審核不通過的操作。
審核列表頁面設計如下：
<template>
<div>
<el-button type="primary" class="mb-md" @click="dialogFormVisible = true">提交審核</el-button>
<el-table :data="tableData" border stripe style="margin-left: -12px">
<el-table-column prop="id" label="ID" width="70"></el-table-column>
<el-table-column prop="title" label="標題" width="250"></el-table-column>
<el-table-column prop="content" label="內(nèi)容" width="580"></el-table-column>
<el-table-column prop="createTime" label="創(chuàng)建時間" width="170"></el-table-column>
<el-table-column prop="updateTime" label="更新時間" width="170"></el-table-column>
<el-table-column
prop="status"
label="狀態(tài)"
width="90"
:formatter="statusFormatter"
:cell-style="{textAlign: 'center'}"
></el-table-column>
<el-table-column
label="操作"
width="120"
:cell-style="{textAlign: 'center'}"
:render-header="renderHeader"
>
<template slot-scope="scope">
<el-button type="primary" size="mini" v-if="scope.row.status === 0" @click="handlePass(scope.row.id)">通過</el-button>
<el-button type="danger" size="mini" v-if="scope.row.status === 0" @click="handleReject(scope.row.id)">不通過</el-button>
<el-button type="info" size="mini" :disabled="scope.row.status !== 1" @click="handleView(scope.row.id)">查看詳情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
@current-change="getCurrentPage"
>
</el-pagination>
<el-dialog
title="提交審核"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
:before-close="handleDialogClose"
>
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item label="標題" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="內(nèi)容" prop="content">
<el-input v-model="form.content" type="textarea"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitAudit">提交</el-button>
<el-button @click="dialogFormVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog
title="審核詳情"
:visible.sync="viewDialogVisible"
:close-on-click-modal="false"
:before-close="handleDialogClose"
>
<div v-html="viewData.content"></div>
<el-divider content-position="center" style="margin-top: 20px;">審核結果</el-divider>
<el-alert
class="mt-md"
:title="viewData.status === 1 ? '審核通過' : '審核不通過'"
:type="viewData.status === 1 ? 'success' : 'error'"
:description="'審核時間：' + viewData.updateTime"
></el-alert>
<div style="text-align: center">
<el-button type="primary" @click="viewDialogVisible = false">關閉</el-button>
</div>
</el-dialog>
</div>
</template>
審核詳情頁面設計如下：
<template>
<div>
<div v-html="viewData.content"></div>
<el-divider content-position="center" style="margin-top: 20px;">審核結果</el-divider>
<el-alert
class="mt-md"
:title="viewData.status === 1 ? '審核通過' : '審核不通過'"
:type="viewData.status === 1 ? 'success' : 'error'"
:description="'審核時間：' + viewData.updateTime"
></el-alert>
<div style="text-align: center">
<el-button type="primary" @click="handleBack">返回</el-button>
</div>
</div>
</template>
2. 數(shù)據(jù)交互
然后我們需要通過Axios實現(xiàn)前端向后端的數(shù)據(jù)交互。
首先，我們定義一個api.js文件：
import axios from 'axios'
axios.defaults.baseURL = '/api'
// 審核操作
export function auditOp(opType, auditId) {
return axios.post(`/audit/${opType}`, {auditId})
}
// 獲取審核列表
export function getAuditList(pageNum, pageSize) {
return axios.get(`/audit/getAuditList?pageNum=${pageNum}&pageSize=${pageSize}`)
}
// 提交審核
export function submitAudit(audit) {
return axios.post('/audit/submitAudit', audit)
}
// 獲取審核詳情
export function getAuditDetail(auditId) {
return axios.get(`/audit/${auditId}`)
}
然后在頁面中使用這些api：
import * as api from '@/api'
export default {
name: 'AuditList',
data() {
return {
tableData: [],
total: 0,
currentPage: 1,
pageSize: 10,
dialogFormVisible: false,
viewDialogVisible: false,
viewData: {},
form: {
title: '',
content: ''
},
rules: {
title: [
{required: true, message: '請輸入標題', trigger: 'blur'}
],
content: [
{required: true, message: '請輸入內(nèi)容', trigger: 'blur'}
]
}
}
},
mounted() {
this.getAuditList(this.currentPage, this.pageSize)
},
methods: {
// 獲取審核列表
getAuditList(pageNum, pageSize) {
api.getAuditList(pageNum, pageSize)
.then(res => {
this.tableData = res.content
this.total = res.totalElements
})
},
// 審核通過
handlePass(id) {
this.$confirm('確定要通過該審核嗎？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
api.auditOp('auditPass', id)
.then(() => {
this.$message({type: 'success', message: '審核通過'})
this.getAuditList(this.currentPage, this.pageSize)
})
})
},
// 審核不通過
handleReject(id) {
this.$prompt('請輸入不通過原因', '提示', {
distinguishCancelAndClose: true,
cancelButtonText: '取消',
confirmButtonText: '確定'
}).then(({value}) => {
api.auditOp('auditReject', id)
.then(() => {
this.$message({type: 'success', message: '審核不通過'})
this.getAuditList(this.currentPage, this.pageSize)
})
})
},
// 查看詳情
handleView(id) {
api.getAuditDetail(id)
.then(res => {
this.viewData = res
this.viewDialogVisible = true
})
},
// 提交審核
submitAudit() {
this.$refs['form'].validate(valid => {
if (valid) {
api.submitAudit(this.form)
.then(() => {
this.$message({type: 'success', message: '提交審核成功'})
this.dialogFormVisible = false
this.getAuditList(this.currentPage, this.pageSize)
})
}
})
},
// 獲取當前分頁頁碼
getCurrentPage(page) {
this.currentPage = page
this.getAuditList(page, this.pageSize)
},
// 對話框關閉事件
handleDialogClose(done) {
this.$confirm('確定要關閉嗎？')
.then(() => {
done()
}).catch(() => {})
},
// 返回
handleBack() {
this.viewDialogVisible = false
},
// 狀態(tài)格式化
statusFormatter(row) {
if (row.status === 0) {
return '待審核'
} else if (row.status === 1) {
return '審核通過'
} else {
return '審核不通過'
}
},
// 表頭渲染
renderHeader() {
return '操作'
}
}
}
到此為止，我們的前端實現(xiàn)就完成了。
六、補充說明
1. 前后端分離架構
本項目采用的是前后端分離的架構模式，這個模式中前后端各自擁有自己的代碼庫，前端代碼負責渲染頁面和處理用戶交互，后端代碼負責處理數(shù)據(jù)邏輯和提供API接口。前端和后端通過API接口進行通信。這種架構模式的好處是可以很好地實現(xiàn)前后端分離，并且可以使開發(fā)效率更高。
2. 審核功能
審核功能是一個非常常用的功能，本文中實現(xiàn)了一個基本的審核功能，但實際開發(fā)中仍需要考慮更多的業(yè)務需求。例如：支持多種審核狀態(tài)、支持審核流程配置、支持審核人員配置等等。
七、總結
本篇博客介紹了如何基于SpringBoot+Vue的前后端分離技術實現(xiàn)審核功能。在實際開發(fā)中，這種前后端分離的架構模式可以提高開發(fā)效率和開發(fā)質(zhì)量，并且可以輕松實現(xiàn)業(yè)務擴展和維護。
到此這篇關于SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例的文章就介紹到這了,更多相關SpringBoot Vue審核內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
對one-to-one 關系進行延遲加載和其他關系相比稍微有些不同。many-to-one 的延遲加載是在配置文件的class 標簽2008-10-10
application.yml的格式寫法和pom.xml讀取配置插件方式
這篇文章主要介紹了application.yml的格式寫法和pom.xml讀取配置插件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Java中基于注解的代碼生成工具MapStruct映射使用詳解
MapStruct?作為一個基于注解的代碼生成工具,為我們提供了一種更加優(yōu)雅、高效的解決方案,本文主要為大家介紹了它的具體使用,感興趣的可以了解下2025-02-02
在Spring框架中,@Async注解用于聲明異步任務,可以修飾類或方法,使用@Async時,必須確保方法為public,且類為Spring管理的Bean,啟用異步任務需要在主類上添加@EnableAsync注解,默認線程池為SimpleAsyncTaskExecutor2024-09-09
這篇文章主要介紹了Java編程中void方法的學習教程,包括對void方法進行單元測試,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了解決tk mapper 通用mapper的bug問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了springboot整合多數(shù)據(jù)源配置,多數(shù)據(jù)源整合springboot+mybatis使用分包方式整合，springboot+druid+mybatisplus使用注解整合，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2021-12-12
這篇文章主要給大家介紹了關于RocketMQ獲取指定消息的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用RocketMQ具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
Logback是由log4j創(chuàng)始人設計的另一個開源日志組件,這篇文章主要介紹了logback的使用和logback.xml詳解(小結)，非常具有實用價值，需要的朋友可以參考下2018-11-11
Java中stream流處理實現(xiàn)數(shù)據(jù)分組合并
本文主要介紹了Java中stream流處理實現(xiàn)數(shù)據(jù)分組合并,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-03-03