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

目录
相关文章
|
9天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
137 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
42 0
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
500 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1321 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
3月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
188 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
Rust 自然语言处理 API
|
4月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
221 3
|
3月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
195 8

热门文章

最新文章