ABP框架实践基础篇之开发UI层

简介:

说明

其实最开始写的,就是这个ABP框架实践基础篇。在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看ABP框架理论研究总结(典藏版),完成了理论基础的教程,再次回头来完成这个实践基础的教程。这也算是理论实践相结合了吧!但是,不管理论基础也好,还是实践基础也罢,毕竟都是基础教程,所以,很大程度上是带领新手快速熟悉这个框架或者很多基本的用法。想要彻底地掌握这款框架,请期待我后面的ABP理论高级篇ABP框架实战高级篇

由于目前我开发的是MPA(多页面应用),所以这篇大概介绍一下我的多页面应用开发用到的一些前端技术以及页面展示,具体细节这篇不说,留到以后《ABP框架实践————高级篇》来说,欢迎大家关注。

整个管理后台用的是Metronic框架,又用到了大量的插件,如果前端知识掌握得不牢靠,那么对于一个偏后端的程序员来说,绝对是一个挑战,可能会让你焦头烂额,因为功能丰富的系统用到的插件实在是太多了。如果不熟悉这些插件的用法或者插件之间的依赖,那么可能花费一天也找不到一个小问题所在。正如当初初学编程时,费了半天时间才找到因为一个分号才导致的错误,这些成长过程都是很相似的。

登录界面

下面就是我的登录页面了,Metronic有很多的布局页和登录页可供选择,我根据自己的直觉选择了下面这个。
用的技术:Html,Css,Bootstrap,jQuery,jQuery.validate(用于输入的校验),Json2(可能会用来将表单数据转成json字符串),jQuery BlockUI(用于阻止UI线程),jQuery Cookie,jQuery.Form,jQuery Uniform,Modernizr,Toastr,SpinJS,SweetAlert等等 【简单的技术(比如html,css)这里只提一次,下面不会再提,默认您已经掌握】

577014-20160125183025676-750171603.png

应用功能

应用功能一般放一些跟业务相关的功能。下面的截图是设备管理和订单管理。

用到的主要技术有:DataTables,分页,省市联动,Bootstrap Modal模态窗,日历插件DatePicker

设备管理

577014-20160126144300270-1992615778.png

订单管理

订单管理用到的技术基本同上。
图片

收款记录

主要用到的技术:bootstrapTable及其插件。
png

系统功能

系统功能只放跟系统相关的功能。
下面的三项功能都主要以jTable插件为主(ABP的作者kalkan写的一款开源插件)。

审计日志

用到的主要技术:jTable,Moment.js
图片

用户管理

用到的主要技术:jTable,jsTree
图片

角色管理

用到的主要技术:jTable,jsTree
图片

小结

因为前端开发知识面涉及得太广,主要是大量插件的使用,所以这里也不可能全部详细地写出来,再者,每个人都有自己喜欢或者熟悉的插件,我也不可能将自己喜欢的强制让别人喜欢。前端嘛,就是面子,就是为了好看和用户体验更好,只要你喜欢,你使用什么技术都没有强制要求!





本文转自tkbSimplest博客园博客,原文链接:http://www.cnblogs.com/farb/p/ABPPracticeDevUIPlayer.html,如需转载请自行联系原作者

目录
相关文章
|
30天前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
15天前
|
Android开发 开发者 UED
探索安卓应用开发中的UI设计趋势
随着移动应用市场的不断发展和用户需求的变化,安卓应用的UI设计趋势也在不断演进。本文将深入探讨当前安卓应用开发中的UI设计趋势,包括暗黑模式、原生化设计、动效设计等方面的发展趋势,为开发者提供参考和启发。
|
18天前
|
JavaScript API
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
22 1
|
1月前
|
Web App开发 开发框架 前端开发
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
39 0
|
1月前
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
16 2
|
1月前
|
开发框架 前端开发 JavaScript
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
【4月更文挑战第30天】Flutter是一款高效跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称,简化了动态UI和数据驱动视图的实现。本文深入讨论了动态UI构建原理,包括基于Widget树模型的UI更新和状态管理,如使用StatefulWidget和数据流库(如Provider、Redux)。此外,文中还介绍了实现技巧,如使用ListView等可滚动组件、StreamBuilder进行数据流驱动的UI更新,以及应用响应式布局以适应不同设备。Flutter为开发者提供了构建高效动态界面的强大工具。
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
|
1月前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
1月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
1月前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
1月前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)