react与后台交互获取并渲染数据(适合初学者)一个完整的demo

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dayexiaofan/article/details/83281156
  1. 前提:
    已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西
  2. 提示:
    因为这里不能直接访问到我的后台,所以这里用虚拟数据作为后台
  3. 安装json-server
    首先你的电脑中需要安装nodejs,建议使用最新版本。然后全局安装json server.
npm install json-server -g

可以使用json-server -h 来查看是否安装成功

  1. 在src同级目录下创建mock文件夹,里面新建data.json 写入数据
{
  "data": [
    {
      "title": "湘潭夜跑",
      "author": "张三",
      "date": "2018年9月20日"
    },
    {
      "title": "爬岳麓山",
      "author": "李四",
      "date": "2018年9月30日"
    },
    {
      "title": "湘潭夜跑",
      "author": "张三",
      "date": "2018年9月20日"
    }
  ]
}

然后打开新的terminal输入

json-server mock/data.json -p 3003

在这里插入图片描述
在这里插入图片描述

  1. 反向代理
    在package.json文件中添加下条语句
  "proxy":"http://localhost:3003"

在这里插入图片描述
注意:这里需要重新运行(npm start)该项目package.json更改的数据才会生效

  1. 在src目录下新建一个testCorrespond文件夹里面新建两个js文件,分别为PostItem.js、PostList.js
  2. PostItem.js
import React,{Component} from 'react';
class PostItem extends Component{
    render() {
        const { title,author,date} = this.props;
        return (
            <div>
                <div>
                    { title }
                </div>
                <div>
                    创建人:<span>{ author }</span>
                </div>
                <div>
                    创建时间:<span>{ date }</span>
                </div>
            </div>
        );
    }
}
export default PostItem;
  1. PostList.js
import React,{Component} from 'react';
import PostItem from './PostItem';
class PostList extends Component{
    constructor(props){
        super(props);
        this.state = {
            news:[
                {
                    title:"大家一起来讨论React吧",
                    author:"张三",
                    date:"2017-09-01 10:00"
                }
            ]
        };
    }
    handle_click = ()=>{
        let t = this;
        fetch("/data", {method: 'GET'}).then(
            function (res) {
                console.log(res);
                res.json().then(function (data) {
                        console.log(data);
                        t.setState({
                            news:data
                        });
                    }
                )
            });
    };
    render() {
        return (
            <div>
                <button onClick={this.handle_click}>button</button>
                <br/>
                帖子列表:
                    {this.state.news.map((item,i) =>
                    <div key={i}>
                    <PostItem
                        title = {item.title}
                        author = {item.author}
                        date = {item.date}
                    />
                    </div>
                    )}
            </div>
        );
    }
}
export default PostList;

最后别忘记修改根目录下的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import PostList from "./testCorrespond/PostList"
// import OrdinaryActivityList from './component/OrdinaryActivityList/index';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<PostList />, 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: http://bit.ly/CRA-PWA
serviceWorker.unregister();

ok
项目跑成功后的界面显示
在这里插入图片描述
点击button后
在这里插入图片描述
打开控制台可与查看请求信息和数据
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页