기타 Express.js 응용 프로그램 내에서 JavaScript 보고 도구를 사용하는 방법
페이지 정보
작성자 GrapeCity
작성일 2022-10-11 16:12 조회 416회
댓글 0건
본문
관련링크
ActiveReportsJS는 서버 종속성이 없는 100% 클라이언트 측 보고 도구입니다. 즉, Express.js를 비롯하여 모든 웹 프레임워크와 ActiveReportsJS를 함께 사용할 수 있습니다. 이 문서에는 Express.js 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대한 간단하면서 완전한 튜토리얼이 포함되어 있습니다.
새 Express.js 응용 프로그램 만들기
SQLite 데이터베이스에서 JSON 형식 데이터를 검색하기 위한 앱 경로 만들기
검색된 JSON 데이터를 시각화하기 위한 ActiveReportsJS 보고서 만들기
ActiveReportsJS Report Viewer 컴포넌트를 호스팅하고 보고서를 표시하기 위한 정적 HTML 페이지 만들기
필수 컴포넌트
다음 콘텐츠는 컴퓨터에 ActiveReportsJS가 설치되어 있다고 가정합니다. 설치되지 않은 경우 ActiveReportsJS 웹 사이트에서 다운로드할 수 있습니다. Node.js 역시 설치되어 있어야 합니다.
Express.JS 응용 프로그램 만들기
새로운 Express.js 응용 프로그램을 만들려면 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.
mkdir ReportingOnNode cd ReportingOnNode npm init -y # if you prefer using yarn: # yarn init -y if you prefer using yarn npm i express better-sqlite3 # if you prefer using yarn: # yarn add express better-sqlite3
그런 다음 Visual Studio Code와 같이 즐겨 사용하는 코드 편집기에서 새로 만든 ReportingOnNode 디렉터리를 엽니다.
응용 프로그램 데이터 추가
이 문서에서는 Chinook SQLite 데이터베이스를 사용합니다. 응용 프로그램의 루트에서 "data" 폴더를 만들고 chinook.zip 파일을 다운로드하여 이 폴더에 압축을 풉니다. 그런 다음 응용 프로그램의 루트에 "services" 폴더를 추가하고 다음 콘텐츠를 사용하여 "services/customers.js" 파일을 만듭니다.
const sqlite = require('better-sqlite3');
const path = require('path');
const db = new sqlite(path.resolve('data/chinook.db'), {fileMustExist: true});
function getCustomers(){
var query = "SELECT CustomerId, FirstName, LastName, Country FROM customers";
return db.prepare(query).all();
}
module.exports = getCustomers;
그런 다음 응용 프로그램의 루트에 "routes" 폴더를 추가하고 다음 콘텐츠를 사용하여 "routes/customers.js" 파일을 만듭니다.
const express = require('express');
const router = express.Router();;
const getCustomers = require('../services/customers');
router.get('/', function(req, res, next) {
try {
res.json(getCustomers());
} catch(err) {
console.error(`Error while getting customers `, err.message);
next(err);
}
});
module.exports = router;
마지막으로, 응용 프로그램 루트에 "index.js" 파일을 만들고 응용 프로그램을 실행하고 "customers" 경로를 초기화하는 코드를 추가합니다.
const express = require('express');
const app = express();
const port = 3000 || process.env.PORT;
const customersRouter = require('./routes/customers');
app.use(express.static('static'))
app.use('/customers', customersRouter);
app.listen(port, () => {
console.log(`The app listening at http://localhost:${port}`);
});"node index.js" 명령을 사용하여 웹 사이트를 로컬로 실행하고 브라우저에서 http://localhost:3000/customers URL을 엽니다. 고객 목록을 JSON 형식으로 볼 수 있습니다.
ActiveReportsJS 보고서 만들기
GraphQL API에서 얻은 데이터를 시각화하는 보고서를 만들어 보겠습니다.
독립 실행형 보고서 디자이너 응용 프로그램에서 파일 메뉴를 클릭하고 새로 만든 보고서를 위해 연속 페이지 레이아웃 템플릿을 선택합니다.
속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.
데이터 소스 편집기 대화 상자에서 NAME 필드에 "Chinook"라고 입력하고, ENDPOINT 필드에 http://localhost:3000/customers를 입력하고 변경 사항 저장 버튼을 클릭합니다.
데이터 패널에서 데이터 소스 근처에 있는 + 아이콘을 클릭합니다.
데이터 집합 편집기 대화 상자에서 NAME 필드에 Customers라고 입력하고 JSON Path 필드에는 $.*를 입력합니다.
유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션에 [4 items]라는 텍스트가 표시되는지 확인한 다음 변경 사항 저장 버튼을 클릭합니다.
데이터 패널에서 Customers 데이터 집합을 보고서 본문에 끌어서 놓습니다. 열 머리글 행과 세부 정보 행으로 구성된 표 데이터 영역이 자동으로 생성됩니다.
각 열 헤더를 선택하고, 도구 모음의 해당 버튼을 사용하여 글꼴 두께를 굵게로 설정합니다.
CustomerID를 표시하는 텍스트 상자의 텍스트 맞춤을 왼쪽으로 설정합니다.
표 디자인은 다음 그림과 같습니다.
파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 static 폴더(만들어야 함)에 Customers.rdlx-json이라는 이름으로 저장합니다.
보고서를 표시할 HTML 페이지 만들기
다음 콘텐츠를 사용하여 새로 만든 "static" 폴더에 "customers.html" 파일을 추가합니다.
<!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>Customers 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('Customers.rdlx-json');
</script>
</body>
</html>이제 브라우저에서 http://localhost:3000/customers.html URL을 방문할 수 있고 이 페이지에는 고객 보고서가 표시됩니다.
지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
