- 博客(346)
- 资源 (2)
- 收藏
- 关注
原创 安利一个npm包 v2-base-ui 简单好用 提升开发效率
这是楼主基于vue2 , element-ui 封装的一些通用的组件(表格,表单和弹窗),使用场景表格查询,表单编辑提交等。重复的表格页面和表单功能,只用写配置文件就行了。(组件具体使用的deme,目录src/main/demo,下载项目直接运行就可看到效果)
2023-06-08 17:26:33
260
原创 你还在用 Object.keys() 判断一个对象是否是空对象吗?
Reflect.ownKeys() 方法返回所有属性的名称数组,包括可枚举属性、不可枚举属性、Symbol 属性。它可以返回对象的所有属性,但不包括原型链上的属性。Object.keys() 方法只返回对象的可枚举属性的名称数组。这意味着它不会返回对象的不可枚举属性、Symbol 属性。但是这个方法有局限性,如果对象的属性是Symbol类型和不可枚举属性是无法返回的。判断一个对象是否是空对象,大多数第一个想到的应该是 Object.keys()下面看看另外一个方法。
2023-06-08 15:35:52
323
原创 上传使用npm组件包
1、为什么要上传自己的npm包?主要就是 less code, 少写代码(重复代码)减少CV操作只用修改一次,多处使用。 功能迭代,修复bug,只用修改npm包,其他地方重新yarn 或者npm下载最新包即可。如果是本地代码,不同项目,组件有bug,修改了一个项目,其他项目也需要CV过去,麻烦。2、什么样的功能模块要上传npm?简单说就是,重复使用率比较高东西,比如每次项目都要用到的js方法,组件,css类等 。我的css类仓库我的vue2公用组件 (表格 弹窗 表单等)我的vue3
2022-03-23 14:49:43
1649
原创 element-ui toggleRowSelection 分页取消选中实现
需求如下需要用到 element-ui table api toggleRowSelection, 它里面有包含两个属性,row, selected, row是行数据,selected 为布尔值 true 则选中,但是存在一个问题,row如果不是来源自tableData(table渲染数据)里面的值,这个属性取消选中不会生效,原因是什么?看源码例子解决方法如果要实现上面需求,那就需要拿table内存中的值去匹配那么我们可以直接通过内存中的值去匹配来取消table选中 this.
2022-02-24 14:46:02
1510
3
原创 vue点击其他区域关闭模块
点击 box 以外区域关闭 类名pop的div // template <div ref="box"> <div class="pop" v-if="popVisible"></div></div> // js mounted() { document.addEventListener('click', (e) => { if (!this.$refs.box.contains(e.target)) this.p
2022-02-24 14:07:21
1124
原创 vue3 批量导出注册组件 vite环境
批量导出组件// 文件地址 /base-ui/index.tsimport { App } from 'vue'// 引入全部const modulesFiles = import.meta.globEager('/src/base-ui/**/*.vue')const globalResult = Object.keys(modulesFiles).filter((_: any) => _)const install = (app: App) => { globalRes.
2022-02-10 14:52:42
1284
2
原创 vue批量导出注册组件 webpack环境
1. 批量导出组件// 文件地址 @/base-ui/index.js// 导入组件const files = require.context("@/base-ui", true, /\.vue$/);const modules = importComponents(files);const install = (Vue) => { Object.keys(modules).map((component) => { modules[component].name &
2022-02-10 14:46:41
1169
原创 require.context 全局组件注册
//全局注册base-uiconst files = require.context('@/base-ui', true, /\.vue$/);const modules = {};files.keys().forEach((key) => { const name = path.basename(key, '.vue'); modules[name] = files(key).default || files(key);});Object.keys(modules).map((co
2021-11-12 17:30:45
441
原创 笔记
1. 优质的GitHub前端学习仓库javascript-algorithms(基于javascript的算法和数据结构)https://github.com/trekhleb/javascript-algorithmsnodebestpractices(Node.js最佳实践)https://github.com/goldbergyoni/nodebestpracticesYou-Dont-Know-JS(你不知道的js这本书的开源版本)https://github.com/getify/Y
2021-05-18 23:52:34
179
原创 css世界 学习笔记(四)
1. 元素的装饰和美化1.color2. backgroundCSS 世界中的 background 大部分有意思的内容都是在 CSS3 新世界中才出现的,如 Multiple backgrounds(多背景)background-size(背景尺寸)、background-origin (背景初始定位盒子)、background-clip(背景剪切盒子)等。兼容性遮罩.overlay { background: url(alpha.png); backgr...
2021-03-20 21:33:01
164
原创 年终h5项目总结
## 1. 项目 年终h5产品描述文档原型地址蓝湖地址产品主题思想, 通过一种形式, 展示公司文化, 交流互动, 体现公司对鱼爪同事的关爱.## 2. 项目主线1. 前期确定主题思想 (产品)2. 然后确定内容 (产品)3. 确定展现形式 (UI 灵感来源:天府通APP的年终H5, 源于生活,观察力)4. 实现效
2021-03-10 09:25:49
1367
1
原创 web 安全
web 安全1.常见的web安全事件1.1 钓鱼向受害者发送一个伪造的链接,骗取用户信息特征: 1. 诱惑性标题 (看了就想点进去,比如收到账号安全问题的邮件,账号异常修改密码,比如中奖信息) 2. 仿冒真实网站 (还原官方网站的样子,但是会让用户多几项特别的信息,比如密保问题之类的)目的: 骗取用户账号和资料正常流程 用户收到邮件 =>xxxx用户收到钓鱼链接邮件1.2 篡改网页通过黑客技术攻破网站, 对对方网站进行篡改特...
2021-03-07 13:17:46
1012
原创 高三 (15)表单
1. 基础获取表达document.forms 获取页面所有表单表单提交var form = document.getElementById('form1');form.submit();// 或者<input type="submit" value="tijiao">注意: 提交表单之前要先检验提交数据, 按下提交按钮响应ajax时, 禁用按钮点击,防止重复提交.重置表单<input type="reset" value="tijiao"&g
2020-12-17 22:31:34
249
原创 高三 (13)DOM+
1. 选择符querySelector()document.querySelector('body') document.querySelector('#div') // 通过iddocument.querySelector('.div') // 类为div的第一个元素document.querySelector('img.btn') // 取得类为btn第一个img元素querySelectorAll() // 返回NodeListmatchesSelector() /
2020-12-08 23:32:03
204
原创 高三 (11)BOM
1. window对象BOM的核心对象是window,它表示浏览器的一个实例.全局作用域,全局定义的方法和属性都会被挂载到window上调整窗口位置 screenLeft , screenTop, screenX, screenY 属性(略)调整窗口大小, innerWidth , innerHeight, outerWidth, outerHeight, document.documentElement.clientWidth 等 (详细使用略)打开窗口window.open() 它接
2020-12-04 23:04:18
270
原创 高三 (9)面向对象
1. 对象定义 : 无序属性的集合,其属性可以包含基本值,对象和函数.2. 属性类型数据属性var person = { };Object.defineProperty(person, "name",{ Configurable:true, // 能否配置,是否可以被delete删除,是否能修改属性的特性, 默认是true, 可配置 Enumerable:true, // 是否能通过 for in 枚举 , 默认是true , 可枚举 Writable:true, // 是否可以修改属
2020-12-03 00:35:25
267
原创 高三 (8)引用类型
1. Obeject 类型 (略)什么是对象, 简单说就是一个方法和属性的集合.2. Array 类型 (略)3. 排序arr.sort() 正向排序arr.sort.reserve() 或者 arr.sort((a,b)=>{b-a}) 逆向排序4. 操作方法concat()slice() 基于当前数组创建一个新数组接收两个参数 要返回的起始位置(包含)和结束位置(不包含)如果有负数 (负数 + 数组长度就是要截取的位置)splice()有三个参数 第一
2020-12-01 00:15:12
199
原创 高三 (7)变量,作用域,内存问题
1. 数据类型js 变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名称而已.变量可能包含两种数据类型基本数据类型-----简单的数据段Undefined Null Boolean String Number (symbol — es6)引用数据类型-----多个值构成的对象Object复制变量的值复制基本类型值时var a = 1var b = a// 这时a与b是互相独立的,使用时互不影响复制引用类型值时var obj1 = { na
2020-11-27 22:25:26
250
原创 高三 (6)语句
1. ifif(condition) xxx // 可以,但不推荐if(condition){ xxx } // 即使一行代码也加个大括号2. do whiledo{ xxx } while(expression) // 循环体中的代码至少要被执行一次3.whilewhile(expression) { xxx }4. for (略)5. for in用来枚举对象, 另外循环时时没有顺序的. 循环前检查对象的值是否是null或undifined6. label (略)7.
2020-11-26 22:08:40
231
原创 网络链接
假设用户在浏览器中输入url: www.xxxx.com/anypath/home.indexHTTP客户端向地址为 www.xxxx.com 的服务器上的HTTP服务器进程(端口80)发起TCP链接请求HTTP服务端在端口80等待TCP链接请求,接受链接并通知客户端HTTP客户端将 HTTP请求消息(包含url地址)通过TCP链接的套接字(套接字Socket=(IP地址:端口号))发出,消息中所含的URL表明客户端需要对象 /anypath/home.indexHTTP服务器收到请求消息解析.
2020-10-31 14:28:03
434
原创 vue admin后台管理系统搭建(基于element-ui)
1. 步骤先去除冗余代码增加提交规范新增路由权限逻辑, 左侧菜单也要加入鉴权逻辑(跳转两种情况,无权访问和页面不存在, 权限标识加到meta里面,includes判断)环境变量配置 title信息升级vue-router, 配置全局组件, icon等打包环境移除console注入时间和版本信息2.细节优化package.json 脚本优化 "serve": "vue-cli-service serve", // 加yarn install "serve": "yarn inst
2020-09-04 18:25:45
1523
原创 husky配置 => git 日志提交规范限制, eslint检查
1. husky 是什么husky 是一个 Git Hook 工具。本文主要实现提交前 eslint 校验和 commit 信息的规范校验简单说就是,当我们运行 git commmit -m ‘xxx’ 时,用来检查 xxx 是否满足固定格式的工具使用这个工具要实现什么目的, 通过提交记录一目了然,我们本次提交了做了哪些操作,便于后续维护和统一规范2. 安装需要安装以下依赖// 使用 yarnyarn add husky lint-staged @commitlint/cli @comm
2020-09-03 18:42:45
2850
原创 本地运行vue打包项目
1. 使用 http-server-spa全局安装 http-server-spayarn global add http-server-spa// 或者npm i -g http-server-spa运行// http-server-spa <directory> <fallback> <port>// 运行 dist 为目录,index.html 启动文件,端口 8080http-server-spa ./dist/ index.html
2020-09-03 15:45:04
1161
原创 .eslintrc.js (vue ts版配置)
module.exports = { root: true, env: { browser: true, node: true, es6: true }, parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: ['vue'], rules: { 'no-console': process.env.NODE_ENV.
2020-09-03 11:28:27
2168
原创 计算机网络原理_5.网络安全
1.什么是网络安全网络安全是指网络系统的硬件、软件及其系统中的数据受到保护,不因偶然的或者恶意的原因而遭受到破坏、更改、泄露,系统连续可靠正常地运行,网络服务不中断。网络安全的基本属性是:机密性、完整性、可用性、可控性。基本属性2.基本特征3.安全问题2.网络安全威胁攻击方式dos攻击DDoS攻击3.密码学密码术语对称秘钥加密公开秘钥加密破解加密方法传统加密方法替代密码换位密码现代加密技术流密码分组密
2020-08-10 23:22:55
507
原创 ECMAScript 6(26)Module
1.概述module (模块)简单说就是一些公共js(方法或者对象等),在分别要在多个地方需要使用,但是呢,我们又不想全局引入这些文件(会污染全局变量),于是就有了模块这个概念,模块就是保存了这一系列这些方法,我们需要哪一个取哪一个CommonJS,AMD,CMDes6模块化es6模块有以下特点静态化,加载哪些,可以在编译的时候就确定,而不是只有当运行的时候才确定;模块内部的作用域是独立的,不同模块即使有同名变量,只要该变量不影响外部,那么也是互不干扰的;内部自动严格模式
2020-08-04 22:32:04
176
原创 计算机网络原理_4.数据链路层
1.数据链路层服务1.介绍2.哪些服务3.具体实现就是网卡的实现4.网卡之间通信2.差错编码1.基本原理简单理解就是通过一个函数去检测2.差错编码的检错能力3.奇偶校验码4.循环冗余校验码(CRC)3.多路访问控制(MAC)协议1.两类链路2.问题多个节点同时接收,有可能冲突,怎么解决 3.理想中的MAC4.MAC协议分类信道划分FDMA随机访问MAC协议时隙ALOHA协议...
2020-08-03 23:01:44
191
原创 计算机网络原理_3.网络层
1. 网络层有哪些服务1.主要功能2.网络层的核心功能–转发与路由3.连接建立功能-少部分网络需要连接4.网络层服务模型2.连接服务与无连接服务1.分类2.1虚电路网络1.是什么2.如何建立3.如何实现4.虚电路信令协议(signaling protocols)2.2数据报网络1.介绍2.不针对具体IP发送,而是指定IP范围3.地址范围划分不规律怎么办?使用最长前缀优先的匹配原则4.对比VC网络3.Internet网络层1.功能介绍
2020-08-03 23:00:44
253
原创 计算机网络原理_2. 传输层
1. 传输层服务和协议1.1 服务1.简单介绍2.对比网络层网络层: 提供主机之间的逻辑通信机制传输层: 提供应用进程之间的逻辑通信机制位于网络层之上依赖于网络层服务对网络层服务进行增强1.2 协议1.两种协议2.多路复用和多路分用多路分用 =>接收端有多个socket进程,通过传输层后分别发送给对应的客户端进程多路复用=>发送端有多个socket进程,在传输层为每块数据封装上头部信息,然后交给网络层分用如何工作?无连接多路分用面向链接多
2020-08-02 10:04:41
266
原创 计算机网络原理_1.概论和应用层
1. 概论1.1 基本概念速率数据率或比特率 计算机网络中最重要的一个性能指标基本单位 比特/秒 (bit/s)带宽第一种含义 信号具有的频带宽度基本单位是 赫(Hz)第二种含义 信道 最高速率 单位 (bit/s) (bps)1bit/s = 1bps吞吐量单位时间内通过某个网络(接口)的数据量时延数据从一端传送到另一端所需的时间包括发送时延传播时延排队时延节点处理时延处理储存转发等所需的时间时延带宽积
2020-08-02 01:33:09
754
mobile.zip
2020-05-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人