- 博客(51)
- 收藏
- 关注
RSS订阅原创 如何生成protobuf文件
protobuf是一种用于序列化结构数据的工具，实现数据的存储与交换，与编程语言和开发平台无关。Protocol Buffers是为了把服务端提供的proto后缀文件转换成js文件，通过调用生成后的文件的js方法对数据进行序列化和反序列化。
2024-06-22 01:01:36
356
原创 Gin框架入门(四)—中间件
Gin框架入门(四)—中间件 官方地址：https://github.com/gin-gonic/gin 中间件：https://gin-gonic.com/zh-cn/docs/examples/using-middleware
2024-04-27 21:02:03
380
原创 Gin框架入门(三)—多路由分组
Gin框架入门(三)—多路由分组 官方文档：https://godoc.org/github.com/gin-gonic/gin 官方地址：https://github.com/gin-gonic/gin 路由分组：https://gin-gonic.com/zh-cn/docs/examples/grouping-routes
2024-04-27 21:01:42
349
原创 Gin框架入门(二)—文件上传
Gin框架入门(二)—文件上传 https://gin-gonic.com/zh-cn/docs/examples/upload-file
2024-04-27 21:01:14
418
原创 Gin框架入门(一)—HTTP请求
Gin框架入门—HTTP请求，官方地址：https://github.com/gin-gonic/gin 中文地址：https://gin-gonic.com/zh-cn/docs
2024-04-27 21:00:43
303
原创 小程序接入Sentry监控
小程序sentry-minia应用，即Sentry 无官方 api 用于提供给小程序，可以使用第三方根据提供的库，可使用原有 api 实现小程序端的异常监控。
2023-05-07 23:29:12
1419
4
原创 前端骨架屏应用
骨架屏的优势：用户避免看到长时间的白页；可以获知页面的大体结构，减小用户认为页面出错而离开的机率；视觉更加流畅。常见前端骨架屏方案、skeleton、draw-page-structure。
2022-12-05 18:12:58
4040
3
原创 Sentry监控
Sentry 是个非常不错的选择，服务端部署也非常简单，网站客户端引入 sentry sdk 并插入初始化 Sentry 的代码就可以实现对页面脚本异常的监控了。需要依赖 @sentry/vue 、@sentry/tracing和@sentry/webpack-plugin等插件
2022-08-02 22:29:04
9577
原创 webpack4+升级到webpack5+的变化
webpack4+升级到webpack5+的变化css-minimizer-webpack-plugin替换optimize-css-assets-webpack-plugin For webpack v5 or above please use css-minimizer-webpack-plugin instead.webpack-merge 引入方式// 4.+const merge = require('webpack-merge')// 5.+const { merge }
2021-10-28 16:40:19
773
原创 正则截取/替换两个字符之间的字符串
正则表达式用来匹配字符串的一种规则表达式创建正则对象构造函数var reg = new RegExp(正则表达式,匹配模式); new RegExp(pattern,attributes); 参数：参数pattern是一个字符串，指定了正则表达式的模式； 参数attributes是一个可选的参数，包含属性 g(globle全局匹配),i(忽略大小写),m(多行匹配)字面量var reg = /正则规则/匹配模式;调用匹配方法test 最
2021-08-22 19:32:01
6075
原创 Rollup模块打包器
RollupRollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。Rollup优劣Rollup优势：输出结果更加扁平，执行效率自然更高自动移除未引用代码打包结果依然完全可读Rollup缺陷：加载非ESM的第三方模块比较复杂模块最终打包到一个函数中，无法实现HMR浏览器环境中，代码拆分依赖amd如果正在开发应用程序，需要引用第三方模块、需要使用HMR提升开发效率，应用大时需要使用分包，这些需求Rollup在满足上都会有欠缺；而在开
2021-08-21 22:49:02
317
原创 Codecov结合Travis CI测试代码覆盖率
Codecov简介Codecov 是一个开源的测试结果展示平台，Github上许多开源项目都使用了Codecov来展示单测结果。Codecov支持Github账号登录，同样会同步Github中的项目。一般与Travis配合使用，Codecov的作用可是化的结果，与github联接，提供小徽章自动合并测试结果，并行运行Travis CI简介Travis CI 是一个托管的，分布式持续集成工具，主要用来构建和自动测试项目。当你push一段代码到github的时候，Travis会按照你预先配置
2021-06-27 17:04:58
438
原创 vite.config.js常用配置
Vitevite，下一代前端开发与构建工具。它是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动。优点：极速的服务启动，不需要等待打包操作；轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）；优化的构建，按需编译，不再等待整个应用编译完成；丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用；通用的插件，完全类型化的API。中文文档常用配置import { defineConfig } from 'vite'impor
2021-06-27 00:11:33
3287
原创 Vue3+Vite+TypeScript项目开发
技术栈vue3.0+vue-router4.0+vuex4.0+、vuex-persistedstatevite2.0+element-plusaxiosvue-router应用import { createRouter, createWebHashHistory } from 'vue-router'import routes from './entry'const router = createRouter({ history: createWebHashHistory()
2021-05-19 15:30:31
1273
原创 高德地图实现昼夜、卫星图切换
简介高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。目前 JS API 免费开放使用。教程实现新建mapAk.js文件export const amapAk = () => { return new Promise(function (resolve, reject) { window.amapInit = function () { resolve(AMap)
2021-05-15 12:08:40
3419
1
原创 React项目中使用svg组件
使用react-svg模块安装依赖 yarn add -D react-svg新建index.js文件import React from 'react';import { ReactSVG } from 'react-svg';function getAll(context) { return context.keys().reduce((o, modulePath, i) => { o[modulePath.replace(/.\/|.svg/g, '')] = pro
2021-05-12 17:32:10
5486
2
原创 基于qiankun实现微前端
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术-栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时每个微应用之间状态隔离，运行时状态不共享qiankun
2021-04-17 16:12:02
461
2
原创 Vue路由为history模式的nginx配置
场景vue项目中，路由使用history模式。当访问项目的时候，是可以正常访问的，但是当我们刷新页面或者直接访问路径的时候就会返回404。原因分析在history模式下，通过监听 popstate 事件驱动界面变化，监听 a 链接点击事件用history.pushState、history.replaceState 方法改变 url来实现更新页面部分内容的操作，并没有发起http请求。但是当直接刷新页面或者直接访问路径的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回40
2021-04-03 16:07:03
2008
原创 Nginx一个端口部署多个前端项目
场景根据路由不一样，在一个端口中，配置多个前端vue项目。配置vue项目打包在vue.config.js中配置如下const isProduction = process.env.NODE_ENV === 'production'module.exports = { .... publicPath: isProduction ? './' : '/',}nginx配置server { listen 8081; location / { root /op
2021-04-02 23:17:44
4546
1
原创 pre-commit用法介绍
pre-commit介绍自定义 Git - Git 钩子，pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，可以用 git commit --no-verify 来绕过这个环节。安装git校验lint-staged和yorkie介绍lint-staged，lint-staged会对当前add到git stage区的文件进行扫描操作。youkie，实际是fork husk
2021-04-02 16:55:57
5963
原创 Syntax Error: TypeError: this.getOptions is not a function
场景在使用vue-cli搭建项目，使用less、sass的时候，安装less-loader、sass-loader使用以下命令：yarn add -D less-loader lessyarn add -D sass-loader sass启动项目的时候却发现报错，如下：目前安装的最新版本是less-loader 8.0.0，sass-loader 11.0.0问题分析由于目前 @vue/cli@4.5.12 所用的是 webpack4，发现 sass-loader的11.0.0和le
2021-04-01 11:43:16
454
原创 基于Linux安装Jenkins详细教程
简介Jenkins是开源CI&CD软件领导者， 提供超过1000个插件来支持构建、部署、自动化， 满足任何项目的需要。相关概念：流水线：Jenkins Pipeline（或简称为 “Pipeline”）是一套插件，将持续交付的实现和实施集成到 Jenkins 中。Jenkins Pipeline 提供了一套可扩展的工具，用于将“简单到复杂”的交付流程实现为“持续交付即代码”。Jenkins Pipeline 的定义通常被写入到一个文本文件（称为 Jenkinsfile ）中，该文件可以
2021-03-28 22:55:37
1742
1
原创 移动端调试工具—vConsole
mockjs使用安装npm install -D mockjs在src/assets目录下创建个util文件夹，并在里新建一个文件mock.js例如：const Mock = require('mockjs')const Random = Mock.Randomexport default Mock.mock('api/mocktest',createData)function createData () { const articles = [] for (let i
2021-03-28 13:17:29
598
原创 Nginx安装配置详细教程
Nginxnginx 是是一个高性能的HTTP和反向代理服务器。异步非阻塞I/O，而且能够高并发。正向代理： 客户端为代理，服务器不知道客户端是谁。反向代理： 服务器为代理，客户端不知道服务器是谁。常用命令测试：nginx -t启动：nginx重启：nginx -s reload停止：nginx -s stop安装配置添加nginx的repo查看/etc/yum.repos.d/ 目录下是否有nginx.repo文件。如果有，进入到当前目录下输入：vim nginx.re
2021-03-21 21:30:24
279
1
原创 SonarQube管理项目代码的质量
SonarQube是什么Sonar（SonarQube）是一个开源平台，用于管理源代码的质量。Sonar 不只是一个质量数据报告工具，更是代码质量管理平台。支持的语言包括：Java、PHP、C#、C、Cobol、PL/SQL、Flex 等。SonarQube安装过程所需环境Sonarqube下载SonarScanner下载MySql数据库(Navicat for MySQL)JDK操作系统(windows)安装及配置过程分别下载sonarqube和sonar-scanner安装包到
2021-03-16 12:24:02
393
原创 基于React17+umi3+antd4+ant-design-pro等实践
Antd Pro 实践UmiJSUmi 是什么？Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。Ant Design ProAnt Design Pro 是一个企业级中后台前端/设计解决方案。项目地址...
2021-01-24 16:42:08
1016
原创 vue3.0+vue-router+element-plus初实践
Vue3中文文档Vue3.0对比Vue2.x优势框架内部做了大量的性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听，更小的打包文件等。新增的组合式API（即Composition API），更适合大型项目的编写方式。对TypeScript支持更好，去掉this操作，更强大的类型推导。初始化项目安装@vue/clinpm install @vue/cli -g或 yarn global add @vue/cli创建项目vue create 项目名可以选择V
2020-11-14 19:10:02
2756
转载 Moment.js常见用法汇总
Moment.js常见用法总结Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。接下来，我将按照这些操作对Moment.js中的Doc进行整理分类，方便学习和日后的查阅。获取时间获取开始时间// 获取今天0时0分0秒moment().startOf('day')// 获取本周第一天(周日)0时0分0秒moment().startOf('
2020-07-25 17:52:42
1305
原创 子进程child_process的spawn模块使用
child_process介绍使用在package.json添加运行指令{ "scripts": { "start": "node start.js" }}同package.json同级新建一个start.js文件/** * @desc 使用yarn start可以启动打包后的dist项目，查看打包好的文件*/const { spawn } = require('child_process')const isWin32 = process.platform =
2020-07-12 15:47:11
8948
1
原创 百度地图应用过程中遇到的问题
问题描述百度地图执行map.setViewPort， 接着执行map.pointToOverlayPixel， 转换的像素点不准问题解决方案在调用setViewPort，会触发地图缩放的事件，可以在缩放结束（zoomend）事件触发时调用pointToOverlayPixel方法...
2020-07-05 13:44:40
710
原创 window.URL.createObjectURL下载Blob文件及IE/Edge兼容
前景在导出文件的时候，有时候会返回blob文件流的数据，而不是返回URL地址，对于这种场景，下面谈谈其应用。应用挂载下载文件的方法在window下window.downFile = function (resBlob, fileName, target = '', fileType = '.xls') { var blob = new Blob([resBlob], { type: 'application/vnd.ms-excel;charset=utf-8' }) if (w
2020-07-05 13:00:36
9495
原创 基于nodejs的zlib模块实现简单压缩
zilibnodejs的zlib模块提供通过 Gzip、Deflate/Inflate、和 Brotli 实现的压缩功能。未压缩前const http = require('http'const fs = require('fs')const server = http.createServer()server.on('request', (req, res) => { console.log('request from', req.url) const html = fs.rea
2020-06-14 17:01:13
803
原创 中间部分自适应宽度并且优先加载的三栏布局
背景在笔试题中，会经常遇到实现一个三栏布局，下面用代码实现一个中间部分要自适应宽度并且优先加载，左边宽100px；右边栏宽160px的三栏布局float布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏布局--float形式</title></head><style> .box{ flo
2020-06-05 15:43:42
886
原创 vue项目中的优化
不要在模板里面写过多表达式循环调用子组件时添加key频繁切换的使用v-show，不频繁切换的使用v-if尽量少用float，可以用flex按需加载，可以用require或者import()按需加载需要的组件合理使用路由懒加载、异步组件，拆分chunkName避免组件嵌套导致子组件强制更新:id="$route.params.id"会导致页面更新，route是响应式的数据，因为路由跳转就会导致route是响应式的数据，因为路由跳转就会导致route是响应式的数据，..
2020-05-30 22:47:45
270
原创 vue自定义指令原理
vue指令本质指令本质上是装饰器，是vue对HTML元素的扩展，给HTML元素增加自定义功能，语义化HTML标签。vue编译DOM时，会执行与指令关联的JS代码，即找到指令对象，执行指令对象的相关方法。自定义指令生命周期自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind钩子函数作用介绍bind：只调用...
2020-05-05 20:03:07
2531
原创 computed的实现原理
介绍官方文档写起来像一个方法，用起来像一个属性，基于它的依赖进行缓存的只要跟计算属性相关的数据发生了改变，计算属性就会重新计算，不相关的值发生变化，不会重新计算计算属性根据已知data中的值，生成一个额外的新值，且新值还要跟着data中的值变化而变化computed和watch的区别watch擅长处理的场景：一个数据影响多个数据。是观察一个特定的值，当该值变化时执行特定的函数。...
2020-05-05 16:34:29
929
原创 keep-alive原理及实现
介绍keep-alive是Vue.js的一个内置组件。它会缓存不活动的组件实例，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude属性，允许组件有条件地进行缓存，max最多可以缓存多少组件实例。官方文档原理在created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。在需要重新渲染的时候再将v...
2020-05-05 14:25:09
3877
原创 nextTick原理及实现过程
next-tick源码作用：将回调延迟到下次DOM更新周期之后执行。下次DOM更新周期：其实是下次微任务执行时更新DOM。而vm.$nextTick是将回调添加到微任务中。原理1）先定义了一个callbacks存放所有的nextTick里的回调函数2) 然后判断一下当前的浏览器内核是否支持Promise，支持就用Promise来触发回调函数3) 如果不支持Promise，再判断是否支持...
2020-05-02 21:30:05
2809
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人