清音残月

时光匆匆，发现自己已经很久没有动笔写博客了。瞥了一眼掘金，上一篇博客居然还停留在22年。五年间，似乎自己变得越发慵懒，或许是因为一旦进入舒适区，就不太愿意再去挑战自己，不管是在技术上还是生活中。刚毕业时，心怀梦想，全力钻研各种新技术，渴望进入大厂一窥天地，然而渐渐发现，这一切似乎并没有给自己带来太多的惊喜。最近和一位同学聊天，他说自己坚持工作的动力就是知道下周就发工资了。或许对我来说也是如此，只有在即将面试时才会匆匆刷技术文档，编写开源代码。废话不多说，直入正题吧。

目前大部分的网站已经升级到 HTTPS，使用 HTTPS 就需要向权威机构申请证书，需要付出一定的成本，如果需求数量多，也是一笔不小的开支。cert-manager 是 Kubernetes 上的全能证书管理工具，如果对安全级别和证书功能要求不高，可以利用 cert-manager 基于 ACME 协议与 Let’s Encrypt 来签发免费证书并自动续期，实现永久免费使用证书，本文主要来记录如在 k3s（单机版 k8s ）部署 ssl。

动画需求在业务开发中是很常见的功能，无论是客户端开发、Web 开发、还是桌面端开发，为了产品有更好的用户体验，UED 设计的视觉效果也愈发的复杂，一般些简单的淡入淡出，旋转效果开发花费些时间即可搞定，甚至稍微复杂些的动画多花费些时间也能完成

好久都没写博客了，这两天稍微空闲些打算找个技术专题来写一些东西。本想写写最近非常火的 Turbopack，但考虑到没有深入的研究其运行原理，如果要写可能就要是流于表面讲讲用法，感觉价值也不是很高，故此还是选了之前预研过的在线编辑器。目前社区中一些开源的框架在部署文档时为方便开发者快速了解使用，都会实现一套自己的在线编辑器。如掘金-Code。

前言经过一段儿时间对之前 web-core-plus 的架构进行了重新梳理、重构，并在此基础了实现了大部分 ElementUI 的样式组件以及 Api，统一封装成新的 WebComponent 组件库 web-plus-ui。相关资料官方文档项目组织代码仓库WIP(web-core-plus)：点击查阅 core 库进度WIP(web-ui-plus)：点击查阅 UI 库进度npm包(后面考虑换名）@canyuegongzi/web-core-plus@cany

在之前的历史文章中介绍了 leaflet、mapbox、cesium 三种框架下的一些基本操作（点、线、面绘制），除简单的绘制之外，日常基本开发中可能还会用到地图的事件系统（如地图点击），这篇文章先通过点位拾取的功能简单了解下三种框架下不同的事件处理。通过这篇文章，能够有这些收获：- 在 leaflet、cesium、mapBox 中如何进行鼠标事件

前言WebComponent 方式是实现组件化的一种解决方案，目前社区内也有很多成熟对方案，如 Omi 、stencil ， 其中腾讯前端团队的 Omi 方案还是相当完善的。早些时间 笔者也在 Omi 的基础上封装了 @canyuegongzi/web-core ，但目前此种方案在使用方面尚存在不足，诸如属性定义繁琐、事件抛出缺乏灵活性、数据无法响应式等；故此最近在 web-core 基础上对相关的逻辑做了重构、升级成为 @canyuegongzi/web-core-plus 。简单对新旧定义组件方式

前言在上一篇文章 地图创建、点位绘制 中详细讲解了 leaflet、 cesium、mapbox 中如何创建地图、绘制点位。在 webGis 开发中遇到需要渲染某个区划、某条河、某条路径的需求时，除了传统的发布 gis 图层之外，也可以直接用数据在客户端绘制线、面要素。这种基于上篇文章的基础，这一篇文章来聊聊这三种地图中如何绘制线要素和面要素。通过这篇文章，能够有这些收获：在 leaflet、cesium、mapBox 通过不同方式绘制 线要素在 leaflet、cesium、mapBox 通过不

前言随着前端开发趋于复杂化，地图（Gis）已经成为大多数系统必不可少的一部分，从最常见的 Gis 可视化（点、线、面、各种弹框、插值）到三维模型、场景模拟、场景监控等。主流的智慧园区、智慧城市、数字孪生等基本都离不开 webGis 的开发。通过这篇文章，能够有这些收获：了解常见的 webGis 的实现方式通过 leaflet、cesium、mapBox 创建地图在 leaflet、cesium、mapBox 通过不同方式绘制 Marker文章中相关代码均已提交到 github，欢迎 star

前言随着前端应用场景的逐渐复杂化，伴随而来的对大数据的处理就不可避免。 那么今天就以一个真实的应用场景为例来谈谈前端中如何通过子线程来处理大数据。目前主流显示器的刷新率为 60Hz，即一帧为 16ms，因此播放动画时建议小于 16ms，用户操作响应建议小于 100ms，页面打开到开始呈现内容建议小于 1000ms。– 根据 Chrome 团队提出的用户感知性能模型 RAIL。以上这段应用是 google 团队提出的用户最优体验模型，从 js 运行的角度，大致意思就是尽量保证每一个 js 任务在最

前言最近公司部分前端工程转 typeScript 的实践中，也尝试了 ts 的写法，诸如依赖注入、控制翻转、注解等。这些概念在 Java 等后端开发中应用可能更为广泛，但也不影响在前端领域的尝鲜。最终的写法如下；依赖注入：export default class DataQuery extends VueComponent { @Inject('baseWebDataService') public baseWebDataService!: BaseWebDataService;

前言随着前端开发越来越复杂，随之出现了大量的 js 框架，几乎每一家都配有配套的构建工具诸如 vue-cli、 create-react-ap、@angular/cli、@nestjs/cli等。这些脚手架可以快速帮助开发者初始化配置、目录结构搭建、项目构建。尽管这些脚手架都是相当优秀，几乎可以满足大部分的开发需求，但在特定的开发场景中可能需要根据业务需求做一定的调整，这就需要对脚手架内部的运行机制有一定的了解。本文的脚手架已经发布到 npm, 同时也欢迎开发者提供优秀的模板。t-cli 说明文件

概述K3s 是一个轻量级的 Kubernetes 发行版，它针对边缘计算、物联网等场景进行了高度优化，简单来说就是低配版的k8s；rancher官网，特点如下。简单但功能强大的 batteries-included 功能本地存储提供程序，服务负载均衡器，Helm controller 和 Traefik Ingress controller。使用基于 sqlite3 的轻量级存储后端作为默认存储机制。同时支持使用 etcd3、MySQL 和 PostgreSQL 作为存储机制。最大程度减

概述主系统采用乾坤集成react技术栈，子系统技术栈不限，docker部署;乾坤预览技术栈：主系统：React + Antd + qiankun子系统：Vue演示地址演示地址github系统截图主系统设计框架搭建系统基础搭建// 脚手架创建基础代码npx create-react-app simple-main-app-web// 暴露配置(能更好的优化webpack打包)npm run ejectqiankun常用apia. registerMicr

概述该功能是基于BSPV1.0版本中资源管理的扩展，在资源管理中添加接口资源，方便在对角色授权时做到更加精确的控制。第一层级为系统，第二层级为系统模块，第三层级为接口UI图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LsHR6vUV-1597074975568)(http://qiniu.canyuegongzi.xyz/bsp-api-resource.png)]功能设计Api资源表设计考虑到系统中资源有限，在设计表时系统、模块、接口全部存储同一数据表，通

用户组织权限管理系统技术栈：前端：Vue + ElementUi + TypeScript后端：nest.js + mysql + redis演示地址用户组织管理系统（演示地址）github功能设计数据库设计用户实体@Entity()export class User { @PrimaryGeneratedColumn() id: number; @Column({ length: 500 }) name: string; @Column({nullabl

安装npm install --save vue-picture-preview使用在项目的入口文件处进行配置import vuePicturePreview from 'vue-picture-preview'Vue.use(vuePicturePreview)在根路由处进行添加插槽<!-- Vue root compoment template --><...

模板<template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div><ul> <li v-for="item in webAddr...

背景图片404的问题打开build/utils.jsif (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader', }) } el...

兼容问题在低版本额浏览器中从在不支持axios的问题 。axios 是基于 promise 来实现的，IE 和低版本的设备不支持 promise。解决方法安装npm install babel-polyfill -S引入第一种引入import "babel-polyfill"第二种引入修改webpack.config.jsmodule.exports = {entry: [...