一个简单且易上手的 Spring boot 后台管理框架。我们可以通过这个框架快速的构建出一个前端搭载element-ui组件库,带有权限控制的后台管理系统。 前台页面千变万化,需求不同展现出的效果也不同,我们很难去找出一套模板供大家去参考使用,但后台管理系统则与之不同,他们的需求有很多都是存在共性的。 就像最常见的几种管理模式
使用一个框架,
【public】:里面存的是el-admin的图片和默认主页,对我们做项目没什么价值。 【src】:里面存储了项目源码 【api】:存储各个模块的api函数,el-admin使用RESTful风格来管理接口,接口就是前端通过给后端发送请求,后端接收到请求之后,进行自己的逻辑处理,最终把数据可以返回给前端,这样前端就收到了数据。 【assets】:原el-admin的静态资源文件夹,存放了一些图片和图标,不过我们的项目并没有用到。 【components】:一些公共组件,比如搜索框,增删改按钮等 【layout】:这个文件里存储了el-admin的侧边栏和主体框架的布局,一般不对这里进行更改。 【mixins】:mixins 混入,这里要先提及一下Vue中的mixin(混入),简单介绍来说,相当于Java中的extends ,继承。 【router】:存放了路由相关的信息,一般也不怎么修改,包括动态路由,静态路由的信息。 【store】:存放了框架中的一些状态信息,算是框架的一些配置信息,比如token的获取,token的过期时间,是否显示某些东西,我们这次做项目没有用到里面的内容,关于权限和token这一块都已经封装好了,我也就没看里面的源码。 【utils】:工具包,里面存放了一些框架的工具方法,比如获取token,设置token,标题,请求,验证等。
这里我默认的认为大家都至少已经进行到使用框架的四大步中的第三步,意思就是简单讲官方文档粗略的过了一遍。若没有,现在立刻马上去看官方文档,官方文档中还是有很多的东西,若是能在那里吃透的话,尽量还是看官网的来。
下边我要介绍的是一些我做项目中自己的理解,可以帮助大家更快的去上手这个框架,以及这个框架中我们遇到的一些问题,希望能给大家一些帮助。
可以看出,其实el-admin的前段Vue目录结构与寻常的Vue项目目录结构并没有太大的差别。其中较为特别的地方我来简单介绍下
el-admin前段部分有写好的界面,页面部分的布局风格就是通过layout模块进行控制的,这部分控制的就是界面上的侧边栏以及主体部分的布局,一般是不会对其进行更改。
这里要先提及一下Vue中的mixin(混入),简单介绍来说,相当于Java中的extends ,继承。
简单的小例子:
el-admin中的mixins 框架中mixins主要是用于一个重要的组件–CRUD组件的支持,CRUD具体内容我会在components部分介绍
我们都知道,el-admin有一个特性就是通过动态路由实现不同页面的访问权限控制。
只是vuex 很基本一些用法,这里要介绍的框架中的一些配置。
其中的用户信息,用户身份,是我们开发中经常要用到的属性,例如一些页面内的按钮级的权限管理,就需要我们前端开发者比对这些信息进行特定的处理(v-if)。
里面有一些框架自带的工具方法,但不一定符合我们的业务需求,大家可以根据需要进行更改,为了考虑到小白下面将utils中的一些常见工具简单讲解一下
剪切板函数 ,底层实现也是实现了web-api的一个
日期操作的一些常用函数
get-page-title
这个是获取页面标题的方法
这里面的方法相对来说就比较常用了,我将花费一定的篇幅去给大家讲解下这里面都帮我们写好了那些常用的函数工具。
帮助我们生成一个新的窗口。
涉及到了el-admin的权限管理 ,其中只有一个方法**checkPermission(value)**返回值为Boolean
【app】:下面存着我们的后端项目文件
【admin或smartcampus】:这两个都是我们项目的文件,下面往往都会有四个文件夹,apis,ctrl层,用来接收请求,接收前端传来的数据。 models,Dao层,用来操作数据库。 router,存放本模块各种路由信息。 service,service层,用来做一个承上启下的过程,apis获取前端传来的参数之后,自己会进行校验,然后调用service层的函数,把接收的参数当做参数传递,此时service层的文件就可以根据自己的逻辑对这些传来的数据进行处理,如果有需要调用数据库的事情,比如增删查改操作,就在service层调用models的函数来获取数据。
【common】:里面写了各个模块的一些公共的方法,比如获取用户的上下文,错误处理,数据库迁移的设置,服务启动,路由设置等,基本上还是原框架所用到的一些方法,内容也不多。
【logs】:存放了各个层级的error
【pkg】:里面存的是第三方库的引用,比如casbin,jwt,file的封装方法。
【utils】:写了各个模块的工具方法,不过我们的项目也用的不多。
剩下的都是git,或者go的包管理,主程序文件了。
首先,这个框架一个中规中矩的页面,大概就是这个样子,el-admin是基于element组件的,所以我们在开发el-admin的时候,需要先去了解一下element组件。
这些名字都无所谓,包括index,都可以改成其它的,只需要配置好就可以了。
我们进入菜单管理,然后点击新建按钮。
通过下面的方式,我就创建了一个测试管理模块。
可以看到我们已经创建成功了。 此时常理来讲,你在侧边栏是看不到这个菜单的——即使你新建了,不过不要着急,我们还是一股脑的再建一个二级菜单,一块让它显示出来。
我们刚才建立了一个菜单类型为目录的菜单,现在我们要创建一个菜单类型为菜单的菜单,也就是我们的二级标题,顺带插一嘴,按钮类型的作用不在页面显示上,而是为了控制权限,等我到casbin权限那一块再细细讨论。
我就只解释几个字段:
这样就可以看到我们已经创建好了测试一。
el-admin的菜单是按照角色来分配的,你可以控制某个角色能看到某些菜单,相应的不让看到某些菜单的话,对应的接口,这个角色也无法访问,这个api的权限控制使用到了casbin,暂且不表。
当我们点击角色管理,因为我登陆的是admin账号,属于超级管理员的角色,所以我就设置超级管理员这个角色的菜单分配了,这个地方有个坑,就是很多人会去点击那个选择框,会发现右边的菜单分配并不会变化,那是因为勾选选择框是代表对这个用户进行操作,并不是菜单分配,只需要点击一下这个用户的空白地方,右边就会显示这个用户的菜单维护情况了,我们看到我们刚才新建的测试管理模块并没有被勾选上。
我们把它勾选上,然后点击保存,保存会等待一下,其实这个时候后台在为这个用户添加该测试模块的一些权限配置。
保存成功之后刷新页面就能看到我们创建的测试管理了。
如果你要开发一个模块的话,现在就可以点击那个vue文件进行开发了,接下来我会带着你解析一下这个vue文件的构成。
el-admin的各个页面基本上都是下面的这种结构,大差不差,不过有的时候它可能无法满足我们的要求,我们可能会需要自己去做一些个性化的改善。
刚才我们看到的页面就是下面的代码。
接下来我们就专门讨论一下页面渲染这一块,看看各个部分是怎么组成出来的,以及,如何写出我们想要的样子。
我们先看下面的蓝色部分,首先第二句有一个v-if来控制这个div的显示与隐藏,可以看得出来是crud的searchToggle属性来控制的,不过我暂时还没有弄明白它具体有什么用,待日后再填吧。
【placeholder】:这个就是当控件没有内容的时候的提示,你要根据你的业务进行填写。
在接下来,你会看到 这一行信息,如果你追踪到这个组件的话,会发现它就是搜索和重置按钮。
紧接着又看到了这一行,这是第二排那四个按钮,以及第二排最右边还有三个不显眼的按钮,permission定义了这些按钮的权限,这个等讲到js代码的时候再说。
这样第一部分我们就讲完了。
点击新增和编辑的弹出框 第二部分是下面的代码,它是一个对话框中套了一个表单控件。
首先说说的属性:
第一行为false是为了控制不能点击对话框外空白的地方关闭对话框。
第三行可以看出crud是如何控制对话框的开启和关闭的,是靠crud中status下的cu属性,通过控制它的属性来控制对话框的开启和关闭,至于右边的showInsertDialog属性,那是我自己加的,是我想在crud的基础上,再限制一些条件才能开启。
剩下的属性自己查吧。
接下来就说说el-form组件
接下来的item,你就可以自己去百度查如何写了,或者参考el-admin的其它新增页面,看看是怎么写的,自己做一些修改,这个不是我们的重点,就不赘述了。
主要需要考虑一个这些输入框和crud的协调问题,既然我们需要crud的帮助,就要遵守crud对我们制定的规则。
这常常是我们对这个页面最关心的部分。
接下来我们来看看这段代码
还是先看看属性,有三个关于crud的:
【v-loading】:这个是控制表格加载的,为true就加载,为false就停止加载,crud有一个loading属性来控制,比如添加后要重新加载一下,编辑要重新加载一下等等。
【selection-change】:这个是当你打勾表格的数据的时候,crud会有一个selections属性来存储对应行的数据,是一个列表。
属性讲完之后,就会表格各个列的名字了,其中会发现有三个地方比较瞩目: 【考评id和积分类别id】:v-if=false就是不显示出来,既然不显示出来,又为什么要在这里呢?是因为在编辑某一条数据的时候,我们往往需要携带这一条数据的id给后端,那么我们就可以通过这个隐藏的列来拿到id。 【创建日期】:这一列我们用parseTime来将后端传过来的时间戳转为日期。 【操作】:也就是最右边的两个按钮,它是调用了组件,这个组件下也有permission,可以控制权限,也就是哪个角色会显示哪个按钮。 另外一个最重要的就是各个列的prop属性不是乱写的,需要根据后端传来的参数来填写,table会自动的填充对应的数据。 比如你想让某一列得到超级管理员这个值,那就把它的prop设置为creator。
这个用它默认的就可以了,只要数据返回的符合规范,就没有问题。
第一部分当然是import,这些都是我们要用到的内容,第一行是我们的api的位置。
可以看到我在api文件夹中创建了我们的模块,里面存放了本模块的api
可以让你看看,大概是这个样子,你需要注意这里的add,del,edit三个函数,因为他们的名字不能更改,讲到下面的URL的时候再说这个事情。
这里就把form中的各个参数写下来就可以了,可以给一些默认值,null就代表空。
之前讲过的就不讲了,重点讲一下前面的cruds(),这个是crud内部的方法,用来作初始化。
title属性会控制弹出框的标题,如果你写“考评类别”,crud会存title为“考评类别”,当你点击新增按钮的时候,它会在title的前面加上“新增”,所以最终呈现的就是“新增考评类别”,当点击编辑就变成了“编辑考评类别”,但其实新增和编辑都是用的同一个对话框。
url属性非常的重要,这一个地址影响了很多,它就是我们访问的api地址。
也就是最外层是code,data和message属性,这个message属性就是我们做各种操作的提示信息,data下有current,orders,pages,size和total属性,这五个是有关分页和排序的数据,再加上一个records才是我们查出来数据库的内容。
这些属性少了都会有问题。
当你点击搜索的时候,也会走这个地址,如果搜索的输入框有内容的话,会在原来的参数基础上加上输入框的内容,如果日期搜索有内容的话,也是这样。
所以如果想完成搜索功能,后端需要接收一个input框的内容,然后可以做模糊查询之类的,还需要接收startTime和endTime。
crudMethod存的是我们引入的api中的内容,相当于是让crud这个框架知道这个页面用的是什么api,另外你自己想用某个api的数据,也可以通过引入的名字来调用。它的下面是optShow属性,会发现里面有五个属性为true,这个是控制第二排四个按钮,和重置按钮的显示,比如有的时候我们不需要导出功能,就需要让download属性为false,这个时候你就会发现页面上没有导出按钮了,其它也是同理。
这个时候我们就要聊聊api中的add,del,edit函数了。
这三个函数的名字是固定的,甚至连参数的格式也是固定的。
当点击页面上的添加按钮并提交后,会调用这里的add函数,参数是form表单的数据。
当点击页面上的删除按钮,或勾选了很多进行删除,都会调用del函数,给后端发送一个list(不是json),只是一个list,类似[1,2,3],里面存的是选中行的id。
当点击页面上的修改按钮并提交后,会调用edit函数,参数是form表单的数据外加编辑的那一行table的数据。
这样的话,整个页面我就算是讲完了,剩下的我感觉自己摸索就可以了。
components文件夹下有很多的内容,比如面包屑,导航栏,图标,日期搜索框等。
而对我们最重要的,就是Crud这个文件夹内的内容了,所以今天就只讲讲这一块。
点开之后是这样一堆的东西,上面写的是四个按钮,可以看到为什么我们在页面中optShow属性中,通过对download属性设置false,可以让导出按钮消失,就是这个v-if设置的,同样的你想让其它button消失,也可以进行设置。
然后你会发现下面有较为复杂的js代码,其实你没必要看懂的,也不太需要。
如果你想在导出的右边再加一个按钮,只需要复制一下导出这个按钮,然后改一下名字,然后把click事件改一下,完成自己想要的功能就可以了。
我们找到这个函数,会发现它的作用是启动添加。
你找一下这个状态,会发现它的值为1
你还记得弹出框有个通过 > 0来控制对话框的显示和关闭吗?而我们通过找到cu,发现它是通过判断按钮的值来返回的,此时cu的值就是1,那么对话框就会弹出来。
接下来我们再看看toAdd函数第一行调用的resetForm函数,可以看到第一行它就去找form节点,如果你的对话框的ref不是form的话,就找不到了。
此时用户应该在填写表单,如果它点击了取消,会调用cancelCU函数,如果点击确定会调用submitCU函数。
按钮的操作中主要靠这个状态来做操作。
我们点进去发现它是执行添加函数,可以看到函数内第三行是给add赋值了一个PROCESSING状态
按钮其实就是三个状态:NORMAL、PREPARED、PROCESSING,第一个代表无操作,第二个代表这个按钮被点击了,用户正在写对话框中的数据,属于占用状态,第三个就代表用户已经写好了对话框,点击提交,是提交阶段。
因为已经开始调用api了,也就说明已经提交上去了,如果提交成功,就把add的状态重新变为NORMAL,也就是0,那么对话框就会消失,如果提交报错,就会走catch,把add的状态重新设置为PREPARED,也就是1,对话框不会消失,此时你可以查看错误重新提交。
添加过程就结束了。
接下来就是在crud文件的闲逛了。
内部还有一个可以获取query参数的函数,通过传名字就可以获得对应的值。
看一下刷新函数吧,点击重置按钮,或者新增,删除,修改,搜索也都会引起刷新。
在这个文件的最下面,会发现有一个CRUD钩子,这个是很好用的。
它就是crud的生命周期,比如你想在crud的Refresh(刷新)函数调用之前,也就是每次重新加载数据之前,想做一些事情,就可以在这里写。
又比如你想在点击编辑按钮之前做一些事情,也可以找到对应的钩子去写语句就可以了。
casbin可以实现对某个角色进行api级的控制,可以让某个角色去访问某些api,或者去禁止某些api。
你下载el-admin,会发现它有一个casbin_rule数据表,里面存的是一些策略,v0下的1代表是sys_role表id=1的角色,v1是api地址,v2是GET,也就是当用户角色id=1的时候,就运行它访问/api/activity请求,类型为GET。
比如说你想限制某些角色的能力,就可以在这里进行控制。
那么我们一个一个的加,肯定不现实,前端有方式去做。
添加菜单的时候,会发现它有一个请求方式和请求路由,这个对标的是我们刚进入这个页面的那个table的查询接口。 当你写上/api/activity GET的时候,当你为某个角色分配这个菜单,它就会在casbin_rule这个表格里添加对应的数据。
那么同样的,每个菜单下还有很多的按钮,每一个按钮都有对应的地址,就可以点击按钮新建了,也有这个请求方式和请求路由,按钮新建之后并不会在页面上显示,它只是一个为casbin权限控制作说明而已。
这样当你对角色1分配这个菜单之后,这个菜单对应的接口对应这个角色会添加到casbin里,然后这个角色调用这些已经被允许的接口才会被通过,否则显示权限不足。
需要注意的是,它同样需要后端的配合,如果后端没有搭建casbin的话,依然没有作用。
这一篇内容写了很久,起初是想前后端都写,但是后来想想,后端好像没什么可写的,既然都接触到这个程度了,不至于连接口是什么都不清楚。
我感觉前端摸清楚了之后,后端并不怎么复杂。 就是一个不断的调接口的过程,知识是相对比较固定的,如果你是Java语言,大可以把el-admin的后端下载下来,然后在其基础上进行删改,添加。
如果你是其它语言,可以先找一个框架,然后找一个框架好用的脚手架,在这个脚手架的基础上写接口来返回数据就可以了。
本文给出如何在开源vue-vben-admin 架构支持多可插拔UI框架的情况下选择使用自己团队意向的UI框架的答案。
本文介绍如何在 vue-vben-admin 基础上开发自己的后台管理子系统。
Symfony是一个由SensioLabs开发并维护的PHP框架,遵循MVC(Model-View-Controller)设计模式。它不仅提供了一系列强大的工具和功能,还能通过其组件(如HttpFoundation、Routing、DependencyInjection等)单独使用。Symfony的设计目标是让开发者能够高效地构建高质量的Web应用程序,同时保持代码的可维护性和可扩展性。
设置 FastAPI Admin要设置 FastAPI Admin,你需要遵循一系列步骤,这些步骤将帮助你将管理界面集成到你的 FastAPI 应用程序中。安装首先,确保您已安装必要的软件包。你可以使用 pip 安装 FastAPI Admin:$ pip install fastapi-admin此命令将安装 FastAPI Admin 及其依赖项。如果要包含可选功能,可以使用以下命令进行安装:
# Java解析EL表达式在Java编程中,EL(Expression Language)表达式是一种简洁的语法,用于在JSP、JSF和其他Java EE技术中访问和操作数据。EL表达式的语法类似于JavaScript或Python中的表达式语法,但是专门用于在Java web应用程序中使用。## EL表达式的语法EL表达式通常以`${}`的形式出现,其中包含要评估的表达式。在表达式中
最近写了一个计算器,便将其中的核心模块——表达式求值这一块稍微封装了一下,以便以后能更好的代码复用,在此我想说一下我的感悟,写程序的时候尽量将那些能单独成为模块的尽量用函数或者类封装起来,并提供通用接口,这样写出来的代码既可以给别人用,以后自己遇到相似的问题时工作量也会小很多。代码写的不是很好,难免会有BUG,忘发现BUG的亲们能提醒我下,好让我改进。 函数原型:public String su
编辑:github中文社区有读者留言问有没有好的后台系统,今天我们就奉上。用途可作为大家做毕业,外包,练手学习前言这套Base Admin是一套简单通用的后台管理系统,主要功能有:权限管理、菜单管理、用户管理,系统设置、实时日志,实时监控,API加密,以及登录用户修改密码、配置个性菜单等。技术栈前端:layuijava后端:SpringBoot + Thymeleaf + WebSocket
项目简介IExcel 用于优雅地读取和写入 excel。避免大 excel 出现 oom,简约而不简单。。特性OO 的方式操作 excel,编程更加方便优雅。sax 模式读取,SXSS 模式写入。避免 excel 大文件 OOM。
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及打包,该例子零耦合,开箱即用一、用到的Jquery功能 1、获取/赋值input输入值$("#my_id").val();// 获取 $("#my_id").va
“线与(wired-AND)在 CAN 总线优先级仲裁机制中的应用” 一、什么是“线与(wired-AND)” 在 CAN 总线中,信号是差分形式,但逻辑上可以理解为: dominant(显性) = 0 recessive(隐性) = 1 总线上的多个节点是 “线与” 关系(wired-AND ...
在 iOS 开发中,我们常用 Block、Delegate、通知等方式进行数据传递,这些传值方式在我前面博客都予以介绍过【iOS】多界面传值(五大传值方式)KVC(键值编码)和KVO(键值观察)简单介绍的话就是KVC允许我们通过字符串(key)访问属性;KVO允许我们自动监听属性值的变化。它们一个负责“访问”,一个负责“观察”,是 Cocoa 动态机制的核心。Cocoa即objective-c框架体系,如UIKit,Foundation,Appkit等变量在运行时才确定其真实类型。
前言:从命令式到响应式,从混乱到优雅。 一文彻底搞懂 Android 四大架构模式。 一、MVC(Model-View-Controller) 核心思想最经典的架构,三层分工:Model:数据层(网络、本地、业务逻辑)View:视图层(XML、Activity、Fragment)Controller ...
? Hugging Face Transformers 库 是一个用于自然语言处理(NLP)和计算机视觉(CV)的 开源深度学习库,以提供丰富的预训练模型和便捷的模型调用接口而闻名。核心功能预训练模型支持• 提供 数千种预训练模型(如 BERT、GPT、T5、ViT、Stable Diffusion 等),涵盖文本、图像、音频等多模态任务。• 支持 PyTorch、TensorFlow 和 JAX 框架,可自由选择模型格式。统一接口设计• 通过AutoModel。
文章全面解析了大模型应用架构的六大核心层次:数据层与预处理层负责多模态数据标准化;知识与模型中台层实现能力聚合与复用;模型层与训练优化层聚焦核心技术与训练策略;应用层与技术支撑层确保场景落地与系统运维。文章探讨了架构演进趋势、实践案例及最佳实践,强调模块化设计、数据质量优先和安全合规等原则,旨在构建高效可靠的AI应用体系。