- 博客(70)
- 收藏
- 关注
RSS订阅原创 前端工程化与webpack_工程化（一）
前端工程化实际的前端开发：模块化 （js的模块化、css的模块化、其他资源的模块化）组件化 （复用现有的UI结构、样式、行为）规范化 （目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）自动化 （自动化构建、自动部署、自动化测试）前端工程化指的是：在企业级得前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的 “4个现代化（模块化、组件化、规范化、自动化）”前端工程化的好处主要体现在如下两个方面：(1) 前端工
2021-09-09 09:44:12
200
原创 内置Hooks（2）：useEffect
useEffect:执行副作用useEffect，顾名思义，用于执行一段副作用。通常来说，副作用是指一段和当前执行结果的无关的代码。useEffect的具体用法：useEffect(callback, dependencies);第一个为执行的函数callback，第二个是可选的依赖项数组dependencies。其中依赖项是可选的，如果不指定，那么callback就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行。注意的是：useEffect是每个组件r
2021-07-12 17:39:46
285
原创 内置Hooks（1）：useState
React提供的Hooks一共只有10个，比如useSate、useEffect、useCallback、useMemo、useRef、useContext等等。useState：让函数组件具有维持状态的能力我们已经知道state是React组件的一个核心机制，那么useState这个Hook是用来管理state的，它可以让函数组件具有维持状态的能力。也就是说，在一个函数组件的多次渲染之间，这个state是共享的。import React, {useState} from 'react';fun
2021-07-12 15:29:23
327
原创 什么是Hooks?
顾名思义，Hook就是“钩子”的意思。在React中，Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或者事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。对于函数组件，这个结果是最终的DOM树；对于存在缓存的useCallback、useMemo组件，则是在依赖项发生变化时去更新缓存。Hooks的好处：- 简化逻辑复用： 在之前的React使用中难以实现逻辑的复用，必须借助于高阶组件等复杂的设计模式。但是高阶组件会产生冗余的组件节点，让调试
2021-07-12 11:33:13
7505
原创 res.json()
问题：前端向后端发请求，返回res，打印res的值，使用await res.json()首先打印res.json()发现返回值是对象，对象的内容是后端的一个异常处理返回的值，那么res.json()是怎么拿到这个值的？答：不管是请求还是响应都能够包含body对象. body也可以是多种类型的实例.如：ArrayBuffer，ArrayBufferView，Blob，string，URLSearchParams，FormData。Body类定义了以下方法 (这些方法都被 Request和Response所
2021-07-12 10:48:39
7405
原创 什么是npx?
npx 的原理：就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。npx是一个工具，npm v5.2.0引入的一条命令（npx），一个npm包执行器，旨在提高从npm注册表使用软件包的体验 ，npm使得它非常容易地安装和管理托管在注册表上的依赖项，npx使得使用CLI工具和其他托管在注册表。npx的主要特点：1、临时安装可执行依赖包，不用全局安装，不用担心长期的污染。2、可以执行依赖包中的命令，安装完成自动运行。3、自动加载node_module
2021-07-12 10:05:03
3542
原创 react基础知识二
组件通讯组件的props组件是封闭的，复制接收外部数据应该通过props来实现props的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数props接收数据，类组件通过this.props接收props的特点可以给组件传递任意类型的数据props是只读的对象，只能读取属性的值，无法修改对象注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props!...
2021-05-14 17:46:55
193
原创 react基础知识一
React基础1.响应是构建用户界面的JavaScript库2.使用响应时，推荐使用脚手架方式。3.初始化项目命令:npx create-react-app my-app4.启动项目命令: yarn start(或npm start ) 。5.React.createElement()方法用于创建Reaction元素(知道)6.ReactDOM.Render(方法负责渲染Reaction元素到页面中)。为什么脚手架中可以使用JSX语法?1.JSX不是标准的ECMAScript语法，它是 EC
2021-05-12 16:46:35
123
原创 ant Design 的form表单自定义验证
方法1：<Form.Item label="IP地址" name="ip" rules={[ { required: true, message: 'ip 不能为空' }, { pattern:new RegExp(/^(\d{1}|\d{2}|1\d{2}|2[0-4]\d{1}|25[0-4])(\.(\d{1}|\d{2}|1\d{2}|2[0-4]\d{1}|25[0-4])){3}$/), messa
2021-04-28 11:44:46
817
原创 React.forwardRef
React.forwardRef 允许某些组件接收 ref（ref 是为了获取某个节点的实例），并将其向下传递给 子组件React.forwardRef的API中ref必须指向dom元素而不是React组件forwardRef 与 Hook useImperativeHandleuseImperativeHandle 在使用 ref 时可以自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef一起使用.
2021-04-16 15:54:35
4278
原创 useContext的使用
useContext的使用需要在组件之间共享状态，可以使用useContext()使用方法如下:import React, { useContext } from "react";import ReactDOM from "react-dom";//父组件上使用React的Context API，在组件外部建立一个Context。const TestContext= React.createContext({});//组件1const Navbar = () => {//useCon
2021-04-16 11:42:19
1212
1
原创 useState的使用
useState的使用Hooks 是 React 16 中的特性，解决函数组件想使用类组件的一些特性。useState是react自带的一个hook函数，它的作用是用来声明状态变量。从三个方面来看useState的用法，分别是声明、读取、使用（修改）。声明的方式const [ count , setCount ] = useState(0);useState(params) 设置 第一个参数的初始值 count 是解构出的第一个参数 setCount 是第二个参数 是一个函数 用来设置
2021-04-16 11:02:11
15880
原创 服务端渲染（SSR）
服务端渲染（Server-Side Render），是指将单页应用（SPA）在服务器端渲染为 HTML 片段，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。与客户端渲染的区别简称服务端渲染为 SSR，客户端渲染为 CSRSSR 优势在于：更友好的 SEO：爬虫可以直接抓取渲染之后的页面，CSR 首次返回的 HTML 文档中，是空节点（root），不包含内容。而 SSR 返回渲染之后的 HTML 片段，内容完整，所以能更好地被爬虫分析与索引。更快的首屏加载速度：无需等待 Jav
2021-04-13 11:29:19
367
原创 Hook、Context知识
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。State HookuseState 唯一的参数就是初始 state。可以声明多个 state 变量Effect HookuseEffect 是一个 Effect Hook，给函数组件增加了操作副作用的能力。副作用函数还可以通过返回一个函数来指定如何“清除”副作用。useState 一样，你可以在组件中多次使用 useEffect自定义 Hook
2021-04-12 11:19:53
654
原创 vue知识整理
文章目录ElementUI菜单嵌套Menu Attribute菜单属性axios什么是Vue脚手架？VueMVVM架构模式组件基础propVue生命周期方法vue.use()vue-router路由router-viewrouter-linkref使用vue-router的两种工作模式(hash和history)hash(#锚点)history挂载路由导航守卫组件之间共享数据的方式Vue的数据双向绑定vue-table-with-tree-grid树形表格组件关于Vue中的slot-scope="scope
2021-01-28 15:51:13
681
原创 react知识
文章目录React 是什么？通过script引入使用，仅用于学习调试使用react开发环境的搭建安装react特点创建虚拟节点：React.createElement(type,props,children)渲染虚拟节点：React.render(vNode,target)react-domrenderreact原理虚拟domdiff算法JSX优点语法组件组件数据渲染方式组件通讯contextprops单向数据流动：（Props传递数据很繁琐）context跨组件传递数据：组件刷新的场景props属性生命周
2021-01-28 15:50:10
570
原创 CORS解决跨域
CORS解决跨域把这个路由配置放在所有路由的前面，方便调用next操作 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-Wi
2021-01-11 14:59:47
174
原创 WebSocket
WebSocketws模块协议HTTP/HTTPS 协议http/https协议可以总结几个特点：一次性的、无状态的短连接：客户端发起请求、服务端响应、结束。被动性响应：只有当客户端请求时才被执行，给予响应，不能主动向客户端发起响应。信息安全性：得在服务器添加 SSL 证书，访问时用 HTTPS。跨域：服务器默认不支持跨域，可在服务端设置支持跨域的代码或对应的配置。TCP 协议TCP 协议可以总结几个特点：有状态的长连接：客户端发起连接请求，服务端响应并建立连接，连接会一直保
2021-01-11 10:39:20
151
原创 数据爬虫
cheerio模块一个专门为服务器设计包含jquery核心库的第三方模块cheerio.load(html)用于在于html代码以便进一步的精确选取，它不会执行html代码中的css和js爬虫应用(爬取图片到本地)又被称为网页蜘蛛，网络机器人，主要是在服务端去请求外部的 url 拿到对方的资源，然后进行分析并抓取有效数据。const request = require('request');const cheerio = require('cheerio');const
2021-01-11 10:36:35
305
原创 request模块及stream流
request模块可用于发起 http 或 https 请求，可理解成服务端的 ajax 请求。可用于简单的服务器代理，用法和 ajax 类似。安装： npm install request --saveGET 请求 const request = require('request'); request.get('https://cnodejs.org/api/v1/topics?page=1&limit=10', (error, response, body
2021-01-11 10:35:05
1494
原创 ES Module规范
ES Module历史上，JavaScript一直没有模块体系（module），无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，唯独javascript没有，在这之前我们都是借助第三方工具（require.js等）来实现模块化开发，直到ES6 module的出现，成为浏览器和服务器通用的模块解决方案，完全可以取代 CommonJS 和 AMD 规范基本特点每一个模块只加载一次， 并执行一次，再次加载同一文件，直接从内存中读取；每一个模块内声明的变量都是局部变量
2021-01-06 09:17:38
397
原创 Nodejs中的mySQL及mongodb的使用
数据库操作MySQLmySQL的安装配置请自行查找相关资料在Nodejs中使用mySQL安装mysql模块 npm install mysql连接数据库使用连接对象方式 var mysql = require('mysql'); //创建连接对象，并配置参数 var connection = mysql.createConnection({ host : 'localhost', user :
2020-12-25 20:14:01
200
原创 GIT知识点
什么是 GITgit 官方名称： 分布式版本管理器什么是 GITHUBgithub 是一个网站，是一个我们托管项目的平台GIT 安装下载 git 直接到官网下载就可以git官网git下载中心找到和操作系统对应的版本就可以了方法一： 打开官网，直接点击下载下载好以后，直接双击进行安装就行一直下一步就可以，安装再默认路径就行安装完毕后检测一下安装是否成功方法一： 打开 cmd 窗口，输入指令检查# 检测 git 是否安装$ git --versi
2020-12-22 09:04:51
170
原创 gulp压缩文件
压缩文件的步骤创建项目源码的目录结构npm init 生成项目的配置文件创建项目结构（项目中所需要的的文件夹）安装gulp依赖，npm install --save-dev gulp创建一个gulp的配置文件gulpfile.js创建压缩任务把gulp模块引入 gulpfile.js文件中声明一个函数压缩任务的函数： function css(){}，并且这个函数中必须有return在这个函数中写任务：1.gulp.src(需要压缩的css文件地址)gulp.src(’
2020-12-22 08:48:12
297
原创 vue3.x 新特性
vue3.x 新特性1.Vue3.0六大亮点Performance：性能比Vue 2.x快1.2~2倍Tree shaking support：按需编译,体积比Vue2.x更小Composition API: 组合API(类似React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment, Teleport(Protal), Suspense：更先进的组件2.Vue3.0是如何变
2020-11-19 19:46:39
198
原创 父子组件间以及兄弟间的通信
如何进行父子组件间以及兄弟间的通信呢？父子通信：通过props向子组件传递数据子父通信：通过事件向父组件发送消息在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-11-06 16:04:12
380
原创 component组件
什么是组件？组件(Component)是Vue js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is 特性进行了扩展的原生HTML元素。所有的Vue组件 同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子。vue组件分为：局部组件：只能在el定义的范围内使用，全局组件：可以在随意地方使用父子组件：之间的传值问题。父子（属性通信）
2020-11-06 15:22:35
1424
原创 vue-cli 2 低版本的问题
vue-cli 2 低版本的问题当Vue-cli >= 3和旧版本使用相同的vue命令时，低版本的Vue-cli 2会被覆盖。如果仍然需要使用旧版本的 vue init功能，可以全局安装一个桥接工具。npm install -g @vue/cli-initvue init webpack my-project...
2020-11-04 20:49:51
211
原创 Vue-cli的安装及使用
Vue-cli的安装方法一：npm install -g @vue/cliyarn global add @vue/cli检测版本：vue --versionvue-cli的基本使用vue create app_name（命令行）vue ui（图形化界面）vue --help 检测vue提供哪些命令1.vue create app_name（命令行） 转换为大写一些简单的业务逻辑，在插值表达式里面是可以完成的。但是需要注意，开发理念不建议在插值表达式里面书写太多的业务代码，纯粹的输出。 如果有业务代码建议做其他的一些操作，例如定义函数处理。语法： 模型变量 | 过滤器（vuejs提供一些特殊的标识符，函数）表现形式：拿 | 前面的操作的返回结果作为输出 | 后面的输入类似Linux操作系统里面的 管道 类似 php里面的 s
2020-10-28 22:25:50
218
原创 v-show和v-if及区别
v-show指令的作用是：根据真假切换元素的显示状态。原理是修改元素的display,实现显示隐藏。指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏。数据改变之后，对应元素的显示状态会同步更新。<body> <div id="app"> <img v-show="isShow" src="../images/angel.gif" alt=""> <input type="butto
2020-10-27 09:50:20
172
原创 Vue.js模板
<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"></div></body><script src="https://cdn.jsdelivr.net/npm/v
2020-10-26 17:27:32
315
原创 密码学——MD5
MD5（中文名为消息摘要算法第五版）为计算机安全领域广泛使用的一种散列函数，用以提供消息的完整性保护。一般我们的网站业务里面都是使用的 md5sha1 进行信息的加密：需要注意:并不是意味着只有md5加密md5不算加密，只是算获取信息的摘要值，提取信息的特征值，一般做数据的完整性校验。由于md5 拥有三个特点：单向不可逆相同的输入给出相同的输出还可以混淆信息加密就意味着可以解密。常见加密方式： 1. 对称加密 2. 非对称加密密文的传统方式： 数据库存的是密文用户提交的是明
2020-10-22 17:59:09
767
原创 Node.js中出现的问题
学习Node.js中出现的问题的集合1. exec() 方法模型.find({查询条件}).exec( (error, data) => {} ); exec(execute)方法是文档提供的。 http://www.mongoosejs.net/docs/models.html2. 数据未显示通过模型查询回来的数据没办法在视图上面进行循环遍历原因：通过网上的资料查询得到mongoose里面的对象并不是js里面传统的对象，而是由mongoose进行封装的对象，要和我们之前定义的Model相对
2020-10-22 17:05:36
278
原创 Express 应用程序生成器
1、npm install -g express-generator2、express -h3、express --view=ejs myapp4、5、6、
2020-10-21 22:09:02
160
原创 express-art-template
在Express中配置使用art-template下载命令：npm install art-template express-art-template（npm install --save art-template、npm install --save express-art-template）虽然不需要直接require art-template，但是由于express-art-template需要art-template,因此也必须安装art-template.engine函数：用来配置art-
2020-10-21 20:08:08
397
原创 art-template 模板引擎
模板引擎可以把我们的 js 里面的变量或者数据放置在外部的页面里面。 底层实现：正则+替换 具体： 1. 我们外置的页面一般我们叫做模板，模板里面一般会放置很多的占位符。占位符值得是后面可以通过变量替换出来的。 2. 使用模板引擎，把那些占位符通过变量替换出来。{{ kw }} 形如这样的结构叫做占位符，也可以叫做
2020-10-20 21:03:59
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人