🌓

在谷歌(Chrome)中css设置小于12px的10px的文字

众所周知,Google浏览器最小字体为12px,那如何实现更小的10px字体呢?在网页中,经常会有一些促销标签,设计师很喜欢把这些便签的颜色设计的很醒目而字体很小,当然我们不讨论这种设计在视觉上会产生什么效果,我们现在要讨论的是如何制作这种小字体。

字体大小限制在有些浏览器(Chrome)上需要做设置的,例如:Chrome默认最小字体大小为12px,小于12px的字体都显示12px大小,不过你可以设置最小到6px。当然对于普通的用户是不会对它进行设置的,所以需要一些技术手段来做这种小字体。下面是不同平台不同浏览器对字体大小的限制:

阅读全文

vue中css/scss的mixin介绍及用法

一、mixin是什么

@mixin是一种简化代码的方法,能够提高代码的重复使用率。

二、mixin的基本用法

mixin定义(使用@mixin定义):

阅读全文

Nginx 504 Gateway Time-out报错的解决办法

报错信息

504 Gateway Time-out
原因是程序执行时间过长,导致请求超时。
504 Gateway Time-out

阅读全文

分析Nginx 502 bad gateway产生错误原因及解决方案

一般情况下我们搭建前端运行WEB环境时会采用Nginx比较多,使用Nginx作为Web服务器的时候,你或多或少都会遇到Nginx 502 bad gateway的错误,造成这种错误的原因有很多,下面我们来一一解析。
这样的错误提示问题502 Bad Gateway是指错误网关,无效网关;在互联网中表示一种网络错误。表现在WEB浏览器中给出的页面反馈。
含义:这通常并不意味着上游服务器已关闭(无响应网关/代理) ,而是上游服务器和网关/代理不同意的协议交换数据。鉴于互联网协议是相当清楚的,它往往意味着一个或两个机器已不正确或不完全编程。

阅读全文

ElementUI中全局实现对话框el-dialog的拖拽功能

实现原理:利用vue创造一个自定义指令,绑定到需要拖拽移动的el-dialog组件上,在自定义指令中处理弹窗拖拽。

1、在src的components文件夹下新建elDialog文件夹,elDialog文件夹下有:index.js、index.vue

index.vue文件代码:

阅读全文

全局配置ElementUI的message组件配置和样式

在项目开发收尾的工作的时候,甲方验收的时候,甲方可能会提出一系列的修改需求,有的修改会涉及到全局的,比如需要修改elementUi中message组件的停留时间和样式,一个页面一个页面的去修改不太现实,所以就只能全局性的去修改elementUi的message组件了。

一、全局修改message内置参数

比如为了不遮挡内容,需要修改message的默认距离顶端的距离为offset: 100

阅读全文

Nginx负载均衡的健康检查(nginx_upstream_check_module-master)总结

一、Nginx具有较强的处理并发能力

为什么Nginx抗并发能力强?原因是使用了非阻塞、异步传输。

阅读全文

Nginx负载均衡配置一台服务器宕机或异常能正常访问其它服务器

在前端服务去访问后端服务的时候,可能后端访问有多台服务器在运行,前端需要根据当前的服务器情况去自动选择访问后端的其中一台服务器的服务。此时我们就需要使用到NGINX的负载均衡技术实现,众所周知upstream主要是配置均衡池和调度方法,proxy_pass主要是配置代理服务器ip或服务器组的名字。
下面我们看一下具体的配置:

阅读全文

Vue中自定义滚动条样式之table表格添加滚动条以及修改滚动条样式

在UI的布局开发中,样式是至关重要的,尤其是在开发大屏项目的时候,每个细节都需要处理到位,最常见的就是滚动条这块的样式,如果使用默认的滚动条样式,就明显的不协调,也影响到整体界面的美观。下面就给vue页面中的table表格加一个滚动条,并修改样式,为示例给大家提供一下此类问题的解决方案,这里只是用常见的table举例的,修改颜色和样式,可以灵活运用到其他场景。

阅读全文

element-ui中解决因el-option数据量大导致页面卡顿和渲染慢

一、业务场景

在使用element-ui展示表格数据时,需要根据查询条件对数据进行搜索,此时需使用el-select,并且需要从服务端获取数据用el-option展示给用户选择,但是由于搜索条件使用的是业务的数据,所以数据量比较大,服务端返回的数据量达到了5000多条,还需要在下拉框中展示。

阅读全文

Jenkins解决jenkins.plugins.publish_over.BapPublisherException Failed to connect SFTP channel错误

jenkins在配置连接Centos服务器的时候报错信息:jenkins.plugins.publish_over.BapPublisherException: Failed to connect and initialize SSH connection. Message: [Failed to connect SFTP channel. Message [java.io.IOException: inputstream is closed]]hi’xu

阅读全文

Vue中watch监听数据变化的三种写法

在vue中,使用watch来响应数据的变化,首先介绍一下,watch是一个对象,一定要当对象进行使用。对象则有key和value。

key:代表的是需要监控的东西,比如:路由的变化或者data中某个变量。
value:有三种:

  1. 函数, 即当监控的key 发生变化是,需要执行的函数, 第一个参数是新值,第二个参数是旧值。

阅读全文

前端加载优化之速度优化解决方案

随着前端各种框架的日益完善,一些基本的性能优化和加载优化都已经很完善了,但是有些必要的优化还是得开发者自己去做。vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌。今天我们以vue cli2.x来说一说如何行之有效的缓解此问题!以项目为例,输入网址以后会出现十几秒的空白页,如果是后台管理系统还能接受,嵌套式的H5面对的是C端用户,产品肯定是无法接受的。仔细分析了下,主要是打包后的app.js太大,以及我们引用的一些插件安装包加载比较慢,在网上搜了很多解决加载慢的方案,最终优化的时间移动端H5页面2秒多,后台管理系统5秒多。下面,将自己在平时项目上所做的优化策略实践分享于大家。文章较长,耐心看完会有收获的。

阅读全文

服务器漏洞修复-可通过HTTP获取远端WWW服务信息

基于互联网行业的日益发展壮大,对安全性这块的领域,无论是国家还是企业都是非常重视,信息安全、网络安全也是一道不可逾越的鸿沟。所以也诞生出很多第三方信息安全的检测机构,他们会针对我们的整个站点和整个服务进行安全检测,为此今天针对服务器的各个环境的安全的一个漏洞进行描述和解决,主要包括市场主流的Apache、Nginx、IIS。

阅读全文

Vue通过自定义指令(v-auth)控制设置菜单按钮权限

不管是在开发PC端或者H5端的时候,不管是面向B端还是C端的产品,都会面临权限控制的开发场景,此时不可能是一个一个的去写v-if或者v-show了。一般会根据当前用户从后端接口获取对应的权限码去控制页面、菜单、按钮的展示,在这里我们可以封装v-auth指令去实现多条件判断的按钮权限控制。最终实现的目标是:只需要一个简单的指令就能实现按钮权限的多条件判断,满足各种场景状态下的权限需求。如果对自定义指令还不是熟悉的童鞋,可以去官方复习一下再来看此文章:vue官方自定义指令

阅读全文

企业微信(微信公众号)H5端缓存问题解决方案

问题描述

企业微信里面自建了一个应用,通过H5页面链接跳转,但是后台应用更新后,点进去还是旧的页面,需要清除缓存才能生效。

由于之前无论是公众号还是微信分享链接,都是经过充分测试后发布上线的,上线后即使更改了,也能在较快的时间内更新。所以对微信这块一直模棱两可的状态,没有从根本上解决这个缓存的问题。但是这次的需求不同,产品由于某个图片上的文字修改(仅仅一个数字的修改),等ui把图片发过来,然后上传到服务器上后,还是跟之前一样,也期待着资源会自动更新。

阅读全文

Vue可视化大屏自适应组件解决方案(ScaleBox自适应组件)

一、前端大屏自适应解决方案

1、使用felx布局

要点: 使用flex各种布局,结合元素使用百分比

阅读全文

在内网配置访问高德地图服务

前言

目前国内市场就三大地图:高德地图、百度地图、腾讯地图,但是这些地图都是面向公网的,而针对于一些特殊情况下,比如客户需要访问地图的相关服务,但是是在公司的内网访问,内网又不支持访问公网,这就感觉到这些地图瓶颈了,于是就费尽脑汁地想在内网部署一套完整的地图系统,可惜了,这三大地图很多都是基于接口的服务的,无法在内网独立建设一套地图。

阅读全文

Nginx根据“远程安全评估系统"安全配置

前言

根据远程安全评估系统建议对存在漏洞的主机参考附件中提出的解决方案进行漏洞修补、安全增强,特此根据各个等级的等保测评对Nginx的安全配置进行相应的配置,以达到等保所需的安全性。

阅读全文

GO语言-多维数组

一.二维数组

  • 二维数组表示一个数组变量中每个元素又是一个数组变量

  • 声明二维数组的语法

阅读全文