Mark！企業級Angular Dashboard應用程序建立（Part 2）

點擊獲取工具>>

重要提示：使用本教程須要熟悉React的基本概念和模式，要查看這些概念，請訪問angular.io 。

Step 2. 建立服務器應用程序

建立一個自定義服務器應用程序來顯示您的數據，請按如下步驟操做：

1. 在Visual Studio中，建立一個ASP.NET Core 3.1應用程序，選擇 Empty template。
2. 建立將存儲儀表板的App_Data / Dashboards文件夾。
3. 用如下代碼替換Startup.cs文件的內容：

`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;
}
}
}
}
`

1. 運行如下命令來啓動服務器：

cmd

dotnet run

1. 要在客戶端應用程序中使用此服務器，請跳轉到app.component.html文件。 將如下URL設置爲端點：http：// localhost：5000 / api / dashboard

html

`<dx-dashboard-control

endpoint='http://localhost:5000/api/dashboard'>
</dx-dashboard-control>`

Step 3. 切換到Viewer模式

建立並保存儀表板後，您能夠將儀表板設計器切換到Viewer模式。

1. 打開app.component.html文件，並將 workingMode屬性設置爲ViewerOnly：

html

`<dx-dashboard-control

endpoint='http://localhost:5000/api/dashboard'workingMode='ViewerOnly'></dx-dashboard-control>`