SSM整合之企业级后台管理系统(13) - 仪表盘统计数据页面设计和实现

最新推荐文章于 2024-03-02 12:37:09 发布

猪爸爸爱学习

最新推荐文章于 2024-03-02 12:37:09 发布

阅读量1.5k

点赞数 1

分类专栏： SSM整合实战文章标签： Spring SpringMVC MyBatis Bootstrap 后台管理系统

本文为博主原创文章，未经许可，禁止转载。

本文链接：https://blog.csdn.net/u012586848/article/details/103342981

版权

登录OMS后台管理系统后，我们给用户展现的界面包含：顶部导航栏、左侧菜单栏、底部技术支持信息、以及中间部分的仪表盘页面（也就是下面截图中红色框出来的区域）。前面的几个模块在之前的博客文章里已经给大家介绍了，今天我们来和大家继续学习一下仪表盘页面的设计和实现。

一、为什么有个仪表盘页面

我们按需求的角度来思考。作为一个后台管理系统，使用这个系统的一般是管理人员，而管理人员在管理系统的时候通常需要看一些统计数据对不对？有了这个仪表盘页面，管理人员在登录系统后就可以很直观地了解到一些想知道的信息。并且，我们在前一篇教程《SSM整合之企业级后台管理系统(12) - 实现Tab分页和切换》中提到，为了使页面保持美观，Tab栏中最左侧的仪表盘tab会一直保留，这样一来，即使关闭了所有tab，页面中间部分不会变成空白。

二、仪表盘页面的构成

从上面的截图里我们可以看到，这个仪表盘页面里我们设计了上下两个模块：上面是昨日和历史数据模块，下面是月度统计数据模块。

上面模块里包含：

昨日订单数
历史订单数
昨日总金额
历史总金额

下面的月度报告模块里包含：

总营收
总成本
总利润
目标完成百分比
具体目标项完成情况

当然，我们在设计仪表盘页面的时候完全可以不用按照上面这些统计信息来设计，毕竟每个后台管理系统所关注的业务需求都不一样嘛，这篇教程里只是给大家举个例子做个演示。

三、仪表盘页面的实现

仪表盘页面我们单独建一个文件（welcome.jsp），当我们登录系统时或点击Tab栏中的"仪表盘"tab时加载这个文件。加载仪表盘页面的同时，从后台获取页面中涉及的数据，然后绘制表格即可。

绘制表格有很多工具可以使用，我们这里使用的是echarts。

welcome.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
    <title>仪表盘页面</title>
</head>
<body style="width: 200px; height: 600px">
<div style="height: 100%">
    <div class="locate">
        <section class="content-header" style="padding-top:5px">
            <h4 style="margin-top:5px;margin-bottom:0px">仪表盘</h4>
            <ol class="breadcrumb" style="padding-top:0px">
                <li class="active">当前位置：首页</li>
                <li>仪表盘</li>
            </ol>
        </section>
        <section class="content container-fluid">
            <!-- 第一行 -->
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua">
                            <i class="fa fa-cog"></i>
                        </span>
                        <div class="info-box-con

最低0.47元/天解锁文章

猪爸爸爱学习

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
SSM整合之企业级后台管理系统(13) - 仪表盘统计数据页面设计和实现

登录OMS后台管理系统后，我们给用户展现的界面包含：顶部导航栏、左侧菜单栏、底部技术支持信息、以及中间部分的仪表盘页面（也就是下面截图中红色框出来的区域）。前面的几个模块在之前的博客文章里已经给大家介绍了，今天我们来和大家继续学习一下仪表盘页面的设计和实现。一、为什么有个仪表盘页面我们按需求的角度来思考。作为一个后台管理系统，使用这个系统的一般是管理人员，而管理人员在管理系统的时候通常...
复制链接

扫一扫

专栏目录