- 博客(48)
- 收藏
- 关注
RSS订阅原创 研发笔记——vue2项目添加权限管理
对于整个页面的控制，前端没有专门做限制。而是通过后端在当前页面接口返回无权限错误码，前端拿到错误码后，将页面重定向到一个无权限的落地页。侧边菜单栏是通过router数组遍历出来的，要实现对应角色只能看到相应权限的菜单，就需要在菜单渲染之前进行过滤。后端需要提供一个根据角色查询权限的接口，在main.js文件中调用，根据返回的权限列表对路由进行过滤。后台系统经常需要给用户划分不同的角色，不同角色的操作权限不同，这样可以有效避免人为的误操作。对于页面上的文案、图片、按钮、输入框等元素的权限，如果每一个都用。
2024-04-02 20:15:46
318
原创 研发笔记——实现tabel表格表头自定义顺序
这样就实现了调整表头顺序的功能，但是有个问题，页面刷新之后表格会恢复原始状态，这时候就需要用到localStorage来做存储。但是这样的方案有个缺点，当服务端有数据列的修改时，需要用户手动还原一次。后台管理页面有一个非常大的表格，由于屏幕大小限制，需要滚动查看数据。到这里整个功能就实现了，需求中还有一个复原的按钮，实现方式就是将。不同的管理员关注的数据列不同，希望实现用户自定义表格展示顺序。示例基于vue+ivew实现，其他框架同理。首先简单搭建一下页面结构。
2024-03-06 21:10:58
521
原创 浏览器原理学习笔记
用户在输入URL到页面展示发生了什么浏览器主进程检测用户输入内容，如果是域名，则会补齐协议。如果是不符合域名格式，则会使用浏览器默认搜索引擎进行搜索。在用户输入回车，页面跳转之前，还会在当前页面调用一次beforeunload 事件，数据清理、确认离开。浏览器主进程通过进程间通信 IPC 来将url请求交给网络进程。由网络进程发起请求。网络进程会查找该请求是否在本地有缓存，如果有则使用缓存，如果没有则准备发送网络请求。（这里缓存指强缓存，如果强缓存过期，会进入协商缓存，仍会发送请求）请求首先
2023-11-22 20:42:21
844
原创 React架构整理
React 设计理念React 是用 JavaScript 构建 快速响应 的大型 Web 应用程序的首选方式。如何实现快速响应，需要解决两个方面的问题：硬件限制CPU由于JS是单线程的，脚本执行与页面渲染无法同时进行。当项目庞大，组件繁多时，JS执行就会超过16.6ms（浏览器单帧时长），用户就会感受到卡顿。为了解决JS执行事件过长的问题，React 采取了时间切片的方式。将长任务拆分成多个片段到每一帧中执行。网络延迟网络延迟是前端开发者无法解决的。如何在网络延迟客观存在的情况下，减少用
2022-06-14 19:59:34
2968
2
原创 ES6学习记录——上
这里写目录标题let与const块级作用域顶层对象的属性解构赋值数组解构赋值对象解构赋值let与constlet定义变量有作用域for循环中设置循环变量的部分是一个父作用域，循环体部分是一个子作用域var a = [];for (var i = 0; i < 10; i++) {//如果这里用var来定义i 那么全局就只有这一个i a[i] = function () { console.log(i); };}//循环体外调用console的时候，全局的i已经是1
2022-05-04 20:38:53
302
原创 cookie、session、token理解
Cookie是保存在浏览器上的一些数据，一般通过HTTP响应头set cookie来设置，当然也可以通过JS脚本来直接设置，Cookie是按照网站来进行组织和保存的，每一个网站都可以在浏览器中保存一些Cookie，保存好了之后，浏览器向这个网站发出的请求都会携带这些Cookie，server就可以分析这些Cookie。session是一个抽象概念，指server端生成的能够将用户请求与后台存储的用户状态信息一一对应的会话机制。每一个session都会生成一个唯一的sessionId，并通过cookie传递
2022-04-21 18:40:22
1157
原创 redux学习记录
API：1. Store用来保存数据，整个应用只能有一个 Store。通过Redux提供的createStore函数来生成store。import { createStore } from 'redux';const store = createStore(reducer);createStore函数接受另一个函数reducer作为参数，返回新生成的 Store 对象。......
2021-12-09 22:13:45
246
原创 React生命周期
生命周期函数，也叫做生命周期钩子，是react为我们提供的，可以在一些特定时间点进行操作的API方法生命周期钩子（旧）旧版本为react v17.0以前使用的版本。简单介绍一下图中的生命周期钩子。 //组件将要挂载的钩子 componentWillMount(){ console.log('Count---componentWillMount'); } //组件挂载完毕的钩子 componentDidMount(){ console.log('Count
2021-08-26 00:33:07
135
原创 react使用echarts折线图问题记录
react项目中使用echarts参考https://blog.csdn.net/weixin_44003190/article/details/906767851.控制台报错：TypeError: Cannot read property ‘init‘ of undefined解决：导入echarts时使用： import * as echarts from 'echarts'代替import echarts from 'echarts'2.页面同时会展示多张图表的时候，需要给每个图表容器添加唯一I
2021-07-29 14:36:14
539
原创 JS事件整理
事件是文档或浏览器窗口中发生的特定交互瞬间。JS和HTML之间的交互就是通过事件来实现的。事件流用来描从页面中接收事件的顺序。目前有两种事件流，一种是由IE提出的冒泡流，以及由网景提出的捕获流。事件冒泡：事件开始由最具体的元素（文档中嵌套层次最深的元素），接收，然后逐级向上传播到最不具体的节点（document），就像气泡由水底向上冒一样。事件...
2021-06-28 18:23:19
129
转载 H5性能优化调研
首屏打开速度首屏渲染可以分为三个阶段。Native 的耗时 ≈ WebWindow 创建 + WebView 初始化理论上可以优化，但这是一个 Native 要解决的问题网络的耗时 ≈ DNS + TCP(SSL) + 服务端渲染耗时(如果采用 SSR 的话) + Document 下载H5资源离线加载，或是webview容器创建之前加载，需要客户端支持。渲染的耗时 ≈ Ajax(CSR) + JS scripting(CSR 耗时) + 浏览器 Painting(内核)
2021-06-28 16:35:28
221
原创 DOM
1.DOM是什么DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM可以将任何HTML和XML文档描绘成一个层次化的节点树。节点分为不同的类型。例如这样一段HTML：<html> <head> <title>文档标题</title> </head> <body> <a href=“”>我的链接</a> <h1>我的标题</h1&
2021-05-31 10:34:35
92
原创 JS原型链
1. 构造函数，原型与实例JavaScript诞生的时候，为了使语言简单易学，没有引入当时流行的面向对象编程中的“类”class，为了实现继承，作者做了一个简化的设计，由于C++和Java使用new命令时，都会调用"类"的构造函数，在Javascript语言中，new命令后面跟的不是类，而是直接写构造函数（constructor）。function man(){ this.name = name;}let man1 = new man('张三');但是用构造函数生成实例对象有一个缺点，就是
2021-04-29 18:11:10
204
2
原创 前端协议与缓存
http与https(1.0 1.1 2.0)TCP与三次握手UDPWebSocket常见状态码与含义cookie、sessionStorage、localStorageweb Workerhttp常用请求头强缓存与协商缓存10.网络层面的前端优化
2021-03-15 10:03:45
639
2
原创 锚点定位手动实现
问题：项目需要实现点击某个地方锚点到对应的位置，页面由不同组件组成，无法使用<a></a>需要手动想办法实现。//这只是一个例子，你可以把这些div想象成各种各样的组件//假设我要实现点击按钮定位到第三个li的位置<body> <div class="page"> <div class="topbar"> <span>这是一个顶部栏</span> </div> <
2021-02-28 12:38:58
423
原创 node.js基础学习
什么是node?简单来说，node是JS的一种运行环境。在此之前，我们都知道JS可以在浏览器中运行，可以为网页添加各种交互，因此，浏览器也是JS的运行环境。随着Chrome浏览器的发布，带来了全新的V8引擎。经过多年的发展和优化，性能和安全性都已经达到了相当的高度。而 Node.js 则进一步将 V8 引擎加工成可以在任何操作系统中运行 JavaScript 的平台。两个运行环境如图所示，他们都包含了JavaScript语言标准ECMAScript，在浏览器环境还有浏览器对象模型（Browser
2021-02-07 21:24:12
347
1
原创 鼠标移入移出事件与父子元素问题
onmouseover, onmouseout : 父元素和子元素都会触发。onmouseenter, onmouseleave：子元素不会触发。实现场景：鼠标移入
2020-11-16 11:04:12
1669
原创 react引入百度地图sdk，自定义标签样式问题
百度地图参考文档http://lbsyun.baidu.com/index.php?title=jspopular3.0http://lbsyun.baidu.com/jsdemo.htm#a1_2http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b17react项目展示百度地图在componentDidMount()中声明，并在render函数中创建地图容器。componentDidMount(): v
2020-11-12 18:19:43
264
转载 em与rem
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响rem 单位可以从浏览器字体设置中继承字体大小。使用 em 单位应根据组件的字体大小而不是根元素的字体大小。在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。使用rem单位，除非你确定你需要 em 单位，包括对字体大小。媒体查询中使用 rem 单位不要在多列布局中
2020-08-20 12:37:31
310
原创 移动端隐藏滚轮
html::-webkit-scrollbar,body::-webkit-scrollbar { display: none;}html,body { height: 100%; overflow: hidden; overflow-y: scroll; /* 使得ios滑动流畅 */ -webkit-overflow-scrolling: touch;}
2020-08-20 12:02:32
148
原创 git问题整理
1.git add . 中提交的某某文件某些文件被忽略，导致commit失败。一般情况下，gitignore会规定一些忽略的文件不会被add，出现这个问题的原因是，在之前的某一次提交中提了这个文件，而之后gitignore规定忽略这个文件，但是git中依然会追踪这个文件，就会出现这个问题。解决方法：通过git rm -r --cached 文件名来清除对文件的追踪，然后再去执行add和commit。2.git本地仓库长时间没有清理，本地的“缓存”太多。解决方法：git fsck --los
2020-07-30 20:01:24
191
原创 微信小程序中input对齐问题
今天发现在微信小程序中标签中的文字内容与中的文字不对齐百度一下是设置对齐基线的问题，设置vertical-align：middle。但是实测并不管用，最后发现是由于微信标签默认有高度height: 1.4rem;，而我只设置了行高。解决方法设置高度与text标签高度相同即可...
2020-04-29 01:15:53
4140
原创 target与currentTarget区别
今天做微信小程序添加自定义属性时，发现如果添加到最外层的view上与添加到内层的image标签上，JS获取时有些许区别。添加在view标签上添加在image标签上经过查询了解event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。...
2020-04-13 22:44:02
191
转载 微信小程序显示空格几种方式
摘录自https://www.cnblogs.com/xiao-ling-zi/p/9323526.html<view> <text style="white-space:pre-wrap">{{text1}} ———— white-space:pre-wrap 文本保留空格和回车</text></view><view> <...
2020-04-11 21:00:43
7021
原创 微信小程序触发生命周期
今天在做小程序的时候遇到一个问题使用wx.navigateBack返回上级页面时，更新的数据并没有显示出来。由于我请求数据库操作写在onload()生命周期里。而wx.navigateBack返回后只会触发页面显示周期onShow()记录一下不同的方式打开页面触发的生命周期区别1.页面首次加载onLoad()页面加载周期onReady() 页面渲染周期onShow() 页面显示周期...
2020-03-07 00:34:17
1467
转载 ES6Proxy
之前在写vue项目的时候用到了proxy来进行服务端代理，解决跨域问题。之后发现它的功能远不止这些。看到了一片很好的文章，转载学习原文地址什么是代理模式代理模式（英语：Proxy Pattern）是程序设计中的一种设计模式。所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口：网络连接、内存中的大对象、文件或其它昂贵或无法复制的资源。著名的代理模式例子为引用计数（...
2019-08-20 16:54:24
136
原创 vue-cli3关闭eslint语法检测
项目根目录创建vue.config.js文件。在vue.config.js配置 lintOnSave:false, devServer: { overlay:{ warning:false, errors:false }, ...}
2019-08-15 15:03:23
14002
6
原创 JS异步优化方案Promise、Generator和async/await
参考https://segmentfault.com/a/1190000007535316#articleHeader5由于JavaScript是单线程的，因此异步编程是非常重要的，在异步操作中有一类很棘手的问题，被称为“回调地狱”，异步的回调函数中，又有另外的异步的回调，一个套一个，再参杂一些同步逻辑判断，代码就会变的难以维护。//回调地狱setTimeout(function(){ ...
2019-08-14 00:15:35
396
原创 css三栏布局
三栏布局的实现方式有很多种，说起来很容易，但写的时候总是忘记，记录一下。1.浮动实现左边左浮动，右边右浮动，中间使用margin让出位置 <div class="container"> <div class="left">我是左边</div> <div class="right">我是右边</div>...
2019-08-12 14:40:27
107
原创 从VUE双向数据绑定到MVVM模式
实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observ
2019-08-06 17:56:52
155
原创 CSS3中animation-fill-mode属性深入理解
今天在复习CSS3中的动画的时候，看到了animation下有一个animation-fill-mode属性，在W3C上的解释是这样的animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。看的我云里雾里，于是去搜索了一下以下回答摘录自 https://segmentfault.com/q/1010000003867335 中Druidiurd回答首先...
2019-07-25 13:41:45
1652
转载 前端常用缓存技术
原文转载自https://www.cnblogs.com/belove8013/p/8134067.html1、CookieJavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie。cookie的结构：简单地说，cookie是以键值对的形式保存的，即key=value...
2019-07-17 22:08:29
188
原创 vue-cli3+axios+element实现调用后端接口实现表格的增删改查
先上代码<template> <div id="app"> <el-row> <el-col :span="8" :offset="6"> <el-input placeholder="请输入关键字" icon="search" v-model="search"...
2019-07-16 17:41:23
5792
1
原创 VUE中实现table的模糊查询相关学习（结合vuex module+axios实例）
使用VUE+element 实现纯前端的模糊查询。关键代码<el-table :data="tables" //绑定计算之后（模糊查询之后）的数据属性 style="width: 100%"> <el-table-column prop="date" lab...
2019-07-10 15:27:54
3036
原创 arguments相关知识学习
今天在做题时碰到了这样一段代码var newarr = Array.prototype.slice.call(arguments,1)意思是取函数除了第一个参数之后的剩余参数生成一个新数组newarr。由于arguments是一个类数组，没有slice方法，因此在Array类型的原型链上调用slice()方法；call()函数里面传入arguments和1，是将slice()函数的调用对象设置为...
2019-06-20 20:03:43
227
原创 闭包与立即执行函数相关学习
题目实现函数 makeClosures，调用之后满足如下条件：1、返回一个函数数组 result，长度与 arr 相同2、运行 result 中第 i 个函数，即 resulti，结果与 fn(arr[i]) 相同输入 [1, 2, 3], function (x) { return x * x; }输出 4//使用闭包+立即执行函数实现f...
2019-06-19 10:44:53
91
转载 call,apply,bind
转载自https://github.com/lin-xin/blog/issues/7apply 和 call 的区别ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。apply( )apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组。var o...
2019-06-18 21:19:11
94
原创 JS移除数组 arr 中的所有值与 item 相等的元素,结果返回新的元素
今天在做题的时候发现了这道很简单的题目，自己用了push方法解决，通过之后看了解析，发现了没有想到的方法觉得很巧妙，记录一下。题目描述移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组输入[1,2,3,4,5] 2输出[1,3,4,5]我的方法（push）function remove(arr, item) { var na = n...
2019-06-15 09:58:43
1229
3
原创 Vue的虚拟DOM
DOM的解析流程分为步创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。...
2019-05-20 17:57:10
175
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人