前言

提示：本篇介紹點(diǎn)位管理模塊，需求分析——建表設(shè)計(jì)——前后端代碼生成——代碼優(yōu)化

---

點(diǎn)位管理菜單模塊

1.需求說明

• 業(yè)務(wù)場景： 首先，我們需要確定幾個(gè)有潛力的區(qū)域，這些區(qū)域可能是人流量大、消費(fèi)能力高的商業(yè)區(qū)或居民區(qū)。然后，我們要與這些區(qū)域內(nèi)的潛在合作商進(jìn)行洽談，比如商場、寫字樓、學(xué)校等地方的管理者或所有者。一旦我們與合作商達(dá)成協(xié)議，確定了合作的細(xì)節(jié)和點(diǎn)位，我們就可以安排工作人員去投放智能售貨機(jī)了。這些點(diǎn)位將成為我們智能售貨機(jī)的“家”，為消費(fèi)者提供便捷的購買服務(wù)。

• 分析設(shè)計(jì)模塊和業(yè)務(wù)流程：

點(diǎn)位管理主要涉及到三個(gè)功能模塊，業(yè)務(wù)流程如下：

1. 登錄系統(tǒng)：后臺管理人員登錄后臺系統(tǒng)
2. 新增區(qū)域: 后臺管理人員可以添加區(qū)域范圍，區(qū)域范圍與運(yùn)維/運(yùn)維人員掛鉤，區(qū)域下可關(guān)聯(lián)點(diǎn)位。
3. 新增合作商: 管理人員可以添加合作商，合作商與點(diǎn)位進(jìn)行關(guān)聯(lián)。
4. 新增區(qū)域點(diǎn)位: 后臺管理人員可以在特定區(qū)域內(nèi)新增點(diǎn)位，這些點(diǎn)位是放置智能售貨機(jī)的具體位置。
   

---

2.庫表設(shè)計(jì)

表的設(shè)計(jì)涉及到頁面原型，根據(jù)頁面原型設(shè)計(jì)表結(jié)構(gòu)；
完整的頁面原型如下：頁面原型，下圖中只是截取了重要的而部分；

• 區(qū)域管理頁面原型：
  
• 點(diǎn)位管理頁面原型：
  
• 合作商管理頁面原型：
  
• 根據(jù)上圖進(jìn)行分析：得到三個(gè)表；

1，區(qū)域表：字段有主鍵id、區(qū)域名稱
2，合作商表：字段有主鍵id、合作商名稱、聯(lián)系人、聯(lián)系電話、分成比例（int類型）、賬號、密碼
3，點(diǎn)位表：字段有主鍵id、點(diǎn)位名稱、詳細(xì)地址、商圈類型（int類型）

• 根據(jù)表信息，使用AI進(jìn)行表結(jié)構(gòu)創(chuàng)建，提示詞如下：

你是一位軟件工程師，幫我生成MySQL的表結(jié)構(gòu)
需求如下：
1，區(qū)域表，表名tb_region，字段有主鍵id、區(qū)域名稱
2，合作商表，表名tb_partner，字段有主鍵id、合作商名稱、聯(lián)系人、聯(lián)系電話、分成比例（int類型）、賬號、密碼
3，點(diǎn)位表，表名tb_node，字段有主鍵id、點(diǎn)位名稱、詳細(xì)地址、商圈類型（int類型）
其他要求：
1，每張表中都有創(chuàng)建時(shí)間(create_time)、修改時(shí)間(date_time)、創(chuàng)建人(create_by)、修改人(update_by)、備注(remark)這些字段
2，每張表的主鍵都是自增的
3，區(qū)域與點(diǎn)位是一對多的關(guān)系，合作商與點(diǎn)位是一對多的關(guān)系，請用字段表示出來，并建立外鍵約束
4，請為所有字段都添加上comment
5，幫我給生成的表中插入一些北京城市相關(guān)區(qū)域、點(diǎn)位、合作商的測試數(shù)據(jù)```

• 生成內(nèi)容 如下：

CREATE TABLE `tb_region` (`id` INT AUTO_INCREMENT COMMENT '主鍵id' PRIMARY KEY,`region_name` VARCHAR(255) NOT NULL COMMENT '區(qū)域名稱',`create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '創(chuàng)建時(shí)間',`update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改時(shí)間',`create_by` VARCHAR(64) COMMENT '創(chuàng)建人',`update_by` VARCHAR(64) COMMENT '修改人',`remark` TEXT COMMENT '備注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='區(qū)域表';-- 插入測試數(shù)據(jù)
INSERT INTO `tb_region` (`region_name`,`remark`) VALUES ('北京市朝陽區(qū)','北京市朝陽區(qū)'), ('北京市海淀區(qū)','北京市海淀區(qū)'), ('北京市東城區(qū)','北京市東城區(qū)');CREATE TABLE `tb_partner` (`id` INT AUTO_INCREMENT COMMENT '主鍵id' PRIMARY KEY,`partner_name` VARCHAR(255) NOT NULL COMMENT '合作商名稱',`contact_person` VARCHAR(64) COMMENT '聯(lián)系人',`contact_phone` VARCHAR(15) COMMENT '聯(lián)系電話',`profit_ratio` INT COMMENT '分成比例',`account` VARCHAR(64) COMMENT '賬號',`password` VARCHAR(64) COMMENT '密碼',`create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '創(chuàng)建時(shí)間',`update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改時(shí)間',`create_by` VARCHAR(64) COMMENT '創(chuàng)建人',`update_by` VARCHAR(64) COMMENT '修改人',`remark` TEXT COMMENT '備注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='合作商表';-- 插入測試數(shù)據(jù)
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 '點(diǎn)位名稱',`address` VARCHAR(255) NOT NULL COMMENT '詳細(xì)地址',`business_type` INT COMMENT '商圈類型',`region_id` INT COMMENT '區(qū)域ID',`partner_id` INT COMMENT '合作商ID',`create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '創(chuàng)建時(shí)間',`update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改時(shí)間',`create_by` VARCHAR(64) COMMENT '創(chuàng)建人',`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='點(diǎn)位表';-- 插入測試數(shù)據(jù)
-- 假設(shè)區(qū)域ID為1對應(yīng)'北京市朝陽區(qū)'，合作商ID為1對應(yīng)'合作商A'
INSERT INTO `tb_node` (`node_name`, `address`, `business_type`, `region_id`, `partner_id`) VALUES
('三里屯點(diǎn)位', '北京市朝陽區(qū)三里屯路', 1, 1, 1),
('五道口點(diǎn)位', '北京市海淀區(qū)五道口', 2, 2, 2);

---

3.生成基礎(chǔ)代碼

0 .使用若依代碼生成器最終目標(biāo)

1.創(chuàng)建點(diǎn)位管理

2.添加數(shù)據(jù)字典

先創(chuàng)建商圈的字典類型
再創(chuàng)建商圈的字典數(shù)據(jù)

3.配置代碼生成信息

導(dǎo)入三張表

配置合作商表（參考原型）

配置區(qū)域表（參考原型）

配置點(diǎn)位表（參考原型）

4.下載代碼并導(dǎo)入項(xiàng)目

選中三張表生成下載

解壓ruoyi.zip得到前后端代碼和動態(tài)菜單sql

代碼導(dǎo)入

調(diào)整二級菜單顯示順序

4.優(yōu)化菜單——點(diǎn)位管理

1.優(yōu)化區(qū)域管理

修改主鍵id，刪除操圖案；

優(yōu)化后：

2.增加點(diǎn)位數(shù)

• 前端修改
  

• 后端修改

1. Mysql語句創(chuàng)建：

-- 傳統(tǒng)模式
-- 1.先聚合統(tǒng)計(jì)每個(gè)區(qū)域下的點(diǎn)位數(shù)
-- 確定查詢表 tb_node
-- 確定分組字段 region_id
select region_id,count(*) as node_count from tb_node group by region_id;
-- 2.然后與區(qū)域表進(jìn)行關(guān)聯(lián)查詢
select r.id,r.region_name,r.remark,ifnull(n.node_count,0) as node_count from tb_region rleft join (select region_id,count(*) as node_count from tb_node group by region_id) n on r.id=n.region_id;-- AI輔助編程模式
-- 查詢區(qū)域表所有的信息,需要顯示每個(gè)區(qū)域的點(diǎn)位數(shù)
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;

2. 創(chuàng)建實(shí)體類
   

3. 創(chuàng)建RegionMapper以及RegionMapper.xml

/*** 查詢區(qū)域管理列表* @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 rleft 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>

5. 修改IRegionService接口以及實(shí)現(xiàn)類

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

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

6. 修改RegionControlller類

/*** 查詢區(qū)域管理列表*/
@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. 調(diào)整字段順序

2. 分成比例展示為百分之形式

3. 刪除 操作中修改/刪改前的圖標(biāo)
   1-3 操作如下圖
   

4. 新增時(shí)不展示明文密碼

5. 修改時(shí)顯示創(chuàng)建時(shí)間字段

6. 新增和刪除時(shí)展示界面不同
   4-6操作如下圖
   

7. 數(shù)據(jù)庫種的密碼展示應(yīng)為加密類型
   
   最終效果如下圖：id=5 密碼不展示明文
   

4.區(qū)域管理中添加查看詳情功能

修改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="聯(lián)系人">{{ form.contactPerson }}</el-descriptions-item><el-descriptions-item label="聯(lián)系電話">{{ form.contactPhone }}</el-descriptions-item><el-descriptions-item label="分成比例"><el-tag type="success">{{ form.profitRatio }}%</el-tag></el-descriptions-item><el-descriptions-item label="創(chuàng)建時(shí)間">{{ 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.合作商添加點(diǎn)位數(shù)量

1. MySQL語句分析

-- AI輔助編程模式
-- 你是一個(gè)軟件開發(fā)工程師，現(xiàn)在要根據(jù)數(shù)據(jù)庫的sql腳本，查詢并顯示合作商表所有的字段信息,同時(shí)顯示每個(gè)合作商的點(diǎn)位數(shù)，sql腳本如下
create table tb_node
(id            int auto_increment comment '主鍵id'primary key,node_name     varchar(255)                        not null comment '點(diǎn)位名稱',address       varchar(255)                        not null comment '詳細(xì)地址',business_type int                                 null comment '商圈類型',region_id     int                                 null comment '區(qū)域ID',partner_id    int                                 null comment '合作商ID',create_time   timestamp default CURRENT_TIMESTAMP null comment '創(chuàng)建時(shí)間',update_time   timestamp default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '修改時(shí)間',create_by     varchar(64)                         null comment '創(chuàng)建人',update_by     varchar(64)                         null comment '修改人',remark        text                                null comment '備注',constraint tb_node_ibfk_1foreign key (region_id) references tb_region (id)on update cascade on delete cascade,constraint tb_node_ibfk_2foreign key (partner_id) references tb_partner (id)on update cascade on delete cascade
)comment '點(diǎn)位表';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 '聯(lián)系人',contact_phone  varchar(15)                         null comment '聯(lián)系電話',profit_ratio   int                                 null comment '分成比例',account        varchar(64)                         null comment '賬號',password       varchar(64)                         null comment '密碼',create_time    timestamp default CURRENT_TIMESTAMP null comment '創(chuàng)建時(shí)間',update_time    timestamp default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '修改時(shí)間',create_by      varchar(64)                         null comment '創(chuàng)建人',update_by      varchar(64)                         null comment '修改人',remark         text                                null comment '備注'
)comment '合作商表';

2. domain層

package com.dkd.manage.domain.vo;import com.dkd.manage.domain.Partner;
import lombok.Data;@Data
public class PartnerVo extends Partner {//點(diǎn)位數(shù)量private Integer nodeCount;
}

3. mapper層

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

    <select id="selectPartnerVoList" resultType="com.dkd.manage.domain.vo.PartnerVo"parameterType="Partner">SELECTp.id,p.partner_name,p.contact_person,p.contact_phone,p.profit_ratio,p.account,COUNT(n.id) AS node_countFROMtb_partner pLEFT JOINtb_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 BYp.id</select>

4. service層
   IPartnerService

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

PartnerServiceImpl

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

5. 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. 最終效果：
   

6.重置合作商密碼

1. 查看API文檔
   請求路徑： /manage/partner/resetPwd/:id
   
   

2. 編寫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. 接收參數(shù)//2. 創(chuàng)建合作商對象Partner partner = new Partner();partner.setId(id);// 設(shè)置idpartner.setPassword(SecurityUtils.encryptPassword("123456"));// 設(shè)置加密后的初始密碼//3. 調(diào)用service更新密碼return toAjax(partnerService.updatePartner(partner));}

3. 修改前端
   在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'})
}

整體執(zhí)行流程：

• 當(dāng)用戶點(diǎn)擊重置密碼時(shí)，會觸發(fā)@click="resetPwd(scope.row)"函數(shù)；
• 該代碼會彈出窗口，你是否重置合作商密碼；
  - 當(dāng)用戶點(diǎn)擊取消時(shí)，會直接執(zhí)行catch，其邏輯為空，就是什么也不用做；
  - 當(dāng)用戶點(diǎn)擊是的時(shí)候，會調(diào)用resetPartnerPwd(row.id)方法，該方法會向后端http://127.0.0.1:8080/manage/partner/resetPwd/{id}發(fā)起請求，并將結(jié)果返回給瀏覽器；
• 后端向前端的響應(yīng)為：{“msg”:“操作成功”,“code”:200}
• 無論響應(yīng)結(jié)果如何(不管code是200|500)，都會接著執(zhí)行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. 補(bǔ)充后端和前端是如何交互的？

我們以修改合作商為例：
當(dāng)前端點(diǎn)擊重置密碼時(shí)，請求地址是：http://localhost/dev-api/manage/partner/resetPwd/1
在前端.env.development中，有如下代碼：

  // vite 相關(guān)配置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/ 替換為 空字符串；
并將其轉(zhuǎn)發(fā)到 http://127.0.0.1:8080/manage/partner/resetPwd/{id}；

那么后端是如何知道自己該調(diào)用那個(gè)方法去修改密碼呢？

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

# 開發(fā)環(huán)境配置
server:# 服務(wù)器的HTTP端口，默認(rèn)為 8080port: 8080servlet:# 應(yīng)用的訪問路徑context-path: /tomcat:# tomcat的URI編碼uri-encoding: UTF-8# 連接數(shù)滿后的排隊(duì)數(shù)，默認(rèn)為100accept-count: 1000threads:# tomcat最大線程數(shù)，默認(rèn)為200max: 800# Tomcat啟動初始化的線程數(shù)，默認(rèn)值10min-spare: 100

該段代碼確定了Spring的配置環(huán)境，配置的環(huán)境就是前端提到的 http://127.0.0.1:8080；
在PartnerController.java文件中

在 Spring Boot 的控制器類上會有一個(gè)類級別的 @RequestMapping 注解/manage/partner，然后在具體的方法上，會有方法級別的映射，如你所見的 @PutMapping(“/resetPwd/{id}”);
最后后端地址就可以拼接為：http://127.0.0.1:8080/manage/partner/resetPwd/{id}，也就是前端轉(zhuǎn)發(fā)的請求地址；
這個(gè)時(shí)候后端就知道調(diào)用resetPwd()方法；