SpringBoot + Vue 后台管理系统(四):管理页面

管理页面

主要就是mybatis-plus使用，以及前端表单验证。

MyBatis是一款非常热门的数据操作层（持久层）框架。

优点：

• 自定义SQL ，满足所有的复杂查询，方便SQL优化。
• 相对（JPA）来说上手简单一些。

mybatis-plus ？

Mybatis-Plus（简称MP）是一个 Mybatis 的增强工具，在 Mybatis 的基础上只做增强不做改变，为简化开发、提高效率而生。参考mybatis-plus官网。其实就是它已经封装好了一些crud方法，我们不需要再写xml了，直接调用这些方法就行，就类似于JPA。

效果图：

列表

新增/修改

主要依赖：

 <dependency>
 <groupId>com.baomidou</groupId>
 <artifactId>mybatis-plus-boot-starter</artifactId>
 <version>2.3.1</version>
 </dependency>

直接在配置文件添加配置参数即可：

spring: 
 ...... 
 mybatis-plus: 
 global-config:
 #主键类型 0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";
 id-type: 0
 #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
 field-strategy: 2
 #驼峰下划线转换
 db-column-underline: true
 #刷新mapper 调试神器
 refresh-mapper: true
 #数据库大写下划线转换
 #capital-mode: true
 #序列接口实现类配置
 #key-generator: com.baomidou.springboot.xxx
 #逻辑删除配置
 #logic-delete-value: 0
 #logic-not-delete-value: 1
 #自定义填充策略接口实现
 #meta-object-handler: com.umeox.waas.domain.handler.MyMetaObjectHandler
 #自定义SQL注入器
 #sql-injector: com.baomidou.springboot.xxx
 configuration:
 map-underscore-to-camel-case: true #entity类字段名映射表字段名
 cache-enabled: false

MyBatis-Plus使用：

public interface IService<T> {
 /**
 * <p>
 * 插入一条记录（选择字段，策略插入）
 * </p>
 *
 * @param entity 实体对象
 * @return boolean
 */
 boolean insert(T entity);
 /**
 * <p>
 * 插入一条记录（全部字段）
 * </p>
 *
 * @param entity 实体对象
 * @return boolean
 */
 boolean insertAllColumn(T entity);
 /**
 * <p>
 * 插入（批量），该方法不适合 Oracle
 * </p>
 *
 * @param entityList 实体对象列表
 * @return boolean
 */
 boolean insertBatch(List<T> entityList);
 /**
 * <p>
 * 插入（批量）
 * </p>
 *
 * @param entityList 实体对象列表
 * @param batchSize 插入批次数量
 * @return boolean
 */
 boolean insertBatch(List<T> entityList, int batchSize);
 /**
 * <p>
 * 批量修改插入
 * </p>
 *
 * @param entityList 实体对象列表
 * @return boolean
 */
 boolean insertOrUpdateBatch(List<T> entityList);
 /**
 * <p>
 * 批量修改插入
 * </p>
 *
 * @param entityList 实体对象列表
 * @param batchSize
 * @return boolean
 */
 boolean insertOrUpdateBatch(List<T> entityList, int batchSize);
 /**
 * <p>
 * 批量修改或插入全部字段
 * </p>
 *
 * @param entityList 实体对象列表
 * @return boolean
 */
 boolean insertOrUpdateAllColumnBatch(List<T> entityList);
 /**
 * 批量修改或插入全部字段
 *
 * @param entityList 实体对象列表
 * @param batchSize
 * @return boolean
 */
 boolean insertOrUpdateAllColumnBatch(List<T> entityList, int batchSize);
 /**
 * <p>
 * 根据 ID 删除
 * </p>
 *
 * @param id 主键ID
 * @return boolean
 */
 boolean deleteById(Serializable id);
 /**
 * <p>
 * 根据 columnMap 条件，删除记录
 * </p>
 *
 * @param columnMap 表字段 map 对象
 * @return boolean
 */
 boolean deleteByMap(Map<String, Object> columnMap);
 /**
 * <p>
 * 根据 entity 条件，删除记录
 * </p>
 *
 * @param wrapper 实体包装类 {@link Wrapper}
 * @return boolean
 */
 boolean delete(Wrapper<T> wrapper);
 /**
 * <p>
 * 删除（根据ID 批量删除）
 * </p>
 *
 * @param idList 主键ID列表
 * @return boolean
 */
 boolean deleteBatchIds(Collection<? extends Serializable> idList);
 /**
 * <p>
 * 根据 ID 选择修改
 * </p>
 *
 * @param entity 实体对象
 * @return boolean
 */
 boolean updateById(T entity);
 /**
 * <p>
 * 根据 ID 修改全部字段
 * </p>
 *
 * @param entity 实体对象
 * @return boolean
 */
 boolean updateAllColumnById(T entity);
 /**
 * <p>
 * 根据 whereEntity 条件，更新记录
 * </p>
 *
 * @param entity 实体对象
 * @param wrapper 实体包装类 {@link Wrapper}
 * @return boolean
 */
 boolean update(T entity, Wrapper<T> wrapper);
 /**
 * <p>
 * 根据 whereEntity 条件，自定义set值更新记录
 * </p>
 *
 * @param setStr set值字符串
 * @param wrapper 实体包装类 {@link Wrapper}
 * @return boolean
 */
 boolean updateForSet(String setStr, Wrapper<T> wrapper);
 /**
 * <p>
 * 根据ID 批量更新
 * </p>
 *
 * @param entityList 实体对象列表
 * @return boolean
 */
 boolean updateBatchById(List<T> entityList);
 /**
 * <p>
 * 根据ID 批量更新
 * </p>
 *
 * @param entityList 实体对象列表
 * @param batchSize 更新批次数量
 * @return boolean
 */
 boolean updateBatchById(List<T> entityList, int batchSize);
 /**
 * <p>
 * 根据ID 批量更新全部字段
 * </p>
 *
 * @param entityList 实体对象列表
 * @return boolean
 */
 boolean updateAllColumnBatchById(List<T> entityList);
 /**
 * <p>
 * 根据ID 批量更新全部字段
 * </p>
 *
 * @param entityList 实体对象列表
 * @param batchSize 更新批次数量
 * @return boolean
 */
 boolean updateAllColumnBatchById(List<T> entityList, int batchSize);
 /**
 * <p>
 * TableId 注解存在更新记录，否插入一条记录
 * </p>
 *
 * @param entity 实体对象
 * @return boolean
 */
 boolean insertOrUpdate(T entity);
 /**
 * 插入或修改一条记录的全部字段
 *
 * @param entity 实体对象
 * @return boolean
 */
 boolean insertOrUpdateAllColumn(T entity);
 /**
 * <p>
 * 根据 ID 查询
 * </p>
 *
 * @param id 主键ID
 * @return T
 */
 T selectById(Serializable id);
 /**
 * <p>
 * 查询（根据ID 批量查询）
 * </p>
 *
 * @param idList 主键ID列表
 * @return List<T>
 */
 List<T> selectBatchIds(Collection<? extends Serializable> idList);
 /**
 * <p>
 * 查询（根据 columnMap 条件）
 * </p>
 *
 * @param columnMap 表字段 map 对象
 * @return List<T>
 */
 List<T> selectByMap(Map<String, Object> columnMap);
 /**
 * <p>
 * 根据 Wrapper，查询一条记录
 * </p>
 *
 * @param wrapper 实体对象
 * @return T
 */
 T selectOne(Wrapper<T> wrapper);
 /**
 * <p>
 * 根据 Wrapper，查询一条记录
 * </p>
 *
 * @param wrapper {@link Wrapper}
 * @return Map<String,Object>
 */
 Map<String, Object> selectMap(Wrapper<T> wrapper);
 /**
 * <p>
 * 根据 Wrapper，查询一条记录
 * </p>
 *
 * @param wrapper {@link Wrapper}
 * @return Object
 */
 Object selectObj(Wrapper<T> wrapper);
 /**
 * <p>
 * 根据 Wrapper 条件，查询总记录数
 * </p>
 *
 * @param wrapper 实体对象
 * @return int
 */
 int selectCount(Wrapper<T> wrapper);
 /**
 * <p>
 * 查询列表
 * </p>
 *
 * @param wrapper 实体包装类 {@link Wrapper}
 * @return
 */
 List<T> selectList(Wrapper<T> wrapper);
 /**
 * <p>
 * 翻页查询
 * </p>
 *
 * @param page 翻页对象
 * @return
 */
 Page<T> selectPage(Page<T> page);
 /**
 * <p>
 * 查询列表
 * </p>
 *
 * @param wrapper {@link Wrapper}
 * @return
 */
 List<Map<String, Object>> selectMaps(Wrapper<T> wrapper);
 /**
 * <p>
 * 根据 Wrapper 条件，查询全部记录
 * </p>
 *
 * @param wrapper 实体对象封装操作类（可以为 null）
 * @return List<Object>
 */
 List<Object> selectObjs(Wrapper<T> wrapper);
 /**
 * <p>
 * 翻页查询
 * </p>
 *
 * @param page 翻页对象
 * @param wrapper {@link Wrapper}
 * @return
 */
 @SuppressWarnings("rawtypes")
 Page<Map<String, Object>> selectMapsPage(Page page, Wrapper<T> wrapper);
 /**
 * <p>
 * 翻页查询
 * </p>
 *
 * @param page 翻页对象
 * @param wrapper 实体包装类 {@link Wrapper}
 * @return
 */
 Page<T> selectPage(Page<T> page, Wrapper<T> wrapper);
}

需要继承的基础接口，有默认的实现。（以菜单为例）

• 新增操作单个或者数组批量新增。直接调用相应的方法即可
• 修改， 根据ID修改。
• 只修改一个字段，或者某几个字段。

# 不为null的属性都会被修改。 反之如果不想修改的属性直接设置为null即可。
Menu menu = new Menu();
menu.setId(1);
menu.setName("新的名称")
menuRepository.updateById(menu);
# 相当于SQL语句。update menu set name = "新的名称" where id = 1;

• 不是根据ID修改的怎么处理呢？把所有的按钮设置为无效的。

Menu menu = new Menu(); 
menu.setStatus(false)
udpate(menu, new EntityWrapper<Menu>().eq("type", 1));
# 相当于SQL语句。update menu set status = false where type = 1;

• 查询操作

根据ID查询一个：
Menu menu = this.selectById(1);
根据条件查询一个
Menu menu = selectOne(new EntityWrapper<Menu>()
 .eq("type", 1).last("limit 1"));
# last会造成SQL注入的风险。所以这个参数不能是外部传入。
# lt("column",value) ==> column< value;
# le("column",value) ==> column<= value;
# gt("column",value) ==> column> value;
# ge("column",value) ==> column>= value;
# between(column, val1, val2) ==> columnbetween val1 and val2;
# like(column,value) ==> like "%value%"; 
# orderBy(column, ture) ==> order By column asc ;false:表示倒序
# selectPage(page) ==> 分页查询
# selectPage(page, new Enw...) ==> 分页查询在家查询条件。

当然也可以自己写SQL语句。多表关联查询时，需要自己定义SQL。

和mybatis使用方式一致。

前端表单校验

 <template>
 <div class="backdrop" v-loading="loading">
 <div v-show="isList">
 <el-row>
 <el-col :span="10" :offset="1">
 <el-input placeholder="请输入内容" clearable v-model="queryObj.value" class="input-with-select">
 <el-select v-model="queryObj.type" slot="prepend" placeholder="请选择">
 <el-option label="名称" value="name"></el-option>
 <el-option label="路径" value="path"></el-option>
 </el-select>
 <el-button slot="append" type="primary" icon="el-icon-search" @click="loadList"></el-button>
 </el-input>
 </el-col>
 <el-col :span="6">
 <el-button v-show="button.save" type="primary" @click="add" icon="el-icon-circle-plus-outline"
 class="padding-button"></el-button>
 <el-popover v-show="button.delete" placement="top" width="200" v-model="visible2">
 <p>确定要删除这些菜单吗？</p>
 <br/>
 <div style="text-align: right; margin: 0">
 <el-button size="mini" type="primary" class="padding-button" @click="visible2 = false">取消
 </el-button>
 <el-button size="mini" type="danger" class="padding-button" @click="remove">确定</el-button>
 </div>
 <el-button slot="reference" type="danger" @click="visible2 = true" icon="el-icon-delete"
 class="padding-button"></el-button>
 </el-popover>
 </el-col>
 </el-row>
 <div class="margin-bottom-10"></div>
 <el-table :data="menuses" style="width: 100%" height="590" border
 @sort-change="solrLoadMenusess"
 @selection-change="electRow">
 <!--多选框-->
 <el-table-column type="selection" width="55"></el-table-column>
 <el-table-column sortable="custom" prop="id" label="ID" ></el-table-column>
 <el-table-column sortable="custom" prop="name" label="名称" ></el-table-column>
 <el-table-column sortable="custom" prop="url" label="链接" ></el-table-column>
 <el-table-column sortable="custom" prop="type" label="类型" >
 <template slot-scope="scope">
 <el-tag type="success" size="medium" v-if="scope.row.type == 1">菜单</el-tag>
 <el-tag type="info" size="medium" v-if="scope.row.type == 2">按钮</el-tag>
 </template>
 </el-table-column>
 <el-table-column sortable="custom" prop="permission" label="权限" ></el-table-column>
 <el-table-column label="操作" fixed="right" width="180">
 <template slot-scope="scope">
 <el-tooltip v-show="button.update" class="item" effect="dark" content="修改菜单" placement="top">
 <el-button size="mini" type="primary" @click="update(scope.$index, scope.row)"
 icon="el-icon-edit" circle></el-button>
 </el-tooltip>
 <el-tooltip v-show="button.delete" class="item" effect="dark" content="删除菜单" placement="top">
 <el-button size="mini" type="danger" @click="closeMenu(scope.$index, scope.row)"
 icon="el-icon-delete" circle></el-button>
 </el-tooltip>
 </template>
 </el-table-column>
 </el-table>
 <el-pagination
 @size-change="pageSizeChange"
 @current-change="currentPageChange"
 :current-page="queryObj.currentPage"
 :page-sizes="[10, 20, 30, 40]"
 :page-size="queryObj.pageSize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="queryObj.total">
 </el-pagination>
 </div>
 <div v-show="!isList">
 <el-form ref="menu" :model="menu" :rules="rules" label-width="80px" label-position="right"
 class="demo-ruleForm" size="mini">
 <el-form-item prop="name" label="菜单名称">
 <el-col :span="10">
 <el-input v-model="menu.name"></el-input>
 </el-col>
 </el-form-item>
 <el-form-item prop="type" label="类型">
 <el-col :span="3">
 <el-select v-model="menu.type" placeholder="请选择类型">
 <el-option label="目录" value="0"></el-option>
 <el-option label="菜单" value="1"></el-option>
 <el-option label="按钮" value="2"></el-option>
 </el-select>
 </el-col>
 </el-form-item>
 <el-form-item prop="path" label="菜单路由" v-if="menu.type == 1">
 <el-col :span="10">
 <el-input v-model="menu.path"></el-input>
 </el-col>
 </el-form-item>
 <el-form-item label="父级菜单">
 <el-col :span="10">
 <el-input v-model="menu.parentName" readonly @focus="dialogFormVisible = true"></el-input>
 <el-dialog title="选择父级菜单" width="30%"
 :close-on-click-modal="false"
 :close-on-press-escape="false"
 :show-close="false"
 :visible.sync="dialogFormVisible">
 <el-tree
 :data="this.buildMenus()"
 @node-click="setParentId"
 node-key="id"
 :accordion=true
 :highlight-current=true
 :default-expanded-keys=[menu.parentId]
 :current-node-key=menu.parentId
 :props="{children: 'childs', label: 'name'}">
 </el-tree>
 <div slot="footer" class="dialog-footer">
 <el-button @click="menu.parentId=0;menu.parentName='';dialogFormVisible = false;">取消
 </el-button>
 <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
 </div>
 </el-dialog>
 </el-col>
 </el-form-item>
 <el-form-item prop="permission" label="菜单权限">
 <el-col :span="10">
 <el-input v-model="menu.permission"></el-input>
 </el-col>
 </el-form-item>
 <el-form-item label="图标">
 <el-col :span="10">
 <el-input v-model="menu.icon"></el-input>
 </el-col>
 </el-form-item>
 <el-form-item>
 <el-col :span="10">
 <el-button type="primary" @click="submitMenu('menu')">提交</el-button>
 <el-button @click="notSubmitMenu('menu')">取消</el-button>
 </el-col>
 </el-form-item>
 </el-form>
 </div>
 </div>
 </template>
 <script lang="ts">
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import {Menu} from "@/entity/Menu";
 import {Query} from "@/utils/Query";
 import {StringUtils} from "@/utils/StringUtils"
 @Component({})
 export default class MenuMana extends Vue {
 # 表单校验规则
 rules: object = {
 name: [ {required: true, message: '请输入菜单名称', trigger: 'blur'},
 {min:2, max:5, message:"限制2~5个字符", trigger: 'blur'}
 ],
 type: [{ required: true, message: '请选择类型', trigger: 'change' }],
 permission: [{ validator: (rule: any, value: any, callback: any)=> {
 let _this:any = this.$refs["menu"];
 if(_this.model.type == "2"){
 if (value === "") {
 callback(new Error("请输入权限"));
 }else {
 callback();
 }
 }else {
 callback();
 }
 }, trigger: 'change' }],
 url: [{ required: true, message: '请输入菜单路由', trigger: 'blur' }]
 }
 loading: boolean = false;
 isList: boolean = true;
 visible2: boolean = false;
 dialogFormVisible: boolean = false;
 menuses: Array<Menu> = [];
 electMenus: Array<Menu> = [];
 allMenus: Array<Menu> = [];
 // 初始化菜单信息
 menu: Menu = new Menu("", "1", "", "", "0", "");
 button: object = {
 save: StringUtils.isPermisson('sys:menu:save,sys:menu:select'),
 update: StringUtils.isPermisson('sys:menu:update,sys:menu:select'),
 delete: StringUtils.isPermisson('sys:menu:delete')
 }
 queryObj: Query = new Query();
 mounted():void{
 this.loadList();
 this.allMenu().then(resp=>{
 console.log("111111111")
 });
 }
 // 加载列表数据
 loadList():void {
 const _this = this;
 _this.loading = true;
 _this.axios.get("/menu/list",{params: _this.queryObj})
 .then(resp=> {
 _this.loading = false;
 _this.menuses = resp.data.records;
 _this.queryObj.total = resp.data.total;
 })
 }
 // 切换搜索条件
 solrLoadMenusess(val: any):void{
 this.queryObj.isAsc = val.order == "ascending";
 this.queryObj.orderFields = val.prop;
 this.loadList();
 }
 // 切换每页数量
 pageSizeChange(val: any):void{
 this.queryObj.pageSize = val;
 this.loadList();
 }
 // 切换页面数
 currentPageChange(val:any):void{
 this.queryObj.currentPage = val;
 this.loadList();
 }
 // 选中的值
 electRow(val:any):void{
 this.electMenus = val;
 }
 // ——
 // 新增菜单
 add():void{
 this.isList = false;
 this.menu = new Menu("", "1", "", "", "0", "");
 }
 // 修改菜单
 update(index:number, row: Menu):void{
 this.isList = false;
 this.menu = new Menu("", "1", "", "", "0", "");
 this.menu.id = row.id;
 this.menu.name = row.name;
 this.menu.parentId = row.parentId + "";
 this.menu.url = row.url;
 this.menu.permission = row.permission;
 this.menu.type = row.type + "";
 this.menu.icon = row.icon;
 this.setMenuParentName();
 }
 // 设置当前菜单的父级菜单名字
 setMenuParentName():void{
 let parentName = "";
 let id = this.menu.parentId;
 this.allMenus.forEach(ele => {
 if (ele.id.toString() == id) {
 parentName = ele.parentName;
 }else if (ele.childs != null) {
 ele.childs.forEach(child=>{
 if (child.id.toString() == id) {
 parentName = child.parentName;
 }
 })
 }
 })
 this.menu.parentName = parentName;
 }
 // 批量删除
 remove():void{
 let _this = this;
 _this.visible2 = false;
 if (this.electMenus.length == 0) {
 _this.$message.error("请选择需要删除的菜单");
 return;
 }
 let arr = new Array<number>();
 _this.axios.delete("/menu/delete",{data:arr})
 .then(resp=>{
 localStorage.removeItem("allMenus");
 _this.$message.success("删除成功了！");
 if(_this.electMenus.length >= _this.menuses.length && _this.queryObj.currentPage > 1){
 _this.queryObj.currentPage = _this.queryObj.currentPage - 1;
 }
 _this.loadList();
 })
 }
 // 删除单个
 closeMenu(idnex:number, row: any):void{
 let _this = this;
 _this.$alert("确认删除这个菜单吗？", "友情提示", {
 confirmButtonText: "确认",
 callback: action => {
 _this.axios.delete("/menu/delete",{data:[row.id]})
 .then(resp=>{
 localStorage.removeItem("allMenus");
 _this.$message.success("删除成功了！");
 if(_this.menuses.length <= 1 && _this.queryObj.currentPage > 1){
 _this.queryObj.currentPage = _this.queryObj.currentPage - 1;
 }
 _this.loadList();
 })
 }
 })
 }
 // 提交
 submitMenu(menu: string):void{
 let _this = this;
 let el: any = this.$refs[menu];
 el.validate((valid: any) => {
 if (valid) {
 _this.loading = true;
 if (_this.menu.id) {
 _this.axios.put("/menu/update",_this.menu)
 .then((resp: any) => {
 _this.loading = false;
 if (resp.code == 0){
 _this.loading = false;
 localStorage.removeItem("allMenus");
 _this.$message.success("修改成功了！");
 _this.loadList();
 }
 })
 }else{
 _this.axios.post("/menu/save",_this.menu)
 .then((resp: any)=>{
 _this.loading = false;
 if(resp.code == 0) {
 _this.isList = true;
 localStorage.removeItem("allMenus");
 _this.$message.success("添加成功了！")
 _this.loadList();
 };
 })
 }
 }else{
 this.$message.error("错误的提交");
 return;
 }
 })
 }
 // 不提交菜单
 notSubmitMenu(menu:string):void{
 this.isList = true;
 this.menu = new Menu("", "1", "", "", "0", "");
 }
 // 全部菜单
 allMenu():Promise<any>{
 let _this = this;
 return new Promise(function (resolve, reject) {
 let allMenus = localStorage.getItem("allMenus");
 if (allMenus!=null && StringUtils.isNotBlank(allMenus)) {
 _this.allMenus = JSON.parse(allMenus.toString());
 if (_this.allMenus.length != 0) {
 resolve(_this.allMenus);
 }
 }else{
 _this.axios.get("/menu/select")
 .then((resp: any)=>{
 _this.allMenus = resp.data;
 localStorage.setItem("allMenus", JSON.stringify(resp.data));
 resolve(_this.allMenus);
 })
 }
 });
 }
 // 处理菜单
 buildMenus(): Array<Menu> {
 let _this = this;
 let arr = new Array<Menu>();
 arr = _this.allMenus;
 /*arr.forEach(elv=>{
 if(elv.childs){
 elv.childs.forEach((child:Menu)=>{
 child.childs = new Array<Menu>();
 })
 }
 })*/
 return arr;
 }
 // 选择父级菜单时，赋值
 setParentId(data: Menu,node: any, eml:any): void{
 this.menu.parentId = data.id.toString();
 this.menu.parentName = data.name;
 }
 }
 </script>
 <style scoped>
 .el-col{
 margin-bottom: 10px;
 margin-top: 10px;
 }
 </style>