
Web
Web相关记录
加尔牛
这个作者很懒,什么都没留下…
展开
-
download.js实现下载的基本用法
前言通常实现下载需求时候 会使用a标签 设置a标签的href为需要下载的资源路径 调用click点击事件就会实现下载但是如果需要下载的资源类型是浏览器可以解析的 比如txt等 浏览器不会触发下载而是会直接打开资源预览此时可以为a标签添加download属性 通过download设置下载的文件名和后缀 此时任何类型资源就都可实现下载但是如果资源不是同源 浏览器同样会直接打开预览下载的方式a标签实现下载: 设置a标签的download属性 并调用click方法 window.open()实现下原创 2021-04-13 10:46:42 · 8152 阅读 · 1 评论 -
关于文件上传与下载
文件上传单文件上传表单上传文件: method="post" enctype必须为 multipart/form-dataxhr上传: 需要传formData数据格式 var fm = new FormData 上传formData数据 无需再设置Content-type 自动form-data方式发送的请求 多文件上传input 设置multiple 按住 ctrl选择多个并上传多个文件同一个keyvar fm = new FormData();Array.forEach.cal原创 2021-04-12 15:42:19 · 181 阅读 · 0 评论 -
关于网络请求
ajax与XMLHttpRequest前言XMLHttpRequest是浏览器提供的一个对象,正是这个对象使得浏览器可以发出http请求、接收http响应。ajax是一种技术方案,他最核心得依赖是XMLHttpRequest对象 只能说 使用XMLHttpRequest对象发送ajax请求。get请求var xhr = new XMLHttpRequest();xhr.open('get',' url地址 ');//如果get请求需要传参 需要拼接在url后面xhr.send(null);原创 2021-04-12 15:33:01 · 340 阅读 · 1 评论 -
腾讯云静态网站托管基本操作
腾讯云静态网站托管前言腾讯云开发 TCB: Tencent Cloudbase静态网站托管介绍将静态网站托管在腾讯云供外网访问 实现不买服务器情况下外网可访问基本使用1、访问腾讯云官网 https://cloud.tencent.com/2、产品处搜素静态网站托管3、首次打开按照步骤创建环境 开通环境4、环境创建完成后可以看到测试的域名 浏览器端访问即可打开站点5、在静态托管创建的环境中上传项目6、此时浏览器打开测试域名后访问的即是自己的项目使用CloudBase CLI原创 2021-04-12 15:04:16 · 2136 阅读 · 0 评论 -
七牛云存储基本使用
七牛云存储kodo前言图片、视频等资源如果存在自己服务器 访问会很吃带宽,可以将其放在云服务器 自己服务器只管理数据 七牛简单使用 记录如下基本使用前端接入七牛的sdk文件,使用七牛的api进行上传前台向七牛上传资源需要凭证token,为了安全考虑 凭证token需要后台服务器去七牛获取后台也需要引入对应的sdk文件 并获取token给客户端客户端先请求自己服务器获取token 然后将图片资源和token一起 调用七牛上传图片的api上传图片默认简单上传完成后 七牛服务器会返回客户端 k原创 2021-04-12 15:00:55 · 1151 阅读 · 1 评论 -
web worker基本使用
前言js是单线程 即所有任务只能在一个线程中完成。Web Worker是为js创造多线程环境 Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭基本用法主线程中new的方式调用Worker()构造函数,新建一个 Worker 线程并传入线程文件地址var worker = new Worker('work.js')原创 2021-04-12 14:20:43 · 236 阅读 · 0 评论 -
web--文件上传断点续传
http中,为了减轻服务器负荷,避免DDOS攻击,必须要限制客户端的文件上传大小。由于服务端对文件上传大小的限制,所以需要对图片进行切块上传,在服务器接收文件块之后拼接成一个整体 使用进度条显示上传进度。文件操作使用Blob对象,Blob有一个重要的方法是slice,用于对文件切块。File是Blob对象的子类,File也可以使用slice方法切块// 设置文件切块大小为1Mconst chunkSize=1024*1024;// upload函数 start处开始上传function up原创 2021-02-20 16:20:26 · 267 阅读 · 0 评论 -
better-scroll基本使用
前言最初利用原生js 通过内容高度大于容器高度 自动实现滑动的特性实现滑动效果.box { height: 200px; background-color: pink; /*overflow: hidden;*/ overflow-y: scroll;}但是原生js实现的滑动效果在移动端会变得非常卡顿,所以后来使用 iscroll 但是 iscroll 停止更新维护了,所以用在项目中不安全有人根据iscroll编写出 better-scroll ,借鉴了iscroll 又在原创 2021-02-04 17:11:10 · 466 阅读 · 0 评论 -
前端模块化
普通模块化:模块1 aa.js: (function (w) { var msg = '我是aa.js中的 msg'; function getMsg() { console.log(msg); } w.aa = {getMsg}; })(window);模块2 bb.js (function (w, a) { var msg = '我是bb.js中的 msg'; function getMsg() {原创 2021-02-04 10:08:29 · 158 阅读 · 0 评论 -
web前端文件操作相关总结
前言由于浏览器的安全规范、处于安全和隐患,web应用程序不允许直接访问用户设备上的文件,如果需要读取文件,则可以通过input来实现获取文件js不可以直接获取设备上的文件,但是可以通过用户操作的方式获取设备文件,此处使用 完成<input type="file" id="ipt">如果获取多个文件 添加 multiple属性<input type="file" id="ipt" multiple>文件类型的input有change事件监听文件的改变、有files属性原创 2020-10-28 19:37:24 · 613 阅读 · 0 评论 -
前端 XMLHttpRequest 实现下载excel文件
前端下载excel文件 两种方式:1、后端处理好直接返回前端一个链接 前端点链接下载 window.location.href = ‘url’ <a href='url' download=''></a>2、后端直接将文件流传给前端 前端拿到文件流通过blob处理 html: <button id="btn">下载excel文档</button> js: .原创 2020-08-17 17:38:21 · 2446 阅读 · 0 评论 -
Less基本使用
文章目录前言一、Less基本介绍二、安装、编译三、Less定义变量四、Less嵌套五、Less运算前言因为css是标记语言,无法定义变量、进行计算等,会有很多冗余代码,而less、scss等正是改变了这一缺点。一、Less基本介绍less是一门css的扩展语言,是css的预处理语言,他可以编写样式的同时使用变量、进行计算,减少冗余代码,提高开发效率二、安装、编译下载 npm install less -g查看less版本 lessc -v此时电脑中安装好less,可以使用less编写样式了。原创 2020-12-24 16:35:07 · 1315 阅读 · 1 评论 -
js 瀑布流
html: <div class="main"> </div>css: <style> * { margin: 0; padding: 0; } .main { position: rela...原创 2020-08-25 14:41:11 · 311 阅读 · 0 评论 -
使用element-ui组件实现省市区联动
数据使用 element-china-data组件 使用element-ui框架 vuehtml <div id="app"> <div class="provin-country clearfix"> <h2>省市二级数据</h2> <div class="...原创 2020-04-12 10:49:00 · 484 阅读 · 0 评论