DevExpress使用教程：手把手教你创建一个Vue Dashboard应用

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应用程序。

先决条件

• Node.js 6+ and npm 5.2+
• Vue CLI

要求条件

• 客户端上的脚本版本应与服务器上的库版本匹配。
• 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; "><DxDashboardControlstyle="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 = falsenew 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; "><DxDashboardControlstyle="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; "><DxDashboardControlstyle="height:100%"endpoint="http://localhost:5000/api/dashboard"workingMode="ViewerOnly"/></div></template>

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