关于web:一篇文章解析如何将Web仪表盘添加到React应用程序

点击获取工具 >>
本文介绍的办法实用于客户端 – 服务器模型，您须要一个服务器（一个 ASP.NET Core 或 ASP.NET MVC 后端）和一个客户端（前端）应用程序，其中包含所有必须的款式、脚本和 HTML 模板。请留神，客户端上的脚本版本应与服务器上的库版本匹配，直至主要版本。

本教程将为大家介绍如何将 DashboardControl 组件增加到 React 应用程序并显示 Web Dashboard。

先决条件

• 确保在计算机上安装 Node.js 6+ 和 npm 5.2+。
• 应用本教程须要相熟 React 的基本概念和模式，学习根底：reactjs.org。

创立 React 应用程序

在命令提示符下，创立一个 React 应用程序：

cmd

npx create-react-app dashboard-react-app

创立我的项目后，导航到创立的文件夹：

cmd

cd dashboard-react-app

装置 Dashboard Package

devexpress-dashboard npm 软件包将 devextreme 和 @ devexpress / analytics-core 援用为 peerDependencies，peerDependencies 软件包应手动装置，这使开发人员能够管制 peerDependencies 软件包的版本，并保障该软件包装置一次。devexpress-dashboard-react 软件包蕴含 DashboardComponent 组件。

装置具备必须的 peerDependencies 的仪表板软件包：

cmd

npm install devexpress-dashboard@20.2-next devexpress-dashboard-react@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next devextreme-react@20.2-next --save

批改利用内容

如下所示批改 App.js 文件，以在页面上显示仪表板组件：

javascript

`import React from ‘react’;
import ‘./App.css’;
import {DashboardControl} from ‘devexpress-dashboard-react’;

function App() {
return (
<div style={{position : ‘absolute’, top : ‘0px’, left: ‘0px’, right : ‘0px’, bottom: ‘0px’}}>
<DashboardControl style={{height: ‘100%’}}
endpoint=”https://demos.devexpress.com/services/dashboard/api”>
</DashboardControl>
</div>
);
}

export default App;`

DashboardControlOptions.endpoint 属性指定用于将数据申请发送到服务器的 URL，该值应由托管 Web Dashboard 的服务器端的根本 URL 和路由前缀（在 MVC) / .NET Core) MapDashboardRoute 属性中设置的值）组成。

增加全局款式

用以下全局款式替换 index.css 文件内容：

css

`@import url(“../node_modules/jquery-ui/themes/base/all.css”);
@import url(“../node_modules/devextreme/dist/css/dx.common.css”);
@import url(“../node_modules/devextreme/dist/css/dx.light.css”);
@import url(“../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css”);
@import url(“../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css”);
@import url(“../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css”);
@import url(“../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css”);`

运行应用程序

运行应用程序。

cmd

npm start

在浏览器中关上 http://localhost:3000/ 来查看后果，Web Dashboard 显示存储在预配置服务器（https://demos.devexpress.com/…）上的仪表板。请依照以下阐明配置服务器：

• Server-Side Configuration (ASP.NET Core)
• Server-Side Configuration (ASP.NET MVC)