React16+React-Router4 从零打造企业级电商后台管理系统--笔记

• Z时代
• 2024-01-10
• 分类：综合

1.课前知识储备

资源加载过程

（1）URL解析

（2）DNS查询

DNS优化

在页面一加载时，就去这些域名的DNS服务器查询IP地址，并缓存下来，等到要请求这些域名下的资源时，省去了DSN查询的时间，提高了页面加载的速度。

（3）资源请求

（4）浏览器解析

 1-在加载html时，开始构建DOM，碰到一个DOM节点，就将它放在DOM树中

 2-在期间碰到一个JS文件，就需要停下构建DOM树的工作，（因为JS可以操作DOM元素，就可能导致之前构建的DOM树都白搭了，所以遇到JS时，先让它执行）

 3-在构建DOM树过程中，如果遇到style标签，DOM构建和样式加载并行

 4-DOM树构建完，构造渲染树，渲染树是DOM树和CSS样式表结合的产物，

 5-渲染树在不同浏览器中构造方式不同，chrome浏览器中webkit内核，在原来的DOM树上附属一些样式，firefox中根据DOM树和样式表构建出一个新的渲染树

 6-渲染树构建出来，每一个要显示元素的大小和布局方式也就确定了

 7-根据每个元素的大小和布局方式，计算出每个元素的位置

 8-调用浏览器负责绘制的部分，将元素按照对应的样式和位置绘制在屏幕上

面试题：在浏览器中输入一个网址，敲下回车后发生了什么？

1. DNS解析
2. TCP连接
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器解析渲染页面
6. 连接结束关闭TCP连接

1.DNS解析：寻找哪台机器上有你需要的资源的过程

在输入www.baidu.com时，其实不是百度网站真正意义上的地址。

互联网上每一台计算机的唯一标识是它的IP地址。

IP地址不方便记忆，用网址www.baidu.com便于记忆。

网址www.baidu.com到IP地址的转换就是DNS解析（翻译的角色）。

2.TCP连接：三次握手。首先客户端向服务器发送请求是否可以建立连接，服务器同意后，客户端回馈服务器的响应，就是3次通话。

3．发送HTTP请求：客户端向服务器发送http请求，http请求内容是

 请求行：方法+地址+http版本

 请求头

 请求体

4． 服务器处理请求并返回HTTP报文

 响应行：http版本+状态码+状态描述

 响应头

 响应体

状态码

5． 浏览器解析渲染页面

浏览器接收到htlm, css,js文件后，将这些信息渲染到客户端页面上。

浏览器是一个边解析边渲染的过程。

 浏览器解析HTML文件构建DOM树

 解析CSS文件构建渲染树

 完成后，浏览器开始布局渲染树，将其绘制到屏幕上。

回溯（reflow）和重绘（repain）

Reflow:DOM节点中的各元素都是以盒模型的形式存在，浏览器需要计算其大小和位置

Repain：当盒模型的位置、大小及其他属性（颜色、字体）确定后，浏览器开始绘制内容

页面首次加载，必然reflow和repain。

reflow和repain非常消耗性能，造成页面卡顿，尽可能减少这些操作。

6.连接结束关闭TCP连接

ES6基础知识

 1-箭头函数不仅仅是对function进行简化，比如箭头函数没有自己的指针，它继承外层作用域

 2-不能用作构造函数，也就是不能用new生成一个对象

 3-箭头函数没有prototype属性

1-Promise的出现是为了解决异步回调函数层层嵌套的问题，

2-以前，在前一个异步回调函数中嵌套下一个异步回调函数，多个，层级很深，不利于阅读

3-Promise支持异步的链式操作，写出的代码更加清晰易读

子类没有this对象，如果想在子类里调用父类的方法，需要在子类的构造方法里调用父类的构造方法，这样就可以把父类的this对象继承过来

本地存储

传统的本地储存：cookie和session

HTML5中提出的本地存储：localStorage和sessionStorage

cookie

 1-前端和后端的数据交互，用的是http请求，但是http是一种无状态的协议（无状态：收到一个请求，返回一个响应，而不关心请求者的身份）

 2-http也不是一种持久性的链接，因此，记住某个用户的身份特征很困难

 3-后来就出现了cookie的机制，在用户端保存用户的身份，浏览器会在操作系统里开辟一个文件，专门存放cookie，这个文件只要不删除，就会一直存在，

 4-在每次请求后端的时候，都会在http请求头里加入cookie，后端就能知道是哪个用户

 5-Cookie就是一个字符串，分号分隔的多个key-value字段

 6-Cookie存储在本地文件里，这是浏览器可以操作的为数不多的本地文件之一，安全起见是加密的，只有浏览器可以操作它

 7-Cookie有域名和路径的限制，一个请求只能操作自己有权限的cookie

Session在服务端记录请求者身份

在服务端接到请求以后，生成一个session id,然后把session id种到用户的cookie里，这样用户再次请求时，带着cookie，服务器就能知道是谁发来的，

session id并不一定都是通过cookie实现的，也可能是放在请求参数里，

Cookie其实是为了在http中保存用户状态而设计的，在一些场景中也会把它当成本地存储来使用，这种用法有一个缺点：有些信息只需要在本地存储就可以了，比如记录用户选中了哪个菜单，用户喜欢哪个样式，完全是为了前端展示用的。如果这些信息记录在cookie中，请求是这部分信息在cookie中携带，增大了网络请求的体积，



2.前端框架分析

Angular还在解决js的问题，对css和html的处理比较少

把html和css转换成js的一部分，把js作为整个应用的入口，

视图层框架：只关注页面的显示，不像Angular这类MVC框架，数据也会被一同处理

3.开发环境的搭建

Npm安装的是一定范围的安装包

Yarn安装的是确定版本的包

缓存机制：一次安装，缓存下来，下次安装，不走网络请求，实现秒装

缓存还能断网使用

Yarn安装版本有问题，这里没有用Yarn，用的还是npm

全局的webpack版本只能是一个，可以执行node_modules中的webpack可执行文件，将webpack的版本控制在这个项目内

Webpack.config.js配置

1. 入口函数和出口函数

2. html-webpack-plugin插件，处理打包文件

3. babel-core，babel-loader，babel-preset-env，打包js文件，并且通过babel可以将我们写的ES6语法转换成ES5

4. babel-preset-react插件，支持react环境

5. css-loader和style-loader,打包将css文件变成一个字符串，放在js文件中，这样出现的问题是，css要等所有的js文件都解析完，才会加载css文件，页面会出现白屏。为了解决这一问题，安装extract-text-webpack-plugin插件

6. sass-loader 和node-sass插件，打包sass文件

7. file-loader url-loader，加载图片资源

8.字体文件解析，font-awesome

出现问题：

解决：将下面几句注释掉了

经过配置webpack.config.js，将资源分成了css，js，resource和index.html四个部分

9.为了能一保存文件，浏览器就刷新，安装一个webpack-dev-server插件

执行webpack-dev-server命令，在localhost:8080端口，可以显示页面

出现问题，字体文件找不到了，

这里发现，地址错误，少了一个dist

解决：添加一个publicPath，就会在dist中的index.html引用资源时，自动加上一个dist在路径前面

10.最后在package.json文件中加一个scripts字段


4.React框架

视图层框架：只负责显示部分的框架

JXS表达式：将静态的模板字符串，变成有逻辑的jsx表达式，更加灵活

显示：数据变成DOM显示出来，监听DOM上的事件

State数据

Props父子传递数据

怎么用create-react-app创建一个react项目？

1.cnpm install create-react-app global

2.create-react-app react-test

安装的包很多,webpack. Webpack-dev-server都被集成在里面

傻瓜式的建立项目

给提交的分支，定一个tag名称：

git tag tag-initial

git push origin tag-initial

Sublime安装一个babel插件，可以将解析jsx文件

基本语法：将元素渲染出来

行内样式

ClassName添加样式

将handerClick中的this修正到Component中

用箭头函数也可以改变作用域

接收到父组件传来的值

在sublime安装插件的时候，出现There are no packages available for installtion.

解决方法：将package control 文件夹中的内容全部替换掉就可以了

支持jsx文件，下载babel插件

支持sass文件，下载sass插件

支持在jsx中补全div标签，emmet，下载过了，配置一下文件就可以了（代码网上很多，一搜就可以了）

配置webpack.config.js解决跨域问题

这样配置之后，在请求服务器数据时，默认是从http://admintest.happymmall.com发出请求，而不是http://localhost:8081/，就解决了跨域问题

5.通用部分开发

6.基础功能模块的开发

登录状态是怎么保持的？

在登录状态下，访问其他接口都是可以的，

我们在点击退出登录的时候，服务器是如何知道我是哪个用户名的？

在点击退出登录时，会在请求头中，添加一个cookie

服务器就知道要把谁干掉了

再次登录时，请求头中还是同一个cookie，重复利用cookie

当把cookie中的JSESSIONID删除后，再次登录，如果本地没有JSESSIONID

在response header中会多一条以上的语句

告诉浏览器，要设置一条这样的cookie

JSESSIONID就再次被种上了

总结：

 1-在第一次请求返回的时候，response header中会有一个set-cookie字段，告诉浏览器设置一个cookie，就是JSESSIONID

 2-再次请求别的接口的时候，都会带着JSESSIONID这个字段，后端会判断这个字段是否生效，如果生效就对应着用户信息，就可以拿到数据

 3-如果退出登录，后端会将用户id和JSESSIONID作解绑，再请求就获取不了数据了

7.商品模块的开发

一个坑：

React-fileuploader用的是15.0.2的版本

但是项目里用的是16.13.0就会出现问题

解决方法：

对FileUpload.js提出来进行改动

1.React手册中查找PropTypes属性，安装一个prop-types插件

2.getInitialState换成state

3.改onClick和onChange,onSubmit

4.删除逗号

富文本框采用的是simditor插件

在回填富文本框内容的时候，删除所有的内容，再次填写时，会出现正向书写，反向显示的

比如输入123456，显示的是654321

因为我们这样写，没改变一次，就会setValue一次

改成这个样子，只有当defaultDetail变化时，才会setValue

只有加载时，defaultDetail会变，其他都是detail在变




8.品类模块的开发

9.订单模块的开发


10.系统上线

总结：

另外：

行首或者&开头 + name+ =和除了&以外的0个或者多个字符，以行尾或者&结尾

queryString = “param=123&param1=456”

将javaScript值转换成JSON字符串

{name:‘rosen’}

{“name”:“rosen”}

将JSON字符串转换为对象

以上是 React16+React-Router4 从零打造企业级电商后台管理系统--笔记 的全部内容， 来源链接： utcz.com/z/381655.html