logo
small logo
  • Producto
  • Comprar
  • Ayuda
  • About
  • Consola de usarios Ayuda
    • en
    • de
    • JP
    • ZH
  • Página principal
  • /
  • Blogs
  • /
  • Cómo utilizar FastCube .NET en la aplicación Vue SPA
  • Cómo utilizar FastCube .NET en la aplicación SP .NET Core

    6 de mayo de 2021

    1. Sobre FastCube El generador de informes FastReport .NET cubre casi todas las necesidades de

    read more
  • La compilación de FastCube.Core para .NET 5.0

    10 de mayo de 2021

    En el mundo moderno, las herramientas de análisis OLAP de Cuba tienen una demanda especial.

    read more
  • Cómo usar FastCube .NET en la aplicación SPA Angular

    19 de abril de 2021

    Uno de los marcos más populares para crear aplicaciones de una sola página es Angular.

    read more
  • How to use FastCube .NET in React application

    1 de octubre de 2021

    UPD: Applies to the versions of FastCube .NET before 2022.1. License packages are now available

    read more
  • Cómo construir biblioteca libgdiplus desde la fuente

    2 de octubre de 2020

    Al usar las bibliotecas FastReport .NET (Core), FastReport Open Source y FastReport Mono en el

    read more

Cómo utilizar FastCube .NET en la aplicación Vue SPA

14 de abril de 2021

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:

Configuración de las fuentes del paquete

Seleccione la fuente agregada de paquetes en la lista desplegable e instale los paquetes:

 Instalación de 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:

Estructura de la aplicación

El archivo cube.vue.html es la visualización html del nuevo componente:

<template>
 <div>
 <button v-on:click="Clicked">Show</button>
 <div v-if="show">
 <iframe :id="report" height="1000" width="1000" :src="url"></iframe>
 </div>
 </div>
</template>
<script src="./cube.ts"></script>

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:

 El proyecto lanzado

Presione el botón y vea su cubo:

 El proyecto lanzado

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.

about product comprar
avatar
Dmitriy Fedyashov
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastCube OLAP Core Vue

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Comprar
  • Descargar
  • Documentación
  • Opiniones de usuarios
  • Cómo desinstalar nuestros productos
  • FAQ
  • Toturial en vídeo
  • Foro
  • Documentación técnica
  • Nuestras noticias
  • Quiénes somos
  • Socios
  • Extended licensing
  • Contactos

© 1998-2023 by Fast Reports Inc.

  • Privacidad