现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信、H5、APP、WInForm、BS的Web管理端等都是常见的应用。本篇随笔概括性的介绍基于HBuilderX+UniApp+ThorUI的手机端前端开发处理,总结一下开发工具的设置,以及常见的H5端开发的一些相关知识。

1、前后端分离的后端API架构设计

在我们设计好一个Web  API 的接入层后,Web API根据用户、账号登录后获得相关的令牌,每次访问接口,通过令牌进行识别用户身份,从而提供用户身份相关的数据或者记录用户操作信息。

后端的WebAPI,这里可以是基于我们自己的技术路线,如Asp.net /Asp.net Core 等的.net路线,或者java路线,不管哪种后端技术架构,都是基于对常规业务的分类,横向或者纵向切分业务,并在后端对基础接口的提供进一步的封装处理,以便提供统一的接口接入处理。

后端采用基于Asp.net的Web API技术,可以提供按Area域来管理API的分类,Web API如下架构所示。

为了更好的进行后端Web API控制器的相关方法的封装处理,我们把一些常规的接口处理放在BaseApiController里面,而把基于业务表的操作接口放在BusinessController里面定义,如下所示。

通过Web API接口返回结果的统一封装处理,我们定义了相关的格式如下所示。

2、Vue 前端H5应用的开发

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

UniApp 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到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版本。

构建基于Vue的前端项目,我们有一个很重要的部分,就是需要准备好对应Web API的前端JS端类的封装处理,引入了ES6类的概念实现业务基类接口的统一封装,简化代码。

例如常见模块中的权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。

其中JS类的BaseApi具有常规的增删改查接口,如下所示。

代码视图如下所示,主要是定义一些通用的操作方法以及常规API接口的操作方法

如前端API模块中,会存在很多类似的JS类,如下图所示。

这样继承的关系,可以尽可能的简化代码的处理,类似类的抽象封装,可以减少大多数的常规代码,我们只需要继承基类就可以获得大类通用的API接口了。

例如,对于常用业务的组织机构类,我们只需要添加一些特殊接口的定义就可以了,其他的会继承自BaseApi的基类方法。

3、注入一些快捷的操作类入口

有时候,为了便于对一些常用类的操作,我们往往会通过Vue.prototype的方式来注入一些操作类入口,便于快捷处理。

import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.http = http
Vue.prototype.tui = tui
Vue.prototype.$store = store

或者我们也可以把它独立在一个类文件里面进行引入,这里借鉴了uview项目的做法,把自定义对象$u挂载到uni对象上,便于操作处理。

有了这些快捷的挂载类,我们可以方便的访问一些常用的处理方法。

computed: {
currentUser() {
if (uni.$u.test.isEmpty(this.creator)) {
return this.vuex_user?.info?.fullName;
} else {
return this.creator;
}
},
currentDate() {
if (uni.$u.test.isEmpty(this.createTime)) {
return uni.$u.time.timeFormat();
} else {
return uni.$u.time.timeFormat(this.createTime);
}
}
},
checkCode() {
var code = this.formData.shopCode;
if (uni.$u.test.isEmpty(code)) return; shop.CheckCodeValid(code).then(res => {
if (res.success) {
this.tui.toast('未被占用, 可以使用!')
} else {
uni.$u.toast("已被占用,请使用其他代码")
}
})
},

4、创建页面组件

我们知道,Vue的强大,其中之一就是它的组件化非常便利,因此我们在设计界面的时候,如果重复出现,尽可能的把它抽取出来作为组件来定义,然后提供相关的Props参数或者处理事件就很好了,而且可以减少主要页面的代码,同时也方便维护组件。

我往往在开发前端项目的时候,会抽取很多共性的地方,作为组件,然后主页面只需要简单的调用即可,随着项目的开发,我们可能抽取更多,完善更好的组件库出来了。

例如对于一个异常信息的处理,我们整合了多个模块的内容进行展示,采用自定义组件的方式,可以减少很多繁杂的前端代码。

上面页面的大部分都是自定义组件的整合使用,如下代码截图所示。

需要使用的组件,在Vue的JS代码中导入组件即可

最后我们来看看其他前端页面的效果,供参考。

登陆界面效果

业务系统的主界面效果

业务字典管理界面

组织机构以树形图的方式进行展示,单击可以查看详细机构信息,或者在下面提供添加组织机构处理。

创建组织机构的界面。

角色管理和角色人员维护

这样通过管理员的权限来处理权限系统的基础信息,也就可以不用在依赖管理前端的操作管理。

基于HBuilderX+UniApp+ThorUI的手机端前端开发处理的更多相关文章

  1. 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验

    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔继续分析总结一下项目 ...

  2. 基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库 开发实战(一)

    1.   优宝库介绍 优宝库是基于阿里妈妈.淘宝联盟 淘宝商品Api,前端使用HBuilderX + UniApp + ColorUi,后端采用UniClound 精选淘宝商品进行推荐的App程序.下 ...

  3. 专注手机端前端界面开发的ui组件和js组合

    frozenui一款腾讯开发的简化版Bootstrap,只用于手机端 http://frozenui.github.io/ https://github.com/frozenui/frozenui z ...

  4. 手机端app开发初识

    1.所需软件说明 百度云下载链接: https://pan.baidu.com/s/1-TEQZP9QbJSlGSYedyAUFw密码: 2z8l 或者官方链接: Hbuilder:http://ww ...

  5. 手机端 https://doc.vux.li/zh-CN/components/badge.html

    https://doc.vux.li/zh-CN/components/badge.html 手机端前端框架

  6. 【学习】如何制作手机端html模板(REM的实际应用)

    以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...

  7. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  8. EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问

    很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-s ...

  9. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问

    关于EasyDSS EasyDSS商用流媒体服务器解决方案是一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器 ...

随机推荐

  1. labview从入门到出家8(进阶篇)--简单好用的状态机

    labview的状态机类似于一个软件框架的基本单元,好的软件框架和软件思路采用一个好的状态机,就如虎添翼了.这章给大家讲一个本人常用的一个状态机,基本上以前的项目都是建立在这个状态机上完成的,当然网上 ...

  2. java-Stream的总结

    JAVA中的Stream 01.什么是Stream Stream是JDK8中引入,Stream是一个来自数据源的元素序列并支持聚合操作.可以让你以一种声明的方式处理数据,Stream 使用一种类似用 ...

  3. 选择结构-穿透的switch语句和循环结构-循环概述

     case的穿透性 在switch语句中,如果case的后面不写break,将出现穿透现象,也就是不会在判断下一个case的值,直接向后运 行,直到遇到break,或者整体switch结束 publi ...

  4. go grpc: connection reset by peer 的一种解决方案

    最近添哥一直反映,他手下的设备以grpc stream的方式向我服务端发送数据.偶然会收到错误.现象如下: 连接已经建立了一段时间,正常使用. 突然client.Send 返回 eof. 客户端有报错 ...

  5. 7 什么是dubbo

    什么是dubbo 快速入门dubbo 了解什么是dubbo之前,我们得先了解什么是分布式系统? <分布式系统原理与范型>定义: 分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像 ...

  6. Linux中安装JDK详细步骤

    一.下载Linux版本的JDK 进入官网下载对应的JDK,下载之前需要先登录 官网地址 -> https://www.oracle.com/ 登录成功后,找到对应的下载位置 根据自己电脑下载对应 ...

  7. 使用传统的方式遍历集合对集合中的数据进行过滤和使用Stream流的方式遍历集合对集合中的数据进行过滤

    使用传统的方式,遍历集合,对集合中的数据进行过滤 class Test{ public static void main(String[] args){ ArrayList<String> ...

  8. python shutil相关操作

    python shutil模块常用操作 高级的 文件.文件夹.压缩包 处理模块 1.将文件内容拷贝至另一个文件中 shutil.copyfileobj(src, dist, length=16*102 ...

  9. 如何让照片中的人物笑起来?HMS Core视频编辑服务一键微笑功能,让人物笑容更自然

    最近一键"露齿笑"席卷全网,无论是短视频用户还是社交App用户都在使用这项黑科技.当三两好友聚会拍集体照留念时,为了处理个别人的表情"瑕疵",让大家都尽量保持微 ...

  10. The Art of Code

    目录 1. Polyglot 2. Palin 3. Others 1. Polyglot 2. Palin 3. Others