DevExpress金牌套包火热销售中 - 慧都网

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

DevExpress使用教程:将Web Dashboard添加到React应用程序

来源:   发布时间:2021-01-05   浏览:61次

下载DevExpress v20.2完整版

DevExpress v20.2汉化资源获取

DevExpress Universal拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

本文介绍的方法适用于客户端 - 服务器模型,您需要一个服务器(一个ASP.NET CoreASP.NET MVC后端)和一个客户端(前端)应用程序,其中包括所有必需的样式、脚本和HTML模板。请注意,客户端上的脚本版本应与服务器上的库版本匹配,直至次要版本。

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

先决条件
创建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/services/dashboard/api)上的仪表板。 请按照以下说明配置服务器:


上DevExpress中文网,获取第一手最新产品资讯!

DevExpress技术交流群3:700924826      欢迎一起进群讨论

慧都高端UI界面开发
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/2150.html

相关产品: DevExpress Universal Subscription,


联系我们
  • 重庆总部 023-68661681 400-700-1020
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
在线
QQ
电话
咨询
023-68661681
返回
顶部