React+Antd+Axios学习总结

末蓝、 2024-04-18 19:34 14阅读 0赞

## 一. 一些基本概念 ##

#### 关于Node。 ####

Node.js 是一个JavaScript 的运行环境，可以让JavaScript运行在服务端。 Node让JS也可以写网站后台程序，可以搭建WEB服务器。  
（上面是我胡说的我其实并不知道它是怎么回事。）

#### 关于ES6。 ####

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。React默认把ES6做为首选标准，其写法可能同以往不太一样。  
let, const, class, extends……这些是ES6最常用的几个语法。详细介绍请看上阮一峰大神的博客，链接如下  
ES6入门: [http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com]。  
（PS:阮一峰真的是大神啊！作为一个程序员一手创了卡尔维诺中文站！国内第一卡大人忠实铁粉是一位前端工程师！！想要签名嘤嘤嘤）  
（顺便……JS终于可以支持类了，所以Java程序员学React这些理论上更容易嘛→\_→）  
React中常见的ES6写法还有：  
引入模块用import实现：

import 一个组件 from '模块地址'

导出模块用export default实现：

export default class 一个组件

定义react组件用继承自React.Component的class来实现：

class 一个组件 extends React.Component { 
      render() { 
        ...
      }
    }

这些在后面创建完工程后可以仔细研究。

## 二. 开发环境 ##

Nodejs+Npm+Yarn。安装过程略。  
Npm是Node.js的包管理器，是全球最大的开源库生态系统。  
Yarn跟npm的作用差不多，缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此速度更快。

首先需要在系统中安装nodejs，可利用node-v，npm -v，yarn-v查看版本。

![在这里插入图片描述][20190911091728632.png]  
可以安装cnpm淘宝镜像，提高速度。以后直接使用cnpm命令代替npm命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者是直接修改npm的镜像地址，仍然使用npm命令。 两种方法都可以

npm config set registry https://registry.npm.taobao.org

## 三. 创建工程 ##

虽然React同Vue一样可以直接在html中引入js文件，但一般来讲还是通过脚手架搭建完整工程以用做开发。

很多脚手架可以创建React项目，比如Dva就是很好的react框架，封装好了router，redux等模块。然而这里我们先用最简单基本的 `create-react-app` 快速构建 React 开发环境。create-react-app毕竟是官网推荐的脚手架，虽然创建的工程简单但是对初学者看着还比较友好。

第一步，先安装create-react-app：

npm install -g create-react-app

第二步;到某个文件目录下执行,比如先进入D盘下某个新建文件夹下，然后进入cmd,然后再执行下面的命令

create-react-app my-app  //my-app是新创建的React项目名称

此命令创建名为my-app的React工程。  
创建完毕后，进入工程执行npm start，若正确则访问[http://localhost:3000/][http_localhost_3000]可看到欢迎页面。

cd my-app
    npm start

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
React工程结构如下，这是一个最基本的react工程：  
（注：如果你是用Dva或者其他脚手架搭建的工程，可能工程结构会比这个复杂很多，但是我们不妨先从最基本的入手看看react的各种操作……）  
![在这里插入图片描述][20190911092858212.png]  
**public文件夹**中默认存在index.html文件，可以看到只有一个`id=root`的`div`，这是我们应用组件的根节点，在react开发中我们不需要去直接编写html文件，而是通过js生成页面，渲染到这个根节点中。

**src文件夹**中存放css与js。  
src文件中的样式表及js可以清空自己重写。  
`index.js`是整个工程的入口，可以看到，将`<App />`这个组件渲染到了刚刚`index.html`的`root`节点里。

现在我们来看被引入的这个`src/App.js`文件。这里面有页面上显示的logo和文字，现在对它做一些修改。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]  
回到浏览器，发现页面已被更改。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]

## 四.Antd组件库 ##

虽然知道你们更关注工程中的数据逻辑，不过作为一个有尊严的设计师，这一步还是要先讲UI组件库。  
Ant Degisn是个很好的React UI库，看起来跟我们熟知的bootstrap有点类似，从页面布局到按钮到文字提示泡应有尽有。安装需要通过以下两步。

npm install babel-plugin-import --save-dev
    npm install antd --save

当然用`yarn add`安装也可以。  
安装完毕后，首先，index.js中引入antd的css文件。

import 'antd/dist/antd.css';

之后，在需要用到antd的组件js中引入所需部件即可。比如想往app.js中加几个按钮。

import {  Button } from 'antd';
    
    render() { 
        return (
          <div className="App">
            <div>
                <Button type="primary">Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <Button type="danger">Danger</Button>
            </div>
          </div>
        );
    }

效果如下：  
![在这里插入图片描述][20190911093721225.png]  
然而在IE浏览器11下，会报不支持startsWith的错。  
需要安装`npm install --save babel-polyfill`  
然后在入口文件index.js中引入`import 'babel-polyfill'`;  
因为startWith是2015年语言规范里更新的，ie始终没有支持，需要用低版本的js实现高版本的js。  
这样Antd也可以愉悦的使用了。

## 五.基本操作 ##

搞完按钮之后，我们来写一个最基本的函数。

#### 一. 比如点击按钮触发个事件 ####

虽然语法跟以往js看起来有点差别但本质其实是一样的，上面写个函数下面onClick。

class App extends Component { 
        clickMe(){   
            alert("hi!");
        } 
    
        render() { 
            return (
              <div className="App">
                <div>
                    <Button type="primary" onClick={ this.clickMe}>点我一下</Button>
                </div>
              </div>
            );
        }
    }

这样，点击之后：  
![在这里插入图片描述][2019091109404519.png]

#### 二.比如前后台传输数据 ####

传输数据一般推荐使用axios，跟ajax差不多，记得要先用npm安装。

npm install axios

首先，先用antd搞一个Table表格，在刚刚的按钮下面加上Table标签。这个标签有两个属性，columns是表头，dataSource是数据，详见Antd的官网。

render() { 
            var data = this.state.data; //记得定义
            var columns = this.state.columns;
            return (
              <div className="App">
                ……  //省略刚才写的部分代码
                <Table columns={ columns} dataSource={ data}/>
              </div>
            );
        }

columns和data我们在state里面定义，state对象简单来讲是react特有的一个存储数据的地方，state写在constructor里。  
补充说明一点，constructor（**解释：就是“构造函数”**）是ES6中类的一个默认方法，一个类必定有一个constructor方法，即使不显示定义，生成对象时也会被默认添加。它的详细介绍请继续看阮一峰大神的博客:)

constructor(props) { 
            super(props);
            //状态值
            this.state = { 
                columns: [{  //定义姓名、性别两列
                  title: '姓名',
                  dataIndex: 'name',
                }, { 
                  title: '性别',
                  dataIndex: 'gender',
                }],
                
                data: [] //先空着，所以下面的运行结果里面暂时是空的
            }
        }

这个时候，理论上界面是这样的。  
![在这里插入图片描述][20190911094709681.png]  
回到axios上，我们希望通过点击按钮读取到表格内容。  
随便找个数据读一下，我这里用的json-server把json串扔8080端口了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]  
在react工程里，先把axios引入。（`解释：“axios”就类比于ajax一样`）

import axios from 'axios';

然后加一个读数据的函数`readData()`并跟按钮绑定上，可以看到写法跟ajax基本是一样的。  
（基础路径可以设置在index.js里，此处为了简化我就直接把绝对路径贴过来了O.O）

readData(){   
            axios.get('http://localhost:8080/data')
              .then(res => { 
                console.log(res); //先输出到控制台看一下
              })
              .catch(error => { 
                console.log(error);
            });
        }

点击按钮，理论上控制台能看到数据读过来啦。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]  
这里注意一点，如果是读另一个ip的数据的话，会报跨域的错，用nginx代理一下才行，但nginx跨域的设置本篇先不讲了→\_→  
那么，把这个读过来的数据用`setstate()`放到刚刚我们空着的state里，在react中，`setstate()`用于给state中的状态赋值。

//加了bind(this)以后，就可以在readData()函数里面使用到本组件的this对象了
    <Button onClick={ this.readData.bind(this)}>读取表格数据</Button>

注意Button按钮绑定函数要加上`bind(this)`，因为在ES6中React是不会自动绑定this的，不加的话会报错’setState’ undefined。

readData(){   
            axios.get('http://localhost:8080/data')
              .then(res => { 
                this.setState({ 
                    data: res.data
                })
              })
              .catch(error => { 
                console.log(error);
            });
        }

点完了之后，读来的数据就显示到表格中啦。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]

本文转载自;https://www.jianshu.com/p/65ab0b80c83e

[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/
[20190911091728632.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/08e67d62ff9145788bf458e5f9707270.png
[http_localhost_3000]: http://localhost:3000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e39e2ff11ee043458c1ceb2fa9b55f0d.png
[20190911092858212.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/914522af2a2a461597bb99e1a6cbad93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/19d427f1d2bf466188e685579bee6ece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/edfc8a893564429181d620f80481a94d.png
[20190911093721225.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0f8fe71cb2e347239df7fa210b75578d.png
[2019091109404519.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7a2bc9f8474f4c8db34117b5e8ca3a82.png
[20190911094709681.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/81bcf90d36134f888b4224aa7659ec9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/236b6a18736847cbaf2d6cb48225ef91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/427d7d2a431146b2b1d215ccadc84b3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7cc059a903f241b8a3e810f273b5e2da.png