AJ-Report for beginners (introductory tutorial)

---

foreword

The project needs to use this AJ-Reprot to generate dynamic large-screen reports. I have also studied it in the past two days and think it is a very good open source project, so I organized it for sharing.

---

Not much to say, beginners know beginners best

---

Introduction

Online experience: https://ajreport.beliefteam.cn/index.html

Experience account:guest

password:guest

The official documentation says this:

• AJ-Report is a completely open source BI platform with a cool large screen display, which can control business dynamics anytime and anywhere, so that every decision is supported by data.
• Multiple data sources support, built-in multiple drivers such as mysql, elasticsearch, kudu, etc., support custom data sets to save data interface development, currently supports 20 kinds of large-screen components/charts, no development, can also make large-scale according to the design draft Screen.
• Three steps to easily complete the large screen design: configure the data source ----> write SQL to configure the data set ----> drag and drop to configure the large screen ----> save and publish.

According to my explanation, you can use this open source project, configure the data on it, write the sql (data set), and then you can directly design the report, and you can dynamically preview the report and support export.

Above, I directly copy what the official document introduces. I also provide the document address below. It is recommended to read the official document first. It is already very detailed~~

Official website and source code download address

gitee download: https://gitee.com/anji-plus/report/releases

Official document: http://192.168.98.2:14000/

Preparation

1. Download

According to the above providedgitee downloadlink to download

The latest version is presented on the top, and the old version can be found by scrolling down. There are three downloads here. Let me briefly introduce them:

1. aj-report-xxxx.zipThis is the release version, after downloading in windows, you can change the configuration and run the .bat file directly to start
2. Source code (zip)If you want to see the source code or start it under windows, download this
3. Source code (tar.gz)Download this if you want to run directly under linux

I will not demonstrate on linux, I will download the first two to play

Unzip after downloading the distribution and source code

2. Database preparation

First of all, you must have a database, right? If you don’t have a database, I will also provide a local mysql data for everyone to learn (congratulations, you can skip this step)

windows 下 mysql-5.7.17.msi 的安装包下载
Link: Baidu network disk address
Extraction code: 5lxo

I won’t go into details about this installation step, it’s basically a fool’s installation

Distribution configuration and startup

If you are a developer, it doesn’t matter whether you can start this release or not. Anyway, you still need to use the source code for learning. It allows you to understand AJ-Report better and faster. Why I add this here is because some Big data workers may not need to look at the source code, use this distribution to play and get familiar with it.

Double click to enter the directory

1. Modify bootstrap.yml

First of all, you need to go confto to modify bootstrap.ymlthe configuration of the file (it is recommended to read the configuration file yourself, many configurations of the developers are very conscientious and commented)

The place to be modified here is the configuration of the database, change it to your own, save

注意：

• The aj_report library is a library that stores underlying basic information. It will be automatically created when flyway starts. If you modify the library here, an error will occur.
• Please confirm whether your Mysql supports remote connection and whether the login user has DDL authority

2. Modify start.bat

Then modify the start.bat in binthe directory , open and edit in the form of text

Delete the rem comment and add your own jdk configuration

How to check the configuration of JDK?

This computer -> right mouse button and select "Properties" -> Advanced System Settings -> Advanced - Environment Variables -> System Variables - java_home

So here I am changing
torem set JAVA_HOME=D:\App\Java\jdk1.8.0_172
set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_172

注意: If there is a space in your JAVA_HOME configuration , you also need to add " "a sign

3. Launch and access

Double-click the file in binthe directory start.batto start it directly

And you can see that it will directly add and two databases aj_reportto your database after startupaj_report_init

After startup, you can directly access it locally. As for the functions inside, you can understand it by yourself, and the release version will not explain it in detail~~

Address: http://localhost:9095

Account: admin
Password:123456

Source code configuration and startup

1. IDEA import project

After importing it looks like this

---

where report-coreis the backend code and report-uiis the frontend code

2. Start the backend

This project is built with springboot, so you can run the startup class directly, but the premise is that you need to configure bootstrap.ymlthe file

You can change the database of these three bootstrap files to the database you use

For example, my local database has been changed like this:

  datasource:
    url: jdbc:mysql://localhost:3306/aj_report?characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&useSSL=false
    username: root
    password: root

Run the startup class:

Started successfully:

And you can see that it will directly add and two databases aj_reportto your database after startupaj_report_init

2. Frontend startup

It needs to be used to enable the front end node. If you haven’t downloaded node, I also provide the following.

windows 下 node-v14.16.0-x64.msi 的安装包下载
Link: Baidu network disk address
Extraction code: knw5

Whether you use webstorm or visual studio code or other front-end tools to start the front-end, it is almost the same. I am not so troublesome here, and I can start it with IDEA

Click belowTerminal

Enter the following three commands in sequence:
cd report-ui: Just entered should be under report-Vxxx, cd into report-ui
npm install: Install the dependent packages required by the front-end
npm run dev: run the front-end

Seeing this means that your front end has also started successfully.

Access address: http://localhost:9528

Account: admin
Password:123456

The pit I stepped on

The above installation and start-up are routine, and generally you can do it by looking at the official documents. The key is the problems encountered after use, which are not found in the official documents. Below I will sort out the problems I encountered when using them and The way it is handled.

1. Driver issues other than mysql

In report design, we can configure different data sources

Different data sources have different driver classes. For example, the driver class for mysql is , and the driver com.mysql.cj.jdbc.Driverclass for mssqlserver iscom.microsoft.sqlserver.jdbc.SQLServerDriver . .pomsql will report an error, for example, the type of my database here is mssqlserver

I will add a new data set here, using the mssqlserver database

You can see that an error is reported when you click the preview, and the background error log information is as follows:

It probably means that there is a problem when Jdbc obtains the connection pool. The solution is to add the corresponding one according to 数据库the corresponding driver class 依赖. The database I am connected here is , so I can add the corresponding dependency mssqlserverin .pomthe file .mssqlserver

        <!-- mssqlserver 对应的驱动类 -->
        <dependency>
            <groupId>com.microsoft.sqlserver</groupId>
            <artifactId>mssql-jdbc</artifactId>
            <version>8.2.2.jre8</version>
        </dependency>

Just run maven and restart the project.

2. Request timeout problem

If your sql is written more complicated, or the query efficiency is relatively slow, or the report structure is too complex and other reasons cause the request to time out, the front end will prompt, and the back end will prompt: , the timeout 20000ms exceededbackground 你的主机中的软件中止了一个已建立的连接error log information is as follows:

The reason for this error is that the front end has a limit of 20,000 ms. If the back end has not responded within this time, the front end will refuse to receive the data returned by the back end, and the back end will pass on the data, and the front end will close the door. , can you not report an error? The solution is to increase 请求超时时间the settings , modify src\utils\request.jsthe file under report-ui timeout, and then restart the front-end.

3. Null pointer exception caused by null value

If the sql statement in the data set 空值is not processed, a null pointer exception may occur, such as clicking 预览, front-end display系统异常

The backend is:java.lang.NullPointerException: null

According to the background error log, it can be seen that ReportExcelServiceImpl.java:336this line of code is thrown. You can click to find the corresponding place, which is causedfieldLabel by for . The solution is to either give default values ​​to those in sql, or directly change the back-end code, for example:null空值

The code is as follows (example):

// 如果 fieldLabel 为 null ，就设置成 " "
if (fieldLabel==null) {
    
    
    fieldLabel = " ";
}
String replace = v.replace("#{".concat(dataSet.getSetCode()).concat(".").concat(dataSet.getFieldLabel()).concat("}"), fieldLabel);

Restarting the backend solves it.

4. The length of the table field is not enough

This is also a relatively common problem. The solution is very simple, just find the corresponding table expansion field

5. Failed to export file

This is why you did not configure the path when using the export function. Change the path on your computer.

For example, if I change the dist-path to dist-path: D:\download, when using the export function, it will be placed in the download directory under my D drive

Summarize

The above is what I learned from AJ-Ropert in the past two days and the problems I solved.