spring boot vue 项目结构基于SpringBoot和Vue的OA办公管理系统

导读今天介绍一个基于SpringBoot和Vue的OA办公管理系统，适合初学者拿来学习或者用作大作业、毕业设计的参考等等。使用的技术后端：Java语言，Spro....

今天介绍一个基于SpringBoot和Vue的OA办公管理系统，适合初学者拿来学习或者用作大作业、毕业设计的参考等等。

使用的技术

后端：Java语言，Sprongboot框架，MySQL数据库

前端：Vue

Java是一门面向对象的编程语言，不仅吸收了C 语言的各种优点，还摒弃了C 里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。

Vue是一套用于构建用户界面的渐进式Javascript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用（SPA）提供驱动。

实现的功能

管理员和员工两种角色，公告展示、项目进度展示、请假和请假审批、日志系统、会议管理等；

部分代码展示

<template><div><el-form :model="search" style="display:inline"><el-form-item><el-col :span="5"><el-date-pickerv-model="search.rzTime"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="选择日期"@change="dateChange"></el-date-picker></el-col><el-col :span="10"><el-button type="primary" size="small" icon="el-icon-search" @click="getData">查询</el-button><el-button type="primary" size="small" icon="el-icon-plus" @click="addRz">新增</el-button></el-col></el-form-item></el-form><el-table :data=tableData style="width: 100%;"><el-table-column prop="userName" label="记录人" width="120" sortable></el-table-column><el-table-column prop="rdnr" label="日志内容"></el-table-column><el-table-column prop="rzTime" label="记录时间" width="120" sortable></el-table-column></el-table><el-dialog title="新增日志" :visible.sync="dialogVisible"><el-form :model="add"><el-form-item label="日志内容"><el-input :rows="5" type="textarea" v-model="add.rdnr"></el-input></el-form-item><el-form-item><el-button type="primary" size="small" @click="submit">提交</el-button><el-button size="small" @click="cancel">取消</el-button></el-form-item></el-form></el-dialog></div></template><script>import { getLog, addLog } from ../api/apiexport default {data() {return {tableData: [],dialogVisible: false,logForm: {logArea: },search: {rzTime: },add: {rdnr: }}},mounted() {this.getData()},methods: {getData() {var obj = {rzTime: this.search.rzTime}getLog(obj).then((res => {this.tableData = res.data}))},dateChange(val) {this.search.rzTime = val},addRz() {this.dialogVisible = truethis.add.rdnr = },submit() {var user = sessionStorage.getItem(user);user = JSON.parse(user)var obj = {userId: user.userId,rzTime: new Date().toLocaleDateString(),rdnr: this.add.rdnr}addLog(obj).then((res) => {this.$message({ message: res.data.msg, type: success });})this.dialogVisible = falsethis.getData()},cancel() {this.dialogVisible = falsethis.add.rdnr = }},}</script>

获取源码请关注后私信“20220826”