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

在之前的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的移动前端的功能介绍》