- 博客(86)
- 收藏
- 关注
RSS订阅
原创 angular框架简介基础与使用（全文2w8字）前端框架angular
angular作为一个完整的框架，模块化做的特别好。内置的路由，httpclient，rxjs，除了界面相关的组件库，几乎可以不用任何第三方工具库就可以完成一个spa项目。对typescript支持非常好，或者说只有typescript以一个选择。Angular是三大巨头中，框架版本升级最容易的，虽然目前在国内不是特别火。...
2022-05-02 21:07:46
26501
7
原创 vue+nodejs+mysql宝塔面板的部署与使用发布到服务器（原创详细版）
前置条件：1.云服务器（阿里云，腾讯云都行）2.域名 （没有就用服务器公网ip访问）3.已经打包好的前端项目4.nodejs项目5.mysql和nodejs在本地已经调通第一步给服务器做系统，这里我选择的是centors 8.2 2. 好了之后远程连接服务器，这里你也可以选择xshell等其他连接，或者阿里云网页端浏览器自带的也行。进入服务器后，可以通过输入“sudo su root”切换至root账号Centos安装脚本：这里可以去宝塔官网看： 宝塔linux面板官网然后根据给你的地址，
2021-11-11 15:34:33
5534
3
原创 前端vue的JsPDF html2canvas 生成pdf并以文件流形式上传到后端
1.首先在文件内引入htmlToPdf.js这里代码引入了html2canvas和jspdf//需要 npm i html2Canvas 和 npm i jspdf在这里将getPdf 这个函数挂载到Vue的原型上，最后return一个promise对象(包含了resolve的base64Pdf，以便于处理)，在局部组件内可进行.then以进行上传后端等操作。插件代码如下import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'
2021-06-25 11:12:52
13700
24
原创 【Angular性能优化】项目8版本加载速度缓慢、白屏时间、首页渲染性能优化方案
随着业务的代码一点点增加，加上Angular的项目本身就比 vue、react 的重一些，随之而来的启动速度，更改文件后编译速度，以及打包速度也会变慢，于是乎想着优化下我们的项目。打包Angular项目的一些配置，性能优化方面的方案打包后，用户进入页面的速度提升创建自定义的预加载策略，实现更精细的控制。自定义预加载策略需要实现PreloadingStrategy 接口，并在该接口的 preload() 方法中定义预加载的行为。可以根据自己的需求，选择在何时、何地以及如何预加载模块。
2024-04-07 16:20:10
1544
原创 【记录】vue3在v-html或js渲染html中赋值点击事件
最近再写vue3项目，有个需求在各个icon中给元素点击事件，由于我是用的gridstack，所以需要给每个gridstack的item绑定点击事件，然后通过点击事件来获取当前点击的元素。${JSONstringify然后是定义事件生命周期window下挂载该事件。
2024-01-15 18:13:39
1261
原创 FineReport帆软报表的表格动态列的实现
下面才是重点，在开发过程中,无论是帆软还是正常写代码,表格的动态列都最常见不过了。表格动态列是在写表格表体数据多时候，可以根据数据的动态变化来动态生成列的功能。通常情况下，表格的列是在设计报表时静态定义的，即在设计阶段确定了报表的列数和列名。但是在某些情况下，数据的列数和列名可能会根据实际情况动态变化，这时就可以使用表格动态列来实现灵活的列生成。使用表格动态列的好处是可以适应数据的动态变化，无需事先确定列数和列名，从而实现报表的灵活性和扩展性。
2023-12-01 14:09:12
3960
原创 angular框架-通过依赖注入方式挂载loading以实现任意地方一行代码调用全局loading
本文主要阐述关于在angular项目中，loading的常见的使用方式，以及如何全局挂载loading，实现一行代码控制loading开，一行代码控制loading关闭。
2023-06-09 15:30:32
1137
原创 vscode设置隐藏文件，针对于mac系统和windows系统的U盘混用出现._.DS_Store和._文件
我们使用外接U盘的时候，经常会产生一些._.DS_Store和._文件 ，这类文件产生的原因是你在mac打开在finder中显示，文件夹查看，会默认生成这些隐藏文件。在平时使用mac时候是看不到的，但是你整个文件夹再发送给window用户时，win会查看到。在使用VScode都会在文件菜单里面显示出来，就感觉很繁琐。不方便找文件，看项目结构。
2023-04-09 13:10:13
2350
1
原创 【记录】可编辑表格并且支持批量生成每一行引入到表格中
一个页面 包括了一个可编辑表格，和一个支持批量创建的弹窗，弹窗字段如下图引入弹窗包括了 四个字段 【创建名字】、【全部数量】、【公猪数量】、【母猪数量】
2023-03-01 14:41:40
373
原创 angular框架表格自定义导出，ui组件库为【devExpress by devExtreme】导出插件为exceljs、file-saver
注意这里引入Workbook会报错，所以换了种引入方法引入exceljs.min.js，见下面代码。引入好了之后 表格正常写 html 伪代码如下。这个回调函数里写你的逻辑 具体配置项详见文档。直接npm 或者yarn安装即可。如下，需要结合你自己的业务来。
2023-02-24 18:10:27
1155
原创 for循环中异步请求问题：循环里面使用异步函数，如何等所有的异步函数都执行完再进行下一步
在一个列表循环里，对数据进行赋值，调用接口，循环外后面的代码需等待所有请求执行完成后再去执行。2. for await…of实现（推荐）这种方法是es6新语法，其介绍如下：for…of 针对可迭代对象身上的（array, map, set, string, typedarray, argements）迭代的是对象列表中的值（value） ，一般情况遍历数组for…in 针对对象的属性进行无序遍历，除了symbol类的属性遍历的是属性，一般情况适用于对象遍历该方法使用起来，相比Promise.all要
2023-02-10 17:12:50
5417
原创 pnpm简介与mac电脑使用 HomeBrew安装pnpm报错记录fatal: not in a git directory Error: Command failed with exit 128
pnpm（ performant npm ）是一个同npm、yarn类似的前端node_module包管理工具,其初衷是节约磁盘空间并提升安装速度。
2023-01-31 18:38:21
6291
原创 mac系统M1pro芯片安装VMware Fusion虚拟机win11操作系统（原创详细版）
基于苹果自研M系列芯片的win11系统虚拟机的安装教程（免费版），由于VMare Fusion本身有30天的试用，所以不着急的话也可以用几天再去激活...
2022-12-22 14:48:05
13455
28
原创 js处理数据【2】：ant的穿梭框在进行搜索时保留原有已选择去右侧的数据并做去重过滤（数组中根据对象的字段去重）
使用ant-design穿梭框点击查询后的JS数据处理
2022-10-18 11:10:34
1032
4
原创 js处理数据【1】：将数组里的对象中相同的值提取出来进行分组，以该字段相同的为一组
也就是说 以 sowPigID 进行分组，提起出相同的sowPigID。后端期望在传参处理成这样传参(demo ,模拟)下面为举例的json格式。
2022-10-13 17:46:13
2159
3
原创 Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘nz-range-picker‘.解决angular使用ant的日期框错误
所以在 xxxx.module.ts 中 不仅要引入ant的组件，还要引入@angular/forms的FormsModule。ngModel是angular双向绑定属性，等同于vue的v-model。下面代码为demo展示，省略了一些自己的组件。
2022-08-22 14:53:03
763
原创 一览JavaScript模块化 包含Commonjs、AMD、CMD、ES6 modules总结
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS模块的加载机制是，输入的是被输出的值的拷贝。在ES6中，我们可以使用 import 关键字引入模块，通过 exprot 关键字导出模块，功能较之于前几个方案更为强大，也是目前所推崇的，require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。,使用它导出后，在import的时候，不需要加上{}，模块名字可以随意起。es6在导出的时候有一个默认导出，.
2022-08-09 15:21:07
645
原创 Angular引入ant.desigin的Transfer穿梭框和轮播图carousel，【更新】穿梭框数据大表格渲染支持搜索
ant.desigin是根据列表内的direction字段去区分当前数据在左侧还是右侧，值为left在左侧，right在右侧。以上就是Angular引入ant.desigin的Transfer穿梭框和轮播图carousel的全部内容，比较简单。引入后 在class里面定义该列表，并定义其刚刚引入的类型。轮播图就比较简单了 官网有对应的案例，这里只做简单的记录。注意的是列表页面请求回来之后，需要手动赋值一下。...
2022-08-09 14:56:24
1035
原创 解决angular启动项目报内存溢出启动失败＜--- JS stacktrace ---＞FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed
解决angular启动项目内存溢出启动失败的问题
2022-06-01 10:04:36
755
原创 vue封装公共弹窗删除业务组件支持.then.catch调用
公共组件的封装：一个中台管理系统，每个删除点击后都弹出弹窗，需要输入密码进行验证，输入正确，则可以删除，输入错误则提示错误message。
2022-02-24 18:12:09
1151
原创 [vue-router] Duplicate named routes definition动态路由addRoutes的踩坑
踩坑记录：[vue-router] Duplicate named routes definition动态路由addRoutes的坑问题描述：第一次进入页面，左侧静态路由和动态路由列表均能正常显示，！但点击左侧其他路由后浏览器报警告[vue-router] Duplicate named routes definition…,并且跳转失败动态路由的概念：一般来说是通过后端接口返回拿到数据，不同人不同权限，返回的数据也不同。然后在路由守卫router.beforeEach 中进行添加路由解决方案：
2021-11-25 17:04:04
1587
2
原创 Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html实现的滚动到可视区域后显示动画，自己之前没做过这种，非常感兴趣，然后问小伙伴，大部分都没做过类似的，于是乎我只能自己查了第一想到的是swiper，之前写轮播图用过。https://www.swiper.com.cn/https://www.swiper.com.cn/usage/animate/index.html但是引入了之后 发现不是特别适合我 而且还有5版本6版本一系列写法兼容问
2021-11-01 16:37:37
3250
5
原创 vue之事件总线（EventBus）慎用
通常适用于兄弟组件传值最好规划好作用范围- 通过实例控制范围（不同范围不同实例）- 通过命名空间控制范围（不同范围共享同一实例）新建event-bus.jsimport Vue from 'vue'export const EventBus = new Vue()在局部组件引入import { EventBus } from "/src/event-bus.js";注意，在组件销毁时需要先进行关闭监听！beforeDestroy() { EventBus.$off("aMsg
2021-10-13 15:43:58
653
原创 typeScript学习笔记
强类型 ：不允许类型随意转换弱类型 ：允许语言类型隐式转换 eg：’100‘-50不需要编译 等待运行时看是否报错安装yarn全局npm install -g yarn原始类型const a:string='foobar'const b:number=Infinityconst d:boolean=falseconst d: null = nullconst e: void = undefinedconst f: symbol = Symbol()数组类型const
2021-10-11 14:31:30
187
原创 在WebPack中使用TypeScript
npm install typescriptnpm i ts-loader配置webpack.config.js的loader { test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }webpack全部配置如下：const path = require('path')//node内置path模块const { webpack } = require('webpack')const HtmlPlugin =
2021-09-28 15:40:44
606
原创 vue+element-ui表单校验封装公用方法文件
我们在写表单提交验证的时候，由于很多页面都需要正则检验，这导致写了很多重复的代码，非常的不方便于是可以将所有正则都提取出来，做公共文件。挂在Vue的原型上，代码如下：在utils文件夹下新建formCheck.js// 手机号码验证const validatePhone = (rule, value, callback) => { const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$'
2021-08-26 14:08:45
1032
2
原创 vsCode的setting.json保存自动格式化代码html不换行
我的配置项如下：{ "workbench.editor.enablePreview": false, //打开文件不覆盖 "editor.minimap.enabled": true, //打开迷你图快速预览 "editor.lineNumbers": "on", //开启行数提示 "editor.formatOnSave": true, //每次保存自动格式化 "editor.mouseWheelZoom": true, "editor.fontSize": 16, "wor
2021-08-19 09:32:04
696
原创 2021-07-29数组去重（只要有重复的全部去重）
怎么找出数组中不重复的元素 比如 [1,1,2,2,3,4,5]， 想把3,4,5拿出来代码： let arr = [11, 11, 121, 121, 3, 44, 5]; for (var i = 0, len = arr.length; i < len; i++) { for (var j = i + 1, len = arr.length; j < len; j++) { if (arr[i] === arr[j]) { a
2021-07-29 15:43:50
107
原创 html5 Canvas 如何自适应屏幕大小（vue）
创建canvas创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。 但是作为一个百分比的弹窗，在不同屏幕下表现不同，所以需要做自适应在vue中，新建一个resize.js文件其中引入的debounce 防抖函数如下 utils/index.js最后在页面mixins注入resize.js就可以实现canvas自适应了。...
2021-07-19 14:21:27
3644
原创 Echarts的formatter函数用法
tooltip是提示框组件 formatter是提示框内容下面是错误的代码，在对右上角4个按钮进行切换时，会报错，因为formatter内返回的参数点击之后，数据会减少。 tooltip: { // 悬停样式 trigger: "axis", padding: [10, 22], backgroundColor: "rgba(66, 119, 108, 0.8)", //0.8 borderColor:
2021-07-08 14:17:10
8890
原创 elementui分页二次封装以及前端假分页+页面序号
后端没有返回序号，前端可根据：当前页面 * 每页展示的条数 - 每页展示的条数 + 当前下标index +1以展示序号 pageParamsRight: { total: 0, pageNum: 1, pageSize: 9, }, <el-col >{{pageParamsRight.pageNum * 9 - 9 + index + 1}}</el-col>前端分页前端是接口返
2021-07-07 11:34:26
522
2
原创 h5的canvas重置画布
/** * 清除画布的方法 * x 是要清除的矩形左上角的 x 坐标,y 是要清除的矩形左上角的 y 坐标 * /width 是要清除的矩形的宽度，以像素计,height 是要清除的矩形的高度，以像素计 // */ <canvas id="ecgCanvas" ref="ecg" width="608px" ...
2021-07-06 16:13:27
908
原创 Vue全局过滤器的使用以及在template三元运算符中内使用过滤
Vue全局过滤器的使用新建filters.js如下，内容过滤可以自己写函数，记得export 导出import dayjs from "dayjs";// 转小写let lower = value => value.toLowerCase();// 转大写let upper = value => value.toUpperCase();let currencyStyle = (value, style) => { // 货币格式 /** * style:
2021-06-25 14:11:21
1687
1
原创 vue的视频流The “flash“ tech is undefined tech
出现这个错 其他人说的乱七八糟有说：试试删掉node_modules。 nmp 安装 ，不要用cnpm。但是自己试并不好用需要看下你package.json里面把video卸载 和vue-video-player 也卸载之后 ，只安装vue-video-player就可以了npm uninstall video.js 参考下图但是我自己试了之后 并不好用 所以就把video.js 卸载了 就可以了<template> <section cla
2021-05-27 19:11:15
2438
1
原创 npm出现loadAllDepsIntoIdealTree
npm install -g cnpm --registry=https://registry.npm.taobao.org安装淘宝镜像npm --registry https://registry.npm.taobao.org install
2021-05-26 11:31:07
527
原创 ecahrts网络请求之后数据不更新
由于ecahrts是一个组件 所以需要在这个组件进行监听一下 传来的数据 props: { dataValue: { type: Number, default: 0, }, dataName: { type: String, default: "出勤率", }, }, watch: { dataValue: { handler(newData) { console.log(
2021-05-25 10:38:54
107
原创 vue的watch深度监听对象监听vuex对象等
由于对象是引用类型地址，修改对象属性 watch正常不会监听到值类型和引用类型的区别#（1）值类型：1、占用空间固定，保存在栈中（当一个方法执行时，每个方法都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自然销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；栈中存储的是基础变量以及一些对象的引用变量，基础变量的值是存储在栈中，而引用变量存储在栈中的是指向堆中的数组或者对象的地址，这就是为何修改引用类型总会影响到其他指向这个地址的引用变
2021-05-21 14:11:05
2186
5
原创 vue elementui级联选择器change事件如何获取label的值
ele默认返回一个数组，对应其id。但是我还想拿到他们选择的label加一个ref handleChange(value) { if (value) { console.log(this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels); } },最后控制台就可以获取了...
2021-05-11 11:24:27
3582
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人