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)这里只提一次,下面不会再提,默认您已经掌握】

应用功能

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

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

设备管理

订单管理

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

收款记录

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

系统功能

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

审计日志

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

用户管理

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

角色管理

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

小结

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





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

目录
相关文章
|
6天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
28 3
|
4天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
23 8
|
5天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
12 2
|
6天前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
19 1
|
13天前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
20天前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
|
13天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
76 0
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
6月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍