Han_Zhou_Z的博客

React Hooks的使用

Han_Zhou_Z — Mon, 28 Mar 2022 22:01:28 +0800

一、React Hooks的使用 1、React的组件 React的组件创建方式，一种是类组件，一种是纯函数组件（1）类组件：class 类名 extends React.Component{} （2）函数组件：function 函数名([参数]){} 2、函数组件和类组件的区别（1）函数组件没有状态(state)，类组件有（2）函数组件没有生命周期,类组件有(挂载、更新、销毁) （3）函数组件没有this，类组件有注意：函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件

antd的基本应用

Han_Zhou_Z — Sun, 27 Mar 2022 22:33:49 +0800

一、antd的基本应用 1、ant design库主要是用于开发企业级的中后台产品。来自于'蚂蚁金服' 2、使用过程（1）安装安装组件库：npm install antd --save或yarn add antd 安装图标库：npm install @ant-design/icons -s （2）引用引用css文件：根据需要,例如在App.css文件中引入@import "~antd/dist/antd.css"; 组件的引用：根据需要在自定义组件中按需引入import { B...

Vue内置指令（v-if和v-show的区别）

Han_Zhou_Z — Fri, 18 Mar 2022 22:11:40 +0800

一、v-if、v-else-if、v-else（条件渲染指令） 1、v-if后接的是等号：等号后的内容必须是布尔值 2、v-if的基本用法

软件的模式(MVC、MVVM、MVP)

Han_Zhou_Z — Fri, 18 Mar 2022 21:18:02 +0800

一、MVC框架 1、MVC概念 MVC全名是Model View Controller，是模型(Model)－视图(View)－控制器(Controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。 2、角色说明类型定义作用使用方式 M（Model）

React路由示例

Han_Zhou_Z — Thu, 10 Mar 2022 14:24:25 +0800

1、创建Home.js import React,{Component} from 'react'; import About from "./About"; class Home extends Component{ render() { return (

Home页面

) } }

React页面路由

Han_Zhou_Z — Thu, 10 Mar 2022 13:48:34 +0800

一、页面路由 1、页面路由的方式（1）hash模式：在url后面带# 这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。 hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。缺点：传递参数的方式是在url后拼接,会有体积的限制使用到的api： window.location.hash = 'qq' //.

react组件的三大属性之三refs

Han_Zhou_Z — Thu, 10 Mar 2022 09:38:40 +0800

目录一、react组件的三大属性之三refs 1、react组件的三大属性 2、使用方法 3、模块化管理 4、回调Refs 一、react组件的三大属性之三refs 1、react组件的三大属性（1）props属性：封装传递给组件的参数（2）state属性：组件的状态,当值发生改变后,重新渲染组件（3）refs属性通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) --- DOM元素或render函数中的react元素的代理(句柄)

fetch与axios的区别

Han_Zhou_Z — Thu, 10 Mar 2022 08:13:56 +0800

总结：fetch与axios的区别 axios("http://xxx/xxx.json？a=123'").then((res)=>{ console.log(res)//这里的res是响应结果 }) fetch("http://www.baidu.com").then((res)=>{ console.log(res);//是一个综合各种方法的对象，并不是请求的数据 }).then(data=>{ //data是请求数据 }) fetch返回的是一个未

react中内置的fetch模块

Han_Zhou_Z — Wed, 09 Mar 2022 23:01:28 +0800

一、react中内置的fetch模块的使用 1、fetch是react内置的XMLHttpRequest对象的替代方案,使用时不需要安装 2、使用方法 fetch(url).then(res => { return res.json() //res不是需要的请求数据 }).then(data => { console.log(data) //data是请求数据 }).catch(e =>{

react中axios模块的使用（案例）

Han_Zhou_Z — Wed, 09 Mar 2022 22:39:02 +0800

1、跨域的问题，需要安装跨域模块 npm install cors 2、app.js导入跨域模块 var cors = require('cors'); app.use(cors()); 3、对数据库进行链接配置新建dbconfig.js文件 const Sequelize = require('sequelize'); const MysqlDB = new Sequelize('dbms','root','178945688',{ host: 'localhost',

react中axios模块

Han_Zhou_Z — Wed, 09 Mar 2022 21:34:43 +0800

array.map(function(currentValue, index, arr), thisIndex) currentValue：必须。当前元素的的值。 index：可选。当前元素的索引。 arr：可选。当前元素属于的数组对象 let array = [1,2,3]; let newArray = array.map((item) => { return item * item; }) console.log(newArray) // [1, 4, 9] .

React脚手架

Han_Zhou_Z — Tue, 08 Mar 2022 09:23:57 +0800

一、React的脚手架：create-react-app 1、全局安装：npm install -g create-react-app 2、创建项目（1）create-react-app 项目名称（2）npx create-react-app 项目名称 3、启动项目（1）第一步：进入项目所在的目录cd 项目名称（2）第二步：运行项目npm start 4、示例：在React中使用bootstrap库（1）安装bootstrap npm inst...

React的事件处理

Han_Zhou_Z — Mon, 07 Mar 2022 22:46:43 +0800

一、React的事件处理 1、与DOM事件处理的不同之处（1）React事件的命名方式：小驼峰方式，DOM的命名方式是小写例如：DOM的命名：onclick React的命名：onClick （2）事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值 ...

React中的render()

Han_Zhou_Z — Mon, 07 Mar 2022 11:23:45 +0800

一、React中的render() 1、render()：是 class 组件中唯一必须实现的方法 2、当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：（1）React 元素。通常通过 JSX 创建。例如，

会被 React 渲染为 DOM 节点，会被 React 渲染为自定义组件，无论是

还是

React中state属性和生命周期

Han_Zhou_Z — Mon, 07 Mar 2022 11:10:49 +0800

一、React组件的state属性和生命周期当组件与用户交互时,数据会发生变化，就要用到组件内的state属性；当state值发生改变时 react会重新渲染(刷新)组件，从而保证UI界面和数据的一致 1、state的定义 this.state = { 属性名：值 } 2、更新状态(state):不能直接给状态机中的属性赋值,必须通过该方法来更新状态机中的属性值 this.setState({ 属性名：新的属性值 }) 3、组件的生命周期（1）挂载(mount) 当组件创建成功,

React Props

Han_Zhou_Z — Mon, 07 Mar 2022 08:59:08 +0800

目录一、Props属性 1、props的用处 2、通过Props初始化表单 3、案例（明信片）一、Props属性 1、props的用处既然React组件可以通过JavaScript函数方式实现，那么React组件就可以接受参数的传入。React框架定义了一个Props的概念，专门用来实现React函数组件接受参数的输入。

JSX语法和React组件

Han_Zhou_Z — Sun, 06 Mar 2022 15:19:52 +0800

目录一、JSX语法 1、JSX的算术表达式 2、条件表达式 3、嵌入表达式 4、对象表达式 5、函数表达式 6、数组表达式 7、样式表达式 8、注释表达式二、React组件 1、函数组件 2、类组件 3、组件的组合一、JSX语法 JavaScript XML，jsx是JavaScript的语法的扩展,支持自定义属性；是react的内置的语法，其基本语法格式为 const 元素名 = ( <根标签名> <子标签>

React简介

Han_Zhou_Z — Sun, 06 Mar 2022 14:36:58 +0800

一、React概述 1、是一个JavaScript库，旨在简化可视化界面的开发 2、基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写 3、React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装二、ReactDOM.render()方法的语法格式 1、ReactDOM.render(element,container[,callback]) 2、element参数：必须，表示渲染的源

在项目中上传文件

Han_Zhou_Z — Sat, 05 Mar 2022 13:00:46 +0800

一、在项目中上传文件(图片) 1、将图片上传后保存到数据库中（1）数据库中保存图片的什么信息：将图片在服务器中的存储路径保存到数据库中（2）修改数据模型：（3）图片上传到服务器,再从服务器保存到数据库(图片的保存信息+其他的表单数据) A、先上传图片,将图片在服务器上存储地址返回客户端 B、将服务器返回的图片的存储地址和其他的表单信息一起发送的服务器端,由服务器存储到数据库中（4）上传接口：接收上传的图片保存到指定的路径下,将存储路径和服务器地址拼接成字符串返回给客户端（5）将图片

文件（图像）的上传

Han_Zhou_Z — Sat, 05 Mar 2022 12:34:40 +0800

一、使用FormData和formidable实现二进制文件(图片)的上传 1、FormData对象能够处理页面中的表单数据，使用new关键字实例化FormData()构造函数来创建FormData对象。 var formData = new FormData(form); FormData()构造函数接受form表单对象作为参数。它表示将普通的form表单对象转换为FormData对象。 FormData对象提供了处理表单数据的方法，不需要拼接表单数据字符串的繁琐工作，使用起来非常方便。（