ELadmin后台日志学习收获

SMPE日志后台

eladmin有的时候不是那么好用，我们想要借鉴它去实现更适合我们小组的应用框架

SMPE-ADMIN通用框架前端

项目简介
一个基于EL-ADMIN、Spring Boot 2.1.0 、 Mybatis Plus、JWT + Spring Security、Redis、Vue的前后端分离的后台管理系统

项目源码

后端源码	前端源码
GitHub https://github.com/shiwei-Ren/smpe-admin	https://github.com/shiwei-Ren/smpe-admin-web

首先我们来看页面效果

增删改导出按钮是怎么控制显示的

图中红色框内有两个按钮，控制显示哪些的部分在下图

在页面中引入了CRUD.operation，里面有新增，修改，删除，导出按钮，搜索，重置按钮方法，以及预留左侧右侧的具名插槽供使用者自己添加按钮。

在页面的created方法里，进行this.crud.optShow对象的赋值

created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: true,
      reset: true
    }
  },

值为true所对应的按钮会显示，为false的按钮不会显示。

这是因为在CRUD.operation中使用v-if来控制是否显示

表格中的数据是怎么拿到的

引入了crud里面的CRUD方法，我们进去看一下

拿刚才页面传进去的参数来看

CRUD({ title: '日志', url: 'api/logs' })

那么

function CRUD(options) 

options中就是一个拥有title，url的一个对象。
在CRUD方法里，自己定义了一个defaultOptions对象

接着调用了一个方法把传进来的options中的键值对跟自己定义的defaultOptions中的键比对，把相同键的值赋给defaultOptions对应的键。

// defaultOptions->src,options->opts
function mergeOptions(src, opts) {
  const optsRet = {
    ...src
  }
  for (const key in src) {
  //opts中相同的key，就把对应值给optsRet
    if (opts.hasOwnProperty(key)) {
      optsRet[key] = opts[key]
    }
  }
  return optsRet
}

经过mergeOptions方法后，又出现了一个data对象

...options,

它把options对象去掉{}，以键值对展开。往data里面塞了数据状态，添加或编辑状态…

继续到了重要的一个方法refresh方法，在这个方法里发送请求，装填数据。

initData方法是引入了api下的data.js文件

在这里进行url拼接参数，发送请求

const table = crud.getTable()
if (table && table.lazy) { // 懒加载子节点数据，清掉已加载的数据
  table.store.states.treeData = {}
  table.store.states.lazyTreeNodeMap = {}
}
crud.page.total = res.data.pages === undefined ? 0 : res.data.total
crud.data = res.data.pages === undefined ? res.data : res.data.records
crud.resetDataStatus()

怎样实现搜索的

马赛克掉的东西是我自己加上的。

在initData的时候

initData(crud.url, crud.getQueryParams())

crud.getQueryParams()方法可以拿到搜索框内填入的条件
因为使用v-model双向绑定了

我们看一下后端是怎么处理我给的参数的：

在这里去掉用service层的queryAll方法

在这里去调用mapper层的查询日志详细信息的方法

自定义条件构造器这样写的

注册视图模型

混入了crud里的presenter()

在beforeCreate()中，把当前实例的crud赋一个空值，然后创建一个cruds把页面的CRUD配置赋给它，接着转化为数组的形式。

最后把页面CRUD配置注册视图模型，赋给this.crud