web前端
liuyonghong159632
软件工程专业:欢迎交流学习:qingwatianya
2010-2018:西安某互联网公司,任职技术总监,负责公司整体技术架构设计规划及运维工作,带队App项目用户规模60万+,项目收益流水7000万+。
2020-2021:宁波某研究院,巡检机器人项目组,产品经理。
展开
-
【Abp VNext】实战入门(五):【13】前端管理界面 vue-element-admin —— 左侧菜单自定义图标及图标大小控制
一、前言:使用 vue-element-admin 避免不了的是自定义左侧菜单图标以及控制图标大小,今天就记录一下如何操作。二、操作步骤:去阿里图标库查找需要的图标,然后下载对应的SVG文件:www.iconfont.cn把.svg文件拷贝到项目根目录:icons/svg在路由router/index.js 中配置新增的svg图标名:meta:{icon:‘home’}这样处理后已经可以在左侧菜单中显示对应图标了,但是有三个问题要解决:自定义图标太小不受控制:自定义图原创 2021-02-28 15:39:12 · 3362 阅读 · 3 评论 -
【海康威视】前端开发:【1】弹框内容被视频画面遮挡,弹框提示如何覆盖视频画面?【已解决】
一、前言:采用B/S的方式对海康威视进行二次开发,在针对某些需要弹框让用户确认操作的环节,发现弹框被视频画面遮挡,通过调节html元素 Z-Index 属性无法解决;二、解决方案:在弹出的div层内部添加 元素可以遮挡视频画面,这里是在vue项目中,使用的element-ui 中的 弹窗标签,经过对内部iframe元素的强行定位和大小 调出来的一个布局效果,至于内部多余的html元素可以根据自己需求处理;//xxx.vue <el-dialog title="电子围栏:" :visible原创 2021-02-24 21:21:40 · 4780 阅读 · 6 评论 -
【Abp VNext】实战入门(五):【12】前端管理界面 vue-element-admin —— 【客户端】全局使用WebSocket
一、前言:API接口每次调用都要走一个完整的握手流程,服务端不能通过API主动向前端客户端发送信息; 针对频繁轮询的情况比较消耗资源;WebSocket只需建立一次连接,并保持长连接状态,客户端服务端可双向通信,通信简单快捷,资源消耗小。WebSocket通常用于即时通讯方面的需求。二、前端全局使用WebSocket:每个页面可以单独创建WebSocket连接,但是没有必要去做重复操作,所以先把牌坊立好:咱要全局使用WebSocket服务端后续写篇文章讲一下;1、根目录创建 /js_sdk/w原创 2021-02-23 17:20:55 · 1920 阅读 · 1 评论 -
【Abp VNext】实战入门(五):【11】前端管理界面 vue-element-admin —— 使用阿里字体图标库 iconfont.css
一、前言:项目中经常需要使用图片图标,很多图片是完全可以采用字体图标来替代,字体图标具有明显的优势:矢量图、可以任意调节大小、任意改变颜色、体积小、管理方便等优点;vue-element-admin 采用的是 element-ui 框架 已具备很多现成图标,具体内容看连接: element-ui 自带图标。如果这些图标还不够你用可以前往阿里字体图标库搜索免费开源的海量图标:阿里字体图标库二、具体操作方法:1、阿里字体图标库地址:https://www.iconfont.cn2、注册阿里账号-&原创 2021-02-19 18:16:37 · 820 阅读 · 1 评论 -
【Abp VNext】实战入门(五):【10】前端管理界面 vue-element-admin —— 以同步的方式调用接口并获得返回结果
一、前言:常规的作业方式都是在接口调用结果中进行下一步操作,但是这样做可能会出现,很多层逻辑嵌套使业务变得复杂;嵌套多了之后 this.xxxMethod() 访问外部的资源属性或者方法会访问失败,应该跟vue本身机制有关,通常要在最外层 声明 let _this =this; 然后在多级内部嵌套中 使用 _this.xxxMethod(); 才能访问; import Device from '@/business/device.js' Device_Load() { Devic原创 2021-02-18 18:03:46 · 1048 阅读 · 0 评论 -
【Abp VNext】实战入门(五):【9】前端管理界面 vue-element-admin —— Router路由跳转及参数传递
一、前言:除了常规的通过标签link形式跳转页面的方法,vue-element-admin 项目中已经自带路由封装,可以在代码中手动控制页面路径跳转, 通常只需要知道如何跳转页面,如何传递参数即可。配合底层路由拦截功能,参考:【Abp VNext】实战入门(五):【2】前端管理界面 vue-element-admin —— 路由拦截优化改造二、必须的页面路径申明配置:描述:所有页面要进行展示都必须先在路由页面中先行声明(名称、路径…)1、在根目录router/index.js 中配置写好的vue页原创 2021-02-18 13:57:17 · 2941 阅读 · 0 评论 -
【Abp VNext】实战入门(五):【6】前端管理界面 vue-element-admin —— 通过Access_Token获取用户基础信息
一、前言通过账号密码信息从 https://localhost:44349/connect/token 获取的结果只有Token相关信息,没有用户基础信息,连用户编号ID都没有;可用使用token从 https://localhost:44349/connect/userinfo 获取用户基础信息; 这个接口也是隐藏的没有在 Swagger中显示二、步骤1、request.js 接口请求中添加Content-Type:request.headers['Content-Type'] = 'appli原创 2021-01-10 19:08:40 · 1154 阅读 · 1 评论 -
【Abp VNext】实战入门(五):【2】前端管理界面 vue-element-admin —— 路由拦截优化改造
一、前言项目根目录中的 permission.js 存放的是路由拦截代码,同时在 main.js 中全局引入 import ‘@/permission’ ;每次页面跳转前都能有效拦截,根据自己的业务有所作为;不得不说这个 permission.js 取名不是很贴切 路由拦截就路由拦截,取名为permission 授权许可,可能就是为了体现角色权限动态页面路由加载吧;在每次路由的时候检测路由白名单、Token是否存在就可以了,没必要再去检测用户基础信息 多余操作,当然根据实际需求而定;关键是这块的代原创 2021-01-10 17:10:59 · 1378 阅读 · 1 评论 -
【Abp VNext】实战入门(五):【1】前端管理界面 vue-element-admin —— API基础接口路径BaseUrl配置
一、前言:vue-element-admin是一个后台前端解决方案,它基于vue和element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。由于Vue-Element-Admin 默认源代码功能太多,对于初学者学习不友好,项目正式搭建的时候也比较繁琐,所以采用 实际上采用的是 基础模板项目:Vue-Admin-Temp...原创 2021-01-08 01:06:36 · 1934 阅读 · 0 评论 -
IE浏览器通过Activex插件直接访问客户端电脑上的文件 无需弹框选择?
本文主要讲解如何采用.Net C# 开发Activex插件,然后通过IE浏览器打开网页,在网页中通过代码直接加载访问客户端电脑上的图片的Base64编码,并在网页呈现编辑;案例背景:海康威视监控Web版二次开发->前端调用海康威视视频插件自动截图监控画面->前端对截图进行直接展示编辑(绘制境界区域 电子围栏 输油管道等信息);但是视频插件抓图后自动保存系统,前端网页只能获取保...原创 2019-11-26 12:16:45 · 1168 阅读 · 0 评论 -
Web项目发布 采用gulp压缩 JS CSS CSHTML ASPX HTML Image 给JS CSS自动添加版本号 强制浏览器刷新缓存
最近研究了一下如何通过gulb对JS CSS HTML Image 文件压缩优化和JS CSS自动添加版本号,整理成文供大家参考!做Web项目经常遇到JS CSS更新后,客户端看不到效果,特别是在移动端APP内嵌网页的场景,苹果用户需要划掉APP重新打开 相对简单,安卓用户需要上设置里面手动清理APP缓存 难度较高好多人不会。注:本工程项目已配置完成,只需完成前2个步骤即可跳跃到第原创 2017-07-20 14:03:55 · 1046 阅读 · 1 评论