从前后端数据交互玩转react整合echarts

同学，一起玩react整合echarts呀

欢迎各位小伙伴一起来我公众号玩呀=>前端打怪记,一起学习呀！

React整合echarts

1、整体思路:

2、后端实现:

​ 这是一个纯前端的项目，并不涉及到数据库层面。但是为了更好地模拟后端数据请求，这里采用express和mock.js实现后端数据模拟。express是Node.js的一套后端web服务开发库，具体查看expressjs.com.cn。mock.js是用来模拟后台数据的一种JavaScript库，我们可以很方便的用来模拟后台数据接口，具体查看mockjs.com。

​ 后端目录结构如下:

.
├── package-lock.json
├── package.json
├── server.js
└── yarn.lock

文件说明: package-lock.json、package.json、yarn.lock这三个文件都是包管理文件。server.js表示是我们后台服务所需要的文件。

注意:node_modules已被忽略。

先对package.json进行分析:

{
   
  "name": "p2",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "express": "^4.17.1",
    "mockjs": "^1.1.0",
    "nodemon": "^2.0.15"
  },
  "dependencies": {
   
    "out-fileinfo": "^1.0.3"
  }
}

注意:

    "start": "nodemon server.js"

这是我们使用node脚本启动服务的一句命令，服务名称叫做"start",启动脚本是nodemon。这个命令是我们安装一个监听服务命令，安装方式可以使用npm或者yarn进行安装。

#npm
npm i nodemon -D
#yarn 
yarn add nodemon -D

启动之后是酱紫：

 "devDependencies": {
   
    "express": "^4.17.1",
    "mockjs": "^1.1.0",
    "nodemon": "^2.0.15"
  },

这三个就是我们需要的开发依赖了，在demo里面能够愉快地使用它们。

现在对server.js进行具体分析:

const express = require('express');
const app = new express();

app.get('/',(req,res) => {
   
    res.send("Hello,React!");
})

app.listen(9999,() => {
   
    console.log('数据服务器已经启动...');
})

这是express最简单的使用,引入express框架之后，我们需要进行实例化它，并得到app这个对象。

app.get('/',(req,res) => {
   
    res.send("Hello,React!");
})

这段代码表明app采用get方式访问根目录,而且最后返回Hello,React!字符串。

最后任何一个web服务器，必须有一个监听的端口吧，所以我们这里让服务器监听9999端口。

打开浏览器访问:localhost:9999不出意外就会看到咱们那个Hello,React!了。

但是，咱们现在只是跑出了一个简单的字符串呀，所以，接下来我们另外一个mock.js就要派上用场了！

解决问题之前先说一下mock.js简单使用,具体用法，请移步mockjs.com食用效果更佳！

//Mock简单测试接口
app.get('/mock',(req,res) => {
   
    const mockArray = Mock.mock({
   
        'id':1, //表示id起始值为1
        'name': Mock.Random.cname() //随机取一个名字
    })
    res.send(mockArray);
})

不出意外的话，返回的数据便是我们一条一个对象:

开始分析我们具体应用场景:

1. 使用柱形图完成不同学生分数比较
2. 使用饼图完成一个学生不同科目分数比较
3. 使用雷达图从学习时长、运动时长、思考时长、睡觉时长、游戏时长等五个维度评价该学生一天时间利用情况

因为我们需要三种不同的场景，所以需要使用mock.js模拟三种不同的接口。

分析:

对于第一种情况，我们采用循环+mock形式模拟七个同学进行比较,具体代码如下：

//不同学生分数比较
app.get('/mockStu',(req,res)=> {
   
    const stu=[];
    for(let i=0;i<7;i++) {
   
    
        stu.push( Mock.mock({
   
            'id':i+1,
            'name': Mock.Random.cname(), //随机生成姓名
            'grade': Mock.Random.natural( 0, 100 )//随机生成0-100之间的自然数
        }))
        
    }
    res.send(stu)
})

返回结果如下（数据是随机的）:

[{
   "id":1,"name":"段桂英","grade":43},{
   "id":2,"name":"锺超","grade":8},{
   "id":3,"name":"汤霞","grade":33},{
   "id":4,"name":"魏强","grade":21}