logo
small logo
  • Produkty
  • Zamów
  • Wsparcie techniczne
  • About
  • Customer panel Wsparcie techniczne
    • en
    • de
    • JP
    • ZH
  • Glówna strona
  • /
  • Articles
  • /
  • Jak wykorzystać FastCube .NET w aplikacji Vue SPA
  • Jak używać FastCube .NET w aplikacji ASP .NET Core

    6 maja 2021

    1. O FastCube Generator raportów FastReport .NET spełnia prawie wszystkie wymagania użytkowników w zakresie tworzenia

    read more
  • Kompletacja FastCube.Core dla .NET 5.0

    10 maja 2021

    W dzisiejszych czasach narzędzia analityczne takie jak kostki OLAP są bardzo pożądane. Fast Report posiada

    read more
  • Jak wykorzystać FastCube .NET w aplikacji SPA Knockout.js

    21 lipca 2021

    Aby wyprowadzić kostkę danych, stworzymy aplikację SPA za pomocą Knockout.js (biblioteka do tworzenia aplikacji webowych).

    read more
  • Jak wykorzystać FastCube .NET w aplikacji SPA Angular

    19 kwietnia 2021

    Jednym z najpopularniejszych frameworków do tworzenia aplikacji typu single-page jest Angular. Jest on oparty o

    read more
  • Jak używać FastCube.NET w aplikacji React

    1 października 2021

    UPD: Aktualne do wersji FastReport .NET 2022.2. Pakiety licencyjne są teraz dostępne na naszym Server

    read more

Jak wykorzystać FastCube .NET w aplikacji Vue SPA

14 kwietnia 2021

Framework Vue.js jest obecnie bardzo popularny i stoi w jednym szeregu z Angularem. Zastanawialiśmy się już jak wykorzystać FastReport.Core w aplikacji Angular. Teraz zastanówmy się, jak zaimplementować wyświetlanie raportu internetowego FastReport w aplikacji jednostronicowej na Vue.js z backendem na ASP .NET Core.

W tym celu musimy zainstalować Node.js oraz, jako minimum, NET Core SDK 2.0; jednak, nowsza wersja jest jeszcze lepsza. Domyślnie dotnet sdk nie posiada szablonu aplikacji vue. Można go jednak zainstalować! W tym celu należy utworzyć katalog, w którym znajdzie się nasza aplikacja i uruchomić w nim wiersz poleceń PowerShell. Można to zrobić z menu kontekstowego, które wywołuje się poprzez kliknięcie prawym przyciskiem myszy na puste pole w katalogu z wciśniętym klawiszem shift.

Wprowadź polecenie w wierszu poleceń:

dotnet new — install Microsoft.AspNetCore.SpaTemplates::*

Wówczas będziesz miał do dyspozycji szablon Vue do wygenerowania aplikacji demonstracyjnej. Użyj go, aby stworzyć aplikację za pomocą polecenia:

dotnet new vue -o FRCubeVue

Po utworzeniu aplikacji pojawi się ostrzeżenie o konieczności wykonania następującego polecenia:

npm install

Ale przed jego wykonaniem powinieneś przejść do utworzonego katalogu:

cd FRCubeVue

Po zainstalowaniu wszystkich niezbędnych pakietów, otwórz plik projektu. csproj.

Teraz musimy dodać biblioteki FastCube do projektu, który stworzyliśmy, ale najpierw należy je zmontować z kodów źródłowych. W tym celu należy skorzystać z rozwiązania FastCube.Core.sln. Po asemblacji otrzymamy dwa pakiety Nuget: FastCube.Web.2020.2.1.nupkg oraz FastCube.Core.2020.2.1.nupkg. Umieść je w jednym katalogu, który będzie później używany jako lokalne źródło pakietów.

Teraz rozpoczynamy dodawanie pakietów do projektu za pomocą menedżera pakietów NuGet. Należy pamiętać, że pakiety przechowywane są lokalnie. Aby wejść w ustawienia, klikamy na ikonę koła zębatego w prawym górnym rogu menedżera pakietów i dodajemy nowe źródło, które będzie odwoływało się do lokalnego katalogu z naszymi pakietami nupkg:

Ustawianie źródeł pakietów

Wybierz dodane źródło pakietów z listy rozwijanej i zainstaluj pakiety:

Instalowanie pakietów

Podłączenie FastCube w pliku Startup.cs metodą Configure() poprzez dodanie kodu:

app.UseFastCube();

Standardowa aplikacja oparta o szablon jest gotowa do uruchomienia i zawiera kontroler oraz widok. Możemy go użyć do wyświetlenia naszej kostki danych. Teraz dodajemy nową metodę do 

 [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);
 }

Przeanalizujmy tę technikę bardziej szczegółowo. Wykorzystamy tutaj obiekty Cube i Slice. Do wyświetlenia danych wykorzystamy obiekt WebGrid, który może odbierać dane z kostki lub wycinka za pośrednictwem odpowiednich dziedziczących obiektów WebCubeGrid i WebSliceGrid. W tym przypadku będziemy wyświetlać wycinek, dlatego jest wybrany drugi obiekt. Następnie pobierzemy istniejącą kostkę z pliku.

Dla dodanej metody ShowCube, musimy stworzyć wyświetlacz - ShowCube.cshtml.cs z jedną linią kodu:

@await ViewBag.WebGrid.Render()

Teraz przechodzimy do aplikacji SPA. Ponieważ stworzyliśmy projekt z szablonem, zawiera on już demonstracyjną aplikację jednostronicową. Pozostaje więc, tylko dodać nowy komponent i ustawić menu. W strukturze aplikacji muszą pojawić się dwa nowe pliki: Struktura aplikacji

Plik cube.vue.html jest plikiem html wyświetlającym nowy komponent:

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

Ekran utworzony w aplikacji ASP .Net Core zostanie pobrany w iframe.

Plik cube.ts to skrypt nowego komponentu:

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";
 }
}

W skrypcie ustawiamy adres url dla źródła iframe jako kliknięcie przycisku.

Na tym etapie, nowy komponent musi zostać zarejestrowany w pliku boot.ts:

const routes = [
 ...
 { path: '/cube', component: require('./components/cube/cube.vue.html') }
];

Dodajemy również nowy nagłówek menu w pliku 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" />

Teraz nasza aplikacja jest gotowa do uruchomienia. Zróbmy to:

Naciśnij przycisk i zobacz swoją kostkę:

Naciśnij przycisk i zobacz swoją kostkę:

Rozpoczęty projekt

Jak widać, zarówno część serwerowa, jak i kliencka są dość proste. Teraz możesz używać kostek OLAP w swoich aplikacjach webowych, nie płacąc więcej za każdą jednostkę aplikacji desktopowej.

about product zamów
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
  • Zamów
  • Pobierz
  • Dokumentacja
  • Opinie użytkowników
  • Jak odinstalować nasze produkty
  • FAQ
  • Tutorial Video
  • Forum
  • Articles
  • Our News
  • Prasa o nas
  • Partnerzy
  • Extended licensing
  • Kontakty

© 1998-2023 by Fast Reports Inc.

  • Poufność