下載DevExpress v20.2完整版    DevExpress v20.2漢化資源獲取

DevExpress擁有.NET開發(fā)需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

Web Dashboard是一個客戶端控件，它使用HTTP請求與服務(wù)器部分進(jìn)行通信：

• 客戶端部分是一個JavaScript應(yīng)用程序，為最終用戶提供UI來設(shè)計和與儀表板進(jìn)行交互，是基礎(chǔ)控件。
• 服務(wù)器部分是一個ASP.NET Core或ASP.NET MVC應(yīng)用程序，它處理客戶端數(shù)據(jù)請求，并包括各種后端功能，例如數(shù)據(jù)訪問、儀表板存儲等。

本教程將創(chuàng)建和配置包含Web Dashboard和服務(wù)器ASP.NET Core應(yīng)用程序的客戶端Vue應(yīng)用程序。

先決條件

要求條件

• 客戶端上的腳本版本應(yīng)與服務(wù)器上的庫版本匹配。
• DevExpress npm軟件包的版本應(yīng)該相同。

Step 1. 在Vue項目中配置Client Dashboard控件

1. 在命令提示符下，使用默認(rèn)預(yù)設(shè)創(chuàng)建Vue應(yīng)用程序：

cmd

vue create dashboard-vue-app

創(chuàng)建項目后，導(dǎo)航到創(chuàng)建的文件夾：

cmd

cd dashboard-vue-app

2. 安裝以下npm軟件包：

cmd

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

安裝完成后，您可以在node_modules文件夾中找到所有庫。

3. 如下所示修改App.vue文件，以在頁面上顯示dashboard組件。

typescript

<template>
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
<DxDashboardControl 
style="height:100%"
endpoint="http://demos.devexpress.com/services/dashboard/api"

/>
</div>
</template>

<script>
import { DxDashboardControl } from 'devexpress-dashboard-vue';

export default {
components: {
DxDashboardControl,
}
}
</script>

4. 打開main.js文件并添加以下全局樣式：

js

import Vue from 'vue'
import App from './App.vue'
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
import "devexpress-dashboard/dist/css/dx-dashboard.light.css";

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

5. 使用下面的命令啟動應(yīng)用程序。

cmd

npm start

在瀏覽器中打開//localhost:8080/來查看結(jié)果，Web Dashboard顯示存儲在預(yù)配置服務(wù)器（//demos.devexpress.com/services/dashboard/api）上的儀表板。

Step 2. 創(chuàng)建一個服務(wù)器應(yīng)用程序

創(chuàng)建一個自定義服務(wù)器應(yīng)用程序來顯示您的數(shù)據(jù)，請按照以下步驟操作：

1. 在Visual Studio中，創(chuàng)建一個ASP.NET Core 3.1應(yīng)用程序，選擇Empty模板。

2. 創(chuàng)建將存儲儀表板的App_Data / Dashboards文件夾。

3. 用以下代碼替換Startup.cs文件的內(nèi)容：

C#

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.FileProviders;
using System;

namespace AspNetCoreDashboardBackend {
public class Startup {
public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
Configuration = configuration;
FileProvider = hostingEnvironment.ContentRootFileProvider;
}

public IConfiguration Configuration { get; }
public IFileProvider FileProvider { get; }

public void ConfigureServices(IServiceCollection services) {
services
// Configures CORS policies. 
.AddCors(options => {
options.AddPolicy("CorsPolicy", builder => {
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.WithHeaders("Content-Type");
});
})
// Adds the DevExpress middleware.
.AddDevExpressControls()
// Adds controllers.
.AddControllers()
// Configures the dashboard backend.
.AddDefaultDashboardController(configurator => {
configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
configurator.SetDataSourceStorage(CreateDataSourceStorage());
configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
});
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
// Registers the DevExpress middleware. 
app.UseDevExpressControls();
// Registers routing.
app.UseRouting();
// Registers CORS policies.
app.UseCors("CorsPolicy");
app.UseEndpoints(endpoints => {
// Maps the dashboard route.
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
// Requires CORS policies.
endpoints.MapControllers().RequireCors("CorsPolicy");
});
}
public DataSourceInMemoryStorage CreateDataSourceStorage() {
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage(); 
DashboardJsonDataSource jsonDataSource = new DashboardJsonDataSource("Customers");
jsonDataSource.RootElement = "Customers";
dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSource.SaveToXml());
return dataSourceStorage;
}
private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
if (e.DataSourceName.Contains("Customers")) {
Uri fileUri = new Uri("http://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json");
JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
jsonParams.JsonSource = new UriJsonSource(fileUri);
e.ConnectionParameters = jsonParams; 
}
}
}
}

4. 運行以下命令以啟動服務(wù)器：

cmd

dotnet run

5. 要在客戶端應(yīng)用程序中使用此服務(wù)器，請轉(zhuǎn)到App.vue文件。 將以下URL設(shè)置為端點：//localhost:5000/api/dashboard

javascript

<template>
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
<DxDashboardControl 
style="height:100%"
endpoint="http://localhost:5000/api/dashboard"

/>
</div>
</template>

<script>
import { DxDashboardControl } from 'devexpress-dashboard-vue';

export default {
components: {
DxDashboardControl,
}
}
</script>

Step 3. 切換到Viewer Mode

創(chuàng)建并保存儀表板后，可以將Dashboard Designer切換到Viewer模式。

1. 打開App.vue文件，并將workingMode屬性設(shè)置為ViewerOnly：

js

<template>
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
<DxDashboardControl 
style="height:100%"
endpoint="http://localhost:5000/api/dashboard"
workingMode="ViewerOnly"
/>
</div>
</template>

DevExpress技術(shù)交流群3：700924826      歡迎一起進(jìn)群討論