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:
Wybierz dodane źródło pakietów z listy rozwijanej i zainstaluj pakiety:
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: 
Plik cube.vue.html jest plikiem html wyświetlającym nowy komponent:
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ę:
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.
