Rust 웹 애플리케이션에서 JavaScript 보고 도구를 사용하는 방법
10537 단어 tutorialjavascriptwebdev
전제 조건
다음 내용은 컴퓨터에 Rust가 설치되어 있다고 가정합니다. 없으신 분들은 공식 팔로우Rust installation guide . 컴퓨터에 ActiveReportsJS도 설치되어 있으면 가장 좋습니다. 없는 경우 ActiveReportsJSwebsite에서 가져올 수 있습니다.
Rust 애플리케이션 만들기
To create a new Rust application, run the following command from a terminal or command prompt.
cargo new ReportingOnRust
Then open the newly created ReportingOnRust directory in your favorite code editor, such as Visual Studio Code, and add the following dependencies to the Cargo.toml file.
[dependencies]
actix-web = "*"
actix-files = "*"
serde = { version = "*", features = ["derive"] }
csv = "*"
rustc-serialize = "*"
애플리케이션 데이터 추가
We will use the Sales dataset you can download from the E for Excel 웹사이트. 100개 레코드부터 5백만 레코드까지 다양한 크기의 데이터 세트를 제공합니다. 단순화를 위해 100개의 레코드가 있는 첫 번째 데이터 세트를 사용합니다.애플리케이션의 "data"폴더(생성해야 함)에 데이터를 다운로드하고 압축을 풉니다.
데이터 세트에는 많은 필드가 있지만 이 자습서에서는 그 중 몇 개만 사용합니다. 애플리케이션의 src 폴더에 sale.rs 파일을 추가하고 다음 코드를 추가합니다.
use serde::Deserialize;
use serde::Serialize;
extern crate csv;
#[derive(Serialize, Deserialize)]
pub struct Sale {
#[serde(rename = "Region")]
region: String,
#[serde(rename = "Item Type")]
item_type: String,
#[serde(rename = "Units Sold")]
inits_sold: i32,
}
pub fn get_sales() -> Result<Vec<Sale>, &'static str> {
let reader = csv::Reader::from_path("data/100 Sales Records.csv");
if reader.is_ok() {
let mut sales: Vec<Sale> = Vec::new();
for result in reader.unwrap().deserialize() {
if result.is_ok() {
let record: Sale = result.unwrap();
sales.push(record);
}
}
Ok(sales)
} else {
Err("can't read the data file")
}
}
JSON API 끝점 구성
Open the src\main.rs file of the application and replace its content with the following code:
use actix_web::{get, web, App, HttpServer, Responder, Result};
mod sale;
#[get("/sales")]
async fn sales() -> Result<impl Responder> {
let sales = sale::get_sales();
if sales.is_ok() {
Ok(web::Json(sales.unwrap()))
} else {
Ok(web::Json(vec![]))
}
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
.service(sales)
})
.bind(("127.0.0.1", 8080))?
.run()
.await
}
ActiveReportsJS 보고서 만들기
Let's create a report that visualizes the data from the JSON API.
In the Standalone Report Designer Application , * 파일 메뉴를 클릭하고 새로 생성된 보고서에 대한 연속 페이지 레이아웃* 템플릿을 선택합니다.속성 관리자의 Data panel을 열고 추가 버튼을 클릭합니다.
데이터 소스 편집기 대화상자에서 ENDPOINT 입력란에 http://127.0.0.1:8080/sales을 입력하고 변경사항 저장 버튼을 클릭합니다.
데이터 패널에서 DataSource 근처의 + 아이콘을 클릭합니다.
Data Set Editor 대화상자에서 NAME 필드에 Sales를 입력하고 JSON Path 필드에 $.*를 입력합니다.
Validate 버튼을 클릭하고 DataBase Fields 섹션에 [3개 항목] 텍스트가 표시되는지 확인한 다음 Save Changes 버튼을 클릭합니다.
툴바 왼쪽에 있는 햄버거 메뉴를 사용하여 toolbox을 확장합니다.
도구 상자에서 보고서 페이지 영역의 왼쪽 상단으로 차트 항목을 드래그 앤 드롭합니다. 차트 마법사 대화상자가 나타납니다. 첫 화면에서 Bar 유형을 선택하고 Next 버튼을 클릭합니다.
대화상자의 두 번째 화면에서 다음 이미지와 같이 데이터를 구성하고 다음 버튼을 클릭합니다.
세 번째 화면에서 마침 버튼을 클릭합니다.
보고서 페이지의 전체 너비를 채우도록 차트 보고서 항목의 크기를 조정합니다. 차트 범례를 클릭하여 해당 속성을 속성 패널에 로드하고 방향 속성을 가로로, 위치 속성을 아래쪽으로 설정합니다.
File 메뉴를 클릭하고 새로 생성된 보고서를 애플리케이션의 정적 폴더(생성해야 함)에 SalesReport.rdlx-json이라는 이름으로 저장합니다.
보고서를 표시할 정적 HTML 페이지 생성 및 제공
In the static folder of the application, create the index.html file and add the following content to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Report</title>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer-host"></div>
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open('SalesReport.rdlx-json');
</script>
</body>
</html>
use actix_files as fs;
use actix_web::{get, web, App, HttpServer, Responder, Result};
mod sale;
#[get("/sales")]
async fn sales() -> Result<impl Responder> {
let sales = sale::get_sales();
if sales.is_ok() {
Ok(web::Json(sales.unwrap()))
} else {
Ok(web::Json(vec![]))
}
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
.service(fs::Files::new("/reporting", "./static").index_file("index.html"))
.service(sales)
})
.bind(("127.0.0.1", 8080))?
.run()
.await
}
애플리케이션을 다시 실행하고 브라우저에서 http://127.0.0.1:8080/reporting/ URL을 방문하여 보고서를 확인하세요. 단계를 올바르게 따른 경우 JSON API의 데이터를 표시하는 보고서가 표시되어야 합니다.
Reference
이 문제에 관하여(Rust 웹 애플리케이션에서 JavaScript 보고 도구를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grapecity/how-to-use-a-javascript-reporting-tool-in-your-rust-web-application-387e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
