在這篇文章中，我們將討論在Vue.Js框架中與ASP .Net Core一起編寫的應(yīng)用程序中顯示在線報(bào)表設(shè)計(jì)器的方法。

要在此類捆綁套包中創(chuàng)建應(yīng)用程序，我們需要安裝Microsoft Visual Studio 2017，或.Net Core 2.0 SDK以及Node.Js軟件包。

1.創(chuàng)建一個(gè)應(yīng)用程序Vue.js。為此，請運(yùn)行Windows命令提示符。檢查是否安裝了模板以創(chuàng)建此類應(yīng)用程序。請運(yùn)行以下命令：

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

然后，我們將看到以下列表：

現(xiàn)在，我們使用cd命令移動(dòng)到要在其中創(chuàng)建應(yīng)用程序的文件夾。并使用以下命令創(chuàng)建應(yīng)用程序：

dotnet new vue -o FRCoreVueOnlineDesigner

這個(gè)命令將生成一個(gè)現(xiàn)成的演示應(yīng)用程序，其中包含完整的文件和文件夾結(jié)構(gòu)。

之后，使用cd轉(zhuǎn)到FRCoreVueOnlineDesigner文件夾并執(zhí)行命令：

npm install.

2.在VisualStudio中打開創(chuàng)建的項(xiàng)目。在開始之前，首先安裝必要的NuGet套包。在套包管理器中，選擇本地存儲(chǔ)C: \ Program Files (x86) \ FastReports \ FastReport.Net \ Nugets。我們從這個(gè)存儲(chǔ)庫安裝了兩個(gè)軟件包：FastReport.Core和FastReport.Web。

接下來，我們在配置器中啟用FastReport庫。編輯Startup.cs文件。將以下內(nèi)容添加到Configure方法：

app.UseFastReport ();

在wwwroot文件夾中，創(chuàng)建一個(gè)App_Data目錄并向其中添加報(bào)告模板和xml數(shù)據(jù)庫。

此外，在wwwroot中，我們必須將一個(gè)文件夾與在線設(shè)計(jì)器“online designer”放在一起。此時(shí)，您應(yīng)該從開發(fā)人員的站點(diǎn)下載它。請注意，在構(gòu)建在線設(shè)計(jì)器之前，您應(yīng)該在Configuration部分中選擇URL API的值——FastReport.Core for Web。使用設(shè)計(jì)器下載存檔后，將內(nèi)容解壓到wwwroot文件夾。

3.編程控制器。該應(yīng)用程序已經(jīng)有兩個(gè)控制器——HomeController和SampleDataController。讓我們使用第二個(gè)并添加我們自己的方法：

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using System.IO;
 
namespace FRCoreVueOnlineDesigner.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 
 [HttpGet("[action]")]
 public IActionResult Design(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 if (name != "Blank")
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}.frx", name)))); // Load the report into the WebReport object
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); // Open the xml database
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 var webRoot = _env.WebRootPath;
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // We set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save the result of the query to a file }
 return View();
 }
}

Designer方法旨在顯示在線設(shè)計(jì)器。SaveDesignedReport方法將修改后的報(bào)告保存在服務(wù)器上。

4.提交。對于添加的兩個(gè)方法中的每一個(gè)，都需要?jiǎng)?chuàng)建相同名稱的視圖：

將以下代碼添加到Design.cshtml文件中：

@await ViewBag.WebReport.Render()

將以下代碼添加到SaveDesignedReport.cshtml文件：

@ViewBag.Message

5.客戶編程。ClientApp-> components文件夾包含組件：我們的單頁應(yīng)用程序的頁面“pages”。創(chuàng)建自己的組件。添加設(shè)計(jì)器文件夾。在其中創(chuàng)建online_designer.vue.html文件——頁面模板“page template”：

   Matrix 
  Master-Detail  Barcode Design

模板中有三個(gè)單選按鈕，用于定義報(bào)告的名稱。另一個(gè)按鈕啟動(dòng)Clicked函數(shù)，該函數(shù)應(yīng)從服務(wù)器請求報(bào)表設(shè)計(jì)器。此外，代碼顯示變量設(shè)計(jì)器的內(nèi)容。該變量將包含設(shè)計(jì)器的get請求的結(jié)果。在底部，我們聲明了一個(gè)腳本來處理這個(gè)模板。它將位于一個(gè)單獨(dú)的文件online_designer.ts中：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
 
@Component
export default class DesignerComponent extends Vue {
 designer: string = '';
 report: string = '';
 
 Clicked() {
 if (this.report != '') {
 fetch('api/SampleData/Design?name=' + this.report)
 .then(response => response.text())
 .then(data => {
 this.designer = data;
 });
 }
 }
 SetReportName(text: string)
 {
 this.report = text;
 }
}

Clicked函數(shù)對SampleData控制器中的Web方法執(zhí)行g(shù)et請求。web方法返回html格式的表示，我們將其寫入變量設(shè)計(jì)器。SetReportName函數(shù)將變量設(shè)置為report——報(bào)告的名稱。此變量在設(shè)計(jì)器的get請求中作為參數(shù)傳遞。

由于此處自動(dòng)生成應(yīng)用程序，因此有演示頁面。讓我們從菜單navmenu.vue.html中刪除它們：

     Toggle navigation     FRCoreVueOnlineDesigner     
 現(xiàn)在我們將組件添加到boot.ts： import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
const routes = [
 { path: '/', component: require('./components/online_designer/online_designer.vue.html') }
];
 
new Vue({
 el: '#app-root',
 router: new VueRouter({ mode: 'history', routes: routes }),
 render: h => h(require('./components/app/app.vue.html'))
});" _ue_custom_node_="true">

我們添加了一個(gè)指向我們創(chuàng)建的組件的鏈接。它將在Web應(yīng)用程序啟動(dòng)時(shí)立即顯示，即它將成為主頁。運(yùn)行我們的程序。使用單選按鈕選擇報(bào)告，然后按設(shè)計(jì)“Design”按鈕：

打開另一個(gè)報(bào)告，轉(zhuǎn)到報(bào)告“Report”選項(xiàng)卡，然后單擊保存“Save”按鈕：

這樣，我們就學(xué)習(xí)了如何在借助Vue.js框架編寫的單頁應(yīng)用程序中顯示在線設(shè)計(jì)器。

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) |  |