欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手把手教你创建一个Vue Dashboard应用 DevExpressDashboardvue 

程序员文章站 2022-03-18 12:52:16
...

下载DevExpress v20.2完整版    

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 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="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>

 


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

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