- 博客(51)
- 收藏
- 关注
RSS订阅原创 qiankun umi3.x为主应用， Angularjs为微应用，无webpack打包解决静态资源无法获取的方法
qiankun umi3.x为主应用， Angularjs为微应用，无webpack打包解决静态资源无法获取的方法
2022-06-28 14:22:41
1104
1
原创 react-router在Class组件中用hook（useNavigateAPI）
react-router在Class组件中用hook（useNavigateAPI）
2022-05-03 21:22:36
1805
原创 React-router-dom@6.x 多路由嵌套
React-router-dom@6.x 多路由嵌套本文会以三级路由为例讲解最新版本的React-router-dom多级路由嵌套配置你需要有一定的reac基础三级路由数据结构const routes = [{ id: 0, compontent: Home, path: '/home', title: '租房APP', children: [ { id: 11, path: 'news', com
2022-04-18 21:37:44
2270
1
原创 网页性能优化心得
网页性能优化心得改文章是基于已经实施的优化方案进行的总结和拓展优化方案：1 避免巨大的网络负载解决方案： 推迟非关键资源 例如：某些js资源放在html结构后面2 最小化资源的大小解决方案：1 将图片放在阿里云的OSS中利用阿里云提供的数据处理图片处理能力减小大部分的图片大小建议某些具大图片进行处理时可以接受一些失真2 将所有的css和js文件进行压缩 改项目直接使用vscode中提供的插件minify 也可以考虑使用其他的方法 注意：当使用minify 大部分压缩js的原理为混淆压缩 会改变
2022-02-10 14:25:58
397
原创 阿里云OSS图片图像处理在网站优化上有积极成效，列上可能遇到的问题
阿里云OSS图片图像处理在网站优化上有积极成效，列上可能遇到的问题阿里云提供了一种极为简单的图片处理方式在img的src的url上添加参数：?x-oss-process=image/resize,w_300/quality,q_90类似的就可以对图片的的尺寸进行resize该方法可以显著减少图片的大小当我测出这张图片的最大尺寸 比如 137px那我就可以设置?x-oss-process=image/resize,w_137据测试据测试一张96.9KB大小的图片尺寸为width = 557px
2022-01-14 17:56:49
409
原创 自定义阿里云OSS图片大小
在访问oss图片时，如果图片太大，而本地网络不是很好的情况下，图片加载时间比较长，阿里云的oss有这个功能，在访问图片的时候指定大小显示，在显示的时候直接对图片进行压缩，这样可以加快访问速度！##图片地址https://gateon-ds.oss-cn-shanghai.aliyuncs.com/000a960090b343f0884b35acbd80e987.jpg##指定高度和宽度显示参数?x-oss-process=image/resize,m_lfit,h_300,w_500 或者?x
2022-01-13 13:58:33
2583
原创 【面试题】v-for 循环为什么一定要绑定key
一 对key值的理解key值的绑定是帮助vue识别虚拟Dom，作用是帮助vue高效的动态渲染页面名称解释： 虚拟Dom 页面中的每一个标签都对应具体的虚拟dom对象（js对象）,有自己的属性和方法二 Dom树和Diffing算法dom树： html结构就是树形结构，称为dom树，虚拟dom当然也是树形结构Diffing算法： 在此处可以理解为它用于将一棵树形结构转换为另一棵树形结构现在要把左边的dom树转换为右边的dom树，对每层去比较，找出每层节点的不同之处做相应的处理。对于每一层节点是
2021-12-07 09:51:51
1311
原创 Token超时处理前端主动介入
Token超时前端处理的思路当存入一个token时使用cookie 记入存入时间，设置一个时间限制比如 const TimeOut = 3600 * 24 , 构造一个函数用于比较现在时间和cookie存入时间差与TimeOut相比返回一个Boolean值，在axios的请求拦截器中判断其时间是否过期，过期进行下一步处理。流程图代码// 获取时间戳export function getTimeStamp() { return Cookies.get(timeKey)}// 设置时间戳e
2021-12-02 21:18:04
1660
原创 为了解决 github 在陆内加载过慢的问题
为了解决 github 在陆内加载过慢的问题该文章也是用于熟悉 markdown 语法的笔记导致 github 加载慢的原因我们访问的是国外的 ip 地址打开cmd ping github.com会发现请求超时无法获取解决办法（一定要按照步骤去解决）打开此网站dns 解析器在 dns 搜索中直接搜索 github.com,找到 TTL 值最小的 IP 地址复制在我的电脑中找到 C:\Windows\System32\drivers\etc 的路径打开 hosts 这个文件用笔记本(如
2021-11-29 10:30:33
482
原创 自定义组件与组件复用
简介 当一个项目出现大量相似的模块时毫无疑问组件化是最合理方便的做法，通过传参的不同渲染不同的组件，通过class类渲染不同的样式，通过vue的v-if v-else-if 甚至可以实现组件内标签的更改增加减少，这需要特殊操作，这里介绍了如何进行组件的复用和合理的定义组件，下面将以一个简单的例子来介绍一个随意定义基于vant的自定义组件 请配合代码下的文字读该代码 <btn-liking class="btn-liking" :is_l...
2021-11-25 21:23:36
913
原创 Vant弹出层组件使用时碰到的问题
弹出层的特性 1 如果初始v-modle 绑定的的值是false，则组件不会渲染 2 当v-modle绑定的值转变为true时，组件会被渲染出来 3 之后再改吧v-model的值只是用CSS进行显示和隐藏罢了造成的问题 当在弹出层内使用其他组件时，一般绑定的属性值不会进行改变，即使传进去的值发生改变了，相关代码如下:<van-popup v-model="showReplyComment" position="bottom" s...
2021-11-18 20:27:39
4226
原创 axios处理特大数据碰到的问题
碰到问题： axios在处理服务器特大数据时如："id": 1323890743432970240json字符串时默认使用的是JSON.parse()api进行对象转换,但问题出现了JavaScript只能精确保存安全数字内的数组 即：-2^53到2^53内的整数数据，当转换后这个数字就发生了改变，如图 这是直接在浏览器console面板输入的值，发现无法精确保存这种数字，也就是用这个id获取后台数据时会发生错误，经常报404，不改的话显向就是随机的正确性，偶然保...
2021-11-16 11:01:27
3575
原创 Vue框架，字符串的一部分处理为html文档并渲染到页面
应用场景 做搜索功能是有搜索建议模块，该模块需要对等于输入搜索框字符串的字符串进行高亮显示，效果图如图所示：需求概述将字符串 str = "Hello world hello girls"中的hello添加样式为图所示颜色。渲染核心组件为 <van-cell v-for="(item, index) in suggestList" :key="index" icon="search" @click="sendRe...
2021-11-15 20:24:17
6267
1
原创 数组操作高级技巧小记js
数据结构// 我的频道myChannel =[{"id":0,"name":"推荐"},{"id":11,"name":"后端"},{"id":12,"name":"linux"},{"id":13,"name":"人工智能"},{"id":17,"name":"前端"},{"id":18,"name":"python"},{"id":7,"name":"数据库"}]// 所有频道allChannel =[{"id":2,"name":"开发者资讯"},{"id":3,"name":"io..
2021-11-14 11:00:39
359
原创 vue中token的处理
传统的token处理 直接存储到localstorage或者sessionStorage中，缺点：1 数据并非响应式，需要进行特殊处理 2 存取麻烦，在存储对象数组类型的时候要用JSON转换为JSON类型的字符串VUEX的存储方法 通过mutations定义的函数将数据存储到Vuex的state中 缺点： 数据存储的有效时间短，刷新页面数据消失项目中的token处理方法 两者结合，加上封装本...
2021-11-08 21:50:27
882
原创 前端权限管理一种核心思路的记入
前言 做一个项目的时候碰到这个问题，为了理清思路写了这篇文章服务器给的权限数据结构 是一种树形结构：data: [ { id: 101, authName: '商品管理', path: null, pid: 0, children: [ { id: 104, authName: '商品列表', ...
2021-10-29 21:03:14
153
原创 element-ui按需导入时修改el-card样式失败和解决办法记录
传统的修改样式：或者是深度修改样式加/deep/ or ::deep >>> 全部失败样式警告这是无效的样式解决办法由于则是按需导入的element，在插件的下面是找不到index.css文件的，所以我就想肯定是在node_modules中有原件，在element-ui这个包中找到theme-chalk这个文件夹找到要修改的card.css此时你想修改为什么值就可以修改为什么值注意：在原有的基础上修改，复制粘贴可能是无效的,我觉得这肯定是一个bu..
2021-10-27 11:20:16
1350
1
原创 用phpStudy导入sql文件但文件内部为空，彻底解决
前言 在碰到问题的后，研究了大概有以上午的时间。根本原因就是因为之前下载过一个mysql数据库默认开机自启导致3306端口号被占用，pl：该端口号是没有用的。详细解决步骤1 打开MySQL workbench 断开与数据库的链接...
2021-10-26 21:24:12
1461
原创 webpack更新记录，vue-loader报错Compiled with problems : ERRORModule notfound: Error:Can‘ t resolve vue in
在package.json包中 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open", "bulid": "webpack -p" }, "bulid": "webpack -p" -p 指令不在能被识别，已经被淘汰了。更改为："scripts": { ...
2021-10-24 21:36:26
13974
原创 安装node-sass失败的解决方案
前言 今天安装node-sass安装失败包错误截取为：npm ERR! code 1npm ERR! path D:\前端学习\网课\5阶段\code\11 工程化开发\webpack_base_use\node_modules\node-sassnpm ERR! command failednpm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.jslibsass_ext= --lib...
2021-10-22 21:11:58
4010
2
原创 vue-router传递参数的注意点
前言 在学习vue-router时，我一直对vue-router传参抱有很大的疑惑，今天对vue传参进行了代码实验得出了几个结论,希望记录和分享列举几种合法的参数传递1 以动态参数的形式传递<router-link to="/user/3">登入</router-link>路由配置项const router = new VueRouter({ routes: [{ na...
2021-10-22 12:26:58
406
原创 常用的promiseAPI记录
promise对象API: 1 promise.all([promise1,promise2,promise3]).then((result) => {}) 功能：对异步任务进行排序，.then(result) => {}) 内部函数只有当三个异步任务全部完成后才会被执行 result 是包含三个异步认为返回值的数组。 2 promise.race([promise1,promise2,promise3]).then((result) => {}) 功能...
2021-10-19 21:40:04
47
原创 vue.2.0 使用Array.som((item) =＞ {)e循环试图更改item的值为新的对象出现的问题
前言 这个问题的出现我归因于对数组循环处理的量太少，当时出错的时候我已经是意识到item存储的是新对象的地址，但是我依旧是想了挺久的才发现了问题所在引入VUE.2.0的关键代码let vm = new Vue({ el: '#app', data: { falg: false, students: data.rows, student: ...
2021-10-17 21:14:19
407
原创 avoid using JavaScript unary operator as property name: “delete(index)“ in expression @click=“delete
vue 避免使用JavaScript中的关键字来定义函数名 把delete换为其他的字符
2021-10-17 10:42:08
590
1
原创 用户信息验证 session， jwt
前言 计算机如何确认当前所声称为某种身份的用户确实是所声称的用户，通过node.js的学习我了解到了一个重要的原则： 永远不要相信前端发送过来的任何信息。了解HTTP的无状态性 客户端的每次请求都是相互独立的，服务器不会主动的储存每次http请求;突破HTTP无状态限制 第一次的http请求通过发送独一无二的验证信息给客户端——cookie，以后用户每次发送http请求时都会将cookie发送给服务器，服务器就可以识别用户信息了。了解cook...
2021-10-13 17:42:00
389
原创 基于express模块的信息验证模块joi
前言 初学node.js的家人们，你是否还用if...else语句进行信息验证呢。吐血推荐这个joi表单数据验证模块，非常好用！！依赖的包 1 用于编写验证规则的包
2021-10-12 21:40:40
3248
4
原创 @hapi/joi@17.1.0和express-jwt使用问题
前言 一年前还能用的包现在需要重新配置一下@hapi/joi 此包已被弃用，安装新包接口：npm install joi官方声明express-jwt使用时必须配置算法名称安装路径：npm i express-jwt使用配置：const expressJwt = require('express-jwt')；// 只要配置成功了expressJwt中间件就会在req上挂载user// 更新过后 algorithm必须...
2021-10-12 21:19:14
459
原创 Node.js 实现jsonp详解
前言 在初步接触jsonp的时候是在客户端，那时候了解的非常的浅显，只不过是从表象去了解和使用了jsonp ，只知道是是用src导入了一个js脚本,它的原理是什么对于当时的我来说还是很难理解的，直到我学习了node.js自己写了一个jsonp请求。客户端的jsonp<button type="button" class="layui-btn layui-btn layui-btn-normal" id="btnJsonp">Jsonp请求</button>...
2021-10-10 21:22:34
1050
原创 自定义中间件使用next()很容易出错的点
前言 这可能是习惯造成的，因为每一次自定义中间件的时候next()是一定会调用的所以很有可能在创建函数的时候先写了next(),这就可能会造成问题引入一个自定义的中间体const qs = require('querystring');const body_parser = (req, res, next) => { let str = ''; req.on('data', (chunk) => { str += chunk; ...
2021-10-09 21:49:22
486
原创 Node.js 封装API无法对外提供API对象的问题
前言 可能很多人会碰到，当你使用exports向外提供接口时，会有很多的问题，本文章分析了一下原因 ps最好的解决办法就是不用 exports 用module.exports引入一个简单的router来说明问题// 【路由模块】const express = require('express');const apiRouter = express.Router();// bind get APIapiRouter.get('/get', (req, res) =>...
2021-10-09 21:39:02
112
原创 node.js css文件已经被加载但是无法渲染页面的问题和解决方法
问题：在使用node.js创建了一个服务器，加载html页面后css文件已经被加载但是页面没有被渲染如图此时已经证明了路径是没有问题的，那么问题出现在哪里？代码如下const fs = require('fs');const http = require('http');const path = require('path');const server = http.createServer();server.on('request', (req, res) =&g..
2021-10-07 22:13:17
3444
6
原创 art-template使用注意点——项目中发现的问题
前言 我在大事件后台管理开发时在用art—template所遇到的问题。项目：git@github.com:MagicianScryer/Background-management-system.git 访问方式为SSH注意点 1 所有在<script type="text/html"></script>结构标签内写的页面结构都无法直接获得。碰到的问题：我试图在此标签页面机构中动态添加DOM元素，无论是用...
2021-09-29 22:02:41
275
原创 敬昨天——jQ时代的余晖layui
前言这是一段公告：所有对 layui 为之热爱、鞭策、奉献，和支持过的开发者：请接受我用意念和字节传达的深深歉意。这是一个无力、无奈，甚至无助的决定：layui 官网将于2021年10月13日进行下线。届时，包括新版下载、文档和示例在内的所有框架日常维护工作，将全部迁移到 Github 和 Gitee。此后，layui 仍会在代码托管平台所活跃，且 2.7 正式版也将在其间首发。而 layui 官网将不复存在。这不是终结，只是重归到开源的纯粹中来。再者，对于 ...
2021-09-29 21:44:17
182
原创 git和github了解基础及注意项
前言 对git工具基本命令进行梳理，学会了用github创建自己的远程git仓库，以及用git工具进行代码版本的提交 一git工具基础命令掌握梳理 1 下载git后进行初始配置 git config --global user.name '???' ,建议与github上的账号一致 以免后续可能出现的麻烦 git config --global user.email '????@????' 同理建议与g...
2021-09-24 21:27:39
44
原创 性能优化——防抖和节流功能的实现
前言为了处理高频率的触发事件触发而衍生出来的性能优化策略，特别是当涉及到scroll事件mousemove，keyup获取表单内容和ajax请求时候采用的提高性能的策略 防抖策略 实现原理： 1 在全局作用域中声明一个 timer = null（pl这是必须的 不设置会导致第一次事件执行时发生错误） 2 在需要使用防抖策略的绑定事件中 先加上 clearTimeout（timer）清除定时器...
2021-09-22 21:47:29
205
原创 同源策略安全锁只出不进，阿蒙？
同源策略限制一个源的文档和js和另一个源的文档和js进行资源交互，是一种必要的安全措施。//是为了防止CSRF攻击--------利用用户的请求发起恶意的攻击注意 1.端口：在ie浏览器中未将端口纳入同源策略检测中 2授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），则不受同源策略限制。同源源的定义 如果两个URL的‘协议’，‘域名’，‘端口’相同则被定义为...
2021-09-20 21:19:19
99
原创 let const var 区别
前言 本文以表格的形式进行呈现，做了较为清晰的对比。ECMAscript6 以前有一些不合理的地方比如 变量提升 无区域块的概念 很容易造成变量名冲突 ES6提供了 let 和const 声明变量和常量的解决方法...
2021-09-13 17:17:06
76
原创 闭包为什么难？注意细节
前言 ：闭包非常容易理解但是为什么面试做题总错？？ 还是那句话注意细节。下面来看两段代码（面试真题） 1 问log打印出的是什么function fn() { arr = []; for (var i = 0; i < 5; i++) { arr[i] = function() { return i; } ...
2021-09-12 21:08:50
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人