乐优商城（三）品牌管理

最新推荐文章于 2021-08-30 19:37:38 发布
最新推荐文章于 2021-08-30 19:37:38 发布
阅读量1.3k 收藏 6
点赞数 2
分类专栏： # 乐优商城 文章标签： 微服务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bm1998/article/details/104611764
版权

文章目录

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

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

    在这里插入图片描述

  2. 填写项目信息 --> Next

    在这里插入图片描述

  3. 填写保存的位置 --> 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 请求方式，输入请求地址

    在这里插入图片描述

  3. 填写 Headers

    在这里插入图片描述

  4. 填写 Body，选择文件

    在这里插入图片描述

  5. 发送请求，得到响应的 url

    在这里插入图片描述

  6. 去目录查看一下

    在这里插入图片描述

2.2.4 通过浏览器访问图片

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

通过 nginx 代理图片路径

  1. 打开 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;
    }
}

  2. 重启 nginx

    在这里插入图片描述

配置 host 文件

在这里插入图片描述

通过浏览器访问图片

在这里插入图片描述

2.3 绕过网关

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

2.3.1 nginx 反向代理

在这里插入图片描述

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

  1. 修改 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 "用来匹配路径的正则" 重写后的路径 [指令];

  2. 修改 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. 再次上传图片，成功回显

    在这里插入图片描述

  3. 点击提交，成功新增品牌

    在这里插入图片描述

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. 点击修改按钮

    在这里插入图片描述

  2. 品牌信息回显成功

    在这里插入图片描述

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. 修改品牌名称

    在这里插入图片描述

    在这里插入图片描述

  2. 点击提交，修改成功

    在这里插入图片描述

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 测试

点击删除按钮，删除成功

在这里插入图片描述

在这里插入图片描述

bm1998
关注
专栏目录
乐优商城（03）–品牌管理
m0_60551090的博客
08-30 444
乐优商城（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">标签内的头部，添加以下内
后台管理系统之品牌管理
hangge的学习基地
04-10 1422
文章目录1.品牌的新增1.1.页面实现1.1.1.重置表单1.1.2.表单校验1.1.2.1.校验规则1.1.2.2.编写校验1.1.3.表单提交1.2.后台实现新增1.2.1.controller1.2.2.Service1.2.3.Mapper1.2.4.测试1.3.解决4001.3.1.原因分析1.3.2.QS工具1.3.3.解决问题1.4.新增完成后关闭窗口2.实现图片上传2.1.搭建项目...
乐优商城（四）品牌管理（前端）
lyj2018gyq的博客
08-30 4503
目录 一、前端页面构建 1.1 页面内容分析 1.2 data-tables组件 1.2.1 基本内容 1.2.2 代码分析 1.2.3 补充 1.3 页面优化 1.3.1 编辑和删除按钮 1.3.2 新增、删除（多个） 1.3.3 搜索 1.3.4 布局调整 1.4 对话框 1.4.1 初步实现弹窗 1.4.2 实现弹窗的可见和关闭 1.4.3 新增品牌的表单页 ...
MIS系统（10）- 商品管理之品牌管理
君莫笑
09-19 312
实现了商品品牌管理
乐优商城--nginx反向代理
xiazhiyou
05-22 3183
nginx 1. 使用域名访问本地项目 写在nginx之前的一些内容~ 为了项目优雅起见，我们都采用域名来访问。 例：一级域名：www.leyou.com     二级域名：manage.leyou.com 在浏览器输入域名时，浏览器会根据域名找到对应的ip和端口（域名解析） 域名解析 一个域名一定会被解析为一个或多个ip。这一般会包含两步： 本地域名解析 浏览器会首先在本机的hosts文件中...
乐优商城源码/数据库及笔记总结
热门推荐
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...
乐优商城（01）--项目启动
m0_60551090的博客
08-29 1345
乐优商城（01）–项目启动 一、项目介绍 乐优商城是一个全品类的电商购物网站（B2C）。 用户可以在线购买商品，加入购物车，下单，秒杀商品 可以品论已购买商品 管理员可以在后台管理商品的上下架，促销活动 管理员可以监控商品销售状况 客服可以在后台处理退款操作 二、项目搭建 2.1、技术选型 前端技术： 基础的HTML，CSS，JavaScript的（基于ES6标准） JQuery的 Vue.js 2.0以及基于Vue的框架：Vuetify 前端构建工具：的WebPack 前端安装包工
乐优商城（05）--商品管理
m0_60551090的博客
08-30 699
乐优商城（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 827
乐优商城（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 3702
我主要负责的是后台管理模块中商品的操作，我们后台管理系统是采用Vue+webpack+vue-cli+vue-route+Vuetify所构建的单页应用，所谓单页应用，就是我们一整个项目只有一个html页面，通过VueRoute根据路由规则来切换展示的页面，达到动态切换的效果，采用nginx反向代理，与前台项目共享一个微服务集群，使用axios来发起异步的ajax请求，达到前后端分离的结果，因为我们后台域名与后端域名不同，ajax请求默认不允许跨域，我们通过Cors来解决跨域问题，在商品的图片存储上，我们使
乐优商城数据库（修改后）最新
12-28
之前下载的不能直接导入，需要改一些代码，这个是修复后的数据库表
leyou-manager:乐优前端
03-09
乐游网 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
乐优商城第十一天（商品的修改）
CR2018博客
06-04 1061
修改的业务逻辑，这是原始的代码，不够严谨//首先根据spu的id删除sku Sku sku = new Sku(); sku.setSpuId(goods.getId()); List&lt;Sku&gt; oldSkus = skuMapper.select(sku); for (Sku s : oldSkus) { skuMapper.deleteByPrimaryKey(sku.ge...
乐优商城day09(商品的新增修改)
freestyle3210的博客
01-30 997
所有代码发布在 [https://github.com/hades0525/leyou] Day09 2019年1月29日 20:22 文件上传时出错： spring boot的应用服务在启动的时候，会生成在操作系统的/tmp目录下生成一个Tomcat.*的文件目录，用于"java.io.tmpdir"文件流操作TomcatEmbeddedServletContainerFactor...
乐优商城（五）品牌管理（后端）
lyj2018gyq的博客
08-30 6915
目录 二、后端接口实现 2.1 品牌查询 2.1.1 数据库表 2.1.2 实体类 2.1.3 Mapper 2.1.4 Controller 2.1.5 Service 2.1.6 测试 2.1.7 前端请求 2.2 品牌增加 2.2.1 Controller 2.2.2 Service 2.2.3 Mapper 2.2.4 前端的细节问题 2.2.5 图片的上传 ...
乐优商城第八天（品牌的管理，图片上传FastDFS）
CR2018博客
05-31 3970
商品的新增，从0开始新增商品。。1.首先是页面的入口，一个按钮，点击后应该有弹窗&lt;!--这里是新增品牌的入口--&gt; &lt;v-btn @click="addBrand" color="primary"&gt;新增品牌&lt;/v-btn&gt;点击按钮后，出发addBrand方法，show = true，弹出窗口methods: { addBrand() { this...
乐优商城笔记二：分类与品牌模块
Bbb的博客
06-14 988
分类模块与品牌模块实现 准备工作 使用nginx，通过域名访问本地项目 下载nginx压缩包（我这里直接下载的windows包，解压后编写配置文件，即可使用） nginx.conf ... # 配置两个server节点即可 server { listen 80; server_name manage.leyou.com; ...
乐优商城（九）商品管理
lyj2018gyq的博客
09-08 2560
目录 三、商品新增 3.1 效果预览 3.2 新增商品页基本框架 3.2.1 Steppers、步骤线 3.2.2 页面实现 3.2.3 步骤线切换按钮 3.3 商品基本信息 3.3.1 在data中定义goods属性 3.3.2 商品分类选择框 3.3.3 品牌选择（下拉选择框） 3.3.4 其他字段 三、商品新增 此页面单独新建一个组件MyGoodsForm，并且在M...
k最近邻算法（K-Nearest Neighbor，KNN）
Firework_han的博客
12-06 643
k最近邻算法（K-Nearest Neighbor，KNN）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bm1998

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

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

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

打赏作者

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

抵扣说明：

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

余额充值