草庐IT

基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍

wuhuacong(伍华聪)的专栏 2023-03-28 原文

在之前的SqlSugar系列随笔中,介绍了很多我们关于SqlSugar的开发框架的内容,SqlSugar的开发框架的目的是多前端应用场景,因此其中会包含各种不同的前端应用,前面介绍了基于DevExpress的Winform的前端应用,以及基于Vue3+TypeScript+ElementPlus的BS前端应用,本篇随笔继续介绍SqlSugar的开发框架的另一个前端应用,基于UniApp+Vue+ThorUI的移动前端。

1、基于UniApp+Vue+ThorUI的移动前端

前端开发,可以是基于Vue&Element的管理后台的前端开发,也可以是Vue + UniApp+手机端组件库的开发H5或者App应用,技术路线都是基于Vue的,我们这里主要介绍UniApp+HBuliderX+Vue+ThorUI来开发H5端的应用。

UniApp 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

使用UniApp的主要原因是它的生态比较完善,而且提供了不同平台的统一的接口调用方法,因此非常方便使用它来统一构建多端应用。

使用UniApp,为了集成方便,一般也会使用HBuilderX开发工具来进行前端的开发。HBuilderX 编辑器是DCloud全新推出的一款HTML5的Web开发工具。HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本即可。如果不考虑深度集成的原因,还可以考虑使用更加广泛的VS Code编辑器,毕竟VS Code可是前端界的开发标准工具了。

另外UniApp也有自己的组件库,同时也做的很不错,不过由于参照模板的问题,我们这里使用了会员版的Thor UI,可以参考的案例更多,方便做出更好的界面效果。

Thor UI 是一款开发移动端网页应用、小程序的前端 UI 组件库,uni-app 版本还可以编译成为安卓/ iOS APP 应用,特点是轻量、简洁,组件覆盖比较全面,使开发更高效。Thor UI目前有微信小程序原生版本 (opens new window)和uni-app版本。

SqlSugar开发框架主要的设计模块场景如下所示。

1)其中一些常用的类库,以及SqlSugar框架的基类放在框架公用模块里面。

2)Winform开发相关的基础界面以及通用组件内容,放在基础Winform界面库BaseUIDx项目中。

3)基础核心数据模块SugarProjectCore,主要就是开发业务所需的数据处理和业务逻辑的项目,为了方便,我们区分Interface、Modal、Service三个目录来放置不同的内容,其中Modal是SqlSugar的映射实体,Interface是定义访问接口,Service是提供具体的数据操作实现。其中Service里面一些框架基类和接口定义,统一也放在公用类库里面。

4)Winform应用模块,主要就是针对业务开发的Winform界面应用,而Winform开发为了方便,也会将一些基础组件和基类放在了BaseUIDx的Winform专用的界面库里面。

5)WebAPI项目采用基于.net Core 的项目开发,通过调用SugarProjectCore实现相关控制器API的发布,并整合Swagger发布接口,供其他前端界面应用进行调用。

6)纯前端通过API进行调用Web API的接口,纯前端模块可以包含Vue3&Element项目,以及基于EelectronJS应用,发布跨平台的基于浏览器的应用界面,以及其他H5应用、App应用或者小程序应用模块,整合Web API进行业务数据的处理或者展示。

其中Web API的Swagger接口管理界面如下。

Winform端的前端界面如下所示。

Vue3+Typescript+ElementPlus的前端界面如下所示。

而基于Web API的移动端UniApp应用(HbuilderX开发工具)的开发项目界面效果如下所示。

 

 2、UniApp+Vue+ThorUI的移动前端功能介绍

了解了大概的项目架构和技术路线后,我们来看看移动端的功能介绍。

和其他前端的功能配套,那么我们移动前端也可以管理一些系统的数据,如用户、机构、角色、字典等等信息,以及一些额外的业务数据处理,如一些业务基础数据的录入,业务的审核,业务统计报表等功能。

1)用户登录

移动前端用户通过账号密码进行登录(也可以选择短信验证码方式登录)后台管理系统,登录界面如下所示。

 用户输入系统正确的账号、密码,即可顺利登录系统,系统根据用户所属角色和分组信息,展示用户能够管理的功能页面。系统默认展示首页视图。

2)忘记密码

如果用户忘记自己的账号密码,可以通过手机验证码方式进行重置密码操作。

3)重设密码、修改用户资料

登录系统成功后,在系统右上角的图像按钮中,可以进行用户密码修改,也可以在编辑按钮或者图标中进入用户信息编辑处理界面,界面效果如下所示。

如需修改用户头像,单击头像图片,图片选择确认后上传图片进行头像修改。

4)修改手机号码

如需修改手机号码,单击手机号栏目,可以进行手机号码的修改调整,手机修改需要接受短信验证码,输入成功后才能更新该用户的手机号码。

 

 5)注册账号

由使用人员使用手机和手机验证码自己申请注册用户,由系统管理员审核同意后,创建并分配系统用户,一个手机号码只能申请一次。

注册账号的界面如下所示。

6)注册用户审核

 系统管理员登录后,可以在管理功能中进行注册用户的管理操作,如下界面所示。

单击用户列表,弹出审核对话框,审核通过后,系统将创建指定相关信息的用户账号,可以使用该账号和初始密码进行登录。拒绝申请则不再接收该用户的注册,系统不创建账号。

7)字典管理

字典管理是一个通用的字典大项、字典项目的维护管理,便于系统下拉列表以及相关参考值的维护,字典管理界面如下所示。

 

 这样在具体页面中就可以直接使用字典项目信息了,如下树形列表和下拉项目所示。

为了方便,在手机前端为管理员提供一个维护常规字典类型和字典项目的入口,在【管理工具】【字典维护】入口进入,如下所示。 

 

 单击其中字典大类,可以进行查看或者编辑对应字典大类下的项目信息,如下界面所示。

 如需要对字典大类的信息进行维护,可以单击顶部修改的按钮,对字典大类的信息进行编辑处理,如下编辑界面所示。

 8)我的地址簿

为了方便管理一些地址信息,系统提供了一个通用的地址簿进行管理,可以录入常见的地址信息,如下界面所示。

 

新增或者对已有记录进行编辑,可以进入界面如下所示。

 9)新闻资讯

在个人信息页面中,里面有一个资讯中心,展示一些新闻资讯,如下所示。

单击可以或查看更多的列表,可以查看详细的新闻咨询信息,详细信息页面如下所示。

10)系统用户维护

系统管理员用户可以登录后,进行系统用户的维护,包括对用户进行查询,以及用户密码重置、用户过期/用户恢复的设置处理。

 在管理工具入口,单击系统用户即可进行用户的搜索处理。

 

 滑动用户列表,可以对用户进行密码重置、设置过期、用户恢复操作。

 

 或者单击用户记录,可以对指定用户进行相关的用户密码重置、用户过期/用户恢复的设置处理。

      

11)组织机构管理

在管理面板中找到【组织机构】入口,如下图所示。

 

页面分层列出整个公司部门的组织机构,示例组织机构如下所示,实际根据自己的系统进行创建。

 

单击特定的机构节点,可以展开详细的机构信息,如下界面所示,管理员可以删除机构处理。

 另外在底部有【新增机构】功能,单击可以进行创建机构信息。

 

在弹出的界面中,单击【父级机构】,可以展示当前机构的节点,选择机构作为父级,然后录入其他信息即可。

 12)角色管理

角色管理包括角色查看、角色创建、以及分配角色用户几个功能。

在管理面板中找到【角色管理】入口,如下图所示。

 角色是以公司进行划分的,因此查看角色需要选择特定的公司节点,如下所示。

 

单击公司节点,可以查看任一公司的角色列表,如下界面所示。

 单击角色节点,可以查看角色的详细信息,或者删除角色,如下所示。

 也可以在底部【新增角色】,弹出如下界面,录入提交即可创建新角色。

 或者在角色包含的用户列表中,可以选择【移除角色用户】,或者【添加新用户】到角色中。

 

 选择【添加】按钮,会弹出新的选择用户列表界面,选择加入用户即可完成角色用户的添加。

 13)业务数据管理

不同的业务系统,我们需要创建一些不同的业务表单数据进行录入、查询等操作。

业务数据,可以在管理列表中根据关键字进行查询,列表界面下所示。

 

 

 以上就是一个移动端的业务应用的系统界面,主要的目的是能够快捷的收集或者处理常规的业务数据,也便于后台管理系统的数据维护。

系列文章:

基于SqlSugar的开发框架的循序渐进介绍(1)--框架基础类的设计和使用

基于SqlSugar的开发框架循序渐进介绍(2)-- 基于中间表的查询处理

基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发

基于SqlSugar的开发框架循序渐进介绍(4)-- 在数据访问基类中对GUID主键进行自动赋值处理 

基于SqlSugar的开发框架循序渐进介绍(5)-- 在服务层使用接口注入方式实现IOC控制反转

基于SqlSugar的开发框架循序渐进介绍(6)-- 在基类接口中注入用户身份信息接口 

基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传

 《基于SqlSugar的开发框架循序渐进介绍(8)-- 在基类函数封装实现用户操作日志记录

基于SqlSugar的开发框架循序渐进介绍(9)-- 结合Winform控件实现字段的权限控制

基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理

基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理

基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用

基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用

 《基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成

基于SqlSugar的开发框架循序渐进介绍(16)-- 工作流模块的功能介绍

基于SqlSugar的开发框架循序渐进介绍(17)-- 基于CSRedis实现缓存的处理

基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面

基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍

 

有关基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍的更多相关文章

  1. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读:随着叮咚买菜业务的发展,不同的业务场景对数据分析提出了不同的需求,他们希望引入一款实时OLAP数据库,构建一个灵活的多维实时查询和分析的平台,统一数据的接入和查询方案,解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型,最终引入ApacheDoris作为最终的OLAP分析引擎,Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图,在叮咚买菜数十个业务场景中广泛应用。作者|叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月,是一家专注美好食物的创业公司。叮咚买菜专注吃的事业,为满足更多人“想吃什么”而努力,通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  2. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求:要创建虚拟机,就需要给他提供一个虚拟的磁盘,我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式:qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令,基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机,另外在创建虚拟机之前,提前打开vnc客户端,在创建虚拟机的时候,通过vnc

  5. ruby-on-rails - (Ruby,Rails) 基于角色的身份验证和用户管理...? - 2

    我正在寻找用于Rails的优质管理插件。似乎大多数现有的插件/gem(例如“restful_authentication”、“acts_as_authenticated”)都围绕着self注册等展开。但是,我正在寻找一种功能齐全的基于管理/管理角色的解决方案——但不是简单地附加到另一个非基于角色的解决方案。如果我找不到,我想我会自己动手......只是不想重新发明轮子。 最佳答案 RyanBates最近做了两个关于授权的railscast(注意身份验证和授权之间的区别;身份验证检查用户是否如她所说的那样,授权检查用户是否有权访问资源

  6. ruby - 在 Rakefile 中动态生成 Rake 测试任务(基于现有的测试文件) - 2

    我正在根据Rakefile中的现有测试文件动态生成测试任务。假设您有各种以模式命名的单元测试文件test_.rb.所以我正在做的是创建一个以“测试”命名空间内的文件名命名的任务。使用下面的代码,我可以用raketest:调用所有测试require'rake/testtask'task:default=>'test:all'namespace:testdodesc"Runalltests"Rake::TestTask.new(:all)do|t|t.test_files=FileList['test_*.rb']endFileList['test_*.rb'].eachdo|task|n

  7. ruby - 如何使用 Ruby 基于字母数字字符串生成颜色? - 2

    我想要像“嘿那里”这样的东西变成,例如,#316583。我希望将任意长度的字符串“归结”为十六进制颜色。我不知道从哪里开始。我在想,每个字符串的MD5散列都是不同的-但如何将该散列转换为十六进制颜色数字? 最佳答案 你可以只取几位前几位:require'digest/md5'color=Digest::MD5.hexdigest('Mytext')[0..5] 关于ruby-如何使用Ruby基于字母数字字符串生成颜色?,我们在StackOverflow上找到一个类似的问题:

  8. 【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2

    文章目录1.自动驾驶实战:基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战:基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战:基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0(项目默认框架版本为2.3

  9. H2数据库配置及相关使用方式一站式介绍(极为详细并整理官方文档) - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库?1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动:2.1.2.3启动后控制台页面:2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

  10. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中,我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如,如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

随机推荐