springboot+vue大学生就业离校信息管理平台（毕设）

2021年3月31，完成了我的大学本科毕业设计。写个博客留恋一下。如果有需要请留言评论或私信
一、使用技术

1、前端
（1）、vue全家桶
（2）、element：主题样式框架
（3）、echart作数据可视化
（4）、fantasic-admin框架

2、后端
（1）、springboot依赖集成
（2）、mybatis项目数据集成，项目为了效率因素，引入了mybatis-generator。
（3）、springSecurity安全框架。

3、数据库：mysql

二、毕设发光点

1、后端安全验证，后端安全验证完全按照springSecurity标准来，配置用户角色和权限，配置登录提示，用户使用是否过期和是否被禁用！
2、效率工程，由于毕设在开发过程中，发现很多重复性的工作很没意义，所以就考虑到用其他东西来提升效率，（1）首先是mybatis的代码自动生成，而我本身是使用的gradle来作为依赖集成库，所以在开发的时候网上很不好找资料，在逐渐的摸索过程中最终还是集成出来。（2）、第二个就是前端的组件抽离，由于毕设基本都是增删改查业务，导致一个表格在展示的时候和分页等业务相扑相成的，单个写又很麻烦，于是我就抽离成了我至今最满意的一个组件

	<template>
	  <div>
	       <el-table
	            :data="tableList"
	            border
	            highlight-current-row
	            empty-text="暂无数据"
	            style="width: 100%;">
	            <!-- <template slot="empty">
	                <i class="el-icon-phone"></i>
	                <div class="noCart">
	                    当前数据为空~~~
	                </div>
	            </template> -->
	        <el-table-column v-for="(item,key) in tableKey"
	                     :key="key"
	                     :prop="item.name"
	                     :label="item.value"
	                     show-overflow-tooltip
	                     sortable></el-table-column>
	        <el-table-column
	            fixed="right"
	            label="操作">
	            <template slot-scope="scope">
	                <el-row>
	                    <el-col :span="8">
	                        <el-button type="text" size="small" @click="view(scope.row)" v-if="!process">查看</el-button>
	                    </el-col>
	                        
	                    <el-col :span="8">
	                        <auth value="permission.create">
	                            <el-button type="text" size="small" @click="edit(scope.row)" v-if="!process">编辑</el-button>
	                        </auth>
	                    </el-col>
	
	                    <el-col :span="8">
	                        <auth value="permission.create">
	                            <el-button type="text" size="small" @click="dealwith(scope.row)" v-if="process">处理</el-button>
	                        </auth>
	                    </el-col>
	                </el-row>    
	            </template>
	        </el-table-column>
	    </el-table>
	    <page-main></page-main>
	    <fixed-action-bar>
	        <el-pagination
	            @size-change="handleSizeChange"
	            @current-change="handleCurrentChange"
	            :current-page="currentPage"
	            :page-sizes="[5, 10, 15]"
	            :page-size="pageSize"
	            layout="total, sizes, prev, pager, next, jumper"
	            :total="total">
	        </el-pagination>
	    </fixed-action-bar>
	  </div>
	</template>
	
	<script>
	export default {
	    name: 'TableList',
	    data() {
	        return {
	            currentPage: 1,
	            total: 100,
	            pageSize: 5,
	            tableList: [],
	            isAdmin: true
	        }
	    },
	    props:['tableKey','dataList', 'entityKey', 'process'],
	    watch: {
	        dataList(newVal, oldVal) {
	            console.log(newVal);
	            this.mountData(newVal)
	        }
	    }, 
	    created() {
	        
	    },
	    mounted() {
	        this.mountData(this.dataList)
	    },
	    methods: {
	        handleSizeChange(val) {
	            this.tableList = [];
	            let count = (this.currentPage-1)*val;
	            for(let i = 0; i < val && (i+count) < this.dataList.length; i++) {
	                this.tableList.push(this.dataList[i+count])
	            }
	        },
	        // 当前页数发生变化时
	        handleCurrentChange(val) {
	            // current置空
	            this.tableList = [];
	            let count = (val-1)*this.pageSize;
	            for(let i = 0; i < this.pageSize && (i+count) < this.dataList.length; i++) {
	                this.tableList.push(this.dataList[i+count])
	            }
	        },
	        view(row) {
	            this.$emit(this.entityKey+'View',row);
	        },
	        edit(row) {
	            this.$emit(this.entityKey+'Edit',row);
	        },
	        dealwith(row) {
	            this.$emit(this.entityKey+'Process',row);
	        },
	        mountData(data) {
	            this.total = data.length
	            this.tableList = []
	            for(let i = 0; i < this.pageSize && i < data.length; i++) {
	                this.tableList.push(data[i])
	            }
	        }
	    },
	    watch: {
	        dataList(newVal, oldVal) {
	            this.mountData(newVal)
	        }
	    }
	}
	</script>

组件仅仅只有126行，但是使用起来却特别的方便，提供了：分页，操作，动态属性栏，模糊搜索等几个重要功能。展示一下先

这个组件足以完成如图功能，覆盖了我整个毕设的重量级组件！！！

3、权限动态路由

4、提供批量化处理功能
批量化处理意思是，可以通过上传一个excel文件，进行批量的对数据进行处理，如：批量学生注册，批量提交学生信息。

接下来就上传一些截图吧！