核心主题

无需写任何一行C#代码,快速实现基于Extjs5 UI的企业管理系统!!!文章稍长,请耐心看完。如有任何不明白的地方,您可(QQ:710782046;Email我们:jack.chain@cnunify.com

  案例介绍,我要做个什么案例?

我现在要做一个会员管理的界面。 包含功能: 1.增加;2.删除;3.修改;4.多字段模糊查询;5.分页;(6.用户管理;7.权限管理;8.监控等)
要求不同人员具有不同的权限,权限到按钮。
例如A用户只能新增,B用户只能查看,C用户无法进入到这个会员管理的界面


  工具,环境准备

目前我只有本地的一台数据库,其他工具都没有,现在我要开工了,首先把数据库的表建立完成,如下:
一、创建数据库表



二、需要注册一个UFX·AM的账号,单击本页面的菜单“注册账号”,完成注册,注册成功后需要到您的邮箱里面激活企业账号。
三、此时您可以得到一个UFX·AM的企业账号,超级管理员账号admin和密码。这些信息等会要使用。
因为我们要做一会员管理的界面,这是项目的一个模块,首先我们要在UFX·AM里创建这个项目, 打开:http://am.cnunify.com/Admin/Main。打开系统管理,新增一个Demo系统,如下: 创建成功后,牢记系统的ID,这个后面要用到。

系统创建好了之后,需要为这个系统分配管理员,将admin设置为Demo系统的超级管理员(每个系统都有一个固定的SuperRole,这是UFX·AM自动产生的超级管理员角色,不允许删除修改等操作),设置如下:


四、下一步WebMisSharp代码生成工具上场,下载地址http://am.cnunify.com/WebMisSharp-Publish-1.5.0.rar
五、打开WebMisSharp,首次使用需要注册,注册成功后,需要下载对应的Extjs企业级开发框架模板http://am.cnunify.com/EnterpriseExtJs.rar或者http://am.cnunify.com/EnterpriseExtJs.rar。文件下载后,解压到WebMisSharp的Templates目录,最后路径应该是WebMisSharp\Templates\EnterpriseExtJs\。然后创建项目。如下操作:


六、设置项目的名称,设置项目的路径,设置项目的主数据库(也就是刚刚你创建Member表的数据库),点击保存项目,这时候会花比较长的一段时间,拷贝框架到你设置项目的路径(H:\ExtjsDemo)。成功后,你可以到H:\ExtjsDemo打开解决方案,各层结构如下所示:


七、打开ElegantWM.WebUI项目的WebConfig配置文件,将刚刚我们申请的各项ID填入


八、ID输入完成后,我们可以直接运行项目了,单击VS的运行,系统会跳转到UFX·AM登录界面,输入admin,和密码,登录成功会跳转回localhost,如果出现如下界面,那么恭喜你成功一半了。


  用WebMisSharp生成会员管理的各层代码和Extjs4的标准界面

一、打开WebMisSharp,选择ExtjsDemo项目,右键数据库,单击加载/刷新,WebMisSharp会自动列出该数据库的表、视图、过程;右键Member表,单击查看表结构。做如下操作:


二、选择好了之后,单击“生成到项目”按钮,这时候WebMisSharp会将生成的代码、Extjs js文件等东西拷贝到你的项目中,自动完成代码部署操作。你会发现H:\ExtjsDemo中你的项目里多了好多的文件。
  

三、OK了,现在99%的工作已经做完了,下一步就是运行显示了。直接单击VS的运行,不出意外,会顺利打开网页,但是您应该看不到任何东西,跟上次的结果一样。原因是没有创建模块。



  UFX·AM中配置项目权限等

一、运行VS中的ExtjsDemo项目,打开主界面,选择首选项,模块反射,单击“加载”,再单击“同步”按钮,完成Member模块的权限导入工作,这是导入到UFX·AM的权限中心的


二、到UFX·AM的权限中心,打开http://am.cnunify.com/Admin/Main的角色权限模块。选择系统,然后新增根节点。

根节点增加完成后,新增模块节点,类型为Page;再为该Page增加权限控制节点

由于要控制到权限按钮,这里新增两个按钮,增加和删除,按钮的关键字就是按钮的action,统一为btnAdd,btnDelete,还一个按钮的Controller属性是所在的页面Controller名称,也就是Member

最终完成后的效果如下图所示


三、权限设定完成后,下一步就是设置角色,我们新增两个角色,一个是只读,一个是可维护的,还是刚才的界面,新增角色。
四、角色创建完成后,单击角色右侧的彩色盾牌,为其分配权限,勾选需要的节点,然后单击保存即可。注意这里的按钮,如果勾选代表界面不显示,这个规则您可以自己定义。
 

五、到“组织架构”模块中,新建两个模拟账户,分别分配只读和读写维护的权限。read用户,rwrite用户,初始密码都是123456

为read分配权限,rwrite一样操作

最终用户列表


六、OK了,所有的事情都做完了,剩下就是体验了



  大功告成,运行测试

一、我们现在回到VS,运行,然后分别用admin,read,rwrite三个用户登录,还要注意下面这个问题,开启按钮控制的代码,默认是关闭的。


二、用户read的界面



三、用户rwrite的界面,CRUD,分页,模糊查询功能一应俱全,而且界面非常简约,没有一点“赘肉”。



  整套流程完毕,感觉如何?

您通过刚刚的武林秘籍,没有写一句C#代码,成功创建了会员管理模块,包括权限管理系统在内的,会员增、删、改、多字段模糊查找、分页查询等功能,更酷的是统一标准的Extjs界面框架。
照这样的开发速度,一个模块分分钟搞定,这样可以节省您多少时间呀!!!
赶紧分享吧!