Express.js 애플리케이션 내에서 JavaScript 보고 도구를 사용하는 방법

8690 단어 javascripttutorialdevopswebdev
ActiveReportsJS는 서버 종속성이 없는 100% 클라이언트 측 보고 도구입니다. 즉, Express.js을 포함한 모든 웹 프레임워크와 함께 ActiveReportsJS를 사용할 수 있습니다. 이 문서에는 ActiveReportsJS를 Express.js 애플리케이션과 통합하는 방법에 대한 간단하면서도 철저한 자습서가 포함되어 있습니다. 최종적으로 다음을 수행할 수 있습니다.
  • Create a new Express.js application
  • Create an app route to retrieve the data from a SQLite database in JSON format
  • Create an ActiveReportsJS report to visualize the retrieved JSON data
  • Create a static HTML page to host the ActiveReportsJS Report Viewer component and display the report

    • 전제 조건



    다음 내용은 컴퓨터에 ActiveReportsJS가 설치되어 있다고 가정합니다. 가지고 있지 않은 경우 ActiveReportsJS website에서 얻을 수 있습니다. Node.js도 설치해야 합니다.

    Express.JS 애플리케이션 만들기

    To create a new Express.js application, run the following command from a terminal or command prompt.

        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

    Then open the newly created ReportingOnNode directory in your favorite code editor, such as Visual Studio Code.

    애플리케이션 데이터 추가

    In this article, we will be using the  Chinook SQLite database . 애플리케이션의 루트에 "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 보고서 만들기

    Let's create a report that visualizes these data from the GraphQL API.

    In the  Standalone Report Designer Application 파일 메뉴를 클릭하고 새로 생성된 보고서에 대한 연속 페이지 레이아웃 템플릿을 선택합니다.

    속성 관리자의 Data panel을 열고 추가 버튼을 클릭합니다.

    데이터 소스 편집기 대화상자에서 이름 필드에 'Chinook'http://localhost:3000/customers for the **ENDPOINT** field을 입력하고 변경사항 저장 버튼을 클릭합니다.



    데이터 패널에서 DataSource 근처의 + 아이콘을 클릭합니다.

    데이터 세트 편집기 대화 상자에서 이름 필드에 Customers를 입력하고 JSON 경로 필드에 $.*를 입력하십시오.

    유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션에 [4개 항목] 텍스트가 표시되는지 확인한 다음 변경 사항 저장 버튼을 클릭합니다.



    데이터 패널에서 고객 데이터 세트를 보고서 본문으로 끌어다 놓습니다. 열 머리글 행과 세부 정보 행으로 구성된 Table data region이 자동으로 생성됩니다.

    각 열 머리글을 선택하고 도구 모음에서 해당 버튼을 사용하여 글꼴 두께를 굵게 설정합니다.

    CustomerId를 표시하는 텍스트 상자의 텍스트 맞춤을 왼쪽으로 설정합니다.

    테이블 디자인은 다음 그림과 같습니다.



    파일 메뉴를 클릭하고 Customers.rdlx-json이라는 이름으로 애플리케이션의 정적 폴더(생성해야 함)에 새로 생성된 보고서를 저장합니다.

    보고서를 표시할 HTML 페이지 만들기

    Add the "customers.html" file into the newly created "static" folder with the following content.

        <!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>
    Now you can visit the  http://localhost:3000/customers.html 브라우저의 URL이며 페이지에 고객 보고서가 표시됩니다.

    제품 세부정보 클릭 후 표시되지 않음
    Python 라이브러리 Streamlit을 사용하여 얼굴 감지 앱 만들기 2

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage