DevExpress技術交流羣3:700924826 歡迎一起進羣討論
DevExpress擁有.NET開發需要的所有平臺控件,包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用於 Visual Studio的CodeRush等一系列輔助工具。
Web Dashboard是一個客戶端控件,它使用HTTP請求與服務器部分進行通信:
- 客戶端部分是一個JavaScript應用程序,爲最終用戶提供UI來設計和與儀表板進行交互,DashboardControl是基礎控件。
- 服務器部分是一個ASP.NET Core或ASP.NET MVC應用程序,它處理客戶端數據請求,幷包括各種後端功能,例如數據訪問、儀表板存儲等。
本教程將創建和配置包含Web Dashboard和服務器ASP.NET Core應用程序的客戶端Vue應用程序。
先決條件
要求條件
- 客戶端上的腳本版本應與服務器上的庫版本匹配。
- DevExpress npm軟件包的版本應該相同。
Step 1. 在Vue項目中配置Client Dashboard控件
1. 在命令提示符下,使用默認預設創建Vue應用程序:
cmd
vue create dashboard-vue-app
創建項目後,導航到創建的文件夾:
cmd
cd dashboard-vue-app
2. 安裝以下npm軟件包:
cmd
npm install [email protected] [email protected] @devexpress/[email protected] [email protected] --save [email protected] --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="https://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. 使用下面的命令啓動應用程序。
cmd
npm start
在瀏覽器中打開http://localhost:8080/來查看結果,Web Dashboard顯示存儲在預配置服務器(https://demos.devexpress.com/services/dashboard/api)上的儀表板。
Step 2. 創建一個服務器應用程序
創建一個自定義服務器應用程序來顯示您的數據,請按照以下步驟操作:
1. 在Visual Studio中,創建一個ASP.NET Core 3.1應用程序,選擇Empty模板。
2. 創建將存儲儀表板的App_Data / Dashboards文件夾。
3. 用以下代碼替換Startup.cs文件的內容:
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("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"); JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters(); jsonParams.JsonSource = new UriJsonSource(fileUri); e.ConnectionParameters = jsonParams; } } } }
4. 運行以下命令以啓動服務器:
cmd
dotnet run
5. 要在客戶端應用程序中使用此服務器,請轉到App.vue文件。 將以下URL設置爲端點:http://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
創建並保存儀表板後,可以將Dashboard Designer切換到Viewer模式。
1. 打開App.vue文件,並將workingMode屬性設置爲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>