自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(69)
  • 收藏
  • 关注

原创 Angular创建自己的库发布到npm上使用

注意,一定要修改paths,否则模块引入会报错的。具体代码(有第三方组件一定要应用module)可以修改html的前缀。使用自己定义的html。

2023-04-05 21:02:58 747 1

原创 Angular 7 升级到Angular 12

angular升级

2022-07-27 08:13:32 618

原创 Angular 14微前端项目构建

angular 14微前端项目构建

2022-07-19 17:15:28 1243

原创 Angular 项目的搭建步骤

快速搭建angular项目

2022-07-08 12:57:11 1888 2

原创 取出中括号里面的字符串

2022-02-09 19:34:47 521

原创 纯前端下载表格多sheet

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <script src="js/xlsx.min.js"></script> <script src="js/xlsx.full.min.js"></script> <

2022-01-27 11:27:44 1043

原创 sheetName的改变

npm i xlsxnpm i xlsxpackage.json 里面多个 ,"xlsx": "^0.17.2"引用import { saveAs } from 'file-saver';import { utils, write } from 'xlsx';使用 sheetName这个就是要改的名字 exportExcel() { const worksheet = utils.json_to_sheet(this.getExcelData());.

2022-01-27 10:29:34 439

原创 循环多个散点图

tree.json[ { "title": "Ws基准版本", "children": [ { "title": "EMBMWA-C1", "children": [ { "title": "RA1", "children": [ { "title": "Rot", "isLeaf": true }, { "ti

2022-01-26 15:20:06 630

原创 散点图-日期

<div class="test"></div> let mytestcharts = echarts.init(document.querySelector('.test') as any); let option = { tooltip: { trigger: 'axis', formatter: function (params:any) { params = params[0]; .

2022-01-26 12:55:56 668

原创 Echarts-显示24小时得数据

<div class="test"></div>ngOnInit() {let mytestcharts = echarts.init(document.querySelector('.test') as any); let data1 = [ {name:'2022/12/18 6:38:08', value:['2022/12/18 6:38:08', 80]}, {name:'2022/12/18 16:18:18', value:['20

2022-01-25 11:17:28 991

原创 echarts-tree-动态加载

html<section class="welcome-page"> <div> <nz-range-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker> </div> <span class="tree"> <nz-tree [nzData]="nodes" nzCheckab

2022-01-23 16:18:08 849

原创 Sass 基本使用

Sass 基本使用1.变量1.1定义1.2引用1.3变量名用中划线还是下划线分隔2.嵌套3.导入SASS文件4.混合器5.继承1.变量1.1定义1.2引用1.3变量名用中划线还是下划线分隔2.嵌套3.导入SASS文件4.混合器5.继承...

2022-01-14 17:56:45 343

原创 学习 RxJS 操作符

学习 RxJS 操作符( Learn RxJS中文版)

2022-01-05 14:37:39 880

原创 Angular指令

1. 上面是指令指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令,你可以管理表单、列表、样式以及要让用户看到的任何内容。2.指令分类Angular 指令的不同类型如下:组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。内置属性指令: ngClass, ngStyle,ngModel内置结构指令: ng

2022-01-04 15:12:39 867

原创 Angular指令-结构性指令(*ngTemplateOutlet)使用

1.常规写法//默认值$implicit, 如果let-定义的变量,没有值,就会读取默认的$implicit的值 tryObj = { $implicit: 'test default', value:'test', key: '1' }<ng-container [ngTemplateOutlet]="try" [ngTemplateOutletContext]="tryObj"></ng-container>// let-trylet 取得

2022-01-04 13:19:02 500

原创 table-rowspan

import { Component, OnInit } from '@angular/core';import { NzMessageService } from 'ng-zorro-antd/message';import { WelcomeService } from './services/welcome.service';import * as _ from 'lodash';import { LoadingService } from 'src/app/core/loading/l

2022-01-03 21:38:10 990

原创 typescript-装饰器

1.定义一个装饰器,装饰器下面的函数会自动触发app.component.html<button nz-button nzType="primary" (click)="method(obj)">decorator</button>app.component.tsimport { Component, OnInit,} from '@angular/core';import { Color } from './core/learn-decorator';@Compone

2021-12-30 15:17:26 592

原创 typescript--泛型

// 普通接口里面有泛型函数, 接口里的函数是泛型函数// 函数参数和函数返回类型,泛型函数在函数的括号前加<T> // Array<T>interface testObj1 { <T>(arg:T):T,}// 泛型函数function testFunction1<T>(arg: T): T { return arg;}let usage1 : testObj1 = testFunction1;// 另一种写法int.

2021-12-27 16:22:34 223

原创 HTTP请求

设置后端地址已经静态资源地址export const environment = { production: false, BASE_URL: 'http://10.61.177.108:8080', ASSETS_URL: '../assets/jsons'};设置请求的接口地址export class WelcomeConstant { public static REG_FINGING_DETAILS = 'reg-fing-details.json';}.

2021-12-19 10:25:52 117

原创 Angular 8 组件的生命周期-AfterContent

Angular 8 组件的生命周期-AfterContent1.响应被投影内容的变更2.学习地址1.响应被投影内容的变更内容投影是从组件外部导入 HTML 内容,并把它插入在组件模板中指定位置上的一种途径。 可以在目标中通过查找下列结构来认出内容投影。这个 AfterContent 例子探索了 AfterContentInit() 和 AfterContentChecked() 钩子。Angular 会在把外部内容投影进该组件时调用它们。使用 AfterContent 钩子AfterConten

2021-12-14 21:18:51 708

原创 Angular 8 组件的生命周期-AfterView

Angular 8 组件的生命周期-AfterView1.响应视图的变更2.学习地址:1.响应视图的变更当 Angular 在变更检测期间遍历视图树时,需要确保子组件中的某个变更不会尝试更改其父组件中的属性。因为单向数据流的工作原理就是这样的,这样的更改将无法正常渲染。如果你需要做一个与预期数据流反方向的修改,就必须触发一个新的变更检测周期,以允许渲染这种变更。这些例子说明了如何安全地做出这些改变。AfterView 例子展示了 AfterViewInit() 和 AfterViewChecked

2021-12-14 20:52:57 1012

原创 Angular 8 组件的生命周期-ngOnChanges

Angular 8 组件的生命周期-ngOnChanges1. 使用变更检测钩子2.学习地址:1. 使用变更检测钩子一旦检测到该组件或指令的输入属性发生了变化,Angular 就会调用它的 ngOnChanges() 方法。 这个 onChanges 范例通过监控 OnChanges() 钩子演示了这一点。ngOnChanges() 方法获取了一个对象,它把每个发生变化的属性名都映射到了一个SimpleChange对象, 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代,

2021-12-13 21:33:29 3264

原创 Angular 8 组件的生命周期-指令的生命周期

Angular指令的生命周期1. 使用指令来监视 DOM2. 同时使用组件和指令的钩子3. 学习地址1. 使用指令来监视 DOM可以深入了解你无法直接修改的 DOM 对象。你无法触及内置 的实现,也无法修改第三方组件,但是可以用指令来监视这些元素。你可以把这个侦探指令写到任何内置元素或组件元素上,以观察它何时被初始化和销毁。app.module.ts表单要加入FormsModule, 引入自定义指令SpyDirectiveimport { NgModule } from '@angular/c

2021-12-12 20:06:02 431

原创 Angular 8 组件的生命周期

组件的生命周期1. 什么是生命周期2. 生命周期钩子分类2.1 指令与组件共有的钩子2.2组件特有的钩子3. 生命周期的顺序3.1 实例3.2 运行效果:4.学习地址1. 什么是生命周期生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnIn

2021-12-03 19:40:58 562

原创 JS面向对象的理解

JS面向对象的理解1.理解对象1.1.new 操作符 + Object 创建对象1.2.字面式创建对象2.创建对象2.1.工厂模式2.2.构造函数模式2.3.原型模式2.4.组合使用构造函数模式和原型模式2.5.动态原型模式2.6.寄生构造函数模式2.7.稳妥构造函数模式3.继承3.1.原型链3.2.借用构造函数3.3.组合继承3.4.原型式继承3.5.寄生式继承3.6.寄生组合式继承4.学习地址1.理解对象1.1.new 操作符 + Object 创建对象var person = new Objec

2021-11-21 22:11:41 1354

原创 git 常用命令

git 常用命令1. git clone2. git config3. git branch4. git add5. git commit6. git pull1. git clone克隆代码:git clone克隆指定分支代码: git clone -b 分支名字文件名字过长: git config --system core.longpaths true2. git config设置用户信息:git config --global user.name ‘runoob’git confi

2021-11-18 11:08:50 63

原创 Angular环境搭建 (npm常用命令)

@Angular环境搭建1. 下载并且安装Node.js官方网站下载:https://nodejs.org/en/安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本1.1 npm包全局安装和局部安装理解1. 全局安装npm所在位置,安装位子: 全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中。npm是Node.js的包管理工具,所以当我们从官网下载安装node的时候,npm也顺带装好了。npm安装在node安装目录下的no

2021-11-17 15:58:39 1527

原创 angular中动态创建组件

1.文件目录2.核心代码app.component.html<h1 #msgContainer>我是Container</h1><button (click)="createComponent()">创建组件</button><!-- <h1>我是Container 2</h1><ng-template #msgContainer></ng-template><button (cli

2021-09-01 14:02:45 588

原创 json-server 使用

json-server 使用1.概述JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。2.安装已经启动npm install -g json-servernpm init, 新建 server/db.json{ "posts": [

2021-08-31 11:28:04 264 1

转载 微信小程序-自定义组件

自定义组件文章目录自定义组件1、组件的创建与引用1.1、创建组件1.2、引用组件1.3、局部引用组件1.4、全局引用组件1.5、全局引用 VS 局部引用1.6、组件和页面的区别2、 样式2.1、组件样式隔离2.2、组件样式隔离的注意点2.3、修改组件的样式隔离选项2.4、styleIsolation 的可选值3、数据、方法和属性3.1、data 数据3.2、 methods 方法3.3、 properties 属性3.4、data 和 properties 的区别3.5、使用 setData 修改 pro

2021-06-19 17:55:00 534

转载 微信小程序-视图与逻辑

视图与逻辑文章目录视图与逻辑1、页面导航1.1、什么是页面导航1.2、小程序中实现页面导航的两种方式1.3、声明式导航1.3.1、导航到 tabBar 页面1.3.2、导航到非 tabBar 页面1.3.3、 后退导航1.4、编程式导航1.4.1、导航到 tabBar 页面1.4.2、导航到非 tabBar 页面1.4.3、后退导航1.5、导航传参1.5.1、 声明式导航传参1.5.2、编程式导航传参1.5.3、 在 onLoad 中接收导航参数2、页面事件2.1、下拉刷新事件2.1.1、什么是下拉刷新2

2021-06-19 16:21:40 404

原创 微信小程序-模板与配置

模板与配置文章目录模板与配置1、WXML模板语法1.1、 数据绑定1.1.1、数据绑定的基本原则1.1.2、在 data 中定义页面的数据1.1.3、Mustache 语法的格式1.1.4、Mustache 语法的应用场景1.1.5、动态绑定内容1.1.6、动态绑定属性1.1.7、 三元运算1.1.8、算数运算1.2、事件绑定1.2.1、什么是事件1.2.2、小程序中常用的事件1.2.3、 事件对象的属性列表1.2.4、target 和 currentTarget 的区别1.2.5、bindtap 的语法

2021-06-19 14:37:16 1040

原创 微信小程序-快速入门

微信小程序快速入门文章目录微信小程序快速入门1、学习目标2、小程序简介2.1、小程序与普通网页开发的区别2.2、体验小程序3、第一个小程序3.1、 了解注册小程序开发账号的流程3.2、 获取小程序的AppID3.3、 安装微信开发者工具3.6、 演示新建小程序项目的步骤3.7、 查看项目运行效果的两种方式3.8、 了解微信开发者工具主界面的5个组成部分4、小程序代码的构成4.1、了解项目的基本组成结构4.2、小程序页面的组成部分4.3、 认识小程序中的4种配置文件4.4、 app.json文件4.5、 p

2021-06-18 12:35:06 1533 2

原创 vuex使用

vuex使用今日目标1.Vuex概述2.Vuex的基本使用3.使用Vuex完成计数器案例4.Vuex中的核心特性A.StateB.MutationC.ActionD.Getter5.vuex案例A.初始化案例B.完成添加事项C.完成删除事项D.完成选中状态的改变E.剩余项统计F.清除完成事项G.点击选项卡切换事项实例运行结果今日目标1.Vuex概述2.Vuex基本使用3.使用Vuex完成todo案例1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享

2021-06-17 16:07:09 104

转载 前端接口调用方式

前端接口调用方式1、接口调用方式2、异步3、promise4、基于Promise发送Ajax请求5、Promise 基本API实例方法.then().catch().finally()静态方法.all().race()6、fetchfetch API 中的 HTTP 请求fetchAPI 中 响应格式7、axiosaxios基础用法axios 全局配置axios 拦截器8、async 和 await图书列表案例1. 基于接口案例-获取图书列表2 添加图书3 验证图书名称是否存在4. 编辑图书

2021-06-04 18:19:05 6890

转载 Vue组件使用

Vue组件使用组件组件注册全局注册组件基础用组件注意事项局部注册Vue 调试工具Vue组件之间传值父组件向子组件传值子组件向父组件传值兄弟之间的传递组件插槽匿名插槽具名插槽作用域插槽购物车案例1. 实现组件化布局2、实现 标题和结算功能组件3. 实现列表组件删除功能4. 实现组件更新数据功能 上5. 实现组件更新数据功能 下组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(

2021-06-04 18:06:30 83

原创 Vue 路由

Vue 路由目标1.路由的概念2.前端路由的初体验3.Vue Router简介4.Vue Router的使用步骤(★★★)5.嵌套路由,动态路由的实现方式A.嵌套路由的概念(★★★)B.动态路由匹配(★★★)7.命名路由以及编程式导航A.命名路由:给路由取别名B.编程式导航(★★★)8.实现后台管理案例(★★★)目标1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由,动态路由 5.能够实现命名路由以及编程式导航 6.理解并.

2021-06-02 17:42:08 117

原创 Typora基本使用

Typora基本使用1.目录[Toc] + 回车Typora基本使用1.目录2.标题三级标题四级目录3.表格4.有序列表5.代码6.分割线7.链接8.加租9.高亮10.图片2.标题‘# 一级标题 + 回车’ ‘## 二级标题 + 回车’ ‘### 三级标题 + 回车‘三级标题四级目录3.表格| 表头1 | 表头2 | + 回车调整表格表头1 表头2 test test 4.有序列表1.+空格+回车 2.+空格+回车 ..

2021-06-02 17:38:06 115

转载 Vue基础使用

Vue基础1. Vue概述2. Vue基本使用2.1 传统开发模式对比2.2 Vue.js之HelloWorld基本步骤2.3 Vue.js之HelloWorld细节分析2.4 Vue.js之HelloWorld实例3. Vue模板语法3.1 模板语法概述3.2 指令3.3 双向数据绑定指令3.4 事件绑定3.5 属性绑定3.6 样式绑定3.7 分支循环结构4. 基础案例5. Vue常用特性5.1 常用特性概览5.2 表单操作5.3 自定义指令5.4 计算属性5.5 侦听器5.6 过滤器5.7 生命周期6.

2021-05-29 11:17:04 102

原创 计算机系统知识

计算机系统知识1、计算机系统基础知识1.1、计算机系统硬件组成1.2、CPU功能与组成1.3、数据表示1.4、检验码2、计算机体系结构2.1、体系结构发展2.2、 指令系统2.3、 存储系统2.3.1、 主存(内存)2.3.2、 cache(高速缓存寄存器)2.4、 输入输出技术2.4.1、 输入输出方式2.4.2、总线结构3、计算机安全1、计算机系统基础知识1.1、计算机系统硬件组成1.2、CPU功能与组成功能: 程序控制,操作控制,时间控制,数据处理1.3、数据表示1.正数的原反补相等

2021-04-15 17:27:26 155

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除