El marco Vue.js es actualmente muy popular y está en línea con Angular. Ya hemos considerado cómo usar FastReport.Core en la aplicación Angular. Ahora consideremos cómo implementar la visualización de un informe web FastReport en una aplicación de una sola página en Vue.js con backend en ASP .NET Core.
Para eso, necesitamos instalar Node.js y, como mínimo, NET Core SDK 2.0; sin embargo, una versión más nueva es aún mejor. De forma predeterminada, dotnet sdk no tiene una plantilla de aplicación vue. ¡Pero se puede instalar! Para hacer eso, cree un catálogo, en el que se colocará su aplicación, y ejecute la línea de comandos de PowerShell en él. Esto se puede hacer desde el menú contextual, que se invoca al hacer clic con el botón derecho en el espacio vacío en el directorio con el botón shift presionado.
Ingrese el comando en la línea de comando:
dotnet new — install Microsoft.AspNetCore.SpaTemplates::*
Entonces tendrás disponible la plantilla de Vue para generar una aplicación de demostración. Úselo para crear la aplicación con un comando:
dotnet new vue -o FRCubeVue
Después de crear la aplicación, verá una advertencia de que se debe ejecutar el siguiente comando:
npm install
Pero antes de ejecutarlo, debes dirigirte al catálogo creado:
cd FRCubeVue
Una vez instalados todos los paquetes necesarios, abra el archivo de proyecto .csproj.
Ahora debemos agregar las bibliotecas FastCube al proyecto que habíamos creado, pero primero deben ensamblarse a partir de los códigos fuente. Para eso, use la solución FastCube.Core.sln. Después del ensamblaje, obtendrá dos paquetes Nuget: FastCube.Web.2020.2.1.nupkg y FastCube.Core.2020.2.1.nupkg. Colóquelos en un directorio, que se utilizará como fuente de paquete local más adelante.
Ahora comenzamos a agregar paquetes al proyecto con la ayuda del administrador de paquetes NuGet. Cabe recordar que los paquetes se almacenan localmente. Para ingresar a la configuración, haga clic en el ícono de ajustes en la esquina superior derecha del administrador de paquetes y agregue una nueva fuente, que hará referencia al directorio local con sus paquetes nupkg:
Seleccione la fuente agregada de paquetes en la lista desplegable e instale los paquetes:
Conecte FastCube en el método Configure () del archivo Startup.cs agregando el siguiente código:
app.UseFastCube();
La aplicación estándar basada en plantillas está lista para comenzar y contiene un controlador y una vista. Podemos usarlo para mostrar nuestro cubo de datos. Ahora agregue un nuevo método a
[HttpGet("[action]")] public IActionResult ShowCube() { Cube cube = new Cube(); Slice slice = new Slice() { Cube = cube }; FilterManager filterManager = new FilterManager() { Cube = cube }; WebGrid grid; grid = new WebSliceGrid() { Slice = slice }; ViewBag.WebGrid = grid cube.SourceType = SourceType.File; cube.Load(Path.Combine("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc")); return View(model); }
Consideremos esta técnica con más detalle. Aquí usamos los objetos de Cube y Slice. Para mostrar datos, usamos el objeto WebGrid, que puede recibir datos de un cubo o un segmento a través de los correspondientes objetos heredados WebCubeGrid y WebSliceGrid. En este caso, mostraremos un corte, por lo que se selecciona el segundo objeto. Luego descargamos el cubo existente del archivo.
Para el método ShowCube agregado, tenemos que crear una pantalla - ShowCube.cshtml.cs con una sola línea de código:
@await ViewBag.WebGrid.Render()
Ahora pasamos a la aplicación SPA. Como hemos creado el proyecto con una plantilla, ya contiene una demostración de la aplicación de una sola página. Por lo tanto, todo lo que tenemos que hacer es agregar un nuevo componente y configurar el menú. Deben aparecer dos archivos nuevos en la estructura de la aplicación:
El archivo cube.vue.html es la visualización html del nuevo componente:
La pantalla formada en la aplicación ASP .Net Core se descargará en iframe.
El archivo cube.ts es el script del nuevo componente:
import Vue from 'vue'; import { Component } from 'vue-property-decorator'; @Component export default class CubeComponent extends Vue { url: string = ''; show: boolean = false; cubeData: string =''; Clicked() { this.show = true; this.url = "api/SampleData/ShowCube"; } }
En el script, configuramos la URL para la fuente del iframe como un clic en un botón.
En esta etapa, el nuevo componente debe registrarse en el archivo boot.ts:
const routes = [ ... { path: '/cube', component: require('./components/cube/cube.vue.html') } ];
Además, añadimos el nuevo encabezado del menú en el archivo navmenu.vue.html:
<template> <div class="main-nav"> <div class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">FRCubeVue</a> </div> <div class="clearfix"></div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <router-link to="/" :exact="true"> <span class="glyphicon glyphicon-home"></span> Home </router-link> </li> <li> <router-link to="/counter"> <span class="glyphicon glyphicon-education"></span> Counter </router-link> </li> <li> <router-link to="/fetchdata"> <span class="glyphicon glyphicon-th-list"></span> FETCH data </router-link> </li> <li> <router-link to="/cube"> <span class="glyphicon glyphicon-th-list"></span> Cube </router-link> </li> </ul> </div> </div> </div> </template> <style src="./navmenu.css" />
Ahora nuestra aplicación está lista para arrancar. Vamos a hacerlo:
Presione el botón y vea su cubo:
Como puede ver, tanto el servidor como el cliente son bastante simples. Ahora puede usar cubos OLAP en sus aplicaciones web sin pagar más por cada unidad de una aplicación de escritorio.
