孟思行-CSDN博客

原创前端登录，这一篇就够了

前端登录，这一篇就够了登录是每个网站中都经常用到的一个功能，在页面上我们输入账号密码，敲一下回车键，就登录了，但这背后的登录原理你是否清楚呢？今天我们就来介绍几种常用的登录方式。Cookie + Session 登录Token 登录SSO 单点登录OAuth 第三方登录Cookie + Session 登录 HTTP 是一种无状态的协议，客户端每次发送请求时，首先要和服务器端建立一个连接，在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源，但同时也存在一个问题：每次请求都是独立的，

2020-07-03 12:46:15 1865 1

原创一文串联 HTTP、TCP、IP、以太网

最近部门组织了一次前端性能优化交流会，大家从输入页面 URL 到最终页面展示内容这个过程提出了许多优化点。但同时发现很多同学对 HTTP 协议层的知识不能串联起来，于是整理了这篇文章，希望可以给大家带来一丝灵感。当我们在页面上发起一个 AJAX 请求的时候，在网络协议层面都经历了哪些内容？// 发起请求fetch('https://baidu.com')// 协议层1...// 协议层2...// 协议层3....then(res=> // 得到结果 console.log(re

2020-12-28 13:40:49 978

原创网站图标开发指南（精）

图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。传统图标字体图标SVG 图标传统图标编写图标最简单的方式就是使用一张图片，如：<html> <body> 图标 <img src="xxx.png" /> </body></html>在我刚开始写页面的时候就是这样做的，感觉 so easy，直到业务变得越来

2020-08-27 09:59:59 335

原创图解 Vue 异步更新原理

上一篇《图解 Vue 响应式原理》中，我们通过 9 张流程图，理解了 Vue 的渲染流程，相信大家对整个 Vue 的渲染流程有了一定的了解，这一篇我们来重点关注一下 Vue 异步更新原理模块。本文主要分析 Vue 从 Data 更新，到通知 Watcher 异步更新视图的流程，也就是下图中的橙色部分。我们先来回顾一下图中的几个对象：Data 对象：Vue 中的 data 方法中返回的对象。Dep 对象：每一个 Data 属性都会创建一个 Dep，用来搜集所有使用到这个 Data 的 Watche

2020-08-17 08:11:04 878 3

原创图解 Vue 响应式原理

最近部门分享，有同学提到了 Vue 响应式原理，大家在讨论时，发现一些同学对这一知识理解还不够深入，不能形成一个闭环，为了帮助大家理解这个问题，我重新过了一下 Vue 源码，并整理了多张流程图，便于大家理解。Vue 初始化模板渲染组件渲染本文 Vue 源码版本：2.6.11，为了便于理解，均有所删减。本文将从以下两个方面进行探索：从 Vue 初始化，到首次渲染生成 DOM 的流程。从 Vue 数据修改，到页面更新 DOM 的流程。Vue 初始化先从最简单的一段 Vue

2020-08-06 09:11:40 856 1

原创一文读懂 Web 安全

Web 安全是互联网中不可或缺的一个领域，这个领域中诞生了大量的黑帽子与白帽子，他们都是安全领域的王者，在平时里，他们利用各种巧妙的技术互相博弈，时不时就会掀起一场 Web 安全浪潮，真可谓神仙打架，各显神通。本文从一个吃瓜群众的角度，聊一聊 Web 安全的一些有趣故事。安全世界观安全攻防案例总结与思考安全世界观在互联网发展之初，IE 浏览器垄断的时期，大家上网的目的都很单纯，主要通过浏览器分享信息，获取新闻。但随着互联网的不断发展发展，一个网页能做的事情越来越多，除了看新闻，我们还可以看视

2020-07-28 09:58:55 840

原创微前端自检清单

最近在做公司微前端，整理了一份微前端搭建清单，如果你正在考虑是否要做微前端，不妨做个参考。需求分析技术方案分析拆分方案分析部署流程分析需求分析第一步，我们需要进行需求分析，以便真正清楚我们需要解决的问题是什么。例如：产品要新增一个业务模块产品要修改项目样式产品反馈项目启动太慢了产品反馈页面跳转刷新很不友好前两个需求是典型的业务需求，它的核心在于解决公司的业务问题，对于这一类需求，通常技术难度都不大，开发者只需要按照原型图，编写出对应的页面就可以了。后两个需求是典型的技术需求

2020-07-19 18:39:53 254

原创快速读懂 JS 原型链

最近参加了公司内部技术分享，分享同学提到了 Js 原型链的问题，并从 V8 的视角展开发散，刷新了我之前对原型链的认识，听完后决定重学一下原型链，巩固一下基础。理解原型链深入原型链总结与思考理解原型链Js 中的原型链是一个比较有意思的话题，它采用了一套巧妙的方法，解决了 Js 中的继承问题。按我的理解，原型链可以拆分成：原型（prototype）链（__proto__）原型（prototype）原型（prototype）是一个普通的对象，它为构造函数的实例共享了属性和方法。在所有

2020-07-10 09:49:21 151

翻译 React 开发者常见的 3 个错误

关于前端开发，我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架，但仍然一无所知。因为我们都在学习，这也意味着我们都容易犯错误。没关系，我们的目的是变得更好。如果你犯了一个错误并从中吸取教训，你就做得很好！但是如果你没有学到任何新的东西，并且不断重复犯同样的错误，emmm。。。可能你的职业生涯就会停滞不前。本着这种精神，下面是我在 CodeReview 初级开发同学时经常看到的三个错误。我们一起来 check 一下，然后讨论如何改正它。直接修改状态在更新 Re.

2020-06-18 10:06:47 278

原创从 0 到 1 认识 Typescript

最近这两年，有很多人都在讨论 Typescript，无论是社区还是各种文章都能看出来，整体来说正面的信息是大于负面的，这篇文章就来整理一下我所了解的 Typescript。本文首发于公众号：【前端日志】，欢迎关注。本文主要分为 3 个部分：Typescript 基本概念Typescript 高级用法Typescript 总结Typescript 基本概念至于官网的定义，这里就不多做解释了，大家可以去官网查看。Typescript 设计目标我理解的定义：赋予 Javascript 类型

2020-06-11 22:46:24 668

原创手搭一个 React，Typescript，Koa，GraphQL 环境

手搭一个 React，Typescript，Koa，GraphQL 环境本文系原创，转载请附带作者信息：yhlben项目地址：https://github.com/yhlben/cdfang-spider前言在实际的开发过程中，从零开始初始化一个项目往往很麻烦，所以各种各样的脚手架工具应运而生。crea-react-app，vue-cli，@angular/cli 等脚手架工具，只需要...

2019-05-28 18:33:33 452

原创 linux免密登录配置

1、生成密钥cd ~/.ssh/ssh-keygen -t rsa -C "my_name" -f "my_key"这一步会生成 my_key.pub（公钥） my_key(私钥)2、将公钥放在目标服务器上scp ./my_key.pub [email protected]:/root/.ssh/这里使用scp命令远程复制公钥(注意要存放在登录用户所在目录的.ssh文件夹里，这里...

2017-09-21 23:40:13 986

翻译 js模块开发（同步模块）实现原理

const F = {};//定义模块管理器F.define = function (str, fn) { var parts = str.split('.'), old = parent = this, i = len = 0; if (parts[0] === 'F') { parts = parts.slice();

2017-07-27 21:40:11 897

原创 linux基础命令（增删改查）

linux基础命令添加文件和文件夹添加文件： touch +【空格】+【文件名】添加文件夹： mkdir +【文件夹名】删除文件和文件夹删除文件：rm +【文件名】删除文件夹：rm+【-R】+【文件夹名称】修改文件和文件夹修改文件mv +【文件名】+【新文件名】修改文件mv +【文件夹名】+【新文件夹名】复制文件和文件夹复制文件：cp +【文件名】+【路径+文件名】

2017-07-17 21:18:54 568

原创 ant-design-mobile高清方案以及svg配置

.roadhogrc.js内容如下const path = require('path');const svgSpriteDirs = [ require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg， // 业务代码本地私有 svg 存放目录path.resolve(__dirname,

2017-07-13 14:19:31 4947

原创 react实战：一个极简易的新闻站点

react-kandian一个极简易的新闻站点。演示地址技术栈： - react - react-router - immutable - redux - redux-logger - redux-saga - mobx - axios - antd design 脚手架工具: create-react-app 运行方式: 1、yarn 启动 -

2017-07-06 21:37:43 349

原创最近想转行前端，整理了一份复习知识点

1、JavaScript基础，ECMAScript 6语法。2、HTML5基础，Canves，SVG，Zrender框架。3、CSS3基础，Flex布局。4、前端模块化，RequireJS，SeaJS。5、前端构建工具，Grunt，Gulp，Webpack。6、前端MVVM库，Angular，React，Vue。7、后台NodeJS，Express框架，Koa框架。8、

2017-02-24 10:41:53 356

u011192674的博客