- 博客(63)
- 收藏
- 关注
RSS订阅原创 从0开始搭建个人组件库站点（全流程）
一、简述在前端开发工作中，我们最常用到的UI组件库有elementui、ngzorro等等，这些组件库的特点是易学好用，但是基于公司的业务实际需要，总有不能完全满足需求的场景，那如果我们能够自己写一套UI组件库，不仅仅是日常工作的积累，能够满足工作需要，还能提高自己的技术水平。在慕课网学了一遍玩转组件库搭建全流程的教程之后，将搭建过程记录一下，以便于后期站点的开发、更新和维护。内容较多，耐心一点，按照步骤搭建，相信会有收获。
2022-03-10 16:23:47
2884
3
原创 qiankun—微前端初体验
一、qiankun介绍1、官网https://qiankun.umijs.org/zh/guideqiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。2、qiankun特性基于 single-spa 封装，提供了更加开箱即用的 API。技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。HTML Entry 接入方式，让你接入微应用像使用 iframe
2022-02-18 11:01:59
2847
1
原创 Vue系列八—在vue中使用echarts
一、安装echarts依赖npm install echarts --save二、main.js中全局引入import * as echarts from 'echarts'Vue.prototype.$echarts = echarts三、xxx.vue中<div id="myChart1" :style="{width: '700px', height: '500px'}"></div>mounted(){ this.myChart1(); },
2021-10-14 08:45:18
102
原创 Vue系列七—vuex状态管理
一、是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个 Vuex 应用的核心就是 store（仓库）。store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。二、安装npm install vuex --save在一个模块化的打包系统中，必须显式地通过 Vue.use() 来安装 Vuex：store.jsmain.js三、使用app.vue&
2021-09-28 10:57:40
382
原创 Vue系列六—Vue Router路由管理器
一、介绍Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为二、安装npm install vue-router如果在一个模块化工程中使用它，通过
2021-09-27 10:53:20
263
原创 Vue系列五—模板语法、条件渲染、列表渲染
一、模板语法-插值1、文本插值使用双大括号<span>Message: {{ msg }}</span>通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但要留心该节点上的其它数据绑定：<span v-once>这个将不会改变: {{ msg }}</span>2、原始html双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令：<p>
2021-09-23 17:52:21
170
原创 Vue系列四—生命周期理解
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。钩子就是在某个阶段给你一个做某些处理的机会。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。beforeCreate：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真
2021-09-15 16:10:48
76
原创 angular获取DOM元素的三种方式
angular中在’@angular/core’库中通过提供Renderer2和ElementRef中实现了有关于DOM的操作，但是，angular中不推荐直接操作dom元素，通过变量结合内置指令是当前操作DOM的最好实践获取DOM元素通过模板变量名获取单个DOM元素@ViewChild 通过模板变量名获取DOM元素ViewChild是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在ngAfterViewInit钩子函数中，才能正
2021-09-15 14:02:17
8933
原创 Vue系列三—修改Webpack配置
官方介绍：https://cli.vuejs.org/zh/config/升级到3.0以后的vue cli工具，对webpack做了深度的集成，老版本的config文件不存在了。但是如果仍然需要对项目配置做修改的话，可以按照以下方式进行：在项目的根目录下创建vue.config.js文件，vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，一份配置demo如下：const
2021-09-14 18:18:28
1361
原创 Vue系列一—初识Vue
一、历史背景VUE的历史背景跟VUE一样简单纯粹，开始它只是个人（尤雨溪）在2013年的一个兴趣项目。现在的生态圈已经逐渐的完善，受到国内的好评。二、是什么是一套用于构建用户界面的渐进式JavaScript框架三、要解决的问题要解决的是数据驱动的问题，避免手动操作DOM。四、特点1、更加轻量 20kb min+gzip（开启gzip压缩后只有20kb）2、渐进式框架（不需要学习完VUE的所有知识，即可将VUE用于项目中，逐步学习）3、响应式的更新机制4、学习成本低...
2021-09-13 17:53:41
217
原创 纯前端vue项目使用gitee pages进行部署发布
https://gitee.com/help/articles/4136#article-header31、getee新建仓库 xxxTest2、vue项目打包npm run build将dist文件夹提交至xxxTest master分支下vue.config.jsconst path = require('path')const resolve = dir => { return path.join(__dirname, dir)}const BASE_URL = pr
2021-09-06 14:32:36
1347
1
原创 Angular AES加密
AES 在密码学中又称 Rijndael 加密法。npm install crypto-js --save创建一个加密服务：crypto.service.tsimport { Injectable } from '@angular/core';import * as Crypto from "crypto-js";@Injectable()export class CryptoService { private key: string; private iv: string; c
2021-09-03 15:58:03
796
原创 如何发布组件到npm
1.npm账号登录www.npmjs.com注意要进行邮箱验证，不然npm publish的时候会报错，如下：如果之前未进行邮箱验证或者验证链接已过期，可在npm官网的account下 change email 重置邮箱进行邮箱验证二.开始创建npm包1.新建一个空文件夹,进入到根目录下。执行如下命令初始化项目。npm init2.package.json{ "name": "hello-gaiery-zxp", "version": "1.0.1", "description"
2021-09-02 12:42:08
575
原创 小程序注册开发全流程
一、注册流程1、注册小程序账号登录微信公众平台 https://mp.weixin.qq.com/，点击【立即注册】2、选择【小程序】选项卡3、使用已有邮箱进行注册，填写以下信息：4、登录邮箱，进行账号激活1、账号激活后，进行信息登记，以政府类型为例，填写主体信息以及管理员信息：2、相关信息填写完成后，提交审核，预计1~3个工作日内完成审核；3、审核通过后，使用管理员微信账号扫码登录，选择该邮箱下的小程序，进入小程序管理后台，可填写小程序名称、简介、头像等相关信息：二、开发设置
2021-08-06 17:43:54
5584
1
原创 使用vant-weapp组件库的小程序创建
一、新建项目打开微信开发者工具，【项目】->【新建项目】，填写以下信息：APPID为自己已注册好的小程序APPID。二、安装UI组件库以Vant Weapp为例npm i @vant/weapp -S --production三、修改 app.json将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。四、修改 project.config.json开发者工具创建的项目，miniprogram
2021-07-28 09:28:02
142
原创 深拷贝、浅拷贝、直接赋值的区别
一、深拷贝深拷贝完全拷贝了父对象及其子对象，会从堆内存中开辟一个新的区域存放新对象。一个变量值的改变不影响另一个的值。实现深拷贝的方式有：1.手写deepCopy递归方法const obj1 = { age:20, name:"zxp", info:{ edu:"sdgsxy" }}const obj2 = deepCopy(obj1);obj2.age=30;function deepCopy(obj={}){ if(typeof(
2021-07-21 08:59:46
356
3
原创 ts中的联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种。格式如下：Type1|Type2|Type3//例如：var val:string|number;if(typeof val === "string") { console.log(val.length) } else { console.log(val)}
2021-07-19 09:13:14
1479
原创 那些常常被你忽略却又很重要的两者区别
1. 箭头函数和普通函数的区别a. 箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是=>定义函数,普通函数是function定义函数。b. 箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定并固定了。c.箭头函数不能作为构造函数使用，也不能使用new关键字(因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象)。d. 箭头函数没有自己的
2021-07-01 10:41:50
245
6
原创 小程序注册开发流程
1、注册小程序账号，登录微信公众平台https://mp.weixin.qq.com/，点击【立即注册】2、选择【小程序】选项卡3、使用自己的邮箱进行注册，填写以下信息：4、注册成功后，使用账号进行登录5、在【开发管理】->【开发设置】中查看APPID6、安装微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html7、【项目】->【新建项目】新建项目时，填写项目名称、目录
2021-07-01 09:11:52
187
2
原创 angular-获取本地上传图片转为base64
<nz-upload [nzTransformFile]="transformFile" [nzBeforeUpload]="beforeUpload" > <button nz-button nzType="primary" >本地上传</button></nz-upload>beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
2021-06-30 18:15:38
870
原创 angular-post请求实现文件下载
通常情况下，一般使用GET请求进行文件下载，但是存在参数过长，不得不使用POST请求的情况，例如：列表页对选中条目进行下载，但是情况特殊，参数需要传递条目所有信息，而不是id。使用Blobhttp请求使用blob的返回类型，获取文件流后，对数据进行Blob，再提交给浏览器进行识别下载。 export(){ let array:any = [...this.setOfCheckedId]; let sendMap = array.map(id => {
2021-06-25 15:09:46
905
原创 Angular使用jsencrypt进行RSA加密
一、什么是RSA加密RSA加密算法是一种非对称加密算法。非对称加密算法需要两个密钥来进行加密和解密，这两个密钥是公开密钥和私有密钥。非对称加密的模式规则是：后端生成两把密钥（公钥和私钥），公钥是公开的，任何人都可以获得，私钥是保密的；前端获取后端的公钥，然后对它进行信息加密；后端得到加密后的信息，用私钥解密。前端需要做的工作即获取后端的公钥，然后对它进行信息加密，使用步骤如下：1.安装jsencrypt模块npm install --save jsencrypt2.在需要进行加密操作的模块
2021-03-29 15:18:18
681
原创 angular使用路由复用策略实现页面前进后退时是否保持原状态
问题描述：angular单页面应用，有列表和编辑两个页面。列表页包含多个查询条件及分页，选中一条数据进行编辑，路由更新至编辑页，编辑完成后返回列表页，此时，客户希望列表页保持离开时的状态不变，只单独更新这一条数据，其他情况下列表页正常初始化。解决方案：对列表页使用路由复用策略，根据上一个页面是否是编辑页来判断是否进行初始化。如果是编辑页跳转过来，此时列表页不应该执行ngOninit函数，且对单条数据进行更新，如果不是，那列表页执行ngOninit，正常初始化。上代码：1.新建route-strat
2021-02-22 17:17:33
1108
11
原创 Angular10 + file-saver前端实现html导出word（包含图片）
场景描述：在一个即将迎来美好周末的Friday，领导找到我，问我是不是做过html导出word文档的功能，我很诚恳地说做过图片。项目需求：项目当中某一个详情页，页面中包含基本内容以及图片，且图片是外部链接。点击导出按钮，实现导出页面内容至word文档实现直接下载。实现思路：Q1：我们可以使用什么实现word导出？A1：Blob对象和FilerSaver解析：Blob 对象表示一个不可变、原始数据的类文件对象。Blob对象可以看作是存放二进制数据的容器，此外还可以通过blob设置二进制数据的MI
2021-01-14 17:47:12
1913
原创 angular7+ echarts-wordcloud制作词云图
安装依赖包echart最新版本5以上的报错，4版本的没有发现问题，可以使用4版本。npm install [email protected] --savenpm install [email protected] --savenpm install echarts-wordcloud --saveangular.json引入echarts"scripts": [ "node_modules/echarts/dist/echarts.js" ]模块
2020-12-15 17:41:21
538
4
原创 ngzorro-nzMaxStack设置提示信息的最大显示数量
问题描述：快速多次点击按钮，ngzorro的message全局提示信息会显示多个，目前官方给出的默认值是7个，希望同一时间最多只显示一个提示信息即可。解决方案：app.module.ts中添加全局配置项nzMaxStack（同一时间可展示的最大提示数量）；*注意事项：以上代码需要写在最顶层的app.module.ts中。const ngZorroConfig: NzConfig = { // 注意组件名称没有 nz 前缀 message: { nzMaxStack:1}, };prov
2020-12-01 17:17:58
511
原创 vscode在保存时会自动格式化代码
项目场景：问题一：angular10项目clone下来之后，用vscode打开，代码在保存时会自动格式化。解决方案：原因如下图所示，找到项目目录下的.vscode文件夹，将settings.json文件中的右侧框选属性改成false即可以取消自动修正。问题二：提交代码时提交不上去解决方案：找到项目目录下的.git/hook文件夹，删除pre-commit文件即可。...
2020-11-19 17:13:53
1933
3
原创 ng2-handsontable实现可编辑table
文章目录一、ng2-handsontable二、使用步骤1.安装2.引入module3.Use the hot-table component in your template一、ng2-handsontable网址：https://valor-software.com/ng2-handsontable/二、使用步骤1.安装npm i ng2-handsontable --save2.引入moduleimport { HotTableModule } from 'ng2-handsont
2020-11-04 09:16:25
185
原创 angular7+editor.md
1.下载editor.md源文件https://pandao.github.io/editor.md/#download2.将下载的源文件放在项目某目录下：例如：src/assets/editor.md/3.在angular.json文件中，将所需要引入的css、js文件添加进来 "styles": [ "src/assets/editor.md/css/editormd.css" ], "scripts": [ "node_modul
2020-07-09 11:05:03
277
原创 angular7+underscore的使用
方式一1.首先下载underscorenpm install underscore --savenpm install @types/underscore --save2.在需要的模块引入underscoreimport * as _ from 'underscore';3.在需要的模块可以直接使用了this.fileLists=_.reject(this.fileLists,(el)=>{ return item.file.name==el.name;})方式二1.首先
2020-07-09 10:44:45
509
原创 angular 定义中间商（也就是一个全局变量）实现内外部通信
1.index.html中定义全局变量<script> var middleArea=null;//声明一个全局变量，用于内外部通讯的中间商</script>2.typing.d.ts中声明变量declare var middleArea:any;3.app.component.ts中给middleArea赋值为一个服务constructor( ...
2020-03-12 16:45:37
721
原创 angular http请求的多种传参方式总结
1.GETservice: getData(data): Observable<any> { const url = `${this.config.url}/xxx`; return this.http.get(url, { params: data }).pipe( map(res => res) ...
2020-01-13 11:06:50
2948
原创 Angular/forms Validators的使用
Angular 支持的内建 validators 如下：required - 设置表单控件值是非空的email - 设置表单控件值的格式是 emailminlength - 设置表单控件值的最小长度maxlength - 设置表单控件值的最大长度pattern - 设置表单控件的值需匹配 pattern 对应的模式ngOnInit() { this.formModel = th...
2020-01-10 16:49:32
1852
原创 angular使用ngrx做状态管理——以获取AppId作为全局变量为例写的小demo
一、在actions文件夹下创建action文件appId.action.ts该文件用于更新openIdimport { Action } from "@ngrx/store";export const types = { UPDATE_APPID:"UPDATE_APPID"}export class UpdateAppIdAction implements Action ...
2019-11-29 16:17:14
523
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人