一、流行框架比较
作者用过的前端框架不少,曾经还在一个项目中同时使用两套框架控件(年少无知、效率特慢),所以可供选择的前端框架有不少:
- easyui:
-
- 优点:非常成熟的框架,基于iframe可以进行多线程操作
- 缺点:由于采用iframe,不优化情况下效率是个问题,同时iframe导致对SEO的支持不是很好,自带风格不是很符合现在人的口味,自己定义风格有点浪费时间,顺便提供下本人自己修改过的风格
- ligerui:与easyui差不多,国人自己写的产品,有些控件的使用比easyui更舒服
- ace(bootstrap):风格比较不错的一套bootstrap框架
- metronic(bootstrap):现在最火的一套bootstrap框架,不过风格个人不是很喜欢
- beyond admin(bootstrap ):个人比较喜欢这个范,而且提供的控件也足够使用,决定就使用它了,而且它本身也是把大部分bootstrap常见的控件融合了起来,比如:jquery.datatables、fonts等
- react native:独立开发成本比较大
- vuejs:独立开发成本比较大
二、下载对应的beyond admin源码
- 解压可以看到对应的目录
- 打开index.html 可以看到对应的页面示例,具体的控件示例可以自己细看:
三、将前端框架融合进ABP
- 拷贝assets到项目的Scripts中
- 更改 MyProject.Web/Views/Shared/_Layout.cshtml 页面相关源码
layout代码
- 运行程序还是看到以下页面
- 我们猜测主页面路由指向问题,找到HomeController控制器,看到以下代码
- 更改代码,并添加相关页面
- 重新运行程序可以看到以下页面,证明我们迁移成功了
四、示例:
我们添加一个控制器(DemoContorller),专门用来放相关测试demo
- 示例1:datatable
我们直接采用 jquery.datatables来作为我们的首选表格控件,此控件虽然自带属性和事件比较少,可扩展性比较好
- 示例2:fonts
暂略。
- 示例3:弹出框
弹出框在modal和layer中考虑了许久,从易用性和使用效果讲,最后决定使用 layer来作为弹出框使用。
PS:最近接了个外包,更新的进度会慢点。
https://www.cnblogs.com/samllen/p/7108340.html