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,如需转载请自行联系原作者

目录
相关文章
|
13天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
14 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
XML 前端开发 JavaScript
深入介绍 UI5 框架里 Smart Field 控件的工作原理
深入介绍 UI5 框架里 Smart Field 控件的工作原理
16 0
|
3月前
uniapp项目实践第四章:如何安装uni-ui组件库
uniapp项目实践第四章:如何安装uni-ui组件库
94 0
|
9天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
1月前
|
消息中间件 Kafka Linux
Kafka【付诸实践 03】Offset Explorer Kafka 的终极 UI 工具安装+简单上手+关键特性测试(一篇学会使用 Offset Explorer)
【2月更文挑战第21天】Kafka【付诸实践 03】Offset Explorer Kafka 的终极 UI 工具安装+简单上手+关键特性测试(一篇学会使用 Offset Explorer)
146 2
|
1月前
|
Linux API Android开发
Airtest UI自动化框架 v1.1.4
Airtest UI自动化框架 v1.1.4
24 3
|
2月前
|
前端开发 JavaScript
响应式UI框架
响应式UI框架
46 0
响应式UI框架
QGS
|
3月前
|
前端开发 数据可视化 Java
手拉手JavaFX UI控件与springboot3+FX桌面开发(下)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
52 0
QGS
|
3月前
|
前端开发
手拉手JavaFX UI控件与springboot3+FX桌面开发(中)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
83 0
QGS
|
3月前
|
API 数据安全/隐私保护 索引
手拉手JavaFX UI控件与springboot3+FX桌面开发(上)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
64 1

热门文章

最新文章