SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例

更新時間：2024年02月28日 10:58:19 作者：Blet-

在實際開發(fā)中,審核功能是一個非常常用的功能,本文就來介紹一下使用SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例,具有一定的參考價值,感興趣的可以了解一下

一、前言

在實際開發(fā)中，審核功能是一個非常常用的功能，例如管理后臺的文章審核等等。本篇博文將介紹如何基于SpringBoot+Vue的前后端分離技術(shù)實現(xiàn)審核功能。

二、項目準(zhǔn)備

本項目使用的技術(shù)棧為：

前端：Vue+ElementUI
后端：SpringBoot+MySQL

首先，你需要在本地搭建好Vue和SpringBoot的開發(fā)環(huán)境，建議使用最新版本。

三、數(shù)據(jù)庫設(shè)計

本項目需要用到一個審核表，設(shè)計如下：

CREATE TABLE `audit` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主鍵',
  `title` varchar(50) NOT NULL COMMENT '標(biāo)題',
  `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è)計一個操作數(shù)據(jù)庫的Dao層來實現(xiàn)對審核表的增刪改查操作。

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

以上是使用Spring Data JPA實現(xiàn)的Dao層。

2. 業(yè)務(wù)邏輯

在Service層中，我們需要實現(xiàn)審核操作的相關(guā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)審核相關(guā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. 頁面設(shè)計

在前端中，我們需要設(shè)計審核列表頁面和審核詳情頁面。審核列表頁面用來展示所有未審核通過的審核記錄，審核詳情頁面則用來展示審核詳情并提供審核通過和審核不通過的操作。

審核列表頁面設(shè)計如下：

<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="標(biāo)題" 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="標(biāo)題" 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;">審核結(jié)果</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">關(guān)閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>

審核詳情頁面設(shè)計如下：

<template>
  <div>
    <div v-html="viewData.content"></div>
    <el-divider content-position="center" style="margin-top: 20px;">審核結(jié)果</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: '請輸入標(biāo)題', 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)
            })
        }
      })
    },
    // 獲取當(dāng)前分頁頁碼
    getCurrentPage(page) {
      this.currentPage = page
      this.getAuditList(page, this.pageSize)
    },
    // 對話框關(guān)閉事件
    handleDialogClose(done) {
      this.$confirm('確定要關(guān)閉嗎？')
        .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. 前后端分離架構(gòu)

本項目采用的是前后端分離的架構(gòu)模式，這個模式中前后端各自擁有自己的代碼庫，前端代碼負責(zé)渲染頁面和處理用戶交互，后端代碼負責(zé)處理數(shù)據(jù)邏輯和提供API接口。前端和后端通過API接口進行通信。這種架構(gòu)模式的好處是可以很好地實現(xiàn)前后端分離，并且可以使開發(fā)效率更高。

2. 審核功能

審核功能是一個非常常用的功能，本文中實現(xiàn)了一個基本的審核功能，但實際開發(fā)中仍需要考慮更多的業(yè)務(wù)需求。例如：支持多種審核狀態(tài)、支持審核流程配置、支持審核人員配置等等。

七、總結(jié)

本篇博客介紹了如何基于SpringBoot+Vue的前后端分離技術(shù)實現(xiàn)審核功能。在實際開發(fā)中，這種前后端分離的架構(gòu)模式可以提高開發(fā)效率和開發(fā)質(zhì)量，并且可以輕松實現(xiàn)業(yè)務(wù)擴展和維護。

到此這篇關(guān)于SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例的文章就介紹到這了,更多相關(guān)SpringBoot Vue審核內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例

目錄

一、前言

二、項目準(zhǔn)備

三、數(shù)據(jù)庫設(shè)計

四、后端實現(xiàn)

1. 數(shù)據(jù)庫操作

2. 業(yè)務(wù)邏輯

3. 接口實現(xiàn)

五、前端實現(xiàn)

1. 頁面設(shè)計

2. 數(shù)據(jù)交互

六、補充說明

1. 前后端分離架構(gòu)

2. 審核功能

七、總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

SpringBoot+Vue前后端分離實現(xiàn)審核功能的示例

目錄

一、前言

二、項目準(zhǔn)備

三、數(shù)據(jù)庫設(shè)計

四、后端實現(xiàn)

1. 數(shù)據(jù)庫操作

2. 業(yè)務(wù)邏輯

3. 接口實現(xiàn)

五、前端實現(xiàn)

1. 頁面設(shè)計

2. 數(shù)據(jù)交互

六、補充說明

1. 前后端分離架構(gòu)

2. 審核功能

七、總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

一、前言

二、項目準(zhǔn)備

三、數(shù)據(jù)庫設(shè)計

五、前端實現(xiàn)