![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 91
Ygria_
这个作者很懒,什么都没留下…
展开
-
微前端qiankun框架接入实战
背景随着项目的演进,前端的业务架构也会变得更加庞大、复杂,并常常会出现需要模块复用的场景:1、组件复用,例如统一的导航栏、侧边栏、路由权限处理逻辑等2、模块级别复用,例如统一的用户管理模块、文档中心等3、系统级别复用,总的系统由多个系统组合而成,不同的系统可能由不同的开发团队维护、使用不同的技术栈开发。除了代码层面复用(复制粘贴),也需要更加完善的模块和系统复用方案。引入微前端,将代码根据业务逻辑划分至不同的项目之中进行维护,能够有效的降低维护难度,每个系统既可以独立运行、独立部署,也可以组合起来原创 2021-08-26 20:26:36 · 2232 阅读 · 1 评论 -
JavaScript ES6 | 使用展开运算符完成全平台校验重名逻辑封装
背景在应用系统中创建业务对象时,需要填写表单,对于对象的名称、标识等,全平台往往有统一的功能规范。例如:名称:统一为中文、不超过50字符、不能为空、不能与现有平台重复标识:统一为英文,不超过50字符、不能为空、不能与现有平台重复交互逻辑一致(填写名称/标识后,调用后台接口进行判断,后台查询数据库后,返回是否存在重名数据(true/false),存在重复则报表单校验错误,不允许表单提交),前端使用的组件也一致(使用element-UI的Form组件),公共逻辑清晰,于是我尝试进行统一的规则校验逻辑原创 2021-07-08 20:59:45 · 343 阅读 · 0 评论 -
Vue | 指令实现自动填充英文名功能
背景:应用系统中存在多个创建实体表单,表单填写时,在填写中文名称后,要填写对应的英文名作为标识或数据库查询索引。需求:填写中文名的同时,系统自动生成英文名并填充到表单中,辅助用户操作,节约操作时间。实现效果方案调研对需求进行分析后,对于如何将中文名翻译成英文字符串,调研以下方案:调用翻译引擎优点:翻译准确,对于短句也能翻译缺点:部署难度大,需要捆绑翻译引擎调用开放API(谷歌翻译/百度翻译等)优点:能完成翻译功能缺点:可能需要付费/开发者帐号等,需要集成成本,需要私有化部署版本.原创 2021-05-21 19:09:27 · 596 阅读 · 0 评论 -
Vue + WebRTC 实现音视频直播(附自定义播放器样式)
1. 什么是WebRTC1.1 WebRTC简介WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的实时通信框架,提供了一系列页面可调用API。参考定义: 谷歌开放实时通信框架在上一篇博客Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互 中,已经涉及到WebRTC接口的使用,使用到了getUserMedia方法,用于通过浏览器获取设备麦克风,从而采集音原创 2020-11-17 18:54:30 · 10261 阅读 · 8 评论 -
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互
引言在与实现了语音合成、语义分析、机器翻译等算法的后端交互时,页面可以设计成更为人性化、亲切的方式。我们采用类似于聊天对话的实现,效果如下:智能客服(输入文本,返回引擎处理后的文本结果)语音合成(输入文本,返回文本以及合成的音频)如上图所示,返回文本后,再返回合成出的音频。音频按钮嵌在对话气泡中,可以点击播放。语音识别(在页面录制语音发送,页面实时展示识别出的文本结果)实现功能及技术要点1、基于WebSocket实现对话流页面与后端的交互是实时互动的,所以采用WebS原创 2020-10-22 20:42:21 · 1760 阅读 · 3 评论 -
Vue | 自定义指令和动态路由实现权限控制
功能概述:根据后端返回接口,实现路由动态显示实现按钮(HTML元素)级别权限控制涉及知识点:路由守卫Vuex使用Vue自定义指令导航守卫前端工程采用Github开源项目Vue-element-admin作为模板,该项目地址:Github | Vue-element-admin 。在Vue-element-admin模板项目的src/permission.js文件中,给出了路由守卫、加载动态路由的实现方案,在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动,就能将基于角色原创 2020-08-27 20:49:19 · 1154 阅读 · 0 评论 -
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能:下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用。对于没有层级的数据,我们可以使用表格或卡片来展示。要展示或建立层级关系,就一定会用到树形组件了。使用Vue + Element UI,构建出最基本的树如下图所示:现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景。一、下拉菜单将下拉菜单嵌到树节点中,使操作更加简便、紧凑。效果演示效果如图:图示1:悬浮在树节点状态图示2:点击三个点图原创 2020-08-08 10:49:46 · 4849 阅读 · 3 评论 -
Vue基础:使用Vue.extend()实现自定义确认框
问题背景前端交互中经常使用确认框。在删除、修改等操作时,调用后端接口之前,先跳出弹框显示提示信息,提示用户确认,避免用户误操作。项目中全局引入了Element,提供了一套模态对话框组件,用于消息提示、确认消息、提交内容,使用起来也非常简便。以下来自于element官网文档:如果你完整引入了 Element,它会为Vue.prototype添加如下全局方法: $msgbox, $aler...原创 2020-04-28 17:13:25 · 1448 阅读 · 1 评论