草庐IT

纯前端

全部标签

工作后,前端工作难在哪里?

活多、位卑、责任重大家不了解前端这些年前端技术方面的大幅变化,普遍觉得前端就是切图仔,技术含量不高,复杂的业务逻辑都放在后端。但是,在快节奏的社会中,前端作为用户最直接接触的东西,做到精致、吸引人眼球很重要,为了更好地展示,各种千奇百怪的插件你都要了解,还有很多细节你要去重复的调整,用户,产品经理还有可能会要“做些微调”。各种设备界面大小不一,不同浏览器的展示也不同,兼容性也是一个需要花时间处理的东西。除了界面,还需要和后端对接实现业务逻辑。前端沟通了UI,后端逻辑,功能的设计,所以项目上线,一旦出了大问题,首先都会暴露在界面上,用户立刻就能发现,事故等级也不低,所以前端开发的上线压力大。任务

前端实现文件下载的方法;以及后端返回 blob 文件流,进行展示。

前端下载一般分为两种情况,一种是后端直接给一个文件地址,通过浏览器打开就可以下载,另外一种则需要发送请求,后端返回二进制流数据,前端解析流数据,生成URL,实现下载。1.a标签:通过a标签的download属性来实现文件下载,这种方式是最简单的,也是比较常用的方式,先来看示例代码:ahref="http://www.baidu.com"download="baidu.html">下载/a>通过上面这个示例,我们发现点击下载,是跳转到了百度的首页,而并没有真的下载文件。因为a标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。上面的代码是直接通过书

【HTML】【一文全解Canvas】从初学到实战,彻底掌握前端绘图神器!

【HTML】Canvas基本介绍与应用前言一、Canvas概述二、基本用法常用的CanvasAPI1.获取上下文:使用`getContext('2d')`获取上下文对象,在该对象上进行图形绘制和变换。2.绘制形状:3.图片操作:4.变换操作:5.渐变和样式:三、Canvas绘制图形1、绘制矩形a.fillRect()b.strokeRect()c.clearRect()2、绘制圆形a.绘制实心圆形b.绘制空心圆形3、绘制路径a.画笑脸b.绘制两个三角形,一个是填充的,一个是描边的四、Canvas绘制文本1、fillText()2、strokeText()五、Canvas绘制图片1、drawIm

前端实现下载文件的各种方式

前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1.a标签通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:下载就上面的这个示例,我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。因为a标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。上面的代码是直接通过书写a标签来实现文件下载,我们也可以通过js来实现,代码如下:const a = document.createElement('a')a.href = 'ht

前端实现视频播放功能----vue-video-player --save

步骤一:npm安装插件:npminstallvue-video-player--save如果报错安装具体版本如下所示:npminstall--savevue-video-player@4.0.6 如果package.json文件内显示则为安装成功步骤二:局部引入---这里因为只有一个页面需要所有采用的局部引入在需要的页面引入(这里注意路径不要写错了)  步骤三:在页面中使用组件 步骤四:data中写入所传的参数  步骤五:methods写入回调函数 步骤六:注意(组件一定要设宽高)添加组件样式 这样就完成了一个视频播放功能 可以快进可以回放可以全屏拖动滚动条视频结束后自动重播完成实例:完整代码

【前端可视化】前端大屏适配方案

方案一:rem单位+动态设置html的font-size动态设置html根字体的大小和body字体大小(使用lib_flexible.js)将设计稿的宽(1920)平均分成24等份,每一份80px;html根字体大小就设置为80px,即1rem=80px,24rem=1920px(移动端推荐分为10份);将body字体大小设置为16px;最后需要使用插件或者其他方式将px转为rem单位:手动、less/scss函数、cssrem插件、webpack插件、Vite插件等。lib_flexible.js代码参考(functionflexible(window,document){vardocEl=

【前端】Vue2 脚手架模块化开发 -快速入门

🎄欢迎来到@边境矢梦°的csdn博文🎄 🎄本文主要梳理Vue2脚手架模块化开发🎄🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈🎆喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路🎆Ps:月亮越亮说明知识点越重要(重要性或者难度越大)🌑🌒🌓🌔🌕 目录🌸打造高效开发利器!教你搭建Vue2脚手架CLI🚀❤️段落1:安装CLI并创建Vue项目🌈段落2:开发入门,快速上手Vue🌰运行项目📌Vue项目结构分析✨段落3:Vue插件加持,开创无限可能🌸打造高效开发利器!教你搭建Vue2脚手架CLI🚀🌟引言段:目前开发模式的问题1.开发效率低2.不够规范3.维护和升级,可读性比较差为了解决这些问题,优秀的程

前端加载高德离线地图的解决方案

核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图。使用BIGMap工具下载地图离线瓦片到本地下载地址:http://www.bigemap.com/reader/download/detail201802015.htmlBIGEMAPGISOffice-全能版需要注册试用版(免费)试用版可以下载到16级别的瓦片,单次下载不能超过100M关于单次下载不能超过100M的问题想到是否可以分多次框选区域去下载得出结论是不行因为分块下载的文件同级别瓦片的文件名都是一样的算法是根据瓦片名字去一一对应加载到屏幕相应xy位置上的。下载瓦片时也可以通过选择行政区域来进行区域的划分2、但是可以分

考试系统前端项目复盘

前段时间和朋友做了一个局域网考试系统,总共有3个端:考生端、监考端、管理端。框架与相关的库先简单说明一下我使用的框架和相关的库:构建工具:Vite框架:Vue3UI组件库:element-plus网络请求库:axios路由跳转:vue-router状态管理:piniaCSS扩展语言:sass其它与项目功能需求相关的库这里就不一一列出了多端非根路径部署考虑到每一个用户理论上只会使用其中一个端,如果将三个端绑定在一个Vue项目上,则会导致“捆绑销售”。因此,将三个端用三个Vue项目完成,然后让后端开发人员使用nginx配置好映射。最后我需要再写一个根路径的入口页面,用于跳转到三个端。/:根路径,页