本文讲述如何实现,IdentityServer
数据的管理,包括添加删除等基础操作和相应 UI
后端
此处直列关键点,不做详细描述,此项目跟普通的数据库管理无异,所以只做简单记录 实例请查看这里
添加引用
新建 asp.net core 项目,IdentityServer4.XCode 引用,代码入口添加服务,视自己情况而定,options
的参数需要与前端配合 添加Easy.Admin 引用,Easy.Admin
包含了具有增删查改的基类控制器。并且封装了统一的响应结果,真实结果包含在 Data
属性、异常拦截处理、模型绑定等,使用后只需要关注业务即可
{
"Status" : 0 ,
"Data" : [
{
"ID" : 68 ,
"Name" : "b5c4"
}
] ,
"Msg" : "ok" ,
"Paper" : null
}
services. AddIdentityServer ( options =>
{
options. UserInteraction. LoginReturnUrlParameter = "returnUrl" ;
options. UserInteraction. LoginUrl = "/login" ;
options. Authentication. CookieAuthenticationScheme = "Jwt-Cookie" ;
} )
. AddXCodeConfigurationStore ( )
. AddXCodeOperationalStore ( options =>
{
options. EnableTokenCleanup = true ;
} )
. AddDeveloperSigningCredential ( ) ;
添加控制器
由于引用了Easy.Admin ,我们要做的事就很简单了 新建控制器ClientsController
,继承自EntityController<Clients>
,添加相关特性
[ DisplayName ( "客户端" ) ]
[ Route ( "api/[controller]" ) ]
[ ApiController ]
public class ClientsController : EntityController< Clients>
{
}
基类EntityController<>
实现了基础的增改查删操作,并自带一个搜索方法 Search
,前端可根据搜索实体自定义搜索,还可跨表搜索 运行后导航到/swagger
即可看到新增的接口 添加其他几个控制器,参考这里
说明
此后端可作为内部管理使用,为所有实体添加对应的控制器,即可生成响应的增改查删接口,日常管理数据和和开发使用特别方便 如果想基于此项目开发其它业务,直接增加接口,做好权限控制即可,目前版本不包含权限管理
前端
前端项目基于xxred/Easy.Front-End ,他改造自PanJiaChen/vue-element-admin 。产生于 vue-element-admin
还没升级到 vue-cli3
的时候,删了不少功能,架子大体相同,现在新版全部升级,v4.0 也发布了,Easy.Front-End
就不必再看了 Easy.Front-End
主要考虑为基础框架,导入包引用即可使用,后续更新只需更新包的版本,而不必手动复制粘贴源码重大修改的地方,只是为了搭建 IdentityServer
的前端部分,主要包括 api 地址重新设置、后端获取路由动态生成菜单、根据基础表格表单页动态生成页面
api 地址重新设置
这个功能其实意义不大,覆盖原系统的硬编码 api 地址,现在一般都是从头到尾自己搭建前端项目,复制框架源码的,很少是导入包直接用。当时为了两边调试方便所以做了,先说说怎么用 Easy.Front-End
项目 src
文件夹下有个apiSettings.js
文件,新建项目同样的位置也需要一个这样的文件,手动导入,更新接口,内容如下
const login = {
loginByUsername : '/api/users/login' ,
logout : '/api/users/logout' ,
getUserInfo : '/api/users/getuserinfo'
}
const route = {
getRoutes : '/api/routes'
}
export default settings => {
settings. baseUrl = 'https://localhost:44352'
settings. login = login
settings. route = route
return settings
}
只需要重新定义对象进行覆盖即可。导出的是一个函数,因此可以调试到此文件,可查看到所有接口,根据自己的需要进行覆盖
后端获取路由动态生成菜单
此功能需要后端配合,返回类似路由的格式,再由前端进行处理组件部分 后端返回数据结构如下
[
{
"path" : "/ApiResources" ,
"component" : "views/layout/Layout" ,
"children" : [
{
"path" : "index" ,
"template" : "<table-base table-name=\"ApiResources\" />" ,
"name" : "ApiResources" ,
"meta" : { "title" : "Api资源" , "icon" : "international" }
}
]
}
]
前端接收到数据,将组件有字符路径换成方法,或者指定模板,要点如下。具体参见这里 要使用模板功能,vue.config.js
配置文件必须设置runtimeCompiler
为 true
if ( router. component) {
const component = router. component
router. component = resolve => {
require ( [ '@/' + component + '.vue' ] , resolve)
}
} else if ( router. template) {
router. component = resolve => {
resolve ( {
template : router. template
} )
}
}
根据基础表格表单页动态生成页面
这个功能需要后端返回每个表的信息,字段名和展示名、数据类型等,这个数据格式自己定,简单随意就好 页面代码如下
< el-table v-loading = " listLoading" :data = " dataList" >
< el-table-column
v-for = " (column, idx) in columns"
:key = " idx"
:label = " column.displayName"
:prop = " column.name"
/>
< el-table-column
label = " 操作"
align = " center"
width = " 230"
fixed = " right"
class-name = " small-padding fixed-width"
>
< template slot-scope = " scope" >
< el-button type = " primary" size = " mini" @click = " handleUpdate(scope.row)"
> 编辑</ el-button
>
< el-button
v-if = " scope.row.status != ' deleted' "
size = " mini"
type = " danger"
@click = " handleDelete(scope.row)"
> 删除</ el-button
>
</ template>
</ el-table-column>
</ el-table>
< el-form
ref = " dataForm"
:model = " temp"
label-position = " left"
label-width = " 120px"
style = " width : 400px; margin-left : 50px; "
>
< el-form-item
v-for = " (column, idx) in columns"
:key = " idx"
:label = " column.displayName"
:prop = " column.name"
>
< el-switch
v-if = " column.typeStr==' Boolean' "
v-model = " temp[column.name]"
style = " display : block"
active-color = " #13ce66"
inactive-color = " #ff4949"
active-text = " 是"
inactive-text = " 否"
/>
< el-date-picker
v-else-if = " column.typeStr==' DateTime' "
v-model = " temp[column.name]"
type = " datetime"
format = " yyyy-MM-dd HH:mm:ss"
placeholder = " 选择日期时间"
/>
< el-input
v-else
v-model = " temp[column.name]"
type = " text"
:placeholder = " ' 请输入' +column.displayName"
/>
</ el-form-item>
</ el-form>
使用的时候,后端返回的路由数据,不要设置component
,而将template
设置为<table-base table-name=\"{name}\" />
,其中的 name 动态替换 注册全局组件table-base
Vue. component ( 'table-base' , ( ) => import ( '@/components/tableBase.vue' ) )
最后
总结
Newlife.IdentityServer4
只是对 IdentityServer
数据简单管理,未来将会增加权限控制,前端优化页面,改善引导方便使用开发中遇到的坑,大都是自己异想天开,新增的功能参考很少,但是自身弄清楚原理,导致一直不成功 磨刀不误砍柴工,基础夯实,才能走的更远!