axiox如何使用 react

2019-03-01 17:57:51 qq_33871178 阅读数 52

1.react中使用ajax 需要使用第三方库  ,建议使用axiox

测试接口

2. npm 安装 axios

  $npm install axios

  代码中引入axios    import axios from 'axios';

3.fetch请求的语法

4.案例

import React, {Component} from 'react'
import axios from 'axios'

export default class Test extends Component{
    state={
        name:'',
        url:''
    }
    // 使用axios
     componentDidMount(){
         const url='https://api.github.com/search/repositories?q=topic:ruby+topic:rails'
    //     axios.get(url)
    //     .then(response => {
    //         console.log(response);
    //         console.log(response.data)
    //         const {url,name}=response.data.items[0]
    //         this.setState({
    //             name:name,
    //             url:url
    //         })
    //     })


    // 使用fetch
    fetch(url)
        .then(response => {
            return response.json()
        })
        .then(data => {
            const {url,name}=data.items[0]
                    this.setState({
                        name:name,
                        url:url
                    })
        })
     }

    
        
    render(){
        const {name,url}=this.state
        if(!name){
            return  <h3>loading ... </h3>
        }else{
            return (
                <div>
                    <h3>start:</h3>
                    <a href={url}>{name}</a>
                </div>
            )
        }
        
    }
}

 

2019-09-11 09:56:07 qq_40241957 阅读数 469

一. 一些基本概念

关于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/
(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查看版本。

在这里插入图片描述
可以安装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/可看到欢迎页面。

cd my-app
npm start

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

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

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

四.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>
    );
}

效果如下:
在这里插入图片描述
然而在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>
        );
    }
}

这样,点击之后:
在这里插入图片描述

二.比如前后台传输数据

传输数据一般推荐使用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: [] //先空着,所以下面的运行结果里面暂时是空的
        }
    }

这个时候,理论上界面是这样的。
在这里插入图片描述
回到axios上,我们希望通过点击按钮读取到表格内容。
随便找个数据读一下,我这里用的json-server把json串扔8080端口了。
在这里插入图片描述
在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);
        });
    } 

点击按钮,理论上控制台能看到数据读过来啦。
在这里插入图片描述
这里注意一点,如果是读另一个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);
        });
    } 

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

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

2018-12-14 13:48:28 yan88888888888888888 阅读数 704

axios的使用  可以在 www.npmjs.com 找到axios

1、安装模块

cnpm install axios --save

 2、引入模块

import axios from 'axios'

3、使用的时候参考文档进行使用  https://www.npmjs.com/package/axios

fetch-jsonp

1、安装模块

cnpm install fetch-jsonp --save

 2、引入模块

import fetch-jsonp from 'fetch-jsonp'

3、使用的时候参考文档进行使用 https://www.npmjs.com/package/fetch-jsonp

 fetch-jsonp 为了解决不支持跨域的数据

2018-02-26 18:34:21 easyClub_hanjixin 阅读数 334

React入门之路


jsx

  • 注释

    1、在标签内部的注释需要花括号
    2、在标签外的的注释不能使用花括号
ReactDOM.render(
    /*注释 */
    <h1>孙朝阳 {/*注释*/}</h1>,
    document.getElementById('example')
);
  • 多标签
    代码中嵌套多个 HTML 标签,需要使用一个标签元素包裹它

React 组件

写一个Hello World 组件
var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World!</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);
混合组件
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
   var WebSite = React.createClass({
      render: function() {
        return (
          <div>
            <Name name={this.props.name} />
            <Link site={this.props.site} />
          </div>
        );
      }
    });

    var Name = React.createClass({
      render: function() {
        return (
          <h1>{this.props.name}</h1>
        );
      }
    });

    var Link = React.createClass({
      render: function() {
        return (
          <a href={this.props.site}>
            {this.props.site}
          </a>
        );
      }
    });

    ReactDOM.render(
      <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>
组件添加事件
 var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },
        render: function() {
          var text = this.state.liked ? '喜欢' : '不喜欢';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。点我切换状态。
            </p>
          );
        }
      });

      ReactDOM.render(
        <LikeButton />,
        document.getElementById('example')
      );

第01节:构建:create-react-app 快速脚手架

我们可以直接访问它的官网:https://github.com/facebookincubator/create-react-app

creat-react-app优点

  • 无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可以上手k开发项目。
  • 高集成性:集成了对React,JSX,ES6和Flow的支持。
  • 自带服务:集成了开发服务器,你可以实现开发预览一体化。
  • 热更新:保存自动更新,让你的开发更简单。
  • 全兼容性:自动处理CSS的兼容问题,无需添加-webkit前缀。
  • 自动发布:集成好了发布成品功能,编译后直接发布,并且包含了sourcemaps功能。
    create-react-app的安装
    安装需要在命令行中进行,在安装create-react-app前,你需要安装node。然后在命令行中输入下面的命令:

windows系统下:

npm install -g create-react-app

Liunx和Mac电脑下:

sudo npm install -g create-react-app 

这里的 -g 是全局安装的意思。

创建React项目
我们安装好create-react-app之后,就可以创建我们的React目录了,命令如下:

create-react-app my-app
1
create-react-app my-app
这里是有个小坑的,就是你的目录名不要使用大写,这样作只要是为了严谨性,因为在Linux下是严格区分大小写的。

启动服务

直接在命令行中输入:

npm start

第02节:构建:generator-react-webpack

react的生态圈非常庞大,第三方的构建工具也有很多种,这节课介绍一个在业内比较流行的构建工具generator-react-webpack,它是需要yeoman的支持的。

优点介绍:

  • 基于webpack构建,可以很容易的配置自己需要的webpack。
  • 支持ES6,集成了Babel-Loader。
  • 支持不同风格的CSS(sass,less,stylus)。
  • 支持PostCSS转换样式。
  • 集成了esLint功能。
  • 可以轻松配置单元测试,比如Karma和Mocha安装
    安装还是在命令行用npm进行安装,不过在全局安装generator-react-webpack之前,你可以先安装yeoman。命令如下:
npm install -g yo
npm install -g generator-react-webpack

创建目录
我们先用命令自行创建一个文件:new-react-demo

mkdir new-react-demo

用生成器生成我们的项目目录

yo react-webpack
用npm start就可以查看效果了。

我们在视频中还讲解了目录结构,让你更好的掌握generator-react-webpack.

总结:generator-react-webpack更容易配置webpack,让你适应你的实际项目,并且有很强的扩展功能。一般我们团队都会使用这个脚手架来生产react的目录结构,但也有缺点,就是要依靠yeoman来生成。

第05节:路由:Hello React路由

Router包安装:

安装包还是要打开命令行工具,使用npm来进行安装。

npm install --save react-router react-router-dom

react-router:是基本的router包,里边函的内容较多,但是在网页开发中有很多用不到,现在的市面上的课程讲的基本都是这个包的教程。

react-router-dom:随着react生态环境的壮大,后出现的包,这个包比react-router包轻巧了很多。

注意:其实安装了react-router包就不用安装了react-router-dom包了,这里我们只是为了讲课方便所以安装了两个包。在实际开发中,请根据需要进行安装。安装时使用 - -save,因为这是要在生产环境中使用的。

复习component

以前学习过React的组件如何编写,这里简单复习一下。我们作一个A页面的组件(还是接着上节课的程序继续作),我们在/app文件夹下新建一个jspang.js页面。然后引进React包,并编写一个A页面的组件。请看下面的代码。

jspang.js

import React from 'react';
export default class jspang extends React.Component{
    render(){
        return(
            <div>A默认页面</div>
        );
    }
}

import React from 'react';
import ReactDOM from 'react-dom';
import Jspang from './jspang';

ReactDOM.render(
    <Jspang/>,
    document.getElementById("app")
);

引入完成后,预览可以看到我们写的A页面的组件。通过上边基本的练习,我们有了一定经验,那么接下来我们仿照上面的方法制作两个新组件,Jspangb和JSPangc。代码如下:
jspangb.js

import React from 'react';
export default class jspangb extends React.Component{
    render(){
        return(
            <div>B页面</div>
        );
    }
}

jspangc.js


import React from 'react';
export default class jspangc extends React.Component{
    render(){
        return(
            <div>C页面</div>
        );
    }
}
````




<div class="se-preview-section-delimiter"></div>

import React from ‘react’;
export default class jspangc extends React.Component{
render(){
return(

C页面

);
}
}

写完三个页面组件以后,我们把这三个页面都引入到index.js文件里边。





<div class="se-preview-section-delimiter"></div>

import Jspang from ‘./jspang’;
import Jspangb from ‘./jspangb’;
import Jspangc from ‘./jspangc’;

引入和书写路由
三个页面都已经作好,现在就需要路由来切换他们了,先用import引入我们的路由包,这里我们用两个模块,一个是Router(我自己叫它路由器),另一个是Route(我自己叫它路由)。





<div class="se-preview-section-delimiter"></div>

import {BrowserRouter as Router , Route} from ‘react-router-dom’;


然后我们改写文件,增加路由设置。





<div class="se-preview-section-delimiter"></div>

ReactDOM.render(

        <Route exact path="/" component={Jspang} />
        <Route  path="/Jspangb" component={Jspangb} />
        <Route  path="/Jspangc" component={Jspangc} />
    </div>
</Router>,
document.getElementById("app")

);





<div class="se-preview-section-delimiter"></div>

ReactDOM.render(

        <Route exact path="/" component={Jspang} />
        <Route  path="/Jspangb" component={Jspangb} />
        <Route  path="/Jspangc" component={Jspangc} />
    </div>
</Router>,
document.getElementById("app")

);

注意:这里的exact是精确匹配的意思,比如我们有多层路由进行嵌套时,exact可以帮助我们精确匹配到你想跳转的路由。

我们路由已经设置完毕了,但是我们现在还不能进行切换,那我们就做个切换的组件,命名为<nav/>





<div class="se-preview-section-delimiter"></div>

####制作Nav组件
在app文件夹下新建一个nav.js的文件,先引入React和react-router-dom两个包。





<div class="se-preview-section-delimiter"></div>

import React from ‘React’;
import {NavLink} from ‘react-router-dom’;
import React from ‘React’;
import {NavLink} from ‘react-router-dom’;

编写基本的nav组件,具体解说看视频里会进行讲解。


const NavBar = () =>(
<div>
    <div>
        <NavLink exact to='/'>Jspanga</NavLink> |&nbsp;
        <NavLink to='/Jspangb'>Jspangb</NavLink> |&nbsp;
        <NavLink to='/Jspangc'>Jspangc</NavLink>
    </div>
</div>
)

export default NavBar;

const NavBar = () =>(
<div>
    <div>
        <NavLink exact to='/'>Jspanga</NavLink> |&nbsp;
        <NavLink to='/Jspangb'>Jspangb</NavLink> |&nbsp;
        <NavLink to='/Jspangc'>Jspangc</NavLink>
    </div>
</div>
)

export default NavBar;
组件编写完成后,引入index.js,并添加<Nav/>标签到代码里。





<div class="se-preview-section-delimiter"></div>

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {BrowserRouter as Router , Route} from ‘react-router-dom’;
import Jspang from ‘./jspang’;
import Jspangb from ‘./jspangb’;
import Jspangc from ‘./jspangc’;
import Nav from ‘./nav’;

ReactDOM.render(

<Router>
    <div>
     <Nav/>
        <Route exact path="/" component={Jspang} />
        <Route  path="/Jspangb" component={Jspangb} />
        <Route  path="/Jspangc" component={Jspangc} />
    </div>
</Router>,
document.getElementById("app")

);

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {BrowserRouter as Router , Route} from ‘react-router-dom’;
import Jspang from ‘./jspang’;
import Jspangb from ‘./jspangb’;
import Jspangc from ‘./jspangc’;
import Nav from ‘./nav’;

ReactDOM.render(

<Router>
    <div>
     <Nav/>
        <Route exact path="/" component={Jspang} />
        <Route  path="/Jspangb" component={Jspangb} />
        <Route  path="/Jspangc" component={Jspangc} />
    </div>
</Router>,
document.getElementById("app")

);
“`
现在可以进行预览了,也可以顺利的切换页面内容了,说明路由已经起作用了。当然这只是路由最简单的用法,下节课我们会继续学习路由的知识。

原文链接jspang.com未完待续》》》

jspang.com

2019-04-18 15:50:06 ferrysoul 阅读数 1482

一。在组件中引用

组件
import React, { Component } from 'react';
import './index.css';
import axios from 'axios';


class Login extends Component {
  constructor(props) {
    super(props);
  }
  //当组件输出到 DOM 后会执行 componentDidMount()
  componentDidMount() {
    const _this = this; //先存一下this,以防使用箭头函数this会指向我们不希望它所指向的对象。
    axios
      .get("/api/login")
      .then((response) => {
          console.log(response.data);
        _this.setState({
          users: response.data,
          isLoaded: true
        });
      })
      .catch(function(error) {
        console.log(error);
        _this.setState({
          isLoaded: false,
          error: error
        });
      });
  }

  render() {
    return <div>login</div>;
  }
}

export default Login;

二。添加到React原型上

在index.js入口问价中添加

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import axios from "axios";

React.Component.prototype.axios = axios;

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

在组件中使用

import React, { Component } from 'react';
import './index.css';
// import axios from 'axios';


class Login extends Component {
  constructor(props) {
    super(props);
  }
  //当组件输出到 DOM 后会执行 componentDidMount()
  componentDidMount() {
    const _this = this; //先存一下this,以防使用箭头函数this会指向我们不希望它所指向的对象。
    this.axios
      .get("/api/login")
      .then((response) => {
          console.log(response.data);
        _this.setState({
          users: response.data,
          isLoaded: true
        });
      })
      .catch(function(error) {
        console.log(error);
        _this.setState({
          isLoaded: false,
          error: error
        });
      });
  }

  render() {
    return <div>login</div>;
  }
}

export default Login;

 

react 学习

阅读数 27

axios同步请求--

阅读数 18208