网站常用 英文,让家里的电脑做网站服务器,企业官网开发公司,【转】网页 网站 html如何实现"关闭窗口"代码大全目录 一、Apache ECharts【前端】
1. 介绍
2. 入门案例
二、营业额统计
1. 需求分析和设计
1 产品原型
2 业务规则
3 接口设计
2. 代码开发
3. 功能测试
三、用户统计
1. 需求分析和设计
1 产品原型
2 业务规则
3 接口设计
2. 代码开发 3. 功能测试
四、订单统…目录 一、Apache ECharts【前端】
1. 介绍
2. 入门案例
二、营业额统计
1. 需求分析和设计
1 产品原型
2 业务规则
3 接口设计
2. 代码开发
3. 功能测试
三、用户统计
1. 需求分析和设计
1 产品原型
2 业务规则
3 接口设计
2. 代码开发 3. 功能测试
四、订单统计
1. 需求分析和设计
1 产品原型
2 业务规则
3 接口设计
2. 代码开发
3. 功能测试
五、销量排名Top10
1. 需求分析和设计
1 产品原型
2 业务规则
3 接口设计
2. 代码开发
3. 功能测试 一、Apache ECharts【前端】
1. 介绍
Apache ECharts 是一款基于 Javascript 的数据可视化图表库提供直观生动可交互可个性化定制的数据可视化图表。 官网地址Apache ECharts 常见效果展示
1). 柱形图 2). 饼形图 3). 折线图 总结不管是哪种形式的图形最本质的东西实际上是数据它其实是对数据的一种可视化展示。
2. 入门案例
Apache Echarts官方提供的快速入门快速上手 - 使用手册 - Apache ECharts
效果展示 实现步骤
1). 引入echarts.js 文件(当天资料已提供)
2). 为 ECharts 准备一个设置宽高的 DOM
3). 初始化echarts实例
4). 指定图表的配置项和数据
5). 使用指定的配置项和数据显示图表
代码开发
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleECharts/title!-- 引入刚刚下载的 ECharts 文件 --script srcecharts.js/script/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/body
/html
测试使用浏览器方式打开即可。
总结使用Echarts重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据然后响应给前端来展示图表。
二、营业额统计 1. 需求分析和设计
1 产品原型
营业额统计是基于折现图来展现并且按照天来展示的。实际上就是某一个时间范围之内的每一天的营业额。同时不管光标放在哪个点上那么它就会把具体的数值展示出来。并且还需要注意日期并不是固定写死的是由上边时间选择器来决定。比如选择是近7天、或者是近30日或者是本周就会把相应这个时间段之内的每一天日期通过横坐标展示。
原型图 : 2 业务规则 营业额指订单状态为已完成的订单金额合计 基于可视化报表的折线图展示营业额数据X轴为日期Y轴为营业额 根据时间选择区间展示每天的营业额数据
3 接口设计
通过上述原型图设计出对应的接口。 注意具体返回数据一般由前端来决定前端展示图表具体折现图对应数据是什么格式是有固定的要求的。 所以说后端需要去适应前端它需要什么格式的数据我们就给它返回什么格式的数据。
2. 代码开发
//在sky-pojo模块TurnoverReportVO.java已定义package com.sky.vo;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;import java.io.Serializable;Data
Builder
NoArgsConstructor
AllArgsConstructor
public class TurnoverReportVO implements Serializable {//日期以逗号分隔例如2022-10-01,2022-10-02,2022-10-03private String dateList;//营业额以逗号分隔例如406.0,1520.0,75.0private String turnoverList;}--------------
//创建ReportController
//根据接口定义创建ReportControllerpackage com.sky.controller.admin;import com.sky.result.Result;
import com.sky.service.ReportService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.time.LocalDate;RestController
Api(tags 数据统计相关接口)
RequestMapping(/admin/report)
public class ReportController {Autowiredprivate ReportService reportService;GetMapping(/turnoverStatistics)ApiOperation(营业额统计接口)public Result turnoverStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end){return reportService.turnoverStatistics(begin, end);}
}-------------
//创建ReportServicepackage com.sky.service;import com.sky.result.Result;import java.time.LocalDate;public interface ReportService {/*** 统计营业额* param begin* param end* return*/Result turnoverStatistics(LocalDate begin, LocalDate end);
}-------------
//ReportServiceImplpackage com.sky.service.impl;import com.fasterxml.jackson.databind.ObjectMapper;
import com.sky.mapper.OrderMapper;
import com.sky.result.Result;
import com.sky.service.ReportService;
import com.sky.vo.TurnoverReportVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;Service
public class ReportServiceImpl implements ReportService {Autowiredprivate OrderMapper orderMapper;Overridepublic Result turnoverStatistics(LocalDate begin, LocalDate end) {TurnoverReportVO vo new TurnoverReportVO();ListLocalDate dateList new ArrayList();ListDouble amountList new ArrayList();while (!(begin.isAfter(end))) {//1. 把日期添加到dateList里dateList.add(begin);//2. 查询这一天的营业额添加到amountList里LocalDateTime startOfDay LocalDateTime.of(begin, LocalTime.MIN);LocalDateTime endOfDay LocalDateTime.of(begin, LocalTime.MAX);Double amount orderMapper.sumAmountByDate(startOfDay, endOfDay);amount amount null ? 0D : amount;amountList.add(amount);//3. 到下一天begin begin.plusDays(1);}//dateList 日期以逗号分隔例如2022-10-01,2022-10-02,2022-10-03String dateListStr dateList.stream().map(localDate - localDate.format(DateTimeFormatter.ofPattern(yyyy-MM-dd))).collect(Collectors.joining(,));vo.setDateList(dateListStr);//turnoverList 营业额以逗号分隔例如406.0,1520.0,75.0String turnoverListStr amountList.stream().map(Object::toString).collect(Collectors.joining(,));vo.setTurnoverList(turnoverListStr);return Result.success(vo);}
}------------
//OrderMapperSelect(select sum(amount) from orders where status 5 and order_time between #{start} and #{end})
Double sumAmountByDate(LocalDateTime start, LocalDateTime end);
3. 功能测试
可以通过如下方式进行测试 接口文档测试 前后端联调测试
启动服务器启动nginx直接采用前后端联调测试。
进入数据统计模块
1). 查看近7日营业额统计 2). 查看近30日营业额统计 进入开发者模式查看返回数据 也可通过断点方式启动查看每步执行情况。
三、用户统计
1. 需求分析和设计
1 产品原型
所谓用户统计实际上统计的是用户的数量。通过折线图来展示上面这根蓝色线代表的是用户总量下边这根绿色线代表的是新增用户数量是具体到每一天。所以说用户统计主要统计两个数据一个是总的用户数量另外一个是新增用户数量。
原型图 : 2 业务规则 基于可视化报表的折线图展示用户数据X轴为日期Y轴为用户数 根据时间选择区间展示每天新增用户量和截止到当天的用户总量和
3 接口设计
根据上述原型图设计接口。 2. 代码开发
//在sky-pojo模块UserReportVO.java已定义package com.sky.vo;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;Data
Builder
NoArgsConstructor
AllArgsConstructor
public class UserReportVO implements Serializable {//日期以逗号分隔例如2022-10-01,2022-10-02,2022-10-03private String dateList;//用户总量以逗号分隔例如200,210,220private String totalUserList;//新增用户以逗号分隔例如20,21,10private String newUserList;}--------------
//ReportControllerGetMapping(/userStatistics)
ApiOperation(用户统计接口)
public Result userStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end){return reportService.userStatistics(begin, end);
}-------------
//ReportService/*** 统计用户* param begin* param end* return*/Result userStatistics(LocalDate begin, LocalDate end);------------
//ReportServiceImplOverride
public Result userStatistics(LocalDate begin, LocalDate end) {UserReportVO vo new UserReportVO();ListLocalDate dateList new ArrayList();ListInteger totalCountList new ArrayList();ListInteger newCountList new ArrayList();while (!(begin.isAfter(end))) {//把日期加到dateList集合里dateList.add(begin);//获取截止到当天的用户总量 select count(*) from user where create_time 当天日期LocalDateTime endOfDay LocalDateTime.of(begin, LocalTime.MAX);Integer totalCount userMapper.countByDate(null, endOfDay);totalCountList.add(totalCountnull?0:totalCount);//获取当天的新用户数量 select count(*) from user where create_time between 当天日期开始时间 and 当天日期结束时间LocalDateTime startOfDay LocalDateTime.of(begin, LocalTime.MIN);Integer newCount userMapper.countByDate(startOfDay, endOfDay);newCountList.add(newCountnull?0:newCount);//到下一天begin begin.plusDays(1);}//日期以逗号分隔例如2022-10-01,2022-10-02,2022-10-03String dateListStr dateList.stream().map(date - date.format(DateTimeFormatter.ofPattern(yyyy-MM-dd))).collect(Collectors.joining(,));vo.setDateList(dateListStr);//用户总量以逗号分隔例如200,210,220String totalListStr totalCountList.stream().map(Objects::toString).collect(Collectors.joining(,));vo.setTotalUserList(totalListStr);//新增用户以逗号分隔例如20,21,10String newListStr newCountList.stream().map(Objects::toString).collect(Collectors.joining(,));vo.setNewUserList(newListStr);return Result.success(vo);
}-------------
//UserMapper/*** 统计指定日期范围内的用户数量*/
Integer countByDate(LocalDateTime startOfDay, LocalDateTime endOfDay);-------------
//UserMapper.xml?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.sky.mapper.UserMapperselect idcountByDate resultTypeintselect count(*) from userwhereif teststartOfDay!nulland create_time #{startOfDay}/ifif testendOfDay!nulland create_time lt; #{endOfDay}/if/where/select
/mapper 3. 功能测试
可以通过如下方式进行测试 接口文档测试 前后端联调测试
进入数据统计模块
1). 查看近7日用户统计 进入开发者模式查看返回数据 2). 查看近30日用户统计 进入开发者模式查看返回数据 也可通过断点方式启动查看每步执行情况。
四、订单统计
1. 需求分析和设计
1 产品原型
订单统计通过一个折现图来展现折线图上有两根线这根蓝色的线代表的是订单总数而下边这根绿色的线代表的是有效订单数指的就是状态是已完成的订单就属于有效订单分别反映的是每一天的数据。上面还有3个数字分别是订单总数、有效订单、订单完成率它指的是整个时间区间之内总的数据。
原型图 2 业务规则 有效订单指状态为 “已完成” 的订单 基于可视化报表的折线图展示订单数据X轴为日期Y轴为订单数量 根据时间选择区间展示每天的订单总数和有效订单数 展示所选时间区间内的有效订单数、总订单数、订单完成率订单完成率 有效订单数 / 总订单数 * 100%
3 接口设计
根据上述原型图设计接口。 2. 代码开发
//在sky-pojo模块OrderReportVO.java已定义package com.sky.vo;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;Data
Builder
NoArgsConstructor
AllArgsConstructor
public class OrderReportVO implements Serializable {//日期以逗号分隔例如2022-10-01,2022-10-02,2022-10-03private String dateList;//每日订单数以逗号分隔例如260,210,215private String orderCountList;//每日有效订单数以逗号分隔例如20,21,10private String validOrderCountList;//订单总数private Integer totalOrderCount;//有效订单数private Integer validOrderCount;//订单完成率private Double orderCompletionRate;}--------------
//ReportControllerGetMapping(/ordersStatistics)
ApiOperation(订单统计接口)
public Result orderStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end){return reportService.orderStatistics(begin, end);
}--------------
//ReportService/*** 统计订单* param begin* param end* return*/Result orderStatistics(LocalDate begin, LocalDate end);--------------
//ReportServiceImplOverride
public Result orderStatistics(LocalDate begin, LocalDate end) {OrderReportVO vo new OrderReportVO();ListLocalDate dateList new ArrayList();ListInteger countList new ArrayList();ListInteger completeCountList new ArrayList();while (!(begin.isAfter(end))) {//把日期添加到dateList里dateList.add(begin);//统计当天的订单数量LocalDateTime startOfDay LocalDateTime.of(begin, LocalTime.MIN);LocalDateTime endOfDay LocalDateTime.of(begin, LocalTime.MAX);Integer count orderMapper.countStatistics(startOfDay, endOfDay, null);countList.add(countnull?0:count);//统计当天的有效订单数量Integer completeCount orderMapper.countStatistics(startOfDay, endOfDay, Orders.COMPLETED);completeCountList.add(completeCount null ? 0 : completeCount);//到下一天begin begin.plusDays(1);}//日期以逗号分隔例如2022-10-01,2022-10-02,2022-10-03String dateListStr dateList.stream().map(date - date.format(DateTimeFormatter.ofPattern(yyyy-MM-dd))).collect(Collectors.joining(,));vo.setDateList(dateListStr);//每日订单数以逗号分隔例如260,210,215 select count(*) from orders where order_time ? and order_time ?String countListStr countList.stream().map(Objects::toString).collect(Collectors.joining(,));vo.setOrderCountList(countListStr);//每日有效订单数以逗号分隔例如20,21,10 select count(*) from orders where order_time ? and order_time ? and status 5String completeListStr completeCountList.stream().map(Objects::toString).collect(Collectors.joining(,));vo.setValidOrderCountList(completeListStr);//订单总数 select count(*) from ordersInteger totalCount countList.stream().reduce(Integer::sum).orElse(0);vo.setTotalOrderCount(totalCount);//有效订单数 select count(*) from orders where status 5Integer completeCount completeCountList.stream().reduce(Integer::sum).orElse(0);vo.setValidOrderCount(completeCount);//订单完成率 有效订单数/订单总数if (totalCount 0) {vo.setOrderCompletionRate(0D);}else{vo.setOrderCompletionRate(1.0 * completeCount/totalCount);}return Result.success(vo);
}-----------
//OrderMapper/*** 根据日期范围和状态统计订单数量*/
Integer countStatistics(LocalDateTime startOfDay, LocalDateTime endOfDay, Integer status);------------
//OrderMapper.xmlselect idcountStatistics resultTypeintselect count(*) from orderswhereif teststartOfDay!nulland order_time #{startOfDay}/ifif testendOfDay!nulland order_time lt; #{endOfDay}/ifif teststatus!nulland status #{status}/if/where/select
3. 功能测试
可以通过如下方式进行测试 接口文档测试 前后端联调
重启服务直接采用前后端联调测试。
进入数据统计模块
1). 查看近7日订单统计 2). 查看近30日订单统计 进入开发者模式查看返回数据 也可通过断点方式启动查看每步执行情况
五、销量排名Top10
1. 需求分析和设计
1 产品原型
所谓销量排名销量指的是商品销售的数量。项目当中的商品主要包含两类一个是套餐一个是菜品所以销量排名其实指的就是菜品和套餐销售的数量排名。通过柱形图来展示销量排名这些销量是按照降序来排列并且只需要统计销量排名前十的商品。
原型图 2 业务规则 根据时间选择区间展示销量前10的商品包括菜品和套餐 基于可视化报表的柱状图降序展示商品销量 此处的销量为商品销售的份数
3 接口设计 2. 代码开发
//在sky-pojo模块SalesTop10ReportVO.java已定义package com.sky.vo;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;Data
Builder
NoArgsConstructor
AllArgsConstructor
public class SalesTop10ReportVO implements Serializable {//商品名称列表以逗号分隔例如鱼香肉丝,宫保鸡丁,水煮鱼private String nameList;//销量列表以逗号分隔例如260,215,200private String numberList;}-------------
//ReportControllerGetMapping(/top10)
ApiOperation(查询销量排名top10接口)
public Result top10Dishes(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end){return reportService.top10Dishes(begin, end);
}-------------
//ReportService/*** 查询销量排名top10接口* param begin* param end* return*/Result top10Dishes(LocalDate begin, LocalDate end);------------
//ReportServiceImplOverride
public Result top10Dishes(LocalDate begin, LocalDate end) {SalesTop10ReportVO vo new SalesTop10ReportVO();LocalDateTime start LocalDateTime.of(begin, LocalTime.MIN);LocalDateTime stop LocalDateTime.of(end, LocalTime.MAX);ListGoodsSalesDTO salesTop10 orderMapper.salesTop10(start, stop);//商品名称列表以逗号分隔例如鱼香肉丝,宫保鸡丁,水煮鱼String names salesTop10.stream().map(GoodsSalesDTO::getName).collect(Collectors.joining(,));vo.setNameList(names);//销量列表以逗号分隔例如260,215,200String numbers salesTop10.stream().map(GoodsSalesDTO::getNumber).map(Objects::toString).collect(Collectors.joining(,));vo.setNumberList(numbers);return Result.success(vo);
}-------------
//OrderMapper/**
* 查询商品销量前10名
* param begin
* param end
*/
ListGoodsSalesDTO salesTop10(LocalDateTime start, LocalDateTime stop);------------
//OrderMapper.xmlselect idsalesTop10 resultTypecom.sky.dto.GoodsSalesDTOselect od.name as name, sum(od.number) as number from orders o, order_detail odwhereo.id od.order_id and o.status 5if teststart!nulland o.order_time #{start}/ifif teststop!nulland o.order_time lt; #{stop}/if/wheregroup by od.nameorder by number desclimit 10
/select
3. 功能测试
可以通过如下方式进行测试 接口文档测试 前后端联调
重启服务直接采用前后端联调测试。
查看近30日销量排名Top10统计
若查询的某一段时间没有销量数据则显示不出效果。 进入开发者模式查看返回数据
也可通过断点方式启动查看每步执行情况。
