Vue+Spring Boot办公自动化系统

【实验内容】

1、搭建Spring Boot开发环境，包括安装Java JDK、配置开发工具maven创建项目等。

2、用户管理功能实现：实现OA办公系统的用户管理功能，包括用户的注册、登录等操作。

3、实现管理员可以对单位员工、部门、职位等进行增删改查。

4、编写单元测试和集成测试代码，对办公自动化系统的各个功能模块进行测试，保证系统的质量和稳定性。

【实验目的】

办公自动化系统的目的是通过利用计算机和信息技术来提高办公效率、优化工作流程和提升组织的整体运作效能。办公自动化系统的实现可以提高工作效率；

优化工作流程：办公自动化系统可以帮助组织建立和优化工作流程，使之更加合理和高效。提升协作能力：办公自动化系统提供了协同工作的平台和工具，使得团队成员可以方便地共享信息、协作编辑文档、分配任务等。

【工具清单】

IntelliJ IDEA 2022.3.1： Java 语言的集成开发环境，具有智能代码助手、代码自动提示、重构等功能；

SQLyog 5.5.40：一个快速而简洁的图形化管理MySQL数据库的工具，它能够在任何地点有效地管理你的数据库；

MySQL 8.0.17：最流行的关系型数据库管理系统（关系数据库，是建立在关系数据库模型基础上的数据库，借助于集合代数等概念和方法来处理数据库中的数据）；

Vue 2.9.6：一套用于构建用户界面的渐进式JavaScript框架，采用组件化模式，提高代码复用率，声明式编码，提高开发效率。

【实验原理/思路】

1、Vue框架：Vue.js（通常简称为Vue）是一种流行的JavaScript前端框架，用于构建用户界面。Vue.js采用了组件化的开发方式，通过组合不同的组件来构建整个应用程序。以下是Vue框架的一些特点和功能：

        1)、响应式数据绑定：Vue使用双向数据绑定的机制，能够实时追踪数据的变化，并将变化反映到视图中，使得数据和视图保持同步。

        2)、组件化开发：Vue允许开发者将页面划分成独立的、可复用的组件，每个组件有自己的数据和逻辑。组件可以嵌套使用，提高了代码的可维护性和重用性。

        3)、虚拟DOM：Vue使用虚拟DOM来优化渲染性能。通过比较虚拟DOM和真实DOM之间的差异，Vue只更新需要修改的部分，减少了DOM操作的次数，提高了性能。

        4)、模板语法：Vue提供了简洁易用的HTML模板语法，可以方便地描述组件的结构和数据绑定。模板语法支持插值、指令、条件渲染、循环等操作，使得开发者可以更直观地构建用户界面。

        Vue框架易于学习和上手，具有灵活性和可扩展性，广泛应用于构建现代化的Web应用程序。它适用于开发单页应用（SPA）和多页应用，可以与其他库和框架无缝集成，提供了丰富的生态系统和社区支持。

2、MyBatis基本原理：MyBatis是一个Java持久层框架，可以帮助开发者简化数据库操作。MyBatis的基本原理是通过配置文件和映射文件来定义SQL语句和数据库表之间的映射关系，通过SqlSessionFactory创建SqlSession对象，然后通过映射器接口调用SQL语句执行数据库操作，最后将结果转换为Java对象返回给调用者。通过这种方式，开发者可以方便地进行数据库操作，减少了手动编写JDBC代码的工作量。

3、Spring Boot是一个开源的Java框架，它基于Spring框架，用于快速构建独立的、可部署的、生产级的Spring应用程序。它的原理主要包括以下几个方面：

        1)、自动配置：Spring Boot通过自动配置来减少开发者的配置工作。它根据应用程序的类路径和已有的配置来推断和自动配置Spring应用程序所需的各种组件。

        2)、内嵌服务器：Spring Boot使用内嵌的Servlet容器（如Tomcat、Jetty等）来运行应用程序。这样可以简化部署过程，无需依赖外部的Servlet容器。

        3)、Starter依赖：Spring Boot提供了一系列的Starter依赖，它们是预定义的一组依赖，用于快速集成常用的第三方库和框架。开发者只需添加相应的Starter依赖，Spring Boot就会自动处理依赖的版本和配置。

        4)、 自动装配：Spring Boot通过自动装配来配置和组装应用程序中的各种组件。它根据类路径上的依赖关系，自动发现并配置相应的组件。

        5)、命令行界面：Spring Boot提供了一个命令行界面（CLI），可以通过命令行执行各种Spring Boot相关的操作。开发者可以使用CLI来创建项目、运行应用程序等。

        总的来说，Spring Boot通过自动配置、内嵌服务器、Starter依赖、自动装配和命令行界面等机制，简化了Spring应用程序的开发、部署和运行过程，提高了开发效率和系统的可维护性。

【实验步骤及关键代码】

1、准备前端素材：

<div id="app">
    <template>
        <div>
            <div style="margin: 10px 0;">
                <el-button type="primary" @click="handAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
                <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='再想想' icon="el-icon-info"
                               icon-color="red"
                               title="确定要删除这些部门吗？" @confirm="delBatch">
                    <el-button type="danger" slot="reference">批量删除 <i class="el-icon-scissors"></i></el-button>
                </el-popconfirm>
                <el-button style="float: right" type="primary" @click="goHome">返回主页 <i
                        class="el-icon-circle-plus-outline"></i></el-button>

            </div>

            <el-table :data="tableData" border stripe header-cell-class-name="'headerBg'"
                      @selection-change="handleSelectionChange">
                <!-- 复选框 -->
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="id" label="ID" width="235"></el-table-column>
                <el-table-column prop="name" label="部门名称" width="500"></el-table-column>
                <el-table-column label="操作" width="1100" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i>
                        </el-button>
                        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='再想想'
                                       icon="el-icon-info" icon-color="red"
                                       title="确定要删除这个用户吗？" @confirm="del(scope.row.id)">
                            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i>
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 弹窗 -->
            <el-dialog title="部门信息" :visible.sync="dialogFormVisible" width="30%">
                <el-form label-width="80px" size="small">
                    <el-form-item label="部门名称">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </template>
</div>

2、完成DAO层，实现DepartmentMapper接口，具体功能为部门模块的功能，包括增删改查和批量删除等操作，使用MyBatis-plus框架读取xml格式的映射文件来实现，关键代码如下：

  public interface DepartmentMapper extends BaseMapper<Department> {
    Employee selectById(int id);
}

3、完成Service层，实现IDepartmentService接口，具体功能为部门模块的功能，包括增删改查和批量删除等操作，通过在实现类中调用DAO层的方法，完成对部门数据的处理，关键代码如下：

 public interface IDepartmentService extends IService<Department> {
    		Employee selectById(int id);
}

4、完成Controller层，实现对前端请求资源的处理，具体功能为部门模块的功能，包括增删改查和批量删除等操作，为每个功能编写相应的请求处理方法。通过调用service层方法实现，关键代码如下：

public class DepartmentController {

    @Resource
    private IDepartmentService departmentService;

    //查询全部
    @CrossOrigin
    @GetMapping("/list")
    public R findAll() {
        return R.success(Constants.CODE_200,departmentService.list());
    }

    //修改或新增
    @CrossOrigin
    @PostMapping("/save")
    public R save(@RequestBody Department department) {
        //新增或者更新
        return R.success(Constants.CODE_200,departmentService.saveOrUpdate(department));
    }

    //删除
    @CrossOrigin
    @DeleteMapping("/delete/{id}")
    public R delete(@PathVariable Integer id) {
        return R.success(Constants.CODE_200,departmentService.removeById(id));
    }

    //批量删除
    @CrossOrigin
    @PostMapping("/delete/batch")
    public R deleteBatch(@RequestBody List<Integer> ids) {
        return R.success(Constants.CODE_200,departmentService.removeBatchByIds(ids));
    }

    //根据id查询
    @GetMapping("/{id}")
    public R findOne(@PathVariable Integer id) {
        return R.success(Constants.CODE_200,departmentService.getById(id));
    }

    //分页查询
    @CrossOrigin
    @GetMapping("/page")
    public R findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize) {
        QueryWrapper<Department> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("id");
        return R.success(Constants.CODE_200,departmentService.page(new Page<>(pageNum, pageSize),queryWrapper));
    }

    //查询在id下的员工
    @GetMapping("/select/{id}")
    public R selectById(@PathVariable Integer id) {
        return R.success(Constants.CODE_200,departmentService.selectById(id));
    }
}

5、完成View层，设计职位管理页面的布局和样式，实现部门列表显示、添加部门、修改部门、删除部门功能，实现对Controller处理得到的数据前端展示，关键代码如下：

<script type="text/javascript">
    // 在页面加载好后就初始化vue实例,也可以在外面直接初始化
    var vm = new Vue({
        //元素绑定app
        el: "#app",
        data() {
            return {
                tableData: [],
                form: {},
                dialogFormVisible: false,
                multipleSelection: []
            }
        },
        created() {
            //请求分页查询数据
            this.load()
        },
        methods: {
            load() {
                axios.get("/dept/list")
                    .then(res => {
                        console.log(res)
                        console.log(res.data)
                        console.log(res.data.data)
                        this.tableData = res.data.data;
                    })
            },
            //新增部门
            save() {
                axios.post("/dept/save", this.form).then(res => {
                    console.log(res);
                    console.log(res.data.code);
                    if (res.data.code === '200') {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                    } else {
                        this.$message.error("保存失败")
                    }
                    this.load()
                })
            },
            //弹框
            handAdd() {
                this.dialogFormVisible = true
                this.form = {}
            },
            //编辑
            handleEdit(row) {
                this.form = row
                this.dialogFormVisible = true
                this.load()
            },
            //删除
            del(id) {
                axios.get("/dept/select/" + id).then(res => {
                    console.log("代为吗" + res.data.code)
                    console.log(res.data)
                    console.log(res.data.data)
                    if (res.data.data !== null) {
                        this.$message.error("删除失败，该部门下还有员工")
                    } else {
                        axios.delete("/dept/delete/" + id).then(resp => {
                            if (resp.data.code === '200') {
                                this.$message.success("删除成功")
                                this.load()
                            } else {
                                this.$message.error("删除失败")
                            }
                        })
                    }
                })
            },
            //复选框选中（为数组对象）
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            //批量删除
            delBatch() {
                //把对象数组变为纯ID数组
                let ids = this.multipleSelection.map(v => v.id)
                axios.post("/dept/delete/batch", ids).then(res => {
                    if (res.data.code === '200') {
                        this.$message.success("批量删除成功")
                    } else {
                        this.$message.error("批量删除失败")
                    }
                    this.load()
                })
            },
            goHome() {
                window.location.href = "home.html";
            }
        }
    })
</script>

【实验记录与结果分析】

功能1：登录页面

功能2：主页面

 

功能3：添加部门

功能4：修改部门

功能5：删除部门

功能6：批量删除

批量删除成功