- 博客(172)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 笔记目录和相关的资料、Demo
GitHub地址https://github.com/W-Abel-jia/demo-test.gitdemo地址https://w-abel-jia.github.io/demo-test/目录前端学习笔记：angular4中将html导出为pdf前端构建报错排查前端学习笔记：管理多个版本的node和angular/cliAngular6学习笔记1：搭建开发环...
2019-09-08 17:38:40
756
1
原创 K8S组件scheduler和controller-manager报错：dial tcp 127.0.0.1:10252: connect: connection refused
K8S组件scheduler和controller-manager报错：dial tcp 127.0.0.1:10252: connect: connection refused 解决
2022-07-27 22:53:09
3287
1
原创 Angular学习笔记89: 父子组件内容投影进阶
实际开发过程的场景在实际开发过程中，会遇到讲一个DOM 作为一个Input传给子组件，然后在子组件投影渲染出来。子组件设置默认投影子组件设置多个投影在父组件中使用投影中的上下文内容具体实现创建两个组件，一个父组件ContentShadowUseComponent，一个子组件ContentShadowComponent子组件设置默认投影在子组件ContentShadowComponent中设置单插槽投影，可以使用<ng-content></ng-content>
2021-12-31 15:02:39
896
原创 Angular学习笔记88：Angular12中使用crypto-js运行提示Warning
在Angular的12版本中，使用了webpack的5.42.0版本，在这种情况下，使用crypto-js会出现如下提示信息，虽然不影响项目运行，在开发过程中会很难受。./node_modules/crypto-js/core.js:43:22-39 - Warning: Module not found: Error: Can't resolve 'crypto' in '/Users/wjy/WebstormProjects/ng12/devops-web-ng12/node_modules/cryp
2021-09-14 12:52:51
1365
原创 webpack学习笔记（3）：Entry和Output基础用法
Entry用来指定 webpack 的打包入口webpack是一个模块打包器，对于代码资源或者非代码资源都会当成一个个的模块，对于模块之间的依赖，通过Entry，去寻找依赖之间的关系，从而形成一颗依赖树，然后生成打包的资源。Entry的用法单入口 （ entry是一个字符串）module.exports = { entry: './path/entry/file.js'}入口只有一个或者单页应用多入口 ( entry是一个对象)module.exports = {
2021-08-10 15:07:45
348
原创 webpack学习笔记（2）：webpack的超级简单的例子
一个超级简单的例子新建一个webpack配置文件文件： webpack.config.jsconst path = require('path');module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'production'};创建
2021-08-04 16:09:23
266
原创 webpack学习笔记（1）：webpack概览和安装
为什么需要构建工具转换ES6/ES7语法转换JSXCSS前缀补全/预处理器压缩混淆代码图片压缩上面的操作都需要使用构建工具来完成为什么选择webpack社区生态丰富配置灵活支持插件化扩展官方更新迭代速度快（接近于一年一个大版本）webpack 的配置文件默认的配置文件： webpack.config.js指定配置文件：webpack --config 指定配置文件文件名称对不同的环境指定不通的配置文件简单的webpack组成module.exports =
2021-08-04 16:07:34
105
原创 前端构建设置通用的环境变量以及遇到的问题
在前端构建打包的时候，经常会遇到根据当前环境去做一些不同的操作在Windows中设置在Win中，在package.json 的构建命令中使用set命令设置{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build:dev":"echo \"Build\" && set ENV_CONFIG=dev && nod
2021-03-31 18:51:27
764
原创 Angular学习笔记87：修改NG-ZORRO中Modal、Dropdown等组件挂载DOM
在做前端微服务化拆分的时候，当微应用是在主应用的某一个子路由的时候，即：子应用是挂载在主应用的某一个元素上的时候，子应用的Modal、Dropdown等组件会出现样式丢失的情况。分析原因在子应用的Modal、Dropdown等组件使用的时候，会在主应用的body中append一个div元素，这个元素的class属性为cdk-overlay-container（这个很重要），但是由于当前的body是主应用，并不是子应用的body，两个应用的样式隔离，此时当前的这个组件是获取不到属于自己子应用的样式的。
2021-03-27 21:05:32
865
原创 Node-Red之创建一个简单的Node
创建一个简单的Node,可以将输入的数据转换成小写。初始化一个npm 项目执行命令npm init执行过程：# wjy @ qifang in ~/gitProjects/node-red-dev [21:49:17]$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensi
2021-03-03 18:55:27
658
2
原创 vue学习笔记1: 使用vue写一个简单的webstock 测试工具
代码如下：<!DOCTYPE html><html><head> <title>webstock 测试工具</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> button { padding: 4px 8px; background-color: #0f1f2a;
2021-03-03 18:05:48
800
2
原创 Angular学习笔记86：做一个简单的复制内容到剪切板的组件
复制内容到剪切板是一个很常见的操作生成一个组件 copyClipboard执行命令ng generate component copyClipboardCREATE src/app/component/copy-clipboard/copy-clipboard.component.less (0 bytes)CREATE src/app/component/copy-clipboard/copy-clipboard.component.html (33 bytes)CREATE src/app/
2020-11-06 18:04:20
522
原创 解决内网环境下已经同步了依赖，执行 npm install 依旧失败的问题
在前端项目中，有时候会遇到在内网环境中构建打包，这个时候由于需要安装依赖，在内网中搭建了 nexus但是这个nexus并没有连接外网，只能通过工具将依赖在可以连接外网的环境下，将依赖下载下来，打包复制到内网环境中，将这些依赖上传到nexus，这样就可以做到即使在连接不上外网的情况下，也是可以顺打包构建的，但是有时这里也会有很大的一个坑。因为有些包是从github 或者非当前这个 nexus下载的，所以这个时候会造成执行安装依赖 npm install失败，解决这个问题的步骤1. 生成 package-l
2020-11-03 12:06:12
4630
原创 卷挂载的方式在Jenkins拉起的容器中运行sonar-scanner
在 Jenkins中使用 sonar-scanner进行质量分析是非常便捷的。但是从docker hub 拉取的镜像中，并没有安装 sonar-scanner。之前写过在 Jenkins 中安装 nodejs 和sonar-scanner,但是后来发现，当开发语言过多以后，在对其使用sonar-scanner 扫描时，需要安装对应语言的 编译环境，这样会导致Jenkins 镜像的体积会越来越大，并且没有重新build Jenkins镜像会很麻烦。所以采用将 sonar-scanner 采用卷挂载的方式使用
2020-11-02 17:18:51
334
原创 Git学习笔记11：同步同一个分支的两个不同remote的代码
在同步代码的过程中，通常在同一个代码仓库中会有多个remote, 现在有两个remote A和 remote B, 将 A 的代码同步到 B 上。通常的操作如下：在 当前的代码仓库中添加 remote Bgit remote add b http://xx.xx.xx.xx.git在当前项目中拉取 remoteB中的更改git pull B branchName这个时候，在没有冲突的情况下，会输入这次的merge信息，此时按esc然后输入:wq之后即可。然后将remoteA
2020-10-30 01:50:11
946
原创 Angular学习笔记85：NG-ZORRO 树状表格惰性加载数据的实现
在使用 NG-ZORRO的树状表格时，官方提供的 demo是一次性加载全部数据的。在项目中，数据比较多的情况下，一次性获取全部数据，是非常影响用户体验的。所以实现树状表格惰性加载数据。创建一个组件$ ng g c sluggishness-tree-tableYour global Angular CLI version (10.2.0) is greater than your localversion (7.3.9). The local Angular CLI version is used.
2020-10-28 10:52:21
1368
原创 sonarqube6.7.1版本镜像中升级TypeScript插件
在项目中使用的 sonarqube的镜像是6.7.1 版本的，其中的typescript的插件版本是1.1.0.1079，这个版本是个比较老的版本了，由于内网环境不能直接在sonarqube的插件市场下砸，所以这里将下载一个插件，在当前这个镜像的基础上在构建一下。下载typescript插件在 下载地址中找到对应要下载的typescript插件版本的jar包.这里下载1.9版本的typescript插件选择sonar-typescript-plugin-1.9.0.3766.jarDockerf
2020-10-27 11:41:59
378
原创 Angular学习笔记84：将复制页面的上文字到剪切板
在项目中，偶尔会遇到将页面的文字复制到用户的剪切板中，方便用户操作，但是由于这种操作比较少，可能整个应用就一个地方或者两个地方，引入一个插件可能代价有点大。创建一个组件ng generate component copyToClipboardCREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.less (0 bytes)CREATE src/app/pages/copy-to-clipboard/copy-to-c.
2020-10-20 16:12:18
891
原创 手动构建一个Apache Superset镜像
现在要构建出一个Apache Superset版本是3.7.2的Docker 镜像。下载 Superset 3.7.2版本源码https://github.com/apache/incubator-superset/tree/0.37.2rc2这里选择版本为：0.37.2rc2修改Dockerfile在代码仓库的根目录中，有一个Dockerfile，但是这个这个Dockerfile 中使用的 Python 镜像版本和nodejs 的镜像版本较低，并且对于pip没有换源(使用aliyun)，所
2020-09-24 22:40:54
683
原创 本地运行preset/superset 的镜像
superset 是一个数据探索和可视化的Web应用，支持市面大多数的sql数据库。运行superset拉取 docker hub 的镜像docker pull preset/superset拉起镜像docker run -d -p 8080:8080 --name superset preset/superset一系列的初始化操作创建admin 账号docker exec -it superset superset fab create-admin \
2020-09-24 11:50:35
390
原创 Angular 学习笔记83：在表单中通过指令将输入框中输入的文本数据大写
有时候要求用户输入的字符自动转化为大写字符。在表单中通过指令将输入框中输入的文本数据大写模版文件<form [formGroup]="validateForm"> <nz-form-item> <nz-form-label nzSpan="4">转换大写</nz-form-label> <nz-form-control nzSpan="7"> <input nz-input formControlName
2020-08-12 17:23:51
400
原创 Jenkins镜像中安装nodejs和sonar-scanner
通过Jenkins进行sonar扫描前端项目，需要在Jenkins中安装，nodejs和sonar-scanner。拉取项目中使用的Jenkins镜像docker pull jenkins:2.164.3撰写DockerfileFROM 10.34.63.26:5000/jenkins:2.164.3RUN apk add nodejs \ && node -vADD sonar-scanner-4.4.0.2170-linux.tar /usr/local/share
2020-08-06 11:18:30
904
原创 Angular 学习笔记82：监听路由的变化
在项目中，有时会遇到这样一个问题：在应用中，需要根据当前的页面控制页面上某一个组件或者元素的显示与否，此时需要监听当前路由的变化，根据路由中是否包含了某一个关键字，从而判断当前元素或者组件的显示与否。路由变化的事件使用 Router的 events: Observable<Event>属性路由的事件如下：路由器事件说明NavigationStart本事件会在导航开始时触发RouteConfigLoadStart本事件会在 Router 惰性加载 某个路由
2020-06-10 19:13:02
5485
2
原创 docker删除所有悬虚镜像（name 为none , tag 为 none）
什么是 悬虚镜像悬虚镜像就是镜像没有仓库名或没有标签查询显示虚悬镜像，在列表中展示为 <none>:<none>悬虚镜像 怎么来的有时候在构建新镜像的时候，为这个镜像打了一个已经存在的tag，此时Docker 会移除旧镜像上的tag,将这个tag 用在新的镜像上，此时旧镜像就变成了悬虚镜像, 或者构建新镜像报错时，也会生成一个悬虚镜像。删除悬虚镜像查看当前系统...
2020-04-12 14:58:50
7319
原创 ES6学习笔记24：Module
文章目录概述两个概念ES6模块加载的优点严格模式export命令对输出的变量、函数、类重命名import 命令模块的整体加载export default 命令export 与 import 的复合写法模块的继承跨模块常量import()适用场合概述两个概念运行时加载CommonJS 和 AMD 模块，都只能在运行时确定使用那些对象属性，CommonJS模块就是对象，输入时必须查找对象属...
2020-01-18 19:52:06
173
原创 ES6学习笔记23：Class的继承
简介Class 可以通过关键字extends实现继承。这比ES5通过修改原型链实现继承要清晰、方便。class Point {}class ColorPoint extends Point{ constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; }...
2020-01-13 18:02:36
188
原创 ES6学习笔记22：Class的基本语法
简介类的由来JavaScript 语言中，生成实例对象的传统方法是通过构造函数。function Ponit(x, y){ this.x = x; this.y = y;}Ponit.prototype.toString = function (){ return '(' + this.x + ',' +this.y + ')';}var p = new Ponit(...
2020-01-13 14:50:48
186
原创 ES6学习笔记21：async函数
含义ES2017 标准引入 async 函数，使得一步操作变得更加方便函数async对Generator 函数进行了改进，主要体现在以下方面内置执行器Generator 函数的执行必须要有执行器，而async函数自带执行器。async函数的执行，与普通函数一样，只要一行。更好的语义函数async和await比起*和yield,语义更加清楚。async表示函数里有异步操作，awa...
2020-01-12 14:37:07
289
原创 ES6学习笔记20：Generator 函数的异步应用
文章目录传统方法基本定义定义回调函数Promise协程协程的Generator函数实现Generator 函数的数据交换和错误处理异步任务的封装Thunk 函数定义JavaScript 语言的 Thunk 函数异步编程对JavaScript非常重要。JavaScript的执行环境是“单线程”的。传统方法在ES6之前，异步编程的方法，大概有以下：回调函数事件监听发布/订阅Promis...
2020-01-11 23:15:17
197
原创 ES6学习笔记19：Generator 函数的语法
Generator 函数是ES6提供的一种异步编程解决方案，执行Generator 函数会返回一个Iterator（遍历器）对象。在理解上，可以将其理解为：一个状态机，封装了多个内部状态也可以是以恶搞遍历器对象生成函数。function关键字与函数名之间有一个（）号。函数体内部使用yield表达式，定义不同的内部状态在上面的代码中，定义了一个Generator 函数helloWorld,内部有两个yieldhelloworld和return语句。
2020-01-09 11:33:25
284
2
原创 ES6学习笔记18：Iterator 和 for...of
Iterator 定义在JavaScript中，表示集合的数据结构只要是：Array和 Object，在ES6中添加了Map和Set。Iterator （遍历器）为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以进行遍历操作。（即：依次处理这个数据结构的所有成员）Iterator 的作用为各种数据结构提供统一、比娜姐的访问接口。是的数据结构的成员按照...
2019-12-31 10:59:23
152
2
原创 Docker：Android 项目使用Gradle镜像打包构建报错： aapt
现有一个Android项目，项目比较大，分了好几个模块，用Docker拉起一个gradle镜像。从docker hub 上拉取镜像docker pull gradle:4.4 启动镜像docker run -i -v /Users/wjy/Desktop/android/android:/opt/data -v /Users/wjy/Desktop/android-sdk-linux:/...
2019-12-30 17:39:48
1061
原创 ES6学习笔记17：Promise对象
Promise 的含义Promise 是异步编程的一种解决方案，以传统的解决方案：回调函数和事件更合理和强大。定义Promise 是一个对象，从它可以回去一步操作的消息，Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。特点对象的状态不受外界的影响，对象的状态有pending（进行中）、fulfilled（成功）、rejected（已失败）。只有异步操作的结果可以...
2019-12-26 17:14:09
173
原创 Git学习笔记10：取消近几次commit
取消近几次commit查看当前 git log 信息git log --graph现在将其恢复到83b95d541b4df53e4e15c8d75的commit，在这个之后的commit 全部取消执行命令：git reset --hard commitId此时具体为git reset --hard 83b95d541,执行后：验证git log --graph注意：...
2019-12-24 10:27:17
369
原创 Git学习笔记9：工作区、暂存区和HEAD文件差异的恢复
工作区、暂存区和HEAD文件差异的恢复先查看下 git 的状态执行命令：git status这个时候，在暂存区有文件index.html、README.md的变更。将暂存区所有文件恢复成 HEAD 的状态执行命令：git reset HEAD执行后的结果如图：此时将 文件index.html、README.md的变更 取消暂存了。查看git状态执行命令：git st...
2019-12-24 10:16:36
558
原创 Git学习笔记8：工作区、暂存区和HEAD文件的差异的比较
比较暂存区和HEAD所含文件的差异查看当前 git 的状态执行命令git status此时，暂存区 和 HEAD 是一致的修改当前的某一个文件后从重新查看 git 的状态这个时候，在暂存区有文件index.html的变更，在工作区有文件README.md的变更比较 暂存区 和 HEAD 文件的差异执行命令：git diff --cached然后就会出现如下界面：注...
2019-12-24 09:27:04
544
原创 Git学习笔记6：将连续的多个commit合并成一个
先查看下当前分支的commit信息git log --graphcommit信息如下在这里将 fourth commit、third commit这两个个连续commit合并成一个commit为 rebase commit third and fourth操作步骤使用命令：git rebase -i commitId由于合并的是fourth commit、third commi...
2019-12-23 16:34:09
2071
原创 Git学习笔记7：将间隔的几个commit合并成一个
先查看下当前分支的commit信息git log --graphcommit信息如下这里将commit ID 为e7dc4b3debab6c61e7a190f96df57662f666d538和db35f24346b83018368daebd9f93ba1dc85c4448合并成一个commit操作步骤根据Commit Id 进入交互式修改使用命令：git rebase -i c...
2019-12-23 16:29:15
2192
原创 ES6学习笔记16：Proxy
Proxy用于修改一些操作的默认行为，等于在语言层面上作出修改，属于“元编程”，即：对编程语言进行编程。基本用法Proxy 提供一种可以对外界的访问进行过滤和改写的机制。ES6原生提供Proxy构造函数，用来生成Proxy实例。var proxy = new Proxy(target, handler);Proxy对象的所有用法都是上面这种形式，不同的在于handler参数的写法。ta...
2019-12-23 15:33:31
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人