canyuegongzi-CSDN博客

原创服务器迁徙大作战：从虚拟到物理的服务迁移全攻略

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

2024-05-31 20:23:43 764

原创如何在Kubernetes中使用cert-manager部署SSL

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

2022-12-04 00:15:22 866 1

原创作为前端还在使用GIF动画吗？换一种更优雅的方案吧

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

2022-11-06 23:23:01 1141

原创如何花一天时间打造一款前端在线代码编辑器——实现代码预览

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

2022-10-31 01:35:51 3533

原创新生代的原生 WebComponent 架构设计，邀请你一起参与共建

前言经过一段儿时间对之前 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

2022-05-29 17:26:55 848 6

原创前端开发中如何实现WebGIS数据可视化（四）——鼠标事件

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

2022-05-15 19:08:52 912

原创高级前端如何更优雅的定义WebComponent

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

2022-04-17 18:31:22 782 2

原创前端开发中如何实现WebGIS数据可视化（二）——线、面绘制

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

2021-07-25 15:16:55 2064

原创前端开发中如何实现WebGIS数据可视化（一）——地图创建、点位绘制

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

2021-07-17 22:26:41 18883 4

原创前端中如何使用webWorker对户体验进行革命性的提升

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

2021-06-11 23:58:35 449

原创大前端中如何优雅的编写网络请求层

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

2021-05-15 21:07:53 198

原创大前端进阶系列——从零实现属于自己的脚手架

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

2021-05-05 12:00:15 449 3

原创 k3s系列(一) —— 环境准备及k3s安装

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

2021-05-04 16:30:16 2096 4

原创前端聚合系统【qiankun】(集成用户权限、布局风格)

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

2021-01-04 22:28:08 2796 12

原创 node实现接口资源批量管理（含excel数据导入及模板下载）

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

2020-08-10 23:57:29 680

原创用户组织权限管理系统（基于Nest.js）

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

2020-06-14 21:41:37 1495 1

原创 vue开发常见问题集锦（二）——vue移动端图片点击放大

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

2019-03-31 20:44:28 1677 1

原创 vue开发常见问题集锦（二）——vue中中使用iframe

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

2019-03-31 20:43:36 3753

原创 vue开发常见问题集锦（二）——打包后背景图片404的问题

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

2019-03-31 20:43:06 486

原创 vue开发常见问题集锦（二）——兼容问题

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

2019-03-31 20:42:31 452

原创 vue开发常见问题集锦（一）——HTML的字符串中提取所有的可用字符串

con(val) { var str = val return str.replace(/<[^>]*>|/g, ""); },从字符串中获取所有的汉字con(val) { var reg = /[\u4e00-\u9fa5]/g; var strs = name.match(r...

2019-03-31 20:41:49 1520

原创 vue开发常见问题集锦（一）——vue混入

/*主要用于混入种植信息的tab组件数据处理*/export const tabFilterOption = { data: function () { return { /*列表数据*/ listData: null } }, props: { informationData: { type: Array, },...

2019-03-31 20:41:25 290

原创 vue开发常见问题集锦（一）——vue获取参数，状态数据

vue获取参数export const urlPar = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) retur...

2019-03-31 20:40:59 931

原创 vue开发常见问题集锦（一）——监听路由的变化

watch: { '$route.query.id':function (val) { this.id = val; this.getNewInfo() } },

2019-03-31 20:40:34 443 1

原创 vue开发常见问题集锦（一）——时间格式化

普通格式化(function(window){ /*2018年01月04日*/ var time1 = function(val) { var str = val.split(' ')[0].split('-'); return str[0] + '年' + str[1] + '月' + str[2] + '日' } /*2018.01.04*/ v...

2019-03-31 20:40:04 210

原创 vue开发常见问题集锦（一）——在v-html指令时如何使用过滤器

// html <div class="word" v-html="$options.filters.filters2(item.news_content)"></div>// scriptfilters: { filters2: function (arg) { arg.replace(/<img [^>]*src=['"]...

2019-03-31 20:39:29 516

转载 Flex布局笔记

笔记中的图片均来自原网络Flex布局笔记概述Flex就是弹性布局的缩写Flexible Box //容器元素 .box{ display: flex; } //行内元素 .box{ display: -webkit-flex; /* Safari *///webkit内核的浏览器必须添加-webkit...

2018-09-08 12:52:16 191 1

转载 ThinkPHP的基本使用方法(一)

路由路由配置文件以及基本的配置 //基本的使用 Route::rule('/', 'index/index/index', 'get'); //路由路径中带参数id Route::rule('article-<id>', 'index/article/info', 'get'); Route::rule('register', 'in...

2018-09-08 12:49:54 2182 1

原创 javascript模块化开发

模块化利弊利 - 避免命名的冲出 - 更好的分离 - 更高的复用性 - 更高的可维护性弊 - 多次请求浪费宽带 - 依赖模糊 - 难以维护模式全局函数模式let msg = '1111';function fo(){ console.log(msg)}命名空间模式//对象中的数据是可以修改的，不安全let obj =...

2018-09-08 12:44:21 186

原创 git的简明使用教程

git的简明使用教程git的安装以及配置git的安装git的安装在window下图形界面的操作非常简单，在Linux下以乌班图为例：sudo apt-get install gitgit的配置$ git config --global user.name "xxxxx"$ git config --global user.email xxxxx第一个要...

2018-09-07 14:36:47 149

原创 angular框架应用实例

angular在线案例后台管理系统：http://47.106.104.22:8000主要问题变更检测数据更新后页面无法主动的刷新 constructor(private changeDetectorRe:ChangeDetectorRef){} public fu() { this.changeDetectorRef.ma...

2018-09-07 14:35:13 821

原创 javaScript面向对象的程序设计（八）——继承

基类//基类父类var Person = function(){ this.name = 'Marvin'; this.age = 20;}Person.prototype = { say : function(){ console.log('Person.prototype - say'); }} 构造函数...

2018-09-07 14:33:02 191

原创 javaScript面向对象的程序设计（七）——内置对象

概述StringDateMathArrayRegExpNumberObjectFunctionNullBooleanErrorcookiesession方法String获取字符串长度Length属性连接字符串：concat(String, String)获取索引值：indexOf(String) 根据索引值获取单个字符：charAt(I...

2018-09-07 14:31:29 251

原创 javaScript面向对象的程序设计（六）——BOM

概述WindowDocumentHistorylocationScreenNavigatorLocationhash 设置或返回从井号 (#) 开始的 URL（锚） host 设置或返回主机名和当前 URL 的端口号 hostname 设置或返回当前 URL 的主机名 href 设置或返回完整的 URLpathname 设置或返回当前 URL 的路径部分p...

2018-09-07 14:30:50 160

原创 javaScript面向对象的程序设计（五）—— 正则表达式

基本概述^同类^ 匹配输入字符串的开始位置。$ 匹配输入字符串的结束位置。\b 匹配一个单词边界，也就是指单词和空格间的位置。例如， ‘er\b’ 可以匹配”never” 中的’er’，但不能匹配 “verb” 中的 ‘er’。\B 和\b相反，匹配非单词边界。例如，’er\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配...

2018-09-07 14:30:09 134

原创 javaScript面向对象的程序设计（四）—— 数据绑定

基本概述原生innerHTML模板 window.onload=function(){ var isLogin=false; if(isLogin){ Login() }else{ noLogin() } }原生获取元素 -&gt; 操作元...

2018-09-07 11:09:52 187

原创 javaScript面向对象的程序设计（三）——对象创建

创建对象的过程function Person(name, age) { this.name = name; this.age = age; } var person = new Person(&quot;Marvin&quot;, 21);创建一个空对象 var obj = new Object(); 让Person中的this指向obj，并执行Pers...

2018-09-07 11:08:45 172

原创 javaScript面向对象的程序设计（二）——原型和原型链

概述在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，函数默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A...

2018-09-07 11:08:01 248

原创 javaScript面向对象的程序设计（一）——数据类型

数据类型字符串(string) ::string数字(number) ::整型浮点型 NaN 布尔(boolean) ::true false数组(array)对象(object) ::Null ::nullUndefined ::undefined引用类型（栈&amp;&amp;堆）值引用undefined, number, string, boolea...

2018-09-07 11:07:15 660 4

空空如也

空空如也