今天介绍一个基于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-picker
v-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/api'
export 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 = true
this.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 = false
this.getData()
},
cancel() {
this.dialogVisible = false
this.add.rdnr = ''
}
},
}
</script>
获取源码请关注后私信“20220826”
,
