乐优商城（三）品牌管理

最新推荐文章于 2024-10-31 16:17:19 发布
最新推荐文章于 2024-10-31 16:17:19 发布
阅读量199 收藏
点赞数 1
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you4580/article/details/134332528
版权

1. 品牌的新增

1.1 url 异步请求

  1. 点击品牌管理下的新增品牌，填写品牌信息后提交

2.打开浏览器控制台

由此可以得知：

  • 请求方式：POST
  • 请求路径：/item/brand
  • 请求参数：{name: “测试品牌”, image: “”, cids: “76,327”, letter: “C”}
  • 返回参数：无

1.2 实现品牌新增

1.2.1 Controller

分析四个参数：

  • 请求方式：POST
  • 请求路径：/item/brand
  • 请求参数：brand 对象，外加商品分类的 id 数组 cids
  • 返回参数：无
/**
 * 新增品牌
 * @param cids
 * @param brand 
 * @return
 */
@PostMapping
public ResponseEntity<Void> saveBrand(@RequestParam("cids") List<Long> cids, Brand brand) {
    brandService.saveBrand(cids,brand);
    // 响应 201
    return ResponseEntity.status(HttpStatus.CREATED).build();
}
1.2.2 Service

我们不仅要新增品牌，还要新增品牌和商品分类的中间表。由于是新增操作，所以还需要加上事务管理。

/**
 * 新增品牌
 * @param cids
 * @param brand
 * @return
 */
@Transactional
public void saveBrand(List<Long> cids, Brand brand) {
    // 先新增 Brand
    brandMapper.insertSelective(brand);
    // 再新增中间表
    for (Long cid : cids) {
        brandMapper.insertCategoryAndBrand(cid, brand.getId());
    }
}
1.2.3 Mapper

通用 Mapper 只能处理单表，因此我们要手写新增商品分类和品牌的中间表数据的方法

/**
 * 新增商品分类和品牌的中间表数据
 * @param cid 商品分类 id
 * @param bid 品牌 id
 */
@Insert("INSERT INTO tb_category_brand(category_id, brand_id) VALUES(#{cid}, #{bid})")
void insertCategoryAndBrand(@Param("cid") Long cid, @Param("bid") Long bid);
1.2.4 测试

响应状态码 400，请求参数不合法，那我们再看看请求体的内容

{name: "测试品牌", image: "", cids: "76,327", letter: "C"}

发现请求体的数据格式是 JSON 格式。

但我们 Controller 中接受参数是以 String 类型接受的，那么现在解决办法有两个：

  1. 将 Controller 中接受参数改为以 JSON 类型接受
  2. 将请求体内容改为以 String 类型发送

这两种方法都是可行的。第一种，如果将 Controller 中接受参数改为以 JSON 类型接受，我们就需要创建一个 Java 实体类，好用来反序列化，但这样为了一个方法去创建一个实体类，显然成本太大。

所以我们就采用第二种方法了。

1.2.5 解决问题

找到前端发送请求的代码

修改参数转换为以 String 类型发送

再次测试，新增品牌成功

打开控制台，可以看到请求体已经是以字符串形式发送了

2. 实现图片上传

刚才在实现品牌的新增中，我们并没有上传图片，接下来完成图片上传。

2.1 搭建工程

文件的上传并不只是在品牌管理中有需求，以后的其它服务也可能需要，因此我们创建一个独立的微服务，专门处理各种上传。

2.1.1 创建 leyou-upload

右键 leyou 项目 --> New Module --> Maven --> Next

填写项目信息 --> Next

填写保存的位置 --> Finish

2.1.2 添加依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.upload</groupId>
    <artifactId>leyou-upload</artifactId>
    <version>1.0-SNAPSHOT</version>

    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
    </dependencies>


</project>
2.1.3 配置文件
server:
  port: 8082
spring:
  application:
    name: upload-service
  servlet:
    multipart:
      max-file-size: 5MB
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:10086/eureka
  instance:
      lease-renewal-interval-in-seconds: 5
      lease-expiration-duration-in-seconds: 10

注意：我们添加了限制文件大小的配置

2.1.4 引导类
@SpringBootApplication
@EnableDiscoveryClient
public class LeyouUploadApplication {
    public static void main(String[] args) {
        SpringApplication.run(LeyouUploadApplication.class, args);
    }
}

2.2 实现图片上传

2.2.1 Controller

参考自定义组件中的文件上传组件可以知道以下内容：

  • 请求方式：上传肯定是 POST
  • 请求路径：/upload/image
  • 请求参数：参数名是 file，SpringMVC 会封装为一个接口：MultipartFile
  • 返回结果：上传成功后得到的文件的 url 路径，返回类型 String
@RestController
@RequestMapping("/upload")
public class UploadController {
    @Autowired
    private UploadService uploadService;

    /**
     * 图片上传
     * @param file
     * @return
     */
    @PostMapping("/image")
    public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file) {
        String url = uploadService.uploadImage(file);
        if(StringUtils.isBlank(url)) {
            return ResponseEntity.badRequest().build();
        }
        return ResponseEntity.status(HttpStatus.CREATED).body(url);
    }
}
2.2.2 Service

在上传文件过程中，我们需要对文件进行检验：

  1. 检验文件类型
  2. 检验文件内容
@Service
public class UploadService {
    // 图片类型
    private static final List<String> IMAGE_CONTENT_TYPES = Arrays.asList("image/png", "image/jpeg");
    // 日志
    private static final Logger LOGGER = LoggerFactory.getLogger(UploadService.class);

    /**
     * 图片上传
     *
     * @param file
     * @return
     */
    public String uploadImage(MultipartFile file) {
        // 获取文件名
        String filename = file.getOriginalFilename();
        // 获取文件类型
        String contentType = file.getContentType();

        // 文件类型不合法，直接返回 null
        if (!IMAGE_CONTENT_TYPES.contains(contentType)) {
            LOGGER.info("文件类型不合法：{}", filename);
            return null;
        }

        try {
            BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
            // 如果文件内容不合法，直接返回 null
            if (bufferedImage == null) {
                LOGGER.info("文件内容不合法：{}", filename);
                return null;
            }

            // 保存文件到服务器
            file.transferTo(new File("C:\\Users\\admin\\Desktop\\img\\" + filename));
            // 返回 url
            return "http://image.leyou.com/" + filename;
        } catch (IOException e) {
            e.printStackTrace();
            LOGGER.info("服务器内部错误：{}", filename);
        }

        return null;
    }
}

注意：这里图片地址使用了另外的 url，原因如下：

  • 图片不能保存在服务器内部，这样会对服务器产生额外的加载负担
  • 一般静态资源都应该使用独立域名，这样访问静态资源时不会携带一些不必要的 cookie，减小请求的数据量
2.2.3 测试

  1. 打开 Postman 接口测试工具

  2. 选择 Post 请求方式，输入请求地址

填写 Headers

填写 Body，选择文件

发送请求，得到响应的 url

去目录查看一下

2.2.4 通过浏览器访问图片

现在我们返回了图片的 url，但这个 url 浏览器还不能访问到，也就无法做到图片的回显。

通过 nginx 代理图片路径

打开 nginx 配置文件，添加如下配置

server {
    listen       80;
    server_name  image.leyou.com;

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        root C:\\Users\\admin\\Desktop\\img;
    }
}

重启 nginx

配置 host 文件

通过浏览器访问图片

2.3 绕过网关

图片上传是文件的传输，如果也经过 Zuul 网关的代理，文件就会经过多次网路传输，造成不必要的网络负担。在高并发时，可能导致网络阻塞，Zuul 网关不可用。这样我们的整个系统就瘫痪了。所以，我们上传文件的请求就不经过网关来处理了。

2.3.1 nginx 反向代理

这里可以看到请求路径为：api/upload/image，那么肯定会经过 Zuul 网关。如果要绕过 Zuul 网关，可以使用 nginx 反向代理到图片上传的服务地址，步骤如下：

修改 nginx 配置文件，将以 /api/upload 开头的请求拦截下来，转交到图片上传的服务地址

server {
    listen       80;
    server_name  api.leyou.com;

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location /api/upload {
        proxy_pass http://127.0.0.1:8082;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }

    location / {
        proxy_pass http://127.0.0.1:10010;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}

这样请求路径变为了：http://127.0.0.1:8002/api/upload/image，但还是多了一个 /api。

nginx 提供了 rewrite 指令，用于对地址进行重写，格式如下：

rewrite "用来匹配路径的正则" 重写后的路径 [指令];

修改 nginx 配置文件，重写地址

server {
    listen       80;
    server_name  api.leyou.com;

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location /api/upload {
        proxy_pass http://127.0.0.1:8082;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;

        rewrite "^/api/(.*)$" /$1 break; 
    }

    location / {
        proxy_pass http://127.0.0.1:10010;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}
  • 首先，我们映射路径是 /api/upload，而下面一个映射路径是 / ，根据最长路径匹配原则，/api/upload 优先级更高。也就是说，凡是以 /api/upload 开头的路径，都会被第一个配置处理
  • proxy_pass：反向代理，这次我们代理到 8082 端口，也就是 upload-service 服务
  • rewrite "^/api/(.*)$" /$1 break，路径重写：

"^/api/(.*)$"：匹配路径的正则表达式，用了分组语法，把/api/以后的所有部分当做1组
/$1：重写的目标路径，这里用$1引用前面正则表达式匹配到的分组（组编号从1开始），即/api/后面的所有。这样新的路径就是除去/api/以外的所有，就达到了去除/api前缀的目的
break：指令，常用的有2个，分别是：last、break
last：重写路径结束后，将得到的路径重新进行一次路径匹配
break：重写路径结束后，不再重新匹配路径。
 

3.重启 nginx 服务器

2.3.2 跨域问题

原来在网关的服务中添加了跨域过滤器，解决了跨域问题。现在不经过网关了，那么同样需要在图片上传的服务中添加了跨域过滤器。

@Configuration
public class LeyouCorsConfigration {

    @Bean
    public CorsFilter corsFilter() {
        // 初始化 cors 配置对象
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://manage.leyou.com"); //允许的域
        config.setAllowCredentials(true); //是否发送 Cookie 信息
        config.addAllowedMethod("*"); //允许的请求方式
        config.addAllowedHeader("*"); //允许的头信息

        //初始化 cors 配置源对象
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config); //添加映射路径，拦截一切请求

        return new CorsFilter(configSource); //返回 CorsFilter
    }
}
2.3.3 测试

  1. 重启 leyou-upload 服务

  2. 再次上传图片，成功回显

点击提交，成功新增品牌

2.3.4 文件上传的缺陷

上传本身没有任何问题，问题出在保存文件的方式，我们是保存在服务器机器，就会有下面的问题：

  • 单机器存储，存储能力有限
  • 无法进行水平扩展，因为多台机器的文件无法共享,会出现访问不到的情况
  • 数据没有备份，有单点故障风险
  • 并发能力差

这个时候，最好使用分布式文件存储来代替本地文件存储。

3. FastDFS

3.1 什么是分布式文件系统

分布式文件系统（Distributed File System）是指文件系统管理的物理存储资源不一定直接连接在本地节点上，而是通过计算机网络与节点相连。

通俗来讲：

  • 传统文件系统管理的文件就存储在本机。
  • 分布式文件系统管理的文件存储在很多机器，这些机器通过网络连接，要被统一管理。无论是上传或者访问文件，都需要通过管理中心来访问

3.2 什么是 FastDFS

FastDFS 是由淘宝的余庆先生所开发的一个轻量级、高性能的开源分布式文件系统。用纯 C 语言开发，功能丰富：

  • 文件存储
  • 文件同步
  • 文件访问（上传、下载）
  • 存取负载均衡
  • 在线扩容

适合有大容量存储需求的应用或系统。同类的分布式文件系统有谷歌的 GFS、HDFS（Hadoop）、TFS（淘宝）等。

3.3 FastDFS 的架构

3.3.1 架构图

FastDFS 两个主要的角色：Tracker Server 和 Storage Server 。

  • Tracker Server：跟踪服务器，主要负责调度 storage 节点与 client 通信，在访问上起负载均衡的作用，和记录 storage 节点的运行状态，是连接 client 和 storage 节点的枢纽。
  • Storage Server：存储服务器，保存文件和文件的 meta data（元数据），每个 storage server 会启动一个单独的线程主动向 Tracker cluster 中每个 tracker server 报告其状态信息，包括磁盘使用情况，文件同步情况及文件上传下载次数统计等信息
  • Group：文件组，多台 Storage Server 的集群。上传一个文件到同组内的一台机器上后，FastDFS 会将该文件即时同步到同组内的其它所有机器上，起到备份的作用。不同组的服务器，保存的数据不同，而且相互独立，不进行通信。
  • Tracker Cluster：跟踪服务器的集群，有一组 Tracker Server（跟踪服务器）组成。
  • Storage Cluster ：存储集群，有多个 Group 组成。
     
3.3.2 上传和下载流程

  1. Client 通过 Tracker server 查找可用的 Storage server。
  2. Tracker server 向 Client 返回一台可用的 Storage server 的 IP 地址和端口号。
  3. Client 直接通过 Tracker server 返回的 IP 地址和端口与其中一台 Storage server 建立连接并进行文件上传。
  4. 上传完成，Storage server 返回 Client 一个文件 ID，文件上传结束。

  1. Client 通过 Tracker server 查找要下载文件所在的的 Storage server。
  2. Tracker server 向 Client 返回包含指定文件的某个 Storage server 的 IP 地址和端口号。
  3. Client 直接通过 Tracker server 返回的 IP 地址和端口与其中一台 Storage server 建立连接并指定要下载文件。
  4. 下载文件成功。

3.4 安装 FastDFS

参考下载的 FastDFS 资料

注意：配置 FastDFS 服务器 ip 是你自己虚拟机的 ip

3.5 使用 FastDFS 客户端

3.5.1 添加依赖

在父工程中，我们已经锁定了依赖的版本：

<fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>

所以直接在 leyou-upload 工程中直接引入依赖即可：

<dependency>
    <groupId>com.github.tobato</groupId>
    <artifactId>fastdfs-client</artifactId>
</dependency>
3.5.2 引入配置类

@Configuration
@Import(FdfsClientConfig.class)
// 解决jmx重复注册bean的问题
@EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING)
public class FastClientImporter {
    
}
3.5.3 配置文件

在 leyou-upload 工程中添加 FastDFS 配置

fdfs:
  so-timeout: 1501 # 超时时间
  connect-timeout: 601 # 连接超时时间
  thumb-image: # 缩略图
    width: 60
    height: 60
  tracker-list: # tracker地址：你的虚拟机服务器地址+端口（默认是22122）
    - 192.168.222.132:22122
3.5.4 配置 host 文件

将来通过 image.leyou.com 这个域名访问 fastDFS 服务器上的图片资源。所以需要配置 hosts 文件，将 image.leyou.com 代理到虚拟机地址。

192.168.222.132 image.leyou.com
3.5.5 测试

注意：测试的时候虚拟机上 FastDFS 和 Nginx 需要是启动的，并且防火请要是关闭的。

编写测试类

@SpringBootTest
@RunWith(SpringRunner.class)
public class FastDFSTest {

    @Autowired
    private FastFileStorageClient storageClient;

    @Autowired
    private ThumbImageConfig thumbImageConfig;

    @Test
    public void testUpload() throws FileNotFoundException {
        // 上传的文件
        File file = new File("C:\\Users\\admin\\Desktop\\1.jpg");
        // 上传并保存图片，参数：1-上传的文件流 2-文件的大小 3-文件的后缀 4-可以不写
        StorePath storePath = this.storageClient.uploadFile(
                new FileInputStream(file), file.length(), "jpg", null);
        // 带分组的路径
        System.out.println(storePath.getFullPath());
        // 不带分组的路径
        System.out.println(storePath.getPath());
    }

    @Test
    public void testUploadAndCreateThumb() throws FileNotFoundException {
        File file = new File("C:\\Users\\admin\\Desktop\\1.jpg");
        // 上传并且生成缩略图
        StorePath storePath = this.storageClient.uploadImageAndCrtThumbImage(
                new FileInputStream(file), file.length(), "jpg", null);
        // 带分组的路径
        System.out.println(storePath.getFullPath());
        // 不带分组的路径
        System.out.println(storePath.getPath());
        // 获取缩略图路径
        String path = thumbImageConfig.getThumbImagePath(storePath.getPath());
        System.out.println(path);
    }
}

testUpload 运行结果

group1/M00/00/00/wKjehF5bzsuAab4AAADSZYQEtvY842.jpg
M00/00/00/wKjehF5bzsuAab4AAADSZYQEtvY842.jpg

testUploadAndCreateThumb 运行结果

group1/M00/00/00/wKjehF5b0u-AAX-AAADSZYQEtvY315.jpg
M00/00/00/wKjehF5b0u-AAX-AAADSZYQEtvY315.jpg
M00/00/00/wKjehF5b0u-AAX-AAADSZYQEtvY315_60x60.jpg

访问第一组第一个路径（正常上传的图片）

访问第二组第三个路径（上传的缩略图）

3.5.6 使用 FastDFS 改造项目

修改 leyou-upload 项目中的 UploadService，将文件上传到本地改为文件上传到 FastDFS

@Service
public class UploadService {
    // 图片类型
    private static final List<String> IMAGE_CONTENT_TYPES = Arrays.asList("image/png", "image/jpeg");
    // 日志
    private static final Logger LOGGER = LoggerFactory.getLogger(UploadService.class);

    @Autowired
    private FastFileStorageClient storageClient;

    /**
     * 图片上传
     *
     * @param file
     * @return
     */
    public String uploadImage(MultipartFile file) {
        // 获取文件名
        String filename = file.getOriginalFilename();
        // 获取文件类型
        String contentType = file.getContentType();

        // 文件类型不合法，直接返回 null
        if (!IMAGE_CONTENT_TYPES.contains(contentType)) {
            LOGGER.info("文件类型不合法：{}", filename);
            return null;
        }

        try {
            BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
            // 如果文件内容不合法，直接返回 null
            if (bufferedImage == null) {
                LOGGER.info("文件内容不合法：{}", filename);
                return null;
            }

            // 获取文件名后缀
            String type = StringUtils.substringAfterLast(filename, ".");

            // 保存文件到 FastDFS 服务器
            StorePath storePath = this.storageClient.uploadFile(
                    file.getInputStream(), file.getSize(), type, null);

            // 返回 url
            return "http://image.leyou.com/" + storePath.getFullPath();
        } catch (IOException e) {
            e.printStackTrace();
            LOGGER.info("服务器内部错误：{}", filename);
        }

        return null;
    }
}
3.5.7 再次测试

新增品牌完成后，可以看到原来上传到本地的图片已经无法显示了，而上传到 FastDFS 上的图片可以显示

4. 品牌的修改

4.1 品牌的回显

要修改品牌信息，首先要让品牌信息回显。

4.1.1 前端部分

我们找到前端中的修改品牌方法

可以看到这里有一个根据品牌信息查询商品分类的请求，可以得到以下信息：

  • 请求方式：GET
  • 请求参数：品牌 id，这里用的是 Rest 风格的占位符
  • 请求地址：/item/category/bid
  • 返回参数：商品分类的集合
4.1.2 实现品牌的回显
4.1.2.1 Controller

在 CategoryController 中编写方法

/**
 * 根据品牌 Id 查询品牌分类
 * @param bid
 * @return
 */
@GetMapping("/bid/{bid}")
public ResponseEntity<List<Category>> queryCategoryByBrandId(@PathVariable("bid") Long bid) {
    if (bid == null || bid.longValue() < 0) {
        return ResponseEntity.badRequest().build(); // 响应 400
    }
    List<Category> categories = categoryService.queryCategoryByBrandId(bid);
    if(CollectionUtils.isEmpty(categories)) {
        return ResponseEntity.notFound().build(); // 响应 404
    }
    return ResponseEntity.ok(categories);
}
4.1.2.2 Service

在 CategoryService 中编写方法

/**
 * 根据品牌 Id 查询品牌分类
 * @param bid
 * @return
 */
public List<Category> queryCategoryByBrandId(Long bid) {
    List<Category> categories = categoryMapper.queryCategoryByBrandId(bid);
    return categories;
}
4.1.2.3 Mapper

在 CategoryMapper 中编写方法

/**
 * 根据品牌 Id 查询品牌分类
 * @param bid
 * @return
 */
@Select("SELECT * FROM tb_category WHERE id IN (SELECT category_id FROM tb_category_brand WHERE brand_id = #{bid})")
List<Category> queryCategoryByBrandId(Long bid);
4.1.2.4 测试

  1. 点击修改按钮

品牌信息回显成功

4.2 品牌的修改

4.2.1 前端部分

找到前端提交表单的方法

可以看到当 isEdit 值为 true 时，发送 put 请求。

而在修改品牌方法中已经把 isEdit 值赋值为 true 了

于是可以得出四个参数：

  • 请求方式：PUT
  • 请求路径：/item/brand
  • 请求参数：brand 对象，外加商品分类的 id 数组 cids
  • 返回参数：无
4.2.2 实现品牌的修改
4.2.2.1 Controller

在 BrandController 编写方法

/**
 * 更新品牌
 * @param cids
 * @param brand
 * @return
 */
@PutMapping
public ResponseEntity<Void> updateBrand(@RequestParam("cids") List<Long> cids, Brand brand) {
    brandService.updateBrand(cids,brand);
    // 响应 204
    return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
}
4.2.2.2 Service

在 BrandService 编写方法

/**
 * 更新品牌
 * @param cids
 * @param brand
 */
@Transactional
public void updateBrand(List<Long> cids, Brand brand) {
    // 先更新 Brand
    brandMapper.updateByPrimaryKey(brand);
    // 通过品牌 id 删除中间表
    brandMapper.deleteCategoryAndBrandByBid(brand.getId());
    // 再新增中间表
    for (Long cid : cids) {
        brandMapper.insertCategoryAndBrand(cid, brand.getId());
    }
}
4.2.2.3 Mapper

在 BrandMapper 编写方法

/**
 * 通过品牌 id 删除中间表
 * @param bid
 */
@Delete("DELETE FROM tb_category_brand WHERE brand_id = #{bid}")
void deleteCategoryAndBrandByBid(Long bid);
4.2.2.4 测试

  1. 修改品牌名称

点击提交，修改成功

5. 品牌的删除

5.1 前端部分

前端代码里没有删除函数，我就自己定义了一个，删除成功后重新加载数据

可以看到这里有一个删除品牌的请求，可以得到以下信息：

  • 请求方式：DELETE
  • 请求参数：品牌 id，这里用的是 Rest 风格的占位符
  • 请求地址：/item/brand/bid
  • 返回参数：无

5.2 实现品牌的删除

5.2.1 Controller

在 BrandController 中编写

/**
 * 删除品牌
 * @param bid
 * @return
 */
@DeleteMapping("/bid/{bid}")
public ResponseEntity<Void> deleteBrand(@PathVariable("bid") Long bid) {
    brandService.deleteBrand(bid);
    // 响应 204
    return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
}
5.2.2 Service

在 BrandService 中编写

/**
 * 删除品牌
 * @param bid
 */
@Transactional
public void deleteBrand(Long bid) {
    // 通过品牌 id 删除中间表
    brandMapper.deleteCategoryAndBrandByBid(bid);
    // 删除品牌
    brandMapper.deleteByPrimaryKey(bid);
}
5.2.3 测试

点击删除按钮，删除成功

you4580
关注
乐优商城源码/数据库及笔记总结
dianemax
07-01 1万+
文章目录1 源码2 笔记2.1 项目概述2.2 微服务3 项目优化4 乐优商城中涉及到的设计模式5 线程安全问题6 1 源码 后端源码：leyou 门户网站源码：leyou-portal 后台管理系统源码：leyou-manage-web 乐优商城最新数据库文件：sql.txt 2 笔记 2.1 项目概述 项目概述 2.2 微服务 微服务一：注册微服务：LyRegister 使用Sprin...
乐优商城（03）–品牌管理
m0_60551090的博客
08-30 441
乐优商城（03）–品牌管理 后台品牌管理页面预览 一、前端页面修改 在/src/pages/item/Brand.vue页面的<v-card-title>标签中新增 <v-btn color="error" @click="deleteCheckBrand">删除选中</v-btn> 在<v-data-table>标签中新增，如图： 在<template slot="items" slot-scope="props">标签内的头部，添加以下内
乐优商城
xiazhiyou
06-13 3672
乐优商城项目概述：1. 项目介绍1.1 系统架构1.1.1 架构图1.1.2 系统架构解读1.2 技术选型1.2.1 前后端相关技术1.2.2 相关技术解读2. 微服务2.1 系统架构2.1.1 集中式架构2.1.2 垂直拆分2.1.3 分布式服务2.1.4 微服务2.2 服务间远程调用方式2.1.1 RPC2.1.2 Http2.1.3 两者比较3. 后端微服务3.1 注册微服务：LyReg...
乐优商城项目
m0_45209551的博客
06-01 3407
了解电商行业了解乐优商城项目结构能独立搭建项目基本框架能参考使用ES6的新语法学习电商项目，自然要先了解这个行业，所以我们首先来聊聊电商行业主要从需求方、盈利模式、技术侧重点这三个方面来看它们的不同各种企业里面用的管理系统（ERP、HR、OA、CRM、物流管理系统。。。。。。。）需求方：公司、企业内部盈利模式：项目本身卖钱技术侧重点：业务功能门户网站、电商网站：baidu.com、qq.com、taobao.com、jd.com ......需求方：广大用户群体盈利模式：虚拟币、增值服务、广告收益.....
乐优商城（三）商品分类管理
lyj2018gyq的博客
08-28 1万+
目录 一、数据 二、页面实现 2.1 页面分析 2.2 功能实现 2.2.1 url异步请求 2.2.2 后台接口实现 2.3 解决跨域请求 2.3.1 什么是跨域 2.3.2 解决跨域问题的方案 2.3.3 cors解决跨域问题 2.3.4 重新测试 2.4 功能完善 2.4.1 异步查询工具axios 2.4.2 QS工具 2.4.3 增加分类 2.4.4 删除...
乐优商城（一）项目介绍
热门推荐
lyj2018gyq的博客
08-23 5万+
GitHub：https://github.com/lyj8330328 目录 一，项目介绍 二，系统架构 2.1架构图 2.2架构图介绍 三，项目搭建 3.1技术选型 3.2域名 3.3后台管理系统搭建 3.3.1代码 3.3.2安装依赖 3.3.3运行测试 3.3.4项目结构 3.4前台门户搭建（暂略） 3.5服务搭建 ...
黑马微服务项目乐优商城全套
m0_37768843的博客
12-16 1万+
资源链接 链接：https：//download.csdn.net/download/m0_37768843/10853969 黑马程序员Java49期品优购分布式电商项目全套视频及源码 链接：https://blog.csdn.net/m0_37768843/article/details/84667986 黑马18年11月最新十次方项目地址 链接：https://blog.csdn....
乐优商城笔记
aa6272438的博客
04-15 535
<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post"> <link rel="stylesheet" href="https://csdnimg.c...
乐优商城项目实战系列2
xiaoxu的博客
01-22 589
系列2主要是后台管理系统部分功能的完善和搭建，我自己在晚上做的时候，学习完nginx后并没有实际使用，而是在原来项目的基础上进行了改动。 自己发现在mapper接口上可能有一些问题做了一定修改。需要前端和sql文件可以私聊
乐优商城（01）--项目启动
m0_60551090的博客
08-29 1334
乐优商城（01）–项目启动 一、项目介绍 乐优商城是一个全品类的电商购物网站（B2C）。 用户可以在线购买商品，加入购物车，下单，秒杀商品 可以品论已购买商品 管理员可以在后台管理商品的上下架，促销活动 管理员可以监控商品销售状况 客服可以在后台处理退款操作 二、项目搭建 2.1、技术选型 前端技术： 基础的HTML，CSS，JavaScript的（基于ES6标准） JQuery的 Vue.js 2.0以及基于Vue的框架：Vuetify 前端构建工具：的WebPack 前端安装包工
乐优商城（05）--商品管理
m0_60551090的博客
08-30 687
乐优商城（05）–商品管理 一、导入图片资源 现在商品表中虽然有数据，但是所有的图片信息都是无法访问的，因此需要把图片导入到服务器中： 将images.zip文件上传至/leyou/static目录：在leyou下创建static目录 使用命令解压： unzip images.zip 修改Nginx配置，使nginx反向代理这些图片地址： vim /opt/nginx/config/nginx.conf 修改成如下配置： server { listen 80; server_
乐优商城（02）--商品分类
m0_60551090的博客
08-29 821
乐优商城（02）–商品分类 一、创建数据库 导入sql文件，运行之 得到以下数据表： 二、页面实现 2.1、url请求分析 找到页面Category.vue，目录路径为：src/pages/item/Category.vue 商品分类使用了树状结构，而这种结构的组件vuetify并没有提供，这里自定义了一个树状组件： <template> <v-card> <v-flex xs12 sm10> <v-tree url="/item/
乐优商城各个模块话术
技术高手
05-09 3698
我主要负责的是后台管理模块中商品的操作，我们后台管理系统是采用Vue+webpack+vue-cli+vue-route+Vuetify所构建的单页应用，所谓单页应用，就是我们一整个项目只有一个html页面，通过VueRoute根据路由规则来切换展示的页面，达到动态切换的效果，采用nginx反向代理，与前台项目共享一个微服务集群，使用axios来发起异步的ajax请求，达到前后端分离的结果，因为我们后台域名与后端域名不同，ajax请求默认不允许跨域，我们通过Cors来解决跨域问题，在商品的图片存储上，我们使
人工智能和大数据如何改变企业？
雪兽软件
10-29 318
尽管人工智能和大数据具有显著优势，但在应用它们时也存在挑战。必须考虑伦理问题，例如隐私和人工智能算法中的潜在偏差。总之，人工智能和大数据不仅在改变公司内部的营销方式，还在改变这些实体制定战略决策的方式。这些技术能够更好地了解消费者、定制营销努力并提供量身定制的推荐，从而提高客户满意度并带来销售额的增长。适应这些创新的公司不仅将保持在竞争的前沿，还将最大限度地利用市场机会。本文转载自雪兽软件更多精彩推荐请访问雪兽软件官网。
《使用Gin框架构建分布式应用》阅读笔记：p234-p250
codists的博客
10-29 1029
书里使用的是RabbitMQ(https://www.rabbitmq.com/)，这里补充一点说明：a、访问管理页面从3.8版本开始，管理插件(rabbitmq_management)默认不器用。需要先启用才能使用访问管理页面。b、默认帐号、密码如果启动容器的时候未设置密码，账号、密码默认是guest、guest。c、各端口作用client端通连接端口：5672页面管理访问端口： 15672服务间通信端口：25672d.管理页面Overview > Totals 缺少图exit。
二百七十三、Kettle——ClickHouse中增量导入数据准确性统计表数据（1天1次）
最新发布
tiantang2renjian的博客
10-31 971
Kettle——ClickHouse中增量导入数据准确性统计表数据（1天1次）
【Leecode】Leecode刷题之路第35天之搜索插入位置
工一木子
10-29 244
1.二分查找思想（天下大势，分久必合，合久必分）：分治思想（大数据也用到了这种思想）代码示例：（Java）代码示例：（Java）
Java 入门系列（1）：总篇
Chen7Chan的博客
10-30 477
新的编程之旅--Java站
探索乐优商城的核心架构与技术优势
此外，如果“乐优商城”是一个开源项目，那么开发者还需要了解如何使用Git等版本控制系统来管理和维护代码的版本。" 由于描述和标签中只有重复的“乐优商城”字样，并未提供实际的内容，所以无法从这些信息中提取出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值