关于blog:验证-github-图床可用性

验证 github 图床可用性滴滴滴

June 19, 2023 · 1 min · jiezi

关于blog:Melog310版本正式发布新版支持-Docker-部署

Melog,一个基于 jj.js (nodejs) 构建的简略轻量级 blog 零碎。代码极简,无需编译,不便二次开发。 我的项目地址: https://github.com/yafoo/melog码云镜像:https://gitee.com/yafu/melog 运行环境nodejs >= v12mysql >= v5.5个性速度极快轻量,前台无框架依赖,挪动优先,自适应pc简略,基于jj.js(类thinkphp)经典mvc框架,不便二次开发平安,后盾目录可自定义,明码重试次数限度反对更换导航格调(cms或blog)反对更换主题,自定义主题能够共用默认主题文件专题性能,能够定制共性页面Markdown编辑、实时预览,反对手机端,反对截图、图片文件粘贴上传v3.1.0 更新日志[新增] 新增 install 模块,不必再手工导入数据库文件了[新增] 新增 docker 部署,部署形式见 README.md[优化] 优化路由设置[优化] 优化专题页显示款式[优化] 优化前台 tips 函数逻辑[批改] 默认敞开调试模式[批改] 默认绑定 ip 改为 0.0.0.0[依赖] 更新依赖 jj.js 版本到 0.8.7[依赖] 更换依赖 jimp 为 jimp-compact,大幅减小程序体积 装置1、程序部署Docker形式部署 # 镜像拉取docker pull yafoo/melog# 容器运行docker run -p 3003:3003 --restart unless-stopped --name melog -d yafoo/melog# 容器运行(配置文件、站点数据保留到宿主机)docker run -p 3003:3003 --restart unless-stopped --name melog -d -v $PWD/melog/config:/melog/config -v $PWD/melog/upload:/melog/public/upload yafoo/melogGit形式部署 # 也能够间接到github或gitee上下载压缩文件git clone https://github.com/yafoo/melog.gitcd melognpm i# 运行程序,零碎默认运行在3003端口node server.js2、配置数据库浏览器关上网址 http://127.0.0.1:3003/install,配置并点击装置 ...

September 7, 2022 · 1 min · jiezi

关于blog:学习HUGO-详解目录结构

HUGO 是一套模版动态化的零碎,理解其目录构造有助于创立咱们的网站零碎 目录构造以Hyde主题为例,残缺的目录构造如下: iChochy├── archetypes 内容模版目录│   └── default.md 模版文件├── config.toml 配置文件├── content 内容目录├── data 数据目录├── layouts 网站模版目录├── static 动态文件目录└── themes 主题目录 └── hyde Hyde主题目录 ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── archetypes 内容模版 │   └── default.md ├── go.mod ├── images │   ├── screenshot.png │   └── tn.png ├── layouts 网站模版 │   ├── 404.html 404面目模版 │   ├── _default 默认模版目录 │   │   ├── baseof.html 根底模版 │   │   ├── list.html 列表页面模版 │   │   └── single.html 单页面模版 │   ├── index.html 首页模版 │   └── partials 模块模版目录 │   ├── head.html HEAD模块模版 │   ├── head_fonts.html │   ├── hook_head_end.html │   └── sidebar.html ├── static 动态目录 │   ├── apple-touch-icon-144-precomposed.png │   ├── css │   │   ├── hyde.css │   │   ├── poole.css │   │   ├── print.css │   │   └── syntax.css │   └── favicon.png └── theme.toml 主题配置文件archetypes内容模版目录,通过内容模版,应用hugo new命令创立新的内容文件 ...

June 28, 2022 · 2 min · jiezi

关于blog:Halo博客的百度定时页面提交

Halo博客的百度定时页面提交前言好不容易搭建好博客,写了些自认为有点意思的文章,然而没人看!!因为没有提交到搜索引擎,所以基本没人能搜到嘛~。尽管Next主题提供了百度主动提交的配置,然而百度收录曾经不再提供推动收录的服务,所以Next主题的配置也没啥用了百度收录网站中提供了三种收录形式,其中API提交最快捷,因而思考应用Java实现将Halo博客文章推送到百度收录中 API提交sitemap提交手动提交Halo提供了用于获取文章列表的API,因而思路很简略:应用Java定时工作线程池依照固定的工夫距离从Halo API中获取全副的文章链接,而后调用百度收录API,向百度提交文章链接 百度收录对于频繁提交旧的链接有肯定的限度,如果常常反复提交旧链接,会下调配额,甚至可能会失去API推送性能的权限,如果常常提交新的文章链接,可能适当进步配额。因而须要建设一个简略的缓存,提交链接时滤除旧的曾经提交过的链接只管Google应用站点地图就曾经能很好地进行链接的抓取了,不必独自提交,然而Google同样举荐应用indexing API被动提交要收录的链接,具体可参考Halo博客的谷歌定时页面提交工程搭建建设Gradle工程,配置文件如下所示 plugins { id 'java' id 'application'}group 'xyz.demoli'version '1.0-SNAPSHOT'sourceCompatibility = 1.11mainClassName="xyz.demoli.Main"repositories { mavenCentral()}application{ applicationDefaultJvmArgs = ['-Duser.timezone=GMT+8']}dependencies { testImplementation 'org.junit.jupiter:junit-jupiter-api:5.8.1' testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.8.1' // https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp implementation group: 'com.squareup.okhttp3', name: 'okhttp', version: '4.9.3' implementation 'com.google.code.gson:gson:2.9.0' // https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-api implementation group: 'org.apache.logging.log4j', name: 'log4j-api', version: '2.14.1' // https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-core implementation group: 'org.apache.logging.log4j', name: 'log4j-core', version: '2.14.1' // https://mvnrepository.com/artifact/org.projectlombok/lombok compileOnly group: 'org.projectlombok', name: 'lombok', version: '1.18.22' annotationProcessor group: 'org.projectlombok', name: 'lombok', version: '1.18.22'}test { useJUnitPlatform()}annotationProcessor group: 'org.projectlombok', name: 'lombok', version: '1.18.22'保障gradle我的项目中lombok的注解能够被正确解析applicationDefaultJvmArgs参数的设置是为了解决后续服务部署在容器中时日志打印工夫不是东八区时区的问题配置文件如下: ...

April 27, 2022 · 3 min · jiezi

关于blog:搭建在线编辑-Blog

VPS / 云服务器 的抉择能够抉择国内的服务器,也能够选国外的VPS,因为一些非凡起因我是应用国外的搬瓦工 VPS,这里简略讲讲两个国外的VPS,都是能够应用支付宝进行领取的。 Vultr,配置简略,能疾速备份,疾速复原备份,登录简略,基本上都是一键配好,价格偏高一丢丢,但性能是比拟好的,无论是国内还是国外拜访都是咻咻咻的。毛病,新配好的服务器须要 Ping 一下 IP 看看通信国内如何,有时候会 Ping 不通。 搬瓦工,配置也不是特地简单,然而页面 UI 设计偏旧,胜在价格便宜,比 Vultr 便宜一半不止。目前来说,我还没有遇到不能 Ping 通的 IP。毛病,最便宜的套餐,性能稍显有余,配置过程稍显简单,上手须要一点工夫。须要从新设置 SWAP 的大小。 域名 的抉择仍旧是用咱们的老朋友,Namesilo。 当然,你也能够应用 Freenom,我感觉只是它切实是有点难用。 一样,它俩也是能通过支付宝领取。 域名还须要应用 Cloudflare 进行解析,须要留神的是,{% emp Cloudflare 不反对二级域名的解析 %}(有可能是我没找到,有些博客说能够应用子域名,但我就是没整进去。) 前一篇 VPS 内配置工具 博客文章 {% wavy 筹备工作 %} 的 {% wavy 1-3 点 %}中有具体地讲到域名 & 域名解析的配置,请自行跳转进行查阅,此处不再赘述。 图床 性能的实现当然,你能够抉择应用 Github 进行贮存,或者是 七牛、腾讯云,甚至是 Bilibili,应用这些公开型网站是比较简单的。 然而又因为一些非凡的起因,我只能应用 VPS 自身实现图床性能,配置会偏简单一点。(我不心愿把图片上传到其它中央,我心愿将它们汇合在一个中央进行治理。) 这里举荐应用,我编写的基于 FastAPI 写的图片上传 API,举荐应用 Anacodna 创立一个虚拟环境给它,要应用的包都在库中的 Pipfile 文件中。(CentOS 7 中 Docker & Nginx & Anaconda & FastAPI 的具体配置可参考前篇博客 超具体装置配置) ...

November 22, 2021 · 2 min · jiezi

关于blog:个人博客开发之需求分析

前言回首过往从入行开发作为一个程序员,我就想要一个本人的blog了,我是一个比拟爱折腾的人,刚开始理解到时候是应用第三方建站blog零碎,如,WordPress ,Typecho,等来搭建本人博客,而后我开始购买阿里云服务器,注册域名,搭建零碎,抉择主题,甚至不惜付费购买,等所有折腾弄好后,刚开始我还保持写blog 前面就放弃了,不了了之了,!!! 前面过了一段时间我又想起来想弄本人blog,开始感觉得动静blog节约,还要运维服务器很麻烦,于是又一顿度娘,发现能够搭建动态blog通GitHubpag 托管一个动态网站,通过hexo 等技术,又折腾了一番功夫,选主题,配置githubpage, 而后终于弄好了,后果怎么了!!你们应该也能猜到,我还是保持了一段时间就不了了知了, 我发现我陷入了一个自我的怪圈,想法每天很多,口头半途而费,或者始终就是个口嗨!!!!!! 我甚至有点探讨我本人这种行为,给我带了很多负面情绪, 如不安焦虑等,------------ 然而我想有本人网站,记录本人这个想法始终都存在我心里,从未扭转 从新登程这次我觉定本人写一个Blog ,每天更新我的项目进度由大家监督,我置信这次我肯定能够胜利, 始终想要做一个本人齐全独立自主开发的博客,作为一个程序员,我感觉领有有本人的一个Blog是一件很酷的事件。 然而因为很多起因我始终给耽误了!!!!这次我不会再给本人找任何借口!! 性能需要剖析零碎次要实现以下几方面的性能: 用户治理:用户的注册和登录,发表博文和评论。博文治理:用户能够在网站中发表和设置博文。评论治理:用户能够评论博文和回复其余用户的评论。分类管理:增加和删除分类,给文章设置分类。标签治理:增加和删除标签,给文章设置标签。 零碎性能用户治理用户的相干信息如下:用户ID、、用户名、用户昵称、用户明码、用户邮箱、用户头像、注册工夫、用户生日、用户年龄、用户手机号。 用户注册时需提供用户名、用户明码、用户邮箱或用户手机号。 用户登录时能够采纳用户名或邮箱或手机号进行登录。 用户能够公布博文、发表评论、回复,关注增加其余用户 博文治理博文的相干信息如下:博文ID、公布日期、发表用户、博文题目、博文内容、点赞数、评论数、旅行量。 博文能够被普通用户公布、批改、删除和评论,但批改和删除仅限于本人发表的动静。 博文公布时须要设置分类、标签、是否置顶。 评论治理评论的相干信息如下:评论ID、评论日期、点赞数、发表用户、评论文章ID、评论内容、父评论ID。 评论能够被用户发表和删除以及被其余用户回复。 分类管理分类的相干信息如下:分类ID、分类名称、分类别名、分类形容、父分类ID。 只有管理员能够增加、删除、批改分类。 分类的作用不仅能够将文章分类,还能够作为博客的菜单。 标签治理标签的相干信息如下:标签ID、标签名称、标签别名、标签形容。 用户发表文章时能够设置标签,标签不仅能够将文章分类,还能够作为博客的菜单。 关注公众号猿小叔获取更多干货 前言回首过往从入行开发作为一个程序员,我就想要一个本人的blog了,我是一个比拟爱折腾的人,刚开始理解到时候是应用第三方建站blog零碎,如,WordPress ,Typecho,等来搭建本人博客,而后我开始购买阿里云服务器,注册域名,搭建零碎,抉择主题,甚至不惜付费购买,等所有折腾弄好后,刚开始我还保持写blog 前面就放弃了,不了了之了,!!! 前面过了一段时间我又想起来想弄本人blog,开始感觉得动静blog节约,还要运维服务器很麻烦,于是又一顿度娘,发现能够搭建动态blog通GitHubpag 托管一个动态网站,通过hexo 等技术,又折腾了一番功夫,选主题,配置githubpage, 而后终于弄好了,后果怎么了!!你们应该也能猜到,我还是保持了一段时间就不了了知了, 我发现我陷入了一个自我的怪圈,想法每天很多,口头半途而费,或者始终就是个口嗨!!!!!! 我甚至有点探讨我本人这种行为,给我带了很多负面情绪, 如不安焦虑等,------------ 然而我想有本人网站,记录本人这个想法始终都存在我心里,从未扭转 从新登程这次我觉定本人写一个Blog ,每天更新我的项目进度由大家监督,我置信这次我肯定能够胜利, 始终想要做一个本人齐全独立自主开发的博客,作为一个程序员,我感觉领有有本人的一个Blog是一件很酷的事件。 然而因为很多起因我始终给耽误了!!!!这次我不会再给本人找任何借口!! 性能需要剖析零碎次要实现以下几方面的性能: 用户治理:用户的注册和登录,发表博文和评论。博文治理:用户能够在网站中发表和设置博文。评论治理:用户能够评论博文和回复其余用户的评论。分类管理:增加和删除分类,给文章设置分类。标签治理:增加和删除标签,给文章设置标签。 零碎性能用户治理用户的相干信息如下:用户ID、、用户名、用户昵称、用户明码、用户邮箱、用户头像、注册工夫、用户生日、用户年龄、用户手机号。 用户注册时需提供用户名、用户明码、用户邮箱或用户手机号。 用户登录时能够采纳用户名或邮箱或手机号进行登录。 用户能够公布博文、发表评论、回复,关注增加其余用户 博文治理博文的相干信息如下:博文ID、公布日期、发表用户、博文题目、博文内容、点赞数、评论数、旅行量。 博文能够被普通用户公布、批改、删除和评论,但批改和删除仅限于本人发表的动静。 博文公布时须要设置分类、标签、是否置顶。 评论治理评论的相干信息如下:评论ID、评论日期、点赞数、发表用户、评论文章ID、评论内容、父评论ID。 评论能够被用户发表和删除以及被其余用户回复。 分类管理分类的相干信息如下:分类ID、分类名称、分类别名、分类形容、父分类ID。 只有管理员能够增加、删除、批改分类。 分类的作用不仅能够将文章分类,还能够作为博客的菜单。 标签治理标签的相干信息如下:标签ID、标签名称、标签别名、标签形容。 用户发表文章时能够设置标签,标签不仅能够将文章分类,还能够作为博客的菜单。

July 9, 2021 · 1 min · jiezi

关于blog:个人博客开发之需求分析

前言回首过往从入行开发作为一个程序员,我就想要一个本人的blog了,我是一个比拟爱折腾的人,刚开始理解到时候是应用第三方建站blog零碎,如,WordPress ,Typecho,等来搭建本人博客,而后我开始购买阿里云服务器,注册域名,搭建零碎,抉择主题,甚至不惜付费购买,等所有折腾弄好后,刚开始我还保持写blog 前面就放弃了,不了了之了,!!! 前面过了一段时间我又想起来想弄本人blog,开始感觉得动静blog节约,还要运维服务器很麻烦,于是又一顿度娘,发现能够搭建动态blog通GitHubpag 托管一个动态网站,通过hexo 等技术,又折腾了一番功夫,选主题,配置githubpage, 而后终于弄好了,后果怎么了!!你们应该也能猜到,我还是保持了一段时间就不了了知了, 我发现我陷入了一个自我的怪圈,想法每天很多,口头半途而费,或者始终就是个口嗨!!!!!! 我甚至有点探讨我本人这种行为,给我带了很多负面情绪, 如不安焦虑等,------------ 然而我想有本人网站,记录本人这个想法始终都存在我心里,从未扭转 从新登程这次我觉定本人写一个Blog ,每天更新我的项目进度由大家监督,我置信这次我肯定能够胜利, 始终想要做一个本人齐全独立自主开发的博客,作为一个程序员,我感觉领有有本人的一个Blog是一件很酷的事件。 然而因为很多起因我始终给耽误了!!!!这次我不会再给本人找任何借口!! 性能需要剖析零碎次要实现以下几方面的性能: 用户治理:用户的注册和登录,发表博文和评论。博文治理:用户能够在网站中发表和设置博文。评论治理:用户能够评论博文和回复其余用户的评论。分类管理:增加和删除分类,给文章设置分类。标签治理:增加和删除标签,给文章设置标签。 零碎性能用户治理用户的相干信息如下:用户ID、、用户名、用户昵称、用户明码、用户邮箱、用户头像、注册工夫、用户生日、用户年龄、用户手机号。 用户注册时需提供用户名、用户明码、用户邮箱或用户手机号。 用户登录时能够采纳用户名或邮箱或手机号进行登录。 用户能够公布博文、发表评论、回复,关注增加其余用户 博文治理博文的相干信息如下:博文ID、公布日期、发表用户、博文题目、博文内容、点赞数、评论数、旅行量。 博文能够被普通用户公布、批改、删除和评论,但批改和删除仅限于本人发表的动静。 博文公布时须要设置分类、标签、是否置顶。 评论治理评论的相干信息如下:评论ID、评论日期、点赞数、发表用户、评论文章ID、评论内容、父评论ID。 评论能够被用户发表和删除以及被其余用户回复。 分类管理分类的相干信息如下:分类ID、分类名称、分类别名、分类形容、父分类ID。 只有管理员能够增加、删除、批改分类。 分类的作用不仅能够将文章分类,还能够作为博客的菜单。 标签治理标签的相干信息如下:标签ID、标签名称、标签别名、标签形容。 用户发表文章时能够设置标签,标签不仅能够将文章分类,还能够作为博客的菜单。 扫码关注公众号 猿人生 理解更多

July 2, 2021 · 1 min · jiezi

关于blog:SpringBoot24xMybatisPlusthymeleaf开发博客系列之准备工作

始终游走在各大线上写作平台,csdn,博客园,简书,思否,等也在这些博客平台发表写过一些博客,然而始终没有保持下来,不晓得是本人自身懒惰成性还是平台不好用,明明工作之余或者不忙的时候本人是有大量工夫去学习,去积淀的,然而都节约了,然而我忽然觉的我当初不应该这么浪费时间了,可能是年纪大了,有了职业危机毕竟我都25岁了,我想积淀一下空虚一下本人,从当初开始我会不定时在平台每周更新1-2篇比拟有品质文章,记录学习工作中遇到的问题,先从本人的集体博客开始写吧。 我感觉作为一个开发者,领有一个齐全自主功能强大的本人开发的博客是一个很酷的事件 !!! nice 扫码关注公众号猿人生理解更多好文

July 2, 2021 · 1 min · jiezi

关于blog:好看的技术博客

http://www.tianxiaobo.com/arc...

June 8, 2021 · 1 min · jiezi

关于blog:LivewireBlog-用-Laravel-8-Jetstream-构建的一个开源博客

背景Laravel 8 公布近一个月了,这次改变比拟吸引我的就是 Jetstream 全家桶。在没公布之前我没接触过 Livewire 以及前端的 Tailwindcss,alpinejs。然而我是一个比拟喜爱尝试新技术的人。在商业化的我的项目去实际显然是不可取的。所以我在国庆开始的时候就打算利用假期的工夫去折腾下博客试试,理解它的特点。再去我的项目中对应的去应用。通过一段时间的折腾我发现这玩意挺香的。当然也有一些坑,我也会分享进去。 Livewire-Bloggithub 代码地址 喜爱的请star????下 ????博客线上地址PC端界面成果 挪动端界面成果 功能分析搜寻案例Livewire 最大的长处的就是跟前端界面动静交互,比方我搜寻 Laravel 的时候他能够配合前端监听我的输出。实时通过 api 调用后盾的数据返回给前端。而这些 api 是毋庸你在编写的。它的外围文件 LivewireServiceProvider 曾经注册。有趣味的同学能够看下这个外围文件。 php artisan make:livewire search 生成 search.blade.php Search.php 文件search.blade.php Search.php 查看成果 评论案例评论外面会用到 Livewire 的组件全局事件互相通信 需要剖析 代码实现php artisan make:livewire AddComment php artisan make:livewire ShowComment AddComment<?phpnamespace App\Http\Livewire;use App\Models\CommentModel;use Illuminate\Support\Carbon;use Illuminate\Support\Facades\Auth;use Illuminate\Support\Facades\Cache;use Illuminate\Support\MessageBag;use Illuminate\Support\Str;use Illuminate\View\View;use Livewire\Component;class AddComment extends Component{ /** * @var string */ public $content; /** * @var int */ public $post_id; /** * @var int */ public $parent_id; /** * @var string */ public $comment_composing_box_id; /** * @var string */ public $preview_box_id; /** * @var string */ public $target_id; /** * @var array */ protected $rules = [ 'content' => 'required', ]; /** * @var array */ protected $messages = [ 'content.required' => '评论不能为空!', ]; public function mount(int $postId, CommentModel $comment, int $time = 0): void { $this->post_id = $postId; $this->parent_id = empty($comment->id) ? 0 : ($comment->parent_id ? $comment->parent_id : $comment->id); $this->target_id = empty($comment->id) ? 0 : $comment->id; $this->content = ($time > 0 && ! empty($comment->user)) ? '@'.$comment->user->name.':' : ''; $this->comment_composing_box_id = 'comment-composing-box-'.Str::random(10); $this->preview_box_id = 'preview-box'.Str::random(10); } public function submit(): void { if ($this->check()) { $validatedData = $this->validate(); $data = [ 'content' => $validatedData['content'], 'user_id' => Auth::user()->id, 'parent_id' => $this->parent_id, 'post_id' => $this->post_id, 'target_id' => $this->target_id, ]; CommentModel::create($data); $this->reset('content'); $this->emitTo('show-comment', 'create', $this->post_id); session()->flash('message', '增加评论胜利!'); } } public function userCommentLimit(MessageBag &$messageBag): void { $time = Cache::get(user_comment_limit_key()) ?? 0; $limit_day_time = config('cache.user_comment_limit.day_time', 10); if ($limit_day_time < $time) { $messageBag->add('content', Str::replaceFirst('?', $limit_day_time, '用户每天最多只能回复 ? 评论')); } else { Cache::put(user_comment_limit_key(), $time + 1, Carbon::today()->addDay()); } } /** * @param MessageBag $messageBag */ public function mustLogin(MessageBag &$messageBag): void { Auth::guest() && $messageBag->add('content', '用户须要登陆!'); } /** * @return bool */ public function check(): bool { $messageBag = $this->getErrorBag(); $this->userCommentLimit($messageBag); $this->mustLogin($messageBag); return $messageBag->count() === 0; } /** * @return View */ public function render(): View { return view('livewire.add-comment'); }}ShowComment<?phpnamespace App\Http\Livewire;use App\Models\PostModel;use App\Repositories\BlogRepository;use Illuminate\Support\Collection;use Illuminate\View\View;use Livewire\Component;class ShowComment extends Component{ /** * @var int */ public $postId; /** * @var Collection */ public $comments; /** * @var int */ public $comments_count = 0; /** * @var array */ protected $listeners = ['create' => 'getCommens']; /** * @param $postIds */ public function mount(PostModel $post): void { $this->postId = $post->id; $this->comments = $post->comments; $this->comments_count = $post->comments->count() ?? 0; } /** * $params. */ public function getCommens(int $postId): void { $post = BlogRepository::getPostById($postId); $this->comments = $post->comments; $this->comments_count = $post->comments->count() ?? 0; } /** * @return View */ public function render(): View { return view('livewire.show-comment'); }}剖析外面比拟重要的是 emitTo 这个的意思,就是你这个组件解决实现了须要告诉到谁,比方告诉 ShowComment, 就是 $this->emitTo('show-comment', 'create', $this->post_id);组件名称能够通过打印 ShowComment::getName()取得。 ...

October 9, 2020 · 2 min · jiezi

关于blog:前端jsvue下载后台传过来的流文件如excel并设置下载文件名

这里介绍两种办法,应用 Blob对象 和 应用 js-file-download这两种办法下载的文件都不会乱码,然而 不论应用哪种办法,发送申请时都要设置 responseType如果不打算理解间接应用,请通过目录或者间接点击跳转 四、次要残缺代码 办法一:应用Blob对象Blob对象示意一个不可变、原始数据的类文件对象。Blob 示意的不肯定是JavaScript原生格局的数据。File接口基于Blob,继承了blob的性能并将其扩大使其反对用户零碎上的文件。 一、Blob() 构造函数摘自:Blob() 构造函数 语法var aBlob = new Blob( array, options );参数array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象形成的 Array ,或者其余相似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。options 是可选的,它可能会指定如下两个属性: type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型。也就是设置文件类型。endings,默认值为"transparent",用于指定蕴含行结束符n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适宜宿主操作系统文件系统的换行符,或者 "transparent",代表会放弃blob中保留的结束符不变。 二、URL对象通过创立URL对象指定文件的下载链接。 // 创立新的URL示意指定的File对象或者Blob对象。let objectURL = window.URL.createObjectURL(blob); window.URL.revokeObjectURL(objectURL); // 开释内存在每次调用createObjectURL()办法时,都会创立一个新的 URL 对象,即便你曾经用雷同的对象作为参数创立过。当不再须要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL()办法来开释。浏览器会在文档退出的时候主动开释它们,然而为了获得最佳性能和内存应用情况,你应该在平安的机会被动开释掉它们。 三、利用a标签自定义文件名const link = document.createElement('a'); // 生成一个a标签。link.href = window.URL.createObjectURL(blob); // href属性指定下载链接link.download = fileName; // dowload属性指定文件名link.click(); // click()事件触发下载 download 属性设置文件名时,能够间接设置扩展名。如果没有设置,则浏览器将自动检测正确的文件扩展名并增加到文件 。四:次要残缺代码一般下载axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => { // 创立Blob对象,设置文件类型 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}) let objectUrl = URL.createObjectURL(blob) // 创立URL location.href = objectUrl; URL.revokeObjectURL(objectUrl); // 开释内存 }) 自定义下载后的文件名 ...

September 28, 2020 · 1 min · jiezi