网站建设开发设计营销公司厦门,广州市白云区建设局 网站,网站一般用什么软件做,王占山教授目录 前言点位管理菜单模块1.需求说明2.库表设计3.生成基础代码0 .使用若依代码生成器最终目标1.创建点位管理2.添加数据字典3.配置代码生成信息4.下载代码并导入项目 4.优化菜单——点位管理1.优化区域管理2.增加点位数3. 合作商4.区域管理中添加查看详情功能5.合作商添加点位… 目录 前言点位管理菜单模块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 备注
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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 备注
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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 rleft join (select region_id,count(*) as node_count from tb_node group by region_id) n on r.idn.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 ListRegionVo selectRegionVoList(Region region);select idselectRegionVoList resultTypecom.dkd.manage.domain.vo.RegionVoselect 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.idn.region_idwhereif testregionName ! null and regionName ! and r.region_name like concat(%, #{regionName}, %)/if/where/select修改IRegionService接口以及实现类
/*** 查询区域管理列表* param region* return RegionVo集合*/
public ListRegionVo selectRegionVoList(Region region);
/*** 查询区域管理列表* param region* return RegionVo集合*/
Override
public ListRegionVo selectRegionVoList(Region region) {return regionMapper.selectRegionVoList(region);
}修改RegionControlller类
/*** 查询区域管理列表*/
PreAuthorize(ss.hasPermi(manage:region:list))
GetMapping(/list)
public TableDataInfo list(Region region)
{startPage();ListRegionVo voList regionService.selectRegionVoList(region);return getDataTable(voList);
}3. 合作商 调整字段顺序 分成比例展示为百分之形式 删除 操作中修改/删改前的图标 1-3 操作如下图 新增时不展示明文密码 修改时显示创建时间字段 新增和删除时展示界面不同 4-6操作如下图 数据库种的密码展示应为加密类型 最终效果如下图id5 密码不展示明文
4.区域管理中添加查看详情功能
修改src\views\manage\partner\index.vue文件 el-button link typeprimary clickgetPartnerInfo(scope.row)v-hasPermi[manage:partner:query]查看详情/el-button!-- 查看合作商详情 --el-dialog title合作商详情 v-modelpartnerInfoOpen width600px append-to-body centerel-descriptions :column2 borderel-descriptions-item label合作商名称{{ form.partnerName }}/el-descriptions-itemel-descriptions-item label账号{{ form.account }}/el-descriptions-itemel-descriptions-item label联系人{{ form.contactPerson }}/el-descriptions-itemel-descriptions-item label联系电话{{ form.contactPhone }}/el-descriptions-itemel-descriptions-item label分成比例el-tag typesuccess{{ form.profitRatio }}%/el-tag/el-descriptions-itemel-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 主键idprimary 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_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 点位表;create table tb_partner
(id int auto_increment comment 主键idprimary 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 ListPartnerVo selectPartnerVoList(Partner partner);select idselectPartnerVoList resultTypecom.dkd.manage.domain.vo.PartnerVoparameterTypePartnerSELECTp.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_idwhereif testpartnerName ! null and partnerName ! and p.partner_name like concat(%, #{partnerName}, %)/if/whereGROUP BYp.id/select
service层 IPartnerService /*** 查询合作商列表** param partner 合作商* return 合作商*/public ListPartnerVo selectPartnerVoList(Partner partner);
PartnerServiceImpl /*** 查询合作商列表** param partner 合作商* return 合作商*/Overridepublic ListPartnerVo selectPartnerVoList(Partner partner){return partnerMapper.selectPartnerVoList(partner);}
controller层
修改PartnerController /*** 查询合作商列表*/PreAuthorize(ss.hasPermi(manage:partner:list))GetMapping(/list)public TableDataInfo list(Partner partner){startPage();ListPartnerVo 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);// 设置idpartner.setPassword(SecurityUtils.encryptPassword(123456));// 设置加密后的初始密码//3. 调用service更新密码return toAjax(partnerService.updatePartner(partner));}修改前端 在partner/index.vue视图组件中
el-table-column label操作 aligncenter class-namesmall-padding fixed-width width300pxtemplate #defaultscopeel-button link typeprimary clickresetPwd(scope.row) v-hasPermi[manage:partner:edit]重置密码/el-button/template/el-table-columnscriptimport { 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})
}整体执行流程
当用户点击重置密码时会触发clickresetPwd(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端口默认为 8080port: 8080servlet:# 应用的访问路径context-path: /tomcat:# tomcat的URI编码uri-encoding: UTF-8# 连接数满后的排队数默认为100accept-count: 1000threads:# tomcat最大线程数默认为200max: 800# Tomcat启动初始化的线程数默认值10min-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()方法
