当前标签:前端, 共17篇文章
Nuxt服务端渲染:后端接口身份验证
Nuxt服务端渲染解决了Vue单页应用SEO的痛点,但是在权限认证上也带来了一些麻烦。Nuxt项目中,用户切换路由时请求页面和在页面中触发ajax请求数据的的路径是不同的。本文介绍一下两种请求统一进行身份验证的方法。
Nuxt服务端渲染:后端接口身份验证
CSS变量的简单应用
CSS变量可以用来优化代码,比如相同的颜色值散落在代码各处,使用CSS变量可以将颜色值收敛起来,将来发生调整可以很简单地一键替换。除此之外,还有一些场景也特别适合使用CSS变量,比如前端主题化(深色模式等)、响应式布局等。 本文简单介绍一下CSS变量的一些使用。
ElementUI表格el-table表头固定自适应高度解决方案
el-table的height属性可以方便地实现表格固定,但是这个值该设置为多少以适配屏幕大小呢?设置过小,则可能出现可视区域内有空白位置,但是表格内却出现滚动条;设置过大,则在一些小屏幕设备上浏览时,页面本身和表格内部都可能会出现滚动条。两种情况体验都是极差的,为了解决这个问题,我们需要动态地计算页面空白区域的高度,然后设置到height属性,即根据页面大小,动态计算height属性。
Vue项目打包压缩:让页面更快响应
自己做测试用的一个小项目,虽然仅有三四个页面,因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用了路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升。
怎样下载带权限认证的文件?
通常下载文件可以通过a标签的download属性直接下载,但是这仅仅针对没有权限验证即可访问的文件。如果文件接口需要验证权限,我们该怎样下载文件?本文即介绍了需要验证权限的文件的下载方法。
Vue项目打包部署总结
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题。
前端利用canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助了canvas在前端实现图片添加水印的实现方法,canvas元素其实就是一个画布,我们可以很方便地绘制一些文字、线条、图形等,它也可以将一个img标签里渲染的图片画在画布上。
前端利用canvas给图片添加水印
字符串压缩:使用正则表达式匹配相同连续字符
今天遇到个问题,需求是字符串压缩:给定输入为英文字母组成的字符串,对字符串进行压缩,'abbbcc'压缩为‘ab3c2’,即统计连续相同字符个数,将字符连续出现2次及以上的子串压缩为“字母+出现次数”的形式。
字符串替换:replace的使用
replace是JS字符串处理函数中最常用的函数之一,由于有正则表达式的支持,replace功能非常强大。同时,使用replace函数对于学习正则表达式非常重要,可以说,熟练掌握了replace函数,JS的正则就很简单了。
Javascript对象命名风格转换——小驼峰命名和下划线命名相互转换
目前前后端数据交互通常会使用json,如果前后端变量命名风格不一致,就会导致某一端要迁就另一端,这样在自己的代码中就会同时出现两种命名风格。为了避免这种尴尬,我们可以在接口获取数据和发送数据的地方做统一处理,将收到的数据统一转为前端的风格,而将发出的数据转为后端的风格。 这不,项目里后端用了下划线形式的命名风格,而前端用的是小驼峰格式,所以写了两个函数进行转换,主要用到了递归算法和字符串正则替换。