MarsXHChang的博客_JavaScript,HTML5,项目管理,vue,Docker,诗和远方,vue,移动端

GitHub + PicGo搭建个人图床

一、 PicGo简介PicGo是一款图片上传的工具，目前支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 8种常用图床，功能强大，简单易用。二、下载GitHub就不说了，直接注册就行。PicGo下载地址：https://github.com/Molunerfinn/PicGo/releases三、开始配置搭建3.1 配置GitHub（1...

github

picgo

图床

个人

搭建

置顶原创点赞0 阅读627 收藏0 评论0 2021-09-09

全栈之初识 Gitlab-CI -- 进入持续集成的世界

本文将会对Gitlab CI进行简要介绍，包括Gitlab Runner，Gitlab CI中的相关概念以及.gitlab-ci.yml的常用配置。一、GitLab CI 是什么？GitLab CI 是GitLab内置的进行持续集成的工具，只需要在仓库根目录下创建.gitlab-ci.yml 文件，并配置GitLab Runner；每次提交的时候，gitlab将自动识别到.gitlab-ci....

gitlab

ci

持续集成

yml

runner

置顶原创点赞0 阅读111 收藏0 评论0 2021-09-09

全栈之鉴权之旅 -- JWT + passport 实现 Token 验证（Node + Express）

登陆认证 (鉴权)，是每个应用都需要的基础功能。但很多的时候，却都被大家所忽略，不仅安全漏洞严重，而且代码紧耦合，混乱不堪。Passport & JWT，正是为了解决登陆认证的事情，让认证模块更透明，减少耦合！网上关于 JSONWebToken (以下简称 JWT ) && passport.js的中文学习资料较少，学习的时候还蛮吃力的。所以总结出此篇，文章若有错谬...

jwt

passport

token

验证

node

置顶原创点赞0 阅读149 收藏0 评论0 2021-09-09

从V8的内存管理算法出发-教你如何管理内存

文章目录导语一、V8引擎如何回收垃圾1、V8的内存分配（1）内存大小（2）新生代和老生代2、变量处理二、如何查看V8内存使用情况1、使用 node 来查看内存使用情况2、在 chorme 浏览器中查看内存使用情况三、内存优化实例1、优化内存技巧2、关于闭包和内存使用码字不易，觉得有帮助的小伙伴点个赞支持下~扫描上方二维码关注我的订阅号~导语什么是V8？V8 js运行的引擎（类似 ja...

V8

内存

算法

泄露

引擎

置顶原创点赞0 阅读116 收藏0 评论0 2021-09-09

移动端——Uni-app 使用 Cavans 压缩图片插件

等比例压缩图片可指定图片宽高，兼容 H5 和小程序使用（引入组件，调用组件内 compress 方法）<compress ref="compress" />import compress from '@/components/compress.vue'components: { compress }// 在需要压缩时调用uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = c

压缩

h5

小程序

图片

uni

置顶原创点赞0 阅读274 收藏0 评论0 2021-09-09

Vue 中的 Render 全面详解 (渲染函数 & JSX)

相信大家都或多或少的在 code 中见过或使用过 render，如果你对它还是一脸懵逼，那就快上车！今天就带你来盘它。

vue

jsx

render

渲染

函数

置顶原创点赞0 阅读110 收藏0 评论0 2021-09-09

Promise实现原理（附源码）

写的是真的好，详细，特此转载保存一下。本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。接下来，带你一步一步实现一个 Promise1. Promise 基本结构new Promise((resolve, reject) => {...

Promise

实现

原理

源码

回调函数

置顶原创点赞0 阅读218 收藏0 评论0 2021-09-09

一键复制文本实现（navigator.clipboard 和 execCommand(废弃)）

execCommand 已经被废弃了，所以不要再使用了！使用 navigator.clipboard.writeText(value); 相比以前更加简洁。//旧：

复制

execCommand

文本

点击复制

一键

原创点赞0 阅读14 收藏0 评论0 2022-05-31

Webpack 原理总结归纳面试

Webpack 是一个模块打包器，可以分析各个模块的依赖关系，最终打包成静态文件（js、css、jpg）。三大阶段：初始化：

webpack

面试

总结

原理

步骤

原创点赞0 阅读44 收藏0 评论0 2022-04-20

源码探秘之 vue-class-component

本文只浅析@Component类装饰器的核心源码，其他原理相似，暂不赘述。关于JS装饰器可查看本人另一篇：JS Decorator —— 装饰器(装饰模式

源码

class-component

vue+ts

vue类

装饰器

原创点赞0 阅读40 收藏0 评论0 2022-04-20

Vue 单/多图片（可全屏预览）翻页轮播组件

支持单/多张图翻页轮播可全屏预览自定义图片宽高自定义无图提示语自带图片加载loading可将源码根据实际需求改造。效果图全屏预

轮播

预览

图片

多图片

全屏

原创点赞0 阅读78 收藏0 评论0 2022-04-20

源码探秘之 vue-property-decorator

本文只浅析@Prop属性装饰器和@Watch方法装饰器的核心源码，其他原理相似，暂不赘述。关于JS装饰器可查看本人另一篇：JS Decorator —

vue decorator

decorator

prop

watch

装饰器

原创点赞0 阅读60 收藏0 评论0 2022-04-20

moment.js很好的日期工具类-vue

总结一个非常实用的日期工具类moment.js，日期获取，格式化等。引入moment//require 方式var moment = require('moment');//import 方式import moment

moment

日期

工具

vue

类库

原创点赞0 阅读94 收藏0 评论0 2022-03-08

安利-在线图片优化器

最近在项目上，有些图片实在太大，导致加载缓慢，于是想到进行无损图片压缩，然后找到了连个很好的在线图片优化器，基本都是无损的喔，而且平均压缩率都能达到50%以上。第一个：Optimizilla 这个在线图像优化器使用最佳优化和压缩算法来达到最小尺寸的JPEG和PNG图像，同时保证最佳质量/尺...

图片

优化

压缩

在线

安利

原创点赞0 阅读82 收藏0 评论0 2022-03-08

移动端卡片式轮播

/ 移动端案例轮播$(function () { var imglength; if($('.customers-mobile').length == 1){ //首页 imglength = $('.customers-box-mobile').find('.mo-

移动

轮播

卡片

前端

css

原创点赞0 阅读69 收藏0 评论0 2022-03-08

element中input的change事件

element中input的change事件是移除焦点才触发：<el-input placeholder="同事姓名或账号" suffix-icon="el-icon-search" v-model="keyword" @change="handlerPageNo" style="width: 180px;"></el-input&am

element

input

change

事件

ico

原创点赞0 阅读47 收藏0 评论0 2022-03-08

MAC M1 芯片在 yarn install 时报错：The CPU architecture “arm64“

新公司新电脑，最强 M1 芯片 MAC，兴高采烈装环境：nvm、node、yarn…然鹅，yarn install 装包时给了我重头一击…背景首先我用下面命令安装了 nvm：curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.38.0/install.sh | bash然后用 nvm 安装了 node，

M1

MAC

install

cpu

arm

原创点赞0 阅读40 收藏0 评论0 2022-03-04

Vue 中使用 Websocket Demo

首先需要后端提供类似于如下的 websocket path：// ws://{host}/{path}// eg:private websocketPath: string = 'ws://t.bsapi.xxx.com/xxx-service/webSocket/user1';然后在组件中创建 websocket：全局就在 App.vue 中即可

socket

vue

websocket

demo

消息

原创点赞0 阅读108 收藏0 评论0 2022-03-04

移动端——Uni-app 使用 Cavans 压缩图片插件

等比例压缩图片可指定图片宽高，兼容 H5 和小程序使用（引入组件，调用组件内 compress 方法）<compress ref="compress" />import compress from '@/components/compress.vue'components: { compress }// 在需要压缩时调用uni.chooseImage({

压缩

h5

小程序

图片

uni

原创点赞0 阅读77 收藏0 评论0 2022-03-04

Antv G6 流程图初体验及自适应

新公司新业务，接触很多新技术，在给自身带来提升的同时也面临着挑战…G6 简介官网： https://g6.antv.vision/zhG6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。不得不承认确实是一款很强大的画图插件安装npm install --save @antv/g6引入import G6 from

G6

流程图

antv

自适应

画图

原创点赞0 阅读74 收藏0 评论0 2022-03-04

TS 报错 Could not find a declaration file for module

有的npm包使用原生js没问题，换ts后某些包会报“Could not find a declaration file for module”的错误。有以下两种方式解决1、下载 @type/报错包（部分包开发者可能没有上传自己的.d.ts代码到npm分支，这时会报错说找不到这个包，别急看下一步）2、最直接简单有效的解决方法：项目根目录下新建shims-

ts

报错

declaration

module

declare

原创点赞0 阅读50 收藏0 评论0 2022-03-04

Vue 前端导出 PDF & Excel（jspdf、html2canvas、vue-json-excel）

有时我们前端会遇到懒蛋子后端 or 膈应人的产品，让我们前端自己导出 PDF & Excel，没关系，心(bao)平(tiao)气(ru)和(lei) 的跟他说：我可以！一、html2canvas + jsPDF 导出 PDF插件用到的是：html2canvas 和 jsPDF.js思想就是先把页面用 html2canvas 转换成 canvas，

导出

export

pdf

excel

前端

原创点赞0 阅读98 收藏0 评论0 2022-03-04

NUXT 踩坑 —— nuxt 使用 keep-alive 和 keep-alive-props

1、在标签上添加属性<nuxt keep-alive :keep-alive-props="{ include: includeArr }" />// jsdata () { return { includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组 }}2、在组件中添加name属性这个是好多网上教程没有点明的，这里重点提出。

nuxt

keep

alive

props

缓存

原创点赞0 阅读40 收藏0 评论0 2022-03-04

NUXT 踩坑 —— 封装 Axios 请求拦截

1、配置 nuxt.config.js//添加模块modules: [ 'cookie-universal-nuxt', "@nuxtjs/axios",]//添加插件引用plugins:[ '@/plugins/axios',]2、新增 plugins/axios.jsimport { Message }

nuxt

axios

拦截

请求

封装

原创点赞0 阅读118 收藏0 评论0 2022-03-04

全栈运维之 Docker Command

一、镜像1、docker search image_name - 搜索docker hub上的镜像// 搜索 image_name 镜像docker search image_name/* 筛选搜索的镜像 */// 筛选官方版本(is-official) 的镜像docker search

docker

文件名

文件复制

原创点赞0 阅读58 收藏0 评论0 2022-03-04

GitHub + PicGo搭建个人图床

一、 PicGo简介PicGo是一款图片上传的工具，目前支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 8种常用图床，功能强大，简单易用。二、下载GitHub就不说了，直接注册就行。

github

picgo

图床

个人

搭建

原创点赞0 阅读168 收藏0 评论0 2022-03-04

Center OS 安装 Docker

如果你是阿里云 ECS 服务器，那么阿里云有对应的 yum 源，请使用下面方法：# 添加yum源。yum install epel-release –yyum clean allyum list# 安装并运行Docker。yum install

docker

二维码

yum源

原创点赞0 阅读34 收藏0 评论0 2022-03-04

全栈之初识 Passport & Passport-jwt – Web安全的守护神

一、Passport 简介passport.js是Nodejs中的一个做登录验证的中间件，极其灵活和模块化，并且可与Express、Sails等Web框架无缝集成。Passport功能单一，即只能做登录验证，但非常强大，支持本地账号验证和第三方账号登录验证（OAuth和OpenID等），

passport

jwt

安全

鉴权

token

原创点赞0 阅读20 收藏0 评论0 2022-03-04

i18n 中如何传递参数

首先在 i18n 对应语言文件中配置可传参数：src/locales/lang/en/component/table.tsexport default { index: 'Index', total: 'total of {total}',};然后页面中引入 i18n，并使用import { useI18n } from

i18n

语言

参数

传递

怎么

原创点赞0 阅读63 收藏0 评论0 2022-03-04

全栈之初识JWT -- Web安全的守护神

一、JWT 简介JSON Web Token（JWT）是目前最流行的跨域身份验证解决方案。JWT 是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。二、解析 JWT一个JWT实际上就是一个字符串eg：

jwt

web安全

token

鉴权

验证

原创点赞0 阅读26 收藏0 评论0 2022-03-04

官方博客	意见反馈	了解我们	全部文章
在线客服	网站地图	热门标签

51CTO博客

wx6139a4e9d6485的博客

GitHub + PicGo搭建个人图床

全栈之初识 Gitlab-CI -- 进入持续集成的世界

全栈之鉴权之旅 -- JWT + passport 实现 Token 验证（Node + Express）

从V8的内存管理算法出发-教你如何管理内存

移动端——Uni-app 使用 Cavans 压缩图片插件

Vue 中的 Render 全面详解 (渲染函数 & JSX)

Promise实现原理（附源码）

一键复制文本实现（navigator.clipboard 和 execCommand(废弃)）

Webpack 原理总结归纳面试

源码探秘之 vue-class-component

Vue 单/多图片（可全屏预览）翻页轮播组件

源码探秘之 vue-property-decorator

moment.js很好的日期工具类-vue

安利-在线图片优化器

移动端卡片式轮播

element中input的change事件

MAC M1 芯片在 yarn install 时报错：The CPU architecture “arm64“

Vue 中使用 Websocket Demo

移动端——Uni-app 使用 Cavans 压缩图片插件

Antv G6 流程图初体验及自适应

TS 报错 Could not find a declaration file for module

Vue 前端导出 PDF & Excel（jspdf、html2canvas、vue-json-excel）

NUXT 踩坑 —— nuxt 使用 keep-alive 和 keep-alive-props

NUXT 踩坑 —— 封装 Axios 请求拦截

全栈运维之 Docker Command

GitHub + PicGo搭建个人图床

Center OS 安装 Docker

全栈之初识 Passport & Passport-jwt – Web安全的守护神

i18n 中如何传递参数

全栈之初识JWT -- Web安全的守护神