Angular
晨旭缘
相由心生
展开
-
前端通过Http下载后端传入的Excel(基于Angular)
前端通过Http下载Excel原创 2022-03-28 19:58:02 · 1069 阅读 · 0 评论 -
前端(Angular)上传Excel给后端:HTTP POST form-data
最近遇到一个需求,前端需要将Excel传到后端去解析,写个Demo记录一下上传按钮<input #inputFile id="file" accept=".xlsx" type="file" (change)="uploadedFile($event)" multiple="false" /> {{ 'HOME.UPLOADEXCEL'| translate }}uploadedFile = (event: any) => {console.log(typeof(event))原创 2022-03-10 23:30:17 · 931 阅读 · 0 评论 -
js实现前端输入有空格,通过replace()方法将空格过滤掉
实现代码演示let data="12 3456 " //后边有空格let data1=data.replace(/[, ]/g,'')console.log(data1) //空格消失小问题,简单记录一下~~原创 2022-01-27 18:51:15 · 1571 阅读 · 0 评论 -
纯前端实现导出Excel(基于HTML)
运用环境:之前通过JS操作后端传入的数据实现导出Excel,但是需求中又遇到Table是一个折叠的,通过点击事件可以看到隐藏的数据,通过后端传入的数据不好处理,所以通过HTML方式进行实现导出格式是XLSX格式,所以导入相关文件import * as XLSX from 'xlsx';HTML中调用导出Excel的方法 exportTable() { var workbook = XLSX.utils.book_new(); const node = document.getEle原创 2022-01-15 15:06:12 · 892 阅读 · 0 评论 -
前端登录密码加密方法(后端node.js)
项目中有遇到,做个记录1. npm安装crypto-js npm i crypto-js -S2.引入该资源 import CryptoJS from 'crypto-js';3.加密方法 /** * @method encryptPassword 密码加密 * @param password 原始密码 */ encryptPassword(password: string): string { let key = "2b7e151628aed2a6ab原创 2021-12-14 16:54:30 · 1915 阅读 · 0 评论 -
Angular&CI/CD:Error: initial exceeded maximum budget
Angular项目在在走CI/CD流程时,出现以下错误:Warning: initial exceeded maximum budget. Budget 2.00 MB was not met by 3.01 MB with a total of 5.01 MB.Error: initial exceeded maximum budget. Budget 5.00 MB was not met by 6.83 kB with a total of 5.01 MB.大致意思是打包文件过大,超出规定的文原创 2021-12-05 18:26:44 · 827 阅读 · 0 评论 -
Ng-zorro组件分页器Pagination样式修改笔记
Ng-zorro组件分页器Pagination样式修改记录实现功能图例:实现代码,html部分 <div class="footer"> <nz-pagination [nzPageIndex]="1" [nzTotal]="10" [nzPageSize]="5" [nzShowTotal]="totalTemplate" nzSize=small></nz-pagination> <br /> <ng-template原创 2021-10-30 10:37:10 · 708 阅读 · 0 评论 -
Angular:Ng-zorro组件Table(嵌套子表格)样式修改笔记
Ng-zorro的Table(嵌套子表格)样式修改笔记复杂点:展开按钮样式的修改,图例如下修改为点击按钮由加号换为箭头,实现方式为,用icon覆盖原来的加号,但保留原有加号的点击区域,html该表格区域相关代码: <td [(nzExpand)]="data.expand"> <d *ngIf="!data.expand" class="downicon"><i nz-icon nzType="right" nzTheme="outline"></原创 2021-10-30 10:25:50 · 1595 阅读 · 0 评论 -
Ng-zorro组件Table样式修改笔记
Ng-zorro组件Table样式修改笔记由于 Ng-zorro组件样式修改复杂,为了以后高效开发,记录一下,相关代码如下/* 表头样式 */.table /deep/ .ant-table-thead>tr>th { text-align: center; background: #30494d; color: #ffffff; padding: 0.8%; border-bottom: none; font-size: 1em;}/* 表格主体样式 */.原创 2021-10-30 09:13:59 · 975 阅读 · 1 评论 -
基于Angular的Ng-Zorro分页器(Pagination)样式调整记录
基于Angular的Ng-Zorro分页器样式(Pagination)调整记录Ng-Zorro的样式相对来说比较难以调整,现自定义样式简单记录:/* 分页器 *//* 基于table时将pagination绝对定位进行调整*/::ng-deep .ant-pagination { position: absolute; top: 170px; width: 100%;} ::ng-deep .table .ant-table-pagination.ant-pagination {原创 2021-10-23 10:53:28 · 537 阅读 · 0 评论 -
JavaScript中的三个点(...)扩展运算符
JavaScript中的三个点(…)三个点的真身JavaScript中的三个点(…)名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开// 数组var number = [1,2,3,4,5,6]console.log(...number) //1 2 3 4 5 6//对象var man = {name:'蔡',height:180}console.log(原创 2021-10-23 10:27:13 · 5418 阅读 · 1 评论 -
Angular实现将后台传入的数据导出为Excel
Angular实现将后台传入的数据导出为Excel1.安装插件npm install xlsx --save2.建立Service,导入模块,实现方法共用相关代码:import { Injectable } from '@angular/core';import * as XLSX from 'xlsx';@Injectable({ providedIn: 'root'})export class DownloadExcelService { constructor() {原创 2021-09-28 18:13:53 · 91 阅读 · 0 评论 -
Gitlab的CICD基于前端Angular和后端LoopBack的Dockerfile文件配置参考记录
Gitlab的CICD基于前端Angular和后端LoopBack的Dockerfile配置记录前端(Angular)# #制定node镜像的版本# FROM nginx:alpine# #移动当前目录下面的文件到app目录下# ADD . /app/# #进入到app目录下面,类似cd# WORKDIR /app# pull nginx image//示例FROM nginx:alpineADD . /app/WORKDIR /app# 从第一个阶段的档案copyCOPY原创 2021-09-18 15:55:12 · 137 阅读 · 0 评论 -
[ngClass]的简单使用
[ngClass]的简单使用[ngClass]官方定义:从 HTML 元素上添加和移除 CSS 类。使用方法:<some-element [ngClass]="'first second'">...</some-element><some-element [ngClass]="['first', 'second']">...</some-element><some-element [ngClass]="{'first': true, 'se原创 2021-08-19 11:13:14 · 3283 阅读 · 0 评论 -
ng命令无法执行 : 出现无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ng.ps1的问题
ng命令无法执行 : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ng.ps1的问题1.问题截图:2.解决方式:(1)以管理员的身份进入Windos PowerShell,图例:(2)进入后运行命令set-ExecutionPolicy RemoteSigned,图例: 然后变更执行原则,搜了很多教程,都是选择A,我试了以后还是没有解决问题,应该和我的权限有关,所以我选择的Y,问题解决 (3)最后输入 get-ExecutionP原创 2021-07-22 16:34:52 · 302 阅读 · 0 评论