彩票走势图

FastCube使您能够分析数据并构建汇总表（数据切片），以及轻松、即时地创建各种报表和图表。它是高效分析数据阵列的便利工具。（重要提醒：软件国产化服务季，打造高性能高安全高颜值国产软件必选产品>>立即查看）

立即点击获取FastCube.Net 2020.2最新安装包+用户手册

FastCube.Net在线下单立享75折起！赶紧加入购物清单吧！

Vue.js框架目前非常流行，并且与Angular一致。我们已经考虑了如何在Angular应用程序中使用FastReport.Core。现在让我们考虑如何在Vue.js的单页应用程序中实现ASP.NET Core后端的FastReport Web报表的显示。

为此，我们需要安装Node.js，并且至少要安装NET Core SDK 2.0。但是，更新的版本更好。默认情况下，dotnet sdk没有vue应用程序模板。但是可以安装！为此，创建一个目录，在其中放置您的应用程序，然后在其中运行PowerShell命令行。这可以从上下文菜单中完成，该菜单由右键单击并按住Shift键的同时单击目录中的空白区域来调用。
在命令行中输入命令：

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

dotnet new vue -o FRCubeVue

npm install

cd FRCubeVue

现在，我们必须将FastCube库添加到我们创建的项目中，但首先应从源代码中将它们组装起来。为此，请使用FastCube.Core.sln解决方案。组装后，您将获得两个Nuget程序包：FastCube.Web.2020.2.1.nupkg和FastCube.Core.2020.2.1.nupkg。将它们放在一个目录中，以后将用作本地程序包源。

现在，我们开始在NuGet软件包管理器的帮助下将软件包添加到项目中。应当记得，这些软件包是本地存储的。要输入设置，请单击包管理器右上角的齿轮图标，然后添加一个新的源，该源将指向您的nupkg包的本地目录：

app.UseFastCube();

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

对于添加的ShowCube方法，我们必须创建一个显示-带有单个代码行的ShowCube.cshtml.cs：

@await ViewBag.WebGrid.Render()

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

文件cube.ts是新组件的脚本：

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

在此阶段，必须在文件boot.ts中注册新组件：

const route =  [
 ... 
{ path ：'/ cube'，component ： require （'./ components /cube/ cube.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" />

产品介绍 | 下载试用 | 优惠活动 |