结合SqlSugar Web API+UniApp+Vue+ThorUI来构建BS的前端解决方案,通过Vue+ThorUI实现的移动端前端界面展示,界面美观大方;现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信、H5、APP、WInForm、BS的Web管理端等都是常见的应用。
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版本。
基于Web API的移动端UniApp应用(HbuilderX开发工具)的开发项目界面效果如下所示。
用户登录
移动前端用户通过账号密码进行登录(也可以选择短信验证码方式登录)后台管理系统,登录界面如下所示。
用户输入系统正确的账号、密码,即可顺利登录系统,系统根据用户所属角色和分组信息,展示用户能够管理的功能页面。系统默认展示首页视图。
忘记密码
如果用户忘记自己的账号密码,可以通过手机验证码方式进行重置密码操作。
重设密码、修改用户资料
登录系统成功后,在系统右上角的图像按钮中,可以进行用户密码修改,也可以在编辑按钮或者图标中进入用户信息编辑处理界面,界面效果如下所示。
如需修改用户头像,单击头像图片,图片选择确认后上传图片进行头像修改。
修改手机号码
如需修改手机号码,单击手机号栏目,可以进行手机号码的修改调整,手机修改需要接受短信验证码,输入成功后才能更新该用户的手机号码。
注册账号
由使用人员使用手机和手机验证码自己申请注册用户,由系统管理员审核同意后,创建并分配系统用户,一个手机号码只能申请一次。注册账号的界面如下所示。
注册用户审核
系统管理员登录后,可以在管理功能中进行注册用户的管理操作,如下界面所示。
单击用户列表,弹出审核对话框,审核通过后,系统将创建指定相关信息的用户账号,可以使用该账号和初始密码进行登录。拒绝申请则不再接收该用户的注册,系统不创建账号。
字典管理
字典管理是一个通用的字典大项、字典项目的维护管理,便于系统下拉列表以及相关参考值的维护,字典管理界面如下所示。
这样在具体页面中就可以直接使用字典项目信息了,如下树形列表和下拉项目所示。为了方便,在手机前端为管理员提供一个维护常规字典类型和字典项目的入口,在【管理工具】【字典维护】入口进入,如下所示。
单击其中字典大类,可以进行查看或者编辑对应字典大类下的项目信息,如下界面所示。
我的地址簿
为了方便管理一些地址信息,系统提供了一个通用的地址簿进行管理,可以录入常见的地址信息,如下界面所示。
新增或者对已有记录进行编辑,可以进入界面如下所示。
系统用户维护
系统管理员用户可以登录后,进行系统用户的维护,包括对用户进行查询,以及用户密码重置、用户过期/用户恢复的设置处理。
在管理工具入口,单击系统用户即可进行用户的搜索处理。
滑动用户列表,可以对用户进行密码重置、设置过期、用户恢复操作。
或者单击用户记录,可以对指定用户进行相关的用户密码重置、用户过期/用户恢复的设置处理。
组织机构管理
在管理面板中找到【组织机构】入口,如下图所示。
页面分层列出整个公司部门的组织机构,示例组织机构如下所示,实际根据自己的系统进行创建。
单击特定的机构节点,可以展开详细的机构信息,如下界面所示,管理员可以删除机构处理。
另外在底部有【新增机构】功能,单击可以进行创建机构信息。
角色管理
系角色管理包括角色查看、角色创建、以及分配角色用户几个功能。 在管理面板中找到【角色管理】入口,如下图所示。
角色是以公司进行划分的,因此查看角色需要选择特定的公司节点,如下所示。
单击公司节点,可以查看任一公司的角色列表,如下界面所示。
也可以在底部【新增角色】,弹出如下界面,录入提交即可创建新角色。
业务数据管理
不同的业务系统,我们需要创建一些不同的业务表单数据进行录入、查询等操作。
业务数据,可以在管理列表中根据关键字进行查询,列表界面下所示。