You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
巴卫
49d5efd8fe
|
2 years ago | |
---|---|---|
.. | ||
css | 2 years ago | |
html | 2 years ago | |
src | 2 years ago | |
.gitignore | 2 years ago | |
README.md | 2 years ago | |
package-lock.json | 2 years ago | |
package.json | 2 years ago | |
webpack.config.js | 2 years ago | |
webpack.config.min.js | 2 years ago | |
yarn.lock | 2 years ago |
README.md
数据报表
开发环境
1.导入项目:将jnpf-web-datareport
拖入Visual Studio Code
编辑器
2.安装依赖及静态服务器,在Visual Studio Code
的终端执行以下命令
# 安装依赖
yarn
# 安装Node静态服务器
npm install http-server -g
3.接口配置
- 打开
/html/index.html
,做如下修改
# 在index.html文件中第24行开始
<script type="text/javascript">
// 报表接口
window._server = "http://localhost:30007";
// 报表前端
window._contextPath = "http://localhost:8200";
// 主项目接口地址
window._mainServer = "http://localhost:30000";
</script>
- 打开
/html/preview.html
,做如下修改,
# 在preview.html文件中第86行
<script type="text/javascript">
// 报表接口
window._server = "http://localhost:30007";
</script>
- 配置说明:
window._server
:报表接口,对应jnpf-datareport
项目接口地址,本地开发环境默认为http://localhost:30007
;window._contextPath
:报表前端,本地开发环境默认为http://localhost:8200
;window._mainServer
:主项目接口地址,对应jnpf-java-boot
项目接口地址,本地开发环境默认为http://localhost:30000
4.运行报表前端
# 在html目录下执行以下命令
http-server -a localhost -p 8200
5.报表前端开发
修改src
目录下相关文件后,需要执行打包命令yarn build
,打包的文件是存放在html
文件夹下的js
文件夹中
测试生产环境
前端部署结构说明
├── jnpf-web # 假设这个目录是存放测试或生产环境的前端
│── DataV # 大屏(`jnpf-datascreen`)打包后文件存放目录
│── Report # 报表(`jnpf-datareport`)html下的文件
└── 主项目前端打包后的文件 # 主项目(`jnpf-web`)打包后存放在根目录
-
将
jnpf-web-datareport
下的html
文件夹中的所有拷贝到jnpf-web
中的Report
目录下,如Report
目录不存在请手动建立 -
接口配置
- 打开
/Report/index.html
,做如下修改:
- 打开
# 在index.html文件中第24行开始
<script type="text/javascript">
// 报表接口
window._server = "http://192.168.0.20:90/ReportServer";
// 报表前端
window._contextPath = "http://192.168.0.20:90/Report";
// 主项目接口地址
window._mainServer = "http://192.168.0.20:90";
</script>
- 打开
/Report/preview.html
,做如下修改:
# 在preview.html文件中第86行
<script type="text/javascript">
// 报表接口
window._server = "http://192.168.0.20:90/ReportServer";
</script>
- 配置说明:
- 本示例中,
http://192.168.0.20:90
为项目在测试环境中访问入口,在部署中根据实际情况调整; - 报表接口中,
ReportServer
为虚拟目录,需要在Nginx增加相关配置,具体配置如下:
- 本示例中,
# 数据报表接口配置
location /ReportServer/ {
proxy_pass http://localhost:30007/;
}