苍穹外卖——店铺营业状态设置

1 需求分析和设计

1.1 产品原型

进到苍穹外卖后台,显示餐厅的营业状态,营业状态分为营业中打烊中,若当前餐厅处于营业状态,自动接收任何订单,客户可在小程序进行下单操作;若当前餐厅处于打烊状态,不接受任何订单,客户便无法在小程序进行下单操作。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png
点击营业状态按钮时,弹出更改营业状态
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
选择营业,设置餐厅为营业中状态

选择打烊,设置餐厅为打烊中状态

状态说明:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png

1.2 接口设计

根据上述原型图设计接口,共包含3个接口。

接口设计:

  • 设置营业状态
  • 管理端查询营业状态
  • 用户端查询营业状态

**注:**从技术层面分析,其实管理端和用户端查询营业状态时,可通过一个接口去实现即可。因为营业状态是一致的。但是,本项目约定:

  • 管理端发出的请求,统一使用/admin作为前缀。
  • 用户端发出的请求,统一使用/user作为前缀。

因为访问路径不一致,故分为两个接口实现。

1). 设置营业状态
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
2). 管理端营业状态

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png
3). 用户端营业状态

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png

1.3 营业状态存储方式

虽然,可以通过一张表来存储营业状态数据,但整个表中只有一个字段,所以意义不大。

营业状态数据存储方式:基于Redis的字符串来进行存储

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png
**约定:**1表示营业 0表示打烊

2 代码开发

2.1 设置营业状态

在sky-server模块中,创建ShopController.java

根据接口定义创建ShopController的setStatus设置营业状态方法:

package com.sky.controller.admin;

import com.sky.result.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController("adminShopController")
@RequestMapping("/admin/shop")
@Api(tags = "店铺相关接口")
@Slf4j
public class ShopController {

    public static final String KEY = "SHOP_STATUS";

    @Autowired
    private RedisTemplate redisTemplate;

    /**
     * 设置店铺的营业状态
     * @param status
     * @return
     */
    @PutMapping("/{status}")
    @ApiOperation("设置店铺的营业状态")
    public Result setStatus(@PathVariable Integer status){
        log.info("设置店铺的营业状态为:{}",status == 1 ? "营业中" : "打烊中");
        redisTemplate.opsForValue().set(KEY,status);
        return Result.success();
    }
}

2.2 管理端查询营业状态

根据接口定义创建ShopController的getStatus查询营业状态方法:

	/**
     * 获取店铺的营业状态
     * @return
     */
    @GetMapping("/status")
    @ApiOperation("获取店铺的营业状态")
    public Result<Integer> getStatus(){
        Integer status = (Integer) redisTemplate.opsForValue().get(KEY);
        log.info("获取到店铺的营业状态为:{}",status == 1 ? "营业中" : "打烊中");
        return Result.success(status);
    }

2.3 用户端查询营业状态

创建com.sky.controller.user包,在该包下创建ShopController.java

根据接口定义创建ShopController的getStatus查询营业状态方法:

package com.sky.controller.user;

import com.sky.result.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;

@RestController("userShopController")
@RequestMapping("/user/shop")
@Api(tags = "店铺相关接口")
@Slf4j
public class ShopController {

    public static final String KEY = "SHOP_STATUS";

    @Autowired
    private RedisTemplate redisTemplate;

    /**
     * 获取店铺的营业状态
     * @return
     */
    @GetMapping("/status")
    @ApiOperation("获取店铺的营业状态")
    public Result<Integer> getStatus(){
        Integer status = (Integer) redisTemplate.opsForValue().get(KEY);
        log.info("获取到店铺的营业状态为:{}",status == 1 ? "营业中" : "打烊中");
        return Result.success(status);
    }
}

3 功能测试

3.1 接口文档测试

**启动服务:**访问http://localhost:8080/doc.html,打开店铺相关接口

**注意:**使用admin用户登录重新获取token,防止token失效。

设置营业状态:
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
点击发送
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
查看Idea控制台日志
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
查看Redis中数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png
管理端查询营业状态:
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
用户端查询营业状态:
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 接口分组展示

在上述接口文档测试中,管理端和用户端的接口放在一起,不方便区分。
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
接下来,我们要实现管理端和用户端接口进行区分。

在WebMvcConfiguration.java中,分别扫描"com.sky.controller.admin"和"com.sky.controller.user"这两个包。

	@Bean
    public Docket docket1(){
        log.info("准备生成接口文档...");
        ApiInfo apiInfo = new ApiInfoBuilder()
                .title("苍穹外卖项目接口文档")
                .version("2.0")
                .description("苍穹外卖项目接口文档")
                .build();

        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .groupName("管理端接口")
                .apiInfo(apiInfo)
                .select()
                //指定生成接口需要扫描的包
                .apis(RequestHandlerSelectors.basePackage("com.sky.controller.admin"))
                .paths(PathSelectors.any())
                .build();

        return docket;
    }

    @Bean
    public Docket docket2(){
        log.info("准备生成接口文档...");
        ApiInfo apiInfo = new ApiInfoBuilder()
                .title("苍穹外卖项目接口文档")
                .version("2.0")
                .description("苍穹外卖项目接口文档")
                .build();

        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .groupName("用户端接口")
                .apiInfo(apiInfo)
                .select()
                //指定生成接口需要扫描的包
                .apis(RequestHandlerSelectors.basePackage("com.sky.controller.user"))
                .paths(PathSelectors.any())
                .build();

        return docket;
    }

重启服务器,再次访问接口文档,可进行选择用户端接口或者管理端接口
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.3.3 前后端联调测试

启动nginx,访问 http://localhost:82/

进入后台,状态为营业中
image.png
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
点击营业状态设置,修改状态为打烊中

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png
再次查看状态,状态已为打烊中

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传image.png

4 代码提交

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

### 关于苍穹外卖折线图的实现方式 #### 1. 使用 Apache ECharts 进行数据可视化 Apache ECharts 是一款强大的 JavaScript 图表库,能够提供丰富的图表类型以及高度自定义的功能。对于苍穹外卖中的折线图需求,可以通过配置 X 轴为日期,Y 轴为营业额的方式展示每日的营业情况[^2]。 以下是实现折线图的核心逻辑: - **X轴**:表示时间维度(如天、周或月),通常通过日期字符串数组来设置。 - **Y轴**:表示数值维度,在本场景下即为订单总金额。 - **数据源**:需从后台接口获取指定时间段内的每日营业额统计数据。 #### 2. 数据处理与接口设计 为了支持动态的时间范围查询功能,前端需要向后端发送请求参数(例如起始时间和结束时间)。而后端则负责返回对应区间的每日营业额汇总结果[^3]。具体而言: - 后端应按照订单状态筛选出“已完成”的记录,并按日期分组计算每笔交易总额; - 返回的结果可以是一个 JSON 数组形式,其中包含两个字段——`date` 和 `amount`,分别代表某一天及其对应的收入值。 #### 3. 示例代码 下面给出一段简单的 HTML 页面片段及相应的 JS 初始化脚本用于绘制基本折线图: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>苍穹外卖营业额趋势</title> <!-- 引入ECharts文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 准备一个具备大小的DOM容器--> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '苍穹外卖营业额变化' }, tooltip : { trigger: 'axis', axisPointer:{ animation:false, lineStyle:{ color:'#ccc', width:1, type:'solid' } } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name:'营业额(元)', type:'line', smooth:true, symbolSize:5, sampling:'average', itemStyle:{normal:{color:'#FF7F50'}}, areaStyle:{normal:{}}, data:[820,932,901,934,1290,1330,1320] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 上述例子展示了如何利用静态数据创建一条反映一周内销售额波动状况的曲线;实际应用时应当替换掉这些硬编码部分并接入真实的服务端API调用来加载最新信息[^1]。 #### 4. 扩展功能建议 除了基础的趋势分析外,还可以考虑增加更多交互特性提升用户体验,比如允许用户自行调整查看周期或者叠加其他指标对比观察等操作[^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不断前进的皮卡丘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值