前端
文章平均质量分 76
suedarsam
这个作者很懒,什么都没留下…
展开
-
记录关于图片上传的问题
最近 PM 新提的需求,需要支持 heic/heif/pdf 文件上传与预览,踩了一些坑,这里做一个小结。pdf 相关问题pdf 文件采用 window.open 打开的时候有的时候是直接跳转到新标签打开,有的时候是直接下载,经过了一番检索,得知只有访问文件链接返回的响应头的 mime type 为 application/pdf 时,浏览器才会识别其为 pdf 并通过新标签打开。所以让后端同学改一下返回的响应头完事。heic/heif 相关问题heic/heif 文件在 window 系统中通过原创 2022-04-13 19:06:51 · 322 阅读 · 0 评论 -
谈谈关于文件下载
昨天跟后端小哥调了调关于文件下载的接口,还是有一些坑的,这里总结一下。我们分为后端返回二进制流或者返回 url 的形式进行讲述。一、后端返回二进制流总的来说关于文件下载前端有以下两种方法去拉取数据:window.open 方法ajax 方法此时后端返回的都是二进制流。1. window.open 方法格式为:window.open(url)传输数据量不多的时候采用 window.open, 而此时浏览器是采用 get 方法传输数据的。后端同学设置返回的响应头为 Conten原创 2021-11-09 11:42:40 · 1223 阅读 · 0 评论 -
介绍一个自制的适配ESM在node 环境中的工具 -- uunode
一、概述先看一段代码:// index.jsimport createMathOperation from './.internal/createMathOperation.js'const add = createMathOperation((augend, addend) => augend + addend, 0)console.log(add(6, 4));export default add当我们在终端执行 node index.js 时,我们可以得到一个报错:也原创 2021-06-25 11:14:15 · 264 阅读 · 0 评论 -
如何让你的网页生成一个像siri一样的语音助手
首先你要知道两个概念语音识别 ???? 与语音合成 ????。语音识别: 语音识别(speech recognition)技术,也被称为自动语音识别(英语:Automatic Speech Recognition, ASR)、电脑语音识别(英语:Computer Speech Recognition)或是语音转文本识别(英语:Speech To Text, STT),其目标是以电脑自动将人类的语音内容转换为相应的文字。与说话人识别及说话人确认不同,后者尝试识别或确认发出语音的说话人而非其中所包含的词汇内原创 2021-06-11 15:07:45 · 1336 阅读 · 1 评论 -
组件库文档工具 dumi 的介绍与对比及踩坑小结
一、概述上周将团队内的组件文档从 docz 迁移到dumi,迁移成本大概一到两天,在此给大家做个 dumi 的简单介绍。二、组件库文档工具本节会先对比市面上用得多的以下三个组件库文档库,以说明迁移缘由及 dumi 的优点,不想看的可以先跳过。文档工具doczstory-bookdumi2.1 编写方式对比2.1.1 DoczDocz 是一个高效、零配置的事件记录工具,Docz 基于 MDX ,有许多内置的组件可以帮助你记录你的事情。 它同时支持添加插件,以便于原创 2021-06-11 15:06:58 · 3710 阅读 · 2 评论 -
scrollIntoView 失效调研与替换方案
问题背景今天需要做一个点击icon滑动到文章评论区的功能,采用了scrollIntoView,发现在移动端偶现失效了。代码如下: commentRef.current.scrollIntoView({ behavior: 'smooth', });分析思考1 是否由于浏览器bug导致据这篇博文描述是由于滑动过程中进行了原生事件的监听就会阻断事件继续执行。因此替换成 scollTo,发现滑动有改善,但是还是有定位不准的问题。根据这个回答得出可以采用 requestAnimatio原创 2021-06-11 15:05:06 · 3717 阅读 · 2 评论 -
single-spa的简单介绍与遇到的问题小结
其实本来应该写个介绍的,但是我看到其他的文章写得很完善了,所以就来写写我在其中遇到的一些问题就好了。安装single-spa请看沉末的这篇文章。背景简单介绍下背景吧~为什么要用single-spa呢,是因为公司的项目需要拆项目了,这个时候就需要知道微前端的概念了,那么什么是微前端呢。微前端服务微前端架构是一种类似于微服务的架构,由ThoughtWorks 2016年提出,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化原创 2020-05-22 10:48:18 · 7699 阅读 · 2 评论 -
五月工作总结
如何用fetch获取并下载csv文件fetch([url]).then(res => res.blob().then(blob => { ...}))谈一谈 Fetch API 中的 “res.blob()”提到res.blob的作用是获取response的header中的content-type和charset,由此,后端需要设置header为content-type: application/csv;charset=utf-8多个请求怎么捕获最后一个在请求处设立全局变量,原创 2020-05-08 18:00:20 · 159 阅读 · 1 评论 -
引入typescript踩坑计(完)
前段时间在项目中引入了typescript,当时遇到了一些坑,总结了一篇文章, 没有想到还有2.0版本,因为不过这次的坑是由于要解决要引入typescript所必须的webpakc4而引入vue-cli导致的。路由问题访问路径原先的项目访问路由部署在/platform/下,也就是说,在production环境中,只有在形如[host]:[port]/platform/[...]的路由下才能访...原创 2020-04-08 21:49:58 · 199 阅读 · 0 评论 -
引入typescript踩坑计(一)
typescript已经诞生好久了,一直想把其引入公司的项目中,原先项目采用的是npm、无yarn、无vue-cli,webpack的版本也小于4,webpack配置还嵌套在项目中,是一个纯金的老项目呢。尝试(这是尝试部分,点击这里跳转到正确操作)项目的一些版本:"vue": "^2.5.21","webpack": "^3.6.0",本着不想改变包版本引发其他问题,以及不知道ts...原创 2020-04-08 21:49:00 · 1769 阅读 · 0 评论 -
记一次手忙脚乱的base64debug之旅
这几天做了一个需求,读取上传的公私钥,然后利用私钥采用RSA加密摘要,发送给后端。其中运用到了base64的加解密,RSA加密采用的是node的Crypto模块,base64的转码采用的是js-base64, 然而万万没有想到,这里面有坑啊。(开个玩笑,这个库还是很不错的)文件的读取首先是文件的读取,采用的是FileReader, 并且二进制文件的读取应为readAsArrayBuffer...原创 2020-04-08 21:48:07 · 241 阅读 · 0 评论 -
Json-server + mockjs模拟假数据
鉴于这个代码开源出去感觉会被打,还是写个博客吧。其实操作很简单,只要把文件读取,通过mock转化,再导出文件,然后在json-server填写相应路径即可。源文件test.json{ "list|1-10": [{ "id|+1": 1 }], "user": { "name": "@name", "id": "@id"...原创 2020-04-08 21:47:11 · 368 阅读 · 0 评论 -
你需要知道的浮动二三事
先来看两个栗子????(需要的看在线代码的请戳我的博客),或者戳图片可以看代码example 1example 2这是两个非常能体现浮动特性的例子。在emample 1中,设置左侧元素.red定宽并浮动,不管.text在内部还是外部,都会发现.text是绕着浮动元素的,此时设置右侧元素margin-left生效,margin-top失效。(图片下面的空隙是基线问题,这是另一个话题了*{...原创 2020-04-08 21:46:19 · 146 阅读 · 1 评论 -
前端判断txt文件是否为utf-8编码
在es6之前,这件事只能丢给后端解决。不过es6诞生了ArrayBuffer,也就是说,我们可以通过前端读取字节了。事实上,要判断第一个字符是否符合utf-8的编码格式,就能解决这个问题。对于 GBK,ANSI,UTF-8 格式的文件,第一个字符会是 0-9a-zA-Z-/. 之一因此,我们可以将文件用二进制格式读取后,采用TypedArray的Uint8Array进行读取,而读出来是...原创 2020-04-08 21:43:11 · 4531 阅读 · 0 评论 -
vue小记
使用vue也有一段时间了,现在对vue的一些以前没有注意到的点小结一番~本文均采用npm安装依赖json-server数据存储的利器啊,我之前是采用easy-mock,遗憾的是其只能使用get请求。在json-server中 我们采用npm install -g json-server安装依赖。在最外层文件新建mock文件,下建db.json然后采用json格...原创 2018-03-23 10:11:21 · 241 阅读 · 0 评论 -
2017年末~2018美团、联想、头条前端实习生面经
写一哈最近面试的东西因为有的间隔比较久 可能有漏失的地方 凑合看看咯~以下面试经验皆为电话面试联想 2017.101、简单介绍一下你自己2、css的盒子模型标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 ie 盒子模型的范围也包括 margin、border、paddi...原创 2021-06-11 15:10:52 · 312 阅读 · 0 评论 -
学生信息管理系统(js与php的数据传输)
最近期末将至,比较忙,更得比较慢,见谅。搭建完环境并且确认连接之后,我们可以开始编写程序了。然后建表插入数据 (这里仅作一个示例)另外建表的时候要注意,因为要创建视图,所以应该把要与另一个表连接的项建为外键,然后另一个表通过reference与该表连接。另外,最好不要重命名,也就是两个表的同个属性,建视图时非常麻烦!比如说teacher表的teachername与class表的teachernam原创 2017-12-18 11:10:29 · 2124 阅读 · 1 评论 -
解决谷歌浏览器不能打开html提示没有注册类
重装了win10系统后出现的问题提示没有注册类我先尝试了网上的方法,删除了注册表的东西,也就是chorme开头的文件名的东西Google浏览器chrome提示没有注册类//请在尝试网上其他所有方法再看此文但是完全没有卵用!!然后一个小伙伴点醒了我。。我可能是盗版谷歌的受害者官网打开浏览器下载又跳转到移动端下载,可能有墙的关系吧原创 2017-02-09 23:23:02 · 4509 阅读 · 0 评论 -
css3实现3D切换
用css3实现了一个比较丑的3D切换,模型来自于慕课网的某个大神 在此谢过~大神链接一开始因为没有设置3D什么的,满是纠结直接贴代码啦 Document *{ padding: 0px; margin: 0px; text-decoration:原创 2017-08-06 12:48:52 · 567 阅读 · 0 评论 -
关于列举属性用点还是用【】
嘛,今天看js权威指南的时候发现很有意思的一个函数这个函数,书中提到 不能使用.对属性进行赋值由于在写程序的时候不知道属性名称,因此无法通过点运算符(.)来访问对象portfolio的属性。但可以使用【】运算符,因为它使用字符串值(字符串是动态的,可以在运行时更改)而不是标识符(标识符是静态的,必须写死在程序中)作为索引对属性进行访问。运行后得原创 2017-09-25 20:40:02 · 220 阅读 · 0 评论 -
优美的js代码,拿去玩~
逼乎上看到的 本人是服气的哈哈哈゚ω゚ノ= /`m´)ノ ~┻━┻ //*´∇`*/ ['_']; o=(゚ー゚) =_=3; c=(゚Θ゚) =(゚ー゚)-(゚ー゚); (゚Д゚) =(゚Θ゚)= (o^_^o)/ (o^_^o);(゚Д゚)={゚Θ゚: '_' ,゚ω゚ノ : ((゚ω゚ノ==3) +'_') [゚Θ゚] ,゚ー゚ノ :(゚ω゚ノ+ '_')[o^_^o -(゚Θ゚原创 2017-09-25 21:51:45 · 720 阅读 · 0 评论 -
纯css3 实现3D轮播图
这两天码了一下css3的代码效果图大概是酱紫gif图太大上传不了 凑合看看 GitHub上面有gif图点我到GitHub(*^_^*)折腾了半天 一开始没想到用scale 然后用css2的语法整了,后来看了一些大神的源码 才懂了喜欢的话给我一个⭐吧~原创 2017-09-28 22:37:03 · 4933 阅读 · 0 评论 -
仿写简单的vue虚拟dom
最近在学vue 所以仿写了一些render函数的虚拟dom,还是挺有意思的:) function createElement(tag, prop, children) { if (!(this instanceof createElement)) { return new createElement(tag, prop, chil原创 2017-11-11 19:54:50 · 609 阅读 · 0 评论 -
MRAID3.0_翻译
移动富媒体互动广告标准(MRAID)VERSION3.07月 2017移动富媒体互动广告标准 (MRAID) 版本3.0MRAID 版本 3.0 (MRAID 3.0) 具有重要的新功能, 可以提高用户的广告体验。新的 MRAID 使广告能够测量可见和可, 检测 MRAID 环境, 并获取位置数据以提供最佳的体验。此外, 还有当处于广告加载中的向导, 以便向用户展示广告。视频播放器的广告接口定义 (翻译 2017-11-20 09:05:21 · 1604 阅读 · 0 评论 -
js基础之关于Boolean及相等运算符的隐式类型转换
Boolean函数根据 w3c规范 布尔对象共有这几种方法: 方法 描述 toSource() 返回该对象的源代码。 toString() 把逻辑值转换为字符串,并返回结果。 valueOf() 返回 Boolean 对象的原始值。 布尔值常用于JavaScript中的控制语句中。例如Jav原创 2017-12-01 13:43:07 · 1333 阅读 · 1 评论 -
github上传口令
现在要上传的文件处右键git bash here然后git initgit add .git commit -m "提交信息"git push -u origin master 然后在项目处复制ssh东西后输入cmd即可详细版友情链接原创 2017-10-18 22:31:52 · 254 阅读 · 0 评论 -
hexo中npm WARN checkPermissions Missing write access
删除 node_modules包 然后npm install 然后再deploy d即可这个问题真是闹心死我了 https://github.com/npm/npm/issues/17444网上又有人说是vs code占用了,所以最好把vs code也暂时关掉 我这样做之后就好使了还有说加环境变量的,也就是把博客地址.bin加进path中也就是这个还有说把c盘的npm-cache和np原创 2017-12-04 19:53:39 · 1761 阅读 · 0 评论 -
关于node连接oracle显示ORA-12541: TNS: 无监听程序
这个问题困惑我两星期啊!!!整整两星期我都在重装oracledb重装oracle,但是最后居然是因为账号和密码不对QAQ,明明sqlplus连接是好使的啊!!!!!哎 人生如戏anyway来看看我是怎么解决的吧。一开始提示这个信息的时候 我以为是缺失了监听程序,又因为oracle12c怎么也添加不了监听程序,十分蛋疼。然后最后是通过改用户名和密码 呈上代码~conn /as sysdbaalte原创 2017-12-06 21:07:06 · 689 阅读 · 1 评论 -
学生信息管理系统(wampserver+php+oracle+前端_环境搭建)
写在前面:又到了一年一度各种管理系统横空出世的时期,笔者也不例外,于此将笔者做的非常简陋的学生信息管理系统总结一番,望后来者更容易一些。先展示一下吧这是oracle结构:登陆界面:管理者界面:管理者下的class表:嘛,无非是增删改查,这里面可能会有点复杂的是ajax的传输,php的传值之类的,但都不是很难,因为完成得比较仓促,样式也没有写得太好。。。不要在意这些细节!让我们开始吧~软件版本ora原创 2017-12-12 12:05:12 · 4092 阅读 · 4 评论 -
js基础之各种基本类型及引用类型的转换之开篇
笔者最近遭受了巨大的挫折,痛定思痛,还是决定来总结一下前端基础的东西,估计会开一个专题,讲的是布尔等基本类型和引用类型等的相互转换问题。基础不能丢啊,建议看了这个专题的读者也去总结一些前端的基础,好记性不如烂笔头,代码会更新在GitHub。文章大部分内容来自于《JavaScript权威指南》《JavaScript高级程序设计》再加上我最近的总结和理解。那么我们开始吧。提起伟大的JavaScript,原创 2017-11-29 21:09:17 · 211 阅读 · 0 评论