2.点位管理|前后端如何交互——帝可得后台管理系统

前言
点位管理菜单模块
- 1.需求说明
- 2.库表设计
- 3.生成基础代码
- - 0 .使用若依代码生成器最终目标
  - 1.创建点位管理
  - 2.添加数据字典
  - 3.配置代码生成信息
  - 4.下载代码并导入项目
- 4.优化菜单——点位管理
- - 1.优化区域管理
  - 2.增加点位数
  - 3. 合作商
  - 4.区域管理中添加查看详情功能
  - 5.合作商添加点位数量
  - 6.重置合作商密码
  - 7. 补充后端和前端是如何交互的？

前言

提示：本篇介绍点位管理模块，需求分析——建表设计——前后端代码生成——代码优化

点位管理菜单模块

1.需求说明

业务场景：首先，我们需要确定几个有潜力的区域，这些区域可能是人流量大、消费能力高的商业区或居民区。然后，我们要与这些区域内的潜在合作商进行洽谈，比如商场、写字楼、学校等地方的管理者或所有者。一旦我们与合作商达成协议，确定了合作的细节和点位，我们就可以安排工作人员去投放智能售货机了。这些点位将成为我们智能售货机的“家”，为消费者提供便捷的购买服务。
分析设计模块和业务流程：

点位管理主要涉及到三个功能模块，业务流程如下：

登录系统：后台管理人员登录后台系统
新增区域: 后台管理人员可以添加区域范围，区域范围与运维/运维人员挂钩，区域下可关联点位。
新增合作商: 管理人员可以添加合作商，合作商与点位进行关联。
新增区域点位: 后台管理人员可以在特定区域内新增点位，这些点位是放置智能售货机的具体位置。

2.库表设计

表的设计涉及到页面原型，根据页面原型设计表结构；
完整的页面原型如下：页面原型，下图中只是截取了重要的而部分；

区域管理页面原型：
点位管理页面原型：
合作商管理页面原型：
根据上图进行分析：得到三个表；

1，区域表：字段有主键id、区域名称
2，合作商表：字段有主键id、合作商名称、联系人、联系电话、分成比例（int类型）、账号、密码
3，点位表：字段有主键id、点位名称、详细地址、商圈类型（int类型）

根据表信息，使用AI进行表结构创建，提示词如下：

你是一位软件工程师，帮我生成MySQL的表结构
需求如下：
1，区域表，表名tb_region，字段有主键id、区域名称
2，合作商表，表名tb_partner，字段有主键id、合作商名称、联系人、联系电话、分成比例（int类型）、账号、密码
3，点位表，表名tb_node，字段有主键id、点位名称、详细地址、商圈类型（int类型）
其他要求：
1，每张表中都有创建时间(create_time)、修改时间(date_time)、创建人(create_by)、修改人(update_by)、备注(remark)这些字段
2，每张表的主键都是自增的
3，区域与点位是一对多的关系，合作商与点位是一对多的关系，请用字段表示出来，并建立外键约束
4，请为所有字段都添加上comment
5，帮我给生成的表中插入一些北京城市相关区域、点位、合作商的测试数据```

生成内容如下：

CREATE TABLE `tb_region` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `region_name` VARCHAR(255) NOT NULL COMMENT '区域名称',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='区域表';

-- 插入测试数据
INSERT INTO `tb_region` (`region_name`,`remark`) VALUES ('北京市朝阳区','北京市朝阳区'), ('北京市海淀区','北京市海淀区'), ('北京市东城区','北京市东城区');

CREATE TABLE `tb_partner` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `partner_name` VARCHAR(255) NOT NULL COMMENT '合作商名称',
  `contact_person` VARCHAR(64) COMMENT '联系人',
  `contact_phone` VARCHAR(15) COMMENT '联系电话',
  `profit_ratio` INT COMMENT '分成比例',
  `account` VARCHAR(64) COMMENT '账号',
  `password` VARCHAR(64) COMMENT '密码',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='合作商表';

-- 插入测试数据
INSERT INTO `tb_partner` (`partner_name`, `contact_person`, `contact_phone`, `profit_ratio`, `account`, `password`) VALUES
('合作商A', '张三', '13800138000', 30, 'a001', 'pwdA'),
('合作商B', '李四', '13912345678', 25, 'b002', 'pwdB');

CREATE TABLE `tb_node` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `node_name` VARCHAR(255) NOT NULL COMMENT '点位名称',
  `address` VARCHAR(255) NOT NULL COMMENT '详细地址',
  `business_type` INT COMMENT '商圈类型',
  `region_id` INT COMMENT '区域ID',
  `partner_id` INT COMMENT '合作商ID',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注',
  FOREIGN KEY (`region_id`) REFERENCES `tb_region`(`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  FOREIGN KEY (`partner_id`) REFERENCES `tb_partner`(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='点位表';


-- 插入测试数据
-- 假设区域ID为1对应'北京市朝阳区'，合作商ID为1对应'合作商A'
INSERT INTO `tb_node` (`node_name`, `address`, `business_type`, `region_id`, `partner_id`) VALUES
('三里屯点位', '北京市朝阳区三里屯路', 1, 1, 1),
('五道口点位', '北京市海淀区五道口', 2, 2, 2);

3.生成基础代码

0 .使用若依代码生成器最终目标

在这里插入图片描述

1.创建点位管理

在这里插入图片描述

2.添加数据字典

先创建商圈的字典类型
再创建商圈的字典数据
在这里插入图片描述

3.配置代码生成信息

导入三张表
在这里插入图片描述

配置合作商表（参考原型）
在这里插入图片描述

配置区域表（参考原型）

在这里插入图片描述

配置点位表（参考原型）

在这里插入图片描述

4.下载代码并导入项目

选中三张表生成下载

在这里插入图片描述

解压ruoyi.zip得到前后端代码和动态菜单sql
在这里插入图片描述

代码导入
在这里插入图片描述

调整二级菜单显示顺序

在这里插入图片描述

4.优化菜单——点位管理

1.优化区域管理

修改主键id，删除操图案；
在这里插入图片描述
优化后：

2.增加点位数

前端修改
后端修改

Mysql语句创建：

-- 传统模式
-- 1.先聚合统计每个区域下的点位数
-- 确定查询表 tb_node
-- 确定分组字段 region_id
select region_id,count(*) as node_count from tb_node group by region_id;
-- 2.然后与区域表进行关联查询
select r.id,r.region_name,r.remark,ifnull(n.node_count,0) as node_count from tb_region r
    left join (select region_id,count(*) as node_count from tb_node group by region_id) n on r.id=n.region_id;

-- AI辅助编程模式
-- 查询区域表所有的信息,需要显示每个区域的点位数
SELECT r.*, COUNT(n.id) AS node_count FROM tb_region r LEFT JOIN tb_node n ON r.id = n.region_id GROUP BY r.id;

创建实体类
创建RegionMapper以及RegionMapper.xml

/**
 * 查询区域管理列表
 * @param region
 * @return RegionVo集合
 */
public List<RegionVo> selectRegionVoList(Region region);

<select id="selectRegionVoList" resultType="com.dkd.manage.domain.vo.RegionVo">

	select r.id,r.region_name,r.remark,ifnull(n.node_count,0) as node_count from tb_region r
    left join (select region_id,count(*) as node_count from tb_node group by region_id) n on r.id=n.region_id
    
   		 <where>
	      	 <if test="regionName != null  and regionName != ''"> and r.region_name like concat('%', #{regionName}, '%')</if>
   		 </where>

</select>

修改IRegionService接口以及实现类

/**
 * 查询区域管理列表
 * @param region
 * @return RegionVo集合
 */
public List<RegionVo> selectRegionVoList(Region region);

/**
 * 查询区域管理列表
 * @param region
 * @return RegionVo集合
 */
@Override
public List<RegionVo> selectRegionVoList(Region region) {
    return regionMapper.selectRegionVoList(region);
}

修改RegionControlller类

/**
 * 查询区域管理列表
 */
@PreAuthorize("@ss.hasPermi('manage:region:list')")
@GetMapping("/list")
public TableDataInfo list(Region region)
{
    startPage();
    List<RegionVo> voList = regionService.selectRegionVoList(region);
    return getDataTable(voList);
}

3. 合作商

调整字段顺序
分成比例展示为百分之形式
删除操作中修改/删改前的图标
1-3 操作如下图
新增时不展示明文密码
修改时显示创建时间字段
新增和删除时展示界面不同
4-6操作如下图
数据库种的密码展示应为加密类型

最终效果如下图：id=5 密码不展示明文

4.区域管理中添加查看详情功能

修改src\views\manage\partner\index.vue文件：

         <el-button link type="primary" @click="getPartnerInfo(scope.row)"
            v-hasPermi="['manage:partner:query']">查看详情</el-button>
    <!-- 查看合作商详情 -->
    <el-dialog title="合作商详情" v-model="partnerInfoOpen" width="600px" append-to-body center>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="合作商名称">
          {{ form.partnerName }}
        </el-descriptions-item>
        <el-descriptions-item label="账号">
          {{ form.account }}
        </el-descriptions-item>
       
        <el-descriptions-item label="联系人">
          {{ form.contactPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ form.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="分成比例">
          <el-tag type="success">{{ form.profitRatio }}%</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ form.createTime }}
        </el-descriptions-item>
      
        </el-descriptions>
    </el-dialog>

/* 查看合作商详情 */
const partnerInfoOpen = ref(false);
function getPartnerInfo(row) {
  reset();
  const _id = row.id;
  getPartner(_id).then(response => {
    form.value = response.data;
    partnerInfoOpen.value = true;
  });
}

最终效果：
在这里插入图片描述

5.合作商添加点位数量

MySQL语句分析

-- AI辅助编程模式
-- 你是一个软件开发工程师，现在要根据数据库的sql脚本，查询并显示合作商表所有的字段信息,同时显示每个合作商的点位数，sql脚本如下
create table tb_node
(
    id            int auto_increment comment '主键id'
        primary key,
    node_name     varchar(255)                        not null comment '点位名称',
    address       varchar(255)                        not null comment '详细地址',
    business_type int                                 null comment '商圈类型',
    region_id     int                                 null comment '区域ID',
    partner_id    int                                 null comment '合作商ID',
    create_time   timestamp default CURRENT_TIMESTAMP null comment '创建时间',
    update_time   timestamp default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '修改时间',
    create_by     varchar(64)                         null comment '创建人',
    update_by     varchar(64)                         null comment '修改人',
    remark        text                                null comment '备注',
    constraint tb_node_ibfk_1
        foreign key (region_id) references tb_region (id)
            on update cascade on delete cascade,
    constraint tb_node_ibfk_2
        foreign key (partner_id) references tb_partner (id)
            on update cascade on delete cascade
)
    comment '点位表';
    
create table tb_partner
(
    id             int auto_increment comment '主键id'
        primary key,
    partner_name   varchar(255)                        not null comment '合作商名称',
    contact_person varchar(64)                         null comment '联系人',
    contact_phone  varchar(15)                         null comment '联系电话',
    profit_ratio   int                                 null comment '分成比例',
    account        varchar(64)                         null comment '账号',
    password       varchar(64)                         null comment '密码',
    create_time    timestamp default CURRENT_TIMESTAMP null comment '创建时间',
    update_time    timestamp default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '修改时间',
    create_by      varchar(64)                         null comment '创建人',
    update_by      varchar(64)                         null comment '修改人',
    remark         text                                null comment '备注'
)
    comment '合作商表';

domain层

package com.dkd.manage.domain.vo;

import com.dkd.manage.domain.Partner;
import lombok.Data;

@Data
public class PartnerVo extends Partner {
    //点位数量
    private Integer nodeCount;
}

mapper层

在这里插入图片描述

  /**
     * 查询合作商管理列表
     * @param partner
     * @return partnerVo集合
     */
    public List<PartnerVo> selectPartnerVoList(Partner partner);

在这里插入图片描述

    <select id="selectPartnerVoList" resultType="com.dkd.manage.domain.vo.PartnerVo"
            parameterType="Partner">
        SELECT
            p.id,
            p.partner_name,
            p.contact_person,
            p.contact_phone,
            p.profit_ratio,
            p.account,
            COUNT(n.id) AS node_count
        FROM
            tb_partner p
        LEFT JOIN
            tb_node n ON p.id = n.partner_id
        <where>
            <if test="partnerName != null  and partnerName != ''">
                             and p.partner_name like concat('%', #{partnerName}, '%')</if>
        </where>
        GROUP BY
            p.id
    </select>

service层
IPartnerService

  /**
     * 查询合作商列表
     *
     * @param partner 合作商
     * @return 合作商
     */
    public List<PartnerVo> selectPartnerVoList(Partner partner);

PartnerServiceImpl

    /**
     * 查询合作商列表
     *
     * @param partner 合作商
     * @return 合作商
     */
    @Override
    public List<PartnerVo> selectPartnerVoList(Partner partner)
    {
        return partnerMapper.selectPartnerVoList(partner);
    }

controller层

修改PartnerController

    /**
     * 查询合作商列表
     */
    @PreAuthorize("@ss.hasPermi('manage:partner:list')")
    @GetMapping("/list")
    public TableDataInfo list(Partner partner)
    {
        startPage();
        List<PartnerVo> listVo = partnerService.selectPartnerVoList(partner);
        return getDataTable(listVo);
    }

最终效果：

6.重置合作商密码

查看API文档
请求路径： /manage/partner/resetPwd/:id
编写controller

    /*
     * 重置合作商密码
     * /manage/partner/resetPwd/:id
     * */
    @PreAuthorize("@ss.hasPermi('manage:partner:edit')")
    @Log(title = "重置合作商密码", businessType = BusinessType.UPDATE)
    @PutMapping("/resetPwd/{id}")
    public AjaxResult resetpwd(@PathVariable Long id) {//1. 接收参数
        //2. 创建合作商对象
        Partner partner = new Partner();
        partner.setId(id);// 设置id
        partner.setPassword(SecurityUtils.encryptPassword("123456"));// 设置加密后的初始密码
        //3. 调用service更新密码
        return toAjax(partnerService.updatePartner(partner));
    }

修改前端
在partner/index.vue视图组件中

<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
    <template #default="scope">
        <el-button link type="primary" @click="resetPwd(scope.row)" v-hasPermi="['manage:partner:edit']">重置密码</el-button>

    </template>

</el-table-column>

<script>
    import { listPartner, getPartner, delPartner, addPartner, updatePartner,resetPartnerPwd } from "@/api/manage/partner";
    /* 重置合作商密码 */
    function resetPwd(row) {
        proxy.$modal.confirm('你确定要重置该合作商密码吗？').then(function () {
            return resetPartnerPwd(row.id);
        }).then(() => {
            proxy.$modal.msgSuccess("重置成功");
        }).catch(() => { });
    }
</script>

在manage/partner.js请求api中

// 重置合作商密码
export function resetPartnerPwd(id){
  return request({
    url: '/manage/partner/resetPwd/' + id,
    method: 'put'
  })
}

整体执行流程：

当用户点击重置密码时，会触发@click="resetPwd(scope.row)"函数；
该代码会弹出窗口，你是否重置合作商密码；
- 当用户点击取消时，会直接执行catch，其逻辑为空，就是什么也不用做；
- 当用户点击是的时候，会调用resetPartnerPwd(row.id)方法，该方法会向后端http://127.0.0.1:8080/manage/partner/resetPwd/{id}发起请求，并将结果返回给浏览器；
后端向前端的响应为：{“msg”:“操作成功”,“code”:200}
无论响应结果如何(不管code是200|500)，都会接着执行then后的 proxy.$modal.msgSuccess(“重置成功”);

   /* 重置合作商密码 */
    function resetPwd(row) {
        proxy.$modal.confirm('你确定要重置该合作商密码吗？').then(function () {
            return resetPartnerPwd(row.id);
        }).then(() => {
            proxy.$modal.msgSuccess("重置成功");
        }).catch(() => { });
    }
</script>

// 重置合作商密码
export function resetPartnerPwd(id){
  return request({
    url: '/manage/partner/resetPwd/' + id,
    method: 'put'
  })
}

7. 补充后端和前端是如何交互的？

我们以修改合作商为例：
当前端点击重置密码时，请求地址是：http://localhost/dev-api/manage/partner/resetPwd/1
在前端.env.development中，有如下代码：

  // vite 相关配置
    server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://127.0.0.1:8080',
          // target: 'https://api.wzs.pub/mock/13',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      }
    },

该代码的意思是将 http://localhost/dev-api/ 替换为 空字符串；
并将其转发到 http://127.0.0.1:8080/manage/partner/resetPwd/{id}；

那么后端是如何知道自己该调用那个方法去修改密码呢？

在后端application.yml中，有如下代码：

# 开发环境配置
server:
  # 服务器的HTTP端口，默认为 8080
  port: 8080
  servlet:
    # 应用的访问路径
    context-path: /
  tomcat:
    # tomcat的URI编码
    uri-encoding: UTF-8
    # 连接数满后的排队数，默认为100
    accept-count: 1000
    threads:
      # tomcat最大线程数，默认为200
      max: 800
      # Tomcat启动初始化的线程数，默认值10
      min-spare: 100

该段代码确定了Spring的配置环境，配置的环境就是前端提到的 http://127.0.0.1:8080；
在PartnerController.java文件中
在这里插入图片描述

在 Spring Boot 的控制器类上会有一个类级别的 @RequestMapping 注解/manage/partner，然后在具体的方法上，会有方法级别的映射，如你所见的 @PutMapping(“/resetPwd/{id}”);
最后后端地址就可以拼接为：http://127.0.0.1:8080/manage/partner/resetPwd/{id}，也就是前端转发的请求地址；
这个时候后端就知道调用resetPwd()方法；