教你创建VueDashboard应用

点击获取工具>>DevExpress拥有.NET开发所需的所有平台控件，包括600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、CodeRushforVisualStudio、等系列辅助工具。WebDashboard是一个客户端控件，它使用HTTP请求与服务器部分通信：客户端部分是一个JavaScript应用程序，它为最终用户提供UI以设计仪表板并与之交互，DashboardControl是基础控件。服务器部分是一个ASP.NETCore或ASP.NETMVC应用程序，它处理客户端数据请求并包括各种后端功能，例如数据访问、仪表板存储等。本教程将创建和配置一个客户端Vue应用程序，其中包括一个Web仪表板和服务器ASP.NETCore应用程序。先决条件Node.js6+和npm5.2+VueCLI要求客户端上的脚本版本应与服务器上的库版本相匹配。DevExpressnpm包的版本应该相同。步骤1.在Vue项目中配置客户端仪表板控件在命令提示符下，使用默认预设创建Vue应用程序：cmdvuecreatedashboard-vue-app创建项目后，导航到创建的文件夹：cmdcddashboard-vue-app安装以下npm包：cmdnpminstalldevexpress-dashboard@20.2-nextdevexpress-dashboard-vue@20.2-next@devexpress/analytics-core@20.2-nextdevextreme@20.2-next--savedevextreme-vue@20.2-next--save安装后，您可以在node_modules文件夹中找到所有库。如下所示修改App.vue文件，在页面上显示dashboard组件。typescript``打开main.js文件并添加以下全局样式：js`importVuefrom'vue'importAppfrom'./App.vue'import'devextreme/dist/css/dx.common.css';导入“devextreme/dist/css/dx.light.css”；导入“@devexpress/analytics-core/dist/css/dx-analytics.common.css”；导入“@devexpress/analytics-core/dist/css/dx-analytics.light.css”；导入“@devexpress/analytics-core/dist/css/dx-querybuilder.css”；导入“devexpress-dashboard/dist/css/dx-dashboard.light.css”；Vue。config.productionTip=falsenewVue({render:h=>h(App),}).$mount('#app')`使用下面的命令启动应用程序。cmdnpmstart在浏览器中打开http://localhost:8080/查看结果，WebDashboard显示存储在预配置服务器（https://demos.devexpress.com/...）上的仪表板。步骤2.创建服务器应用程序要创建自定义服务器应用程序来显示您的数据，请按照以下步骤操作：在VisualStudio中，创建一个ASP.NETCore3.1应用程序，选择Empty模板。创建将存储仪表板的App_Data/Dashboards文件夹。使用以下代码替换Startup.cs文件的内容：C#`usingDevExpress.AspNetCore;usingDevExpress.DashboardAspNetCore;usingDevExpress.DashboardCommon;usingDevExpress.DashboardWeb;usingDevExpress.DataAccess.Json;usingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.Hosting；使用Microsoft.Extensions.Configuration；使用Microsoft.Extensions.DependencyInjection；使用Microsoft.Extensions.FileProviders；使用系统；命名空间AspNetCoreDashboardBackend=hostingEnvironment.ContentRootFileProvider;}publicIConfiguration配置{get;}publicIFileProviderFileProvider{得到;}publicvoidConfigureServices(IServiceCollectionservices){services//配置CORS策略。.AddCors(options=>{options.AddPolicy("CorsPolicy",builder=>{builder.AllowAnyOrigin();builder.AllowAnyMethod();builder.WithHeaders("Content-Type");});})//添加DevExpress中间件..AddDevExpressControls()//添加控制器..AddControllers()//配置仪表板后端..AddDefaultDashboardController(configurator=>{configurator.SetDashboardStorage(newDashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));configurator.SetDataSourceStorage(CreateDataSourceStorage());configurator.ConfigureDataConnection+=Configurator_ConfigureDataConnection;});}publicvoidConfigure(IApplicationBuilderapp,IWebHostEnvironmentenv){//注册DevExpress中间件。app.UseDevExpressControls();//注册routing.app.UseRouting();//注册CORSpolicies.app.UseCors("CorsPolicy");app.UseEndpoints(endpoints=>{//映射仪表板route.EndpointRouteBuilderExtension.MapDashboardRoute(endpoints,"api/dashboard");//需要CORS策略.endpoints.MapControllers().RequireCors("CorsPolicy");});}publicDataSourceInMemoryStorageCreateDataSourceStorage(){DataSourceInMemoryStoragedataSourceStorage=newDataSourceInMemoryStorage();DashboardJsonDataSourcejsonDataSource=newDashboardJsonDataSource("Customers");jsonDataSource.RootElement="Customers";dataSourceStorage.RegisterDataSource("jsonDataSourceSupport",jsonDataSource.SaveToXml());returndataSourceStorage;}privatevoidConfigurator_ConfigureDataConnection(objectsender,ConfigureDataConnectionWebEventArgse){if(e.DataSourceName.Contains("Customers")){UrifileUri=newUri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json");JsonSourceConnectionParametersjsonParams=newJsonSourceConnectionParameters();jsonParams.JsonSource=newUriJsonSource(fileUri);e.ConnectionParameters=jsonParams;}}}}`运行以下命令启动服务器：cmddotnetrun要在您的应用程序中使用此服务器，请转到App.vue文件将以下URL设置为端点：http://localhost:5000/api/dashboardjavascript``步骤3.切换到查看器模式创建并保存仪表板后，您可以将仪表板设计器切换到查看器模式。打开App.vue文件，设置workingMode属性为ViewerOnly:js``