- 博客(56)
- 收藏
- 关注
RSS订阅
原创 几十行代码实现一个简单聊天室的功能
1、前言Socket.io将数据传输部分独立出来形成engine.io，engine.io对WebSocket和AJAX轮询进行了封装，形成了一套API，屏蔽了细节差异和兼容性问题，实现了跨浏览器/跨设备进行双向数据通信。WebSocket是一种**双向通信协议，**WebSocket与HTTP协议一样都是基于TCP的2、功能与效果登陆、登出多用户聊天效果如下3、目录结构4、Node端服务socket.io 服务需要依赖http服务，通过安装express，起一个http服务，然后
2020-12-10 18:51:56
578
2
原创 使用umi3和antd pro5从零实现全栈中后台管理系统
0、前言使用umi3和antd pro5从零实现全栈中后台管理系统0-1、涉及技术栈前端： TS 、 React、React Hooks、 umi3、antd-pro5后端: express、mongodb、jwt**0-2、实现的功能后端用户鉴权前端权限管理用户密码加密封装一套通用弹窗表单组件，实现新建、修改、详情功能用户登录注册(首次需要后端自己添加一条用户登录信息)后端通过expressJWT实现接口鉴权与添加白名单后端日志功能后端封装方法统一处理返回信息实现列
2020-12-09 12:39:55
3405
1
原创 原生html实现一个mini-react-router
原生html实现一个mini-react-router前言实现一个简单版本的react-router, 揭秘路由的神秘面纱思考• 前端路由本质上是什么• 前端路由里的一些坑和注意点• hash路由和history路由的区别• Router组件和Route组件分别做了什么路由的本质浏览器端的路由不是真实的网页跳转，和服务器没有任何交互，本质上就是对url进行监听，让某个dom节点显示对应的视图路由的区别路由的区别一般来说，前端路由分为两种1、hash 路由， 特征是ur
2020-09-22 19:51:16
316
原创 从0到1，使用proxy手把手带你实现一个vue框架
一、写在开头vue3.0通过proxy对vue进行了重构，那么今天我们就来通过proxy来实现一版自己的vue框架吧看完该文，您将学到proxy与Object.defineProperty的区别通过proxy进行数据劫持的方法esModule的模块化思想Map数据类型的使用通过正则进行匹配渲染视图实现vue的数据双向绑定实现vue的v-module实现vue中的v-bind实现vue中的v-ifok ! 打开电脑，跟你一起一步步将他实现出来吧！！！二、关于proxypro
2020-08-21 18:15:44
286
原创 JS 进阶(八) 前后端通讯
1、前后端通讯1、AJAX: 前后端数据通讯非常重要的手段，基于AJAX从服务器获取数据，基于客户端实现数据的渲染JQuery $.ajax([options])Axios2、Fetch: 新的前后端通讯方案3、跨域处理jsonpiframe(document.domain.location.hash…)postMessageCORSproxy服务器渲染(前后端没有完全分离)客户端服务端浏览器获取代码后，进行解析+ DOM树+CSSOM树+RENDER树
2020-08-13 23:30:57
701
原创 JS 进阶（七） 深入学习实现Promise
Promise1、Promise介绍promise是进行异步管控的工具，通过链式调用取代回调函数层层嵌套提供更多解决异步的解决方案2、Promise的用法及注意第一步实例必须传入一个函数Promise实例中拥有两个默认属性，PromiseStatus、PromiseValue实例接收一个函数，函数接受两个参数，分别是成功和失败的回调方法状态一旦改变就不会再更改executor函数执行出错也会把实例的状态改为失败，且value是失败的原因第二步实现.then方法实例上添加
2020-08-04 18:49:57
179
原创 JS 进阶 （六） 浏览器事件模型DOM操作
事件对象和事件传播机制事件对象当事件触发、浏览器会把制定的方法执行，并且把全局下记录的当前操作信息的’事件对象’传递给这个函数 ，不管在哪个函数中，获取到的是同一个对象，存储的是当前操作的信息，和函数没关系let n;document.bofy.onclick = function (ev){ console.log('Body') console.log(ev === n)}box.onclick=function(ev){ console.log('Box') con
2020-08-03 17:57:04
277
原创 JS进阶（五）同步异步编程及浏览器的底层渲染机制
浏览器渲染机制浏览器底层渲染机制一个页面从服务器访问，拿到页面源代码之后做的事情是什么？生成Dom树（DOM Tree） => 对HTML文件的处理基于HTML获取的是流文件 (进制编码)把进制编码编译为具体的字符按照令牌TOKEN进行解析 (分词/断词)生成具体的节点 (元素标签/文本节点…)按照相互的依赖关系生成一个DOM树 (节点树)生成CSSOM Tree => 对CSS文件进行处理生成渲染树（Render Tree
2020-07-29 22:37:58
452
原创 JS进阶（四）面向对象
1、对象、类、实例JS 本身是基于面向对象思想设计出来的一门编程语言，当我们给予JS进行程序设计的时候，也应该按照面向对象的想法去开发或者理解。对象，一种泛指类：对象的一部分实例：某个类中的具体事物2、内置类【数据类型】Number 、 String、 Boolean 、 （Symbol、BigInt）Object、Array、RegExp、Date…Function【每一个元素对象都有一个自己所属的类】HTMLHtmlElement / HTMLBodyE
2020-07-19 17:47:10
135
原创 JS进阶（三） 闭包，作用域链，垃圾回收，内存泄露
1.闭包作用域函数创建创建函数1、开辟一个堆内存(16进制的内存地址)2、声明当前函数的作用域（再哪个上下文创建的，它的作用域就是谁）3、把函数体内的代码当作字符串存储在堆内存当中(所以不执行没有意义)4、把函数的堆内存地址类似对象一样放到栈中供对象调用执行函数1、会形成一个全新的私有上下文(目的是供函数中的代码执行)，然后进栈执行2、在私有上下文中有一个存放私有变量的变量对象 AO（xx）3、在代码执行之前要做的事情- 初始化它的作用域链<自己的上下文，函数的作用域>-
2020-07-12 17:56:38
785
原创 JS进阶（二）JS底层运行机制之堆栈内存
1.JS底层运行机制之堆（Heap）栈（Stack）内存相关理论知识ECStack(Execution context Stack) 执行环境栈: —— 内存中分出来用于执行js代码的空间EC(Execution context): —— 执行上下文， 为了区分全局和函数执行所处的不同范围(词法作用域)，又可以分为全局执行上下文EC(G)和函数执行私有上下文EC(FUNC)VO(Varilbale Object)和AO(Active Object): —— 在每一个上下文代码执行的时候，都可能会
2020-07-11 15:05:40
456
原创 JS进阶（一）数据类型与隐式转换
1.数据类型分类（1）基本数据类型【7】string、 number、null、undefined、 boolean、bigInt、symbol注意⚠️：Number类型中NaN不是有效数字但是属于Number类型,typeof NaN //=> 'number'NaN === NaN // => falseObject.is(NaN,NaN) // => trueBigInt出现的意思是保证超出最大最小安全值仍然可以准确计算console.log(Number
2020-07-10 18:24:36
202
原创 学习react-hooks和TypeScript打造的仿Antd的reactUI组件库
✨ RockUI学习React Hooks和TypeScript打造的仿Antd的react UI组件库，并通过此组件库在create-react-app的基础上实现了一套简单的应用，下方链接样式解决方案——saas测试——Jest框架Icon库基于react-fontawesome github 文档文档使用Storybook进行展示使用eslint和prettier对代码风格进行约束使用见README.md,学习及开发中的坑与解决见STUDY_README.md???? Li
2020-06-19 15:24:54
1280
原创 浏览器（一）---- 宏观视角下的浏览器
一、简介1、浏览器进化路线第一个是应用程序 Web 化第二个是 Web 应用移动化第三个是 Web 操作系统化2、为什么需要学习浏览器工作原理？准确评估 Web 开发项目的可行性从更高维度审视页面首屏的显示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技术因素在快节奏的技术迭代中把握本质—Node.js 是前端发展的一个核心推动力二、浏览器的宏观架构1、仅仅打开了1个页面，为什么有4个进程？答： 因为打开 1 个页
2020-05-29 15:50:18
340
原创 服务器登录与文件传输
1、账号密码登录ssh 用户名@IP例： ssh root@39.96.71.193输入密码 **在参数中加密码安装sshpassbrew install https://raw.githubusercontent.com/kadwanev/bigboybrew/master/Library/Formula/sshpass.rbcd /usr/local/binln -s …/Cellar/sshpass/1.05/bin/sshpass sshpasssshpass -p “mi
2020-05-28 19:36:27
322
原创 # 食谱项目总结
项目总结1、需求1、创建食谱，交互为很长的一页布局，上面部分为基本信息，下面部分为创建食谱步骤，可以新增删除，最下面是提交。 考虑用户体验和一些意外的发生（比如用户编辑步骤非常多，页面会很长，而且如果最后某一接口错误或bug，整篇编辑将会白费）， 为了解决这个问题，我提出，通过tab分成两栏布局，第一栏为基本信息，第二栏为创建步骤，每个步骤分步保存， 带来的好处有两个，一个是新增、编辑内容时不会导致页面拉的太长。第二个是分步保存，不会造成一次提交出错导致全部内容保存失败。带来的挑战，比如，由于基本
2020-05-18 19:33:10
608
原创 输入一个URL做了什么？--- 网络通信方面
理解：一、 网络通信方面1、 网路分层why？ 使计算机间的识别数据传输通讯和网络互联等复杂的问题简单化what?OSI体系结构： 1、物理层 2、数据链路层 3、网络层 4、运输层 5、会话层 6、表示层 7、应用层TCP/IP体系结构：1、网络接口层 2、网络层IP 3、运输层 4、应用层五层协议的体系结构： 1、 物理层 2、数据链路层 3、 网络层 4、运输层 5、应用层物理层：通过物理手段将设备链接在一起：传输0/1电信号（比特流）数据链路层：规定了一套协议，专门
2020-05-18 18:18:54
233
原创 mac 快速文本操作快捷键
Mac 快捷光标光标移动control+ a 最前面control+ e 最后面control + b 前进一格control + f 后退一格control + N 向下一行control + P 向上一行跳到本行开头 – Command + 左方向键←跳到本行末尾 – Command + 右方向键→跳到当前单词的开头 – Option + 左方向键←跳到当前单词的末尾...
2020-04-20 10:02:51
581
原创 使用react，hooks钩子时useState更新不渲染组件的问题
react中，hooks钩子时useState更新不渲染组件的问题 当使用react，写如图组件时，发现一个很关键的问题，当选择用class写的时候，很容易通过组件更新渲染。 当我决定用函数式组件hooks来重构我的组件的时候，发现了一个很难搞的问题，当我通过onChange去改变父组件value的时候，value的值改了，竟然没有重新渲染组件？？？？ 一脸懵逼的我，于是试图将class组...
2020-04-02 22:20:11
22971
4
原创 css系列----纯 css 实现轮播图(自动)
3、纯 css 实现轮播图(自动)实现原理：利用 css3 中 动画和 overflow:hidden 实现/* 容器大小 */.container { height: 300px; width: 800px; overflow: hidden;}/* .wrap */.wrap { position: relative; left: 0px; width: ...
2020-03-20 16:03:06
4441
原创 css系列----纯 css 实现轮播图(手动)
2、纯 css 实现轮播图(手动)实现原理：利用 css3 中 input:checked 和 + ～选择器实现/* 设置容器大小*/.container { position: relative; width: 800px; height: 300px;}/* 设置input位置 */.container input { position: absolute; z...
2020-03-20 15:33:08
3433
4
原创 css系列----css 实现选项卡功能
1、纯 css 实现选项卡功能实现原理：利用css3 中input:checked 和 + ～选择器实现ul li { float: left; height: 30px; width: 100px; cursor: pointer;}input:checked + li { color: #f00;}input:checked ~ div { visibi...
2020-03-20 10:55:53
1847
原创 ubuntu通过docker安装jenkins
拉取镜像sudo docker pull jenkins/jenkins:lts映射配置宿主机映射到容器的目录，之后jenkins的一些配置文件都将会存储到该目录下，这个目录可以自己定，但是我建议遵守我这样的规范，便于日后查找和管理sudo mkdir /home/jenkins_home # 创建jenkins_home目录sudo chown -R ...
2020-02-05 11:23:29
221
原创 taro/cli因为版本出错
项目添加一个开发依赖的方式，这样可以避免受到全局安装的 CLI 影响。在你的项目里运行npm install @tarojs/cli@1.3.33 --save-dev 或者yarn add -D @tarojs/cli@1.3.33之后的开发都使用npm run dev:weapp 或者yarn dev:weapp 如果你想让全局版本都降级的话，需要运行 npm...
2019-12-28 23:15:38
1920
原创 Koa 实战 - 鉴权
学习目标掌握三种常见鉴权方式Session/CookieTokenOAuthsession-cookie方式cookie原理解析// cookie.jsconst http = require("http")http.createServer((req,res)=>{ if(req.url === '/favicon.ico'){ return...
2019-12-09 23:31:06
542
原创 前端性能优化02-- 代码执行优化
前端性能优化02节流 防抖重绘 回流vue react (ssr) 常见优化 代码执行的更少，dom 操作更少浏览器如何渲染页面vue源码做过哪些执行层面的优化雅虎军规性能监控 Performance放到控制台执行performance.getEntriesByType(“navigation”)节流、防抖节流，某一段时间只触发一次，避免函数执行次数过多，比如滚动调用...
2019-10-30 12:02:57
266
原创 前端性能优化--文件获取优化
前端性能优化01加载文件 css.jshttp 协议的细节从 url 到页面渲染完毕，发生了什么大厂怎么上线前端代码网络层面优化从输入 URL 到页面加载完成，发生了什么？用户输入域名 - 浏览器通过 DNS，把 url 解析成 IP和 IP 地址建立 TCP 链接发送 HTTP 请求服务器接手请求，查库，读文件，返回的 HTTP响应浏览器收到首屏的 html，开始渲...
2019-10-30 12:00:51
468
原创 完成 Angular8 构建简单CRM 系统
一、 Angular 简介框架和库框架(Framework)包含库(Library)框架制定了一套规范或者规则 AngulatJS 、 BackBone 、 VueReact + React-Router+ React-ReduxAngular 概述一套框架多平台 TypeScript 书写优势： AngularJS -> Angular (1.0 版本之后) ...
2019-08-31 16:07:26
659
原创 nginx配置反向代理后，网页可以正常访问，但是页面上的js、 css、 视频文件、音乐文件无法加载到
nginx配置反向代理后，网页可以正常访问，但是页面上的js、 css、 视频文件、音乐文件无法加载到问题为路径问题、将相对路径改为绝对路径即可,一段代码即可解决 location / { root /home/rock/www/website/WE/html; index home.html; } location ~* .(jpg|gif|p...
2019-08-06 11:55:26
2397
原创 利用iterm2,在服务器窗口中用命令行预览图片
利用iterm2,在服务器窗口中用命令行预览图片下载item官方网站:https://www.iterm2.combrew cask install iterm2进入服务器的/usr/local/bin目录，新建一个imgcat文件touch imgcat复制程序代码:https://www.iterm2.com/utilities/imgcat，编辑脚本vim...
2019-07-24 11:24:46
682
原创 webpack+antd+fetch 通讯 , 打包上线
webpack+antd+fetch 通讯1. 引入安装fetchimport "whatwg-fetch"import "es6-promise"2. 在utils中配置fetch文件，定义了一个get请求和post请求的方法，因为内部是promise封装的所以返回的是一个promise对象，通过.then接收具体代码get 方法export function get(url...
2019-07-22 10:46:42
531
2
原创 react 封装通用组件之Modal弹窗
react 封装通用组件之Modal弹窗工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。Moda...
2019-07-20 14:46:20
10417
4
原创 react 封装通用组件之table组件
react 常用组件API调用的模块化封装–table组件工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的...
2019-07-20 11:32:21
5949
2
原创 react 封装通用组件之form表单
react 常用组件API调用的模块化封装–form组件工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的...
2019-07-13 17:41:29
6992
原创 从零开始一个webpack+react项目
从零开始一个webpack+react项目最近在做react组件化的分享，从项目中抽离组件，那么第一步自然是搭建相关的环境本篇旨在从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境第一步，初始化项目npm init (注意文件名符合规范)第二步，安装webpack、webpack-cli和webpack-dev-server，...
2019-07-05 15:47:45
3113
1
翻译 git的基本使用与常用用法
git的常见用法1. 基本介绍首先介绍下 git 的三个区： 工作区 、 暂存区/过渡区、历史区/版本库工作区： 本地代码编写区 - git init暂存区/过渡区：临时保存代码，承上启下 - git add历史区/版本库：代码提交完成，自动成一个版本号，可用来更改版本，在不同版本中穿梭，配合 git log / git reflog 使用2. 配置用户查看本...
2019-07-04 19:02:16
182
原创 从服务器购买到项目发布上线（ubuntu服务器）
从服务器购买到项目发布上线（ubuntu服务器）服务器的选购购买大品牌 ，推荐阿里云：方便、免费的ssl证书 、大品牌、自带公网IP（非常重要）。七牛云：服务不错，（公网IP需另购）选购注意，系统选错，可以更换磁盘，如果选区错了将不可以更换，比如所在地是杭州，选择华东地区即可，后面的域名、云服务器等选购建议与云主机地域一致。优惠 ，云主机购买，有学生专享优惠。云服务器ECS的优势，高可...
2019-07-01 20:12:11
616
1
原创 盒子水平垂直居中的11种方案
1、定位+margin拉回<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute;
2020-09-24 16:27:08
373
原创 ES （八）Object的扩展
1、属性简洁表示2、Array.from()3、Array.of() 4、数组实例的copeWithin() 5、数组实例的find()和findIndex() 6、数组实例的 fill() 7、数组实例的 includes() 8、数组实例的 flat()、flatMap()#一、扩展运算符1. 含义扩展运算符–好比rest参数的逆运算，讲一个数组转为用逗号分隔的参数序列console.log(...[1,2,3])// 1 2 3主要用于函数调用var arg = [.
2020-08-17 21:01:46
274
1
原创 ES（七） Array 的扩展
1、扩展运算符2、Array.from()3、Array.of() 4、数组实例的 copeWithin() 5、数组实例的 find()和 findIndex() 6、数组实例的 fill() 7、数组实例的 includes() 8、数组实例的 flat()、flatMap()#一、扩展运算符1. 含义扩展运算符–好比 rest 参数的逆运算，讲一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3]);// 1 2 3主要用于函数调用var .
2020-08-17 21:00:00
556
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人