• javaee之黑马乐优商城2


    简单分析一下商品分类表的结构

    先来说一下分类表与品牌表之间的关系

     再来说一下分类表和品牌表与商品表之间的关系

     面我们要开始就要创建sql语句了嘛,这里我们分析一下字段

    用到的数据库是heima->tb_category这个表

    现在去数据库里面创建好这张表

     

     下面我们再去编写一个实体类之前,我们去看一下这个类的请求方式,请求路径,请求参数,返回数据都是什么

    下面再去编写实体类

    实体都是放到 

    出现了一个小插曲,开始的时候,我maven项目右边的模块有些是灰色的,导致我导入依赖之后,所有的注解什么都不能用,解决方案如下

    然后把依赖重新导入一下

    我们先去完成我们商品分类表的一个实体类

     Category.java

    1. package com.leyou.item.pojo;
    2. import lombok.Data;
    3. import tk.mybatis.mapper.annotation.KeySql;
    4. import javax.persistence.Id;
    5. import javax.persistence.Table;
    6. /**
    7. * Created by Administrator on 2023/8/28.
    8. */
    9. @Table(name="tb_category")
    10. @Data
    11. public class Category {
    12. @Id
    13. @KeySql(useGeneratedKeys = true)
    14. private Long id;
    15. private String name;
    16. private Long parentId;
    17. private Boolean isParent;
    18. private Integer sort;
    19. }

    然后去到ly-item-service去写具体的业务逻辑,比如mapper,service,web都在这里面

    这里来说一个依赖问题

     引入了spring-boot-starter-web这个依赖,也包含了spring的核心依赖

    说一下在写这个controller类的时候,我们的路径是什么,路径就是我们访问每一个接口传递过来的url

    ResponseEntity这个类是干嘛的

     格式用法有两种

    CollectionUtils工具类

     这个是Spring给我们提供的一个工具类

    我们可以来做如下检测

     下面我们贴上这个CategoryController的代码

    1. package com.leyou.item.web;
    2. import com.leyou.item.pojo.Category;
    3. import com.leyou.item.service.CategoryService;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.http.HttpStatus;
    6. import org.springframework.http.ResponseEntity;
    7. import org.springframework.util.CollectionUtils;
    8. import org.springframework.web.bind.annotation.GetMapping;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.RequestParam;
    11. import org.springframework.web.bind.annotation.RestController;
    12. import java.util.List;
    13. /**
    14. * Created by Administrator on 2023/8/29.
    15. */
    16. @RestController
    17. @RequestMapping("/category")
    18. public class CategoryController {
    19. @Autowired
    20. private CategoryService categoryService;
    21. /**
    22. * 根据父节点的id查询商品分类
    23. * @param pid
    24. * @return
    25. */
    26. @GetMapping("/list")
    27. public ResponseEntity> queryCategoryListByPid(@RequestParam("pid")Long pid) {
    28. try {
    29. if(pid == null || pid.longValue() < 0) {
    30. //会返回带着状态码的对象400 参数不合法
    31. // return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
    32. //可以做一格优化,下面的类似
    33. return ResponseEntity.badRequest().build();
    34. }
    35. //开始利用service执行查询操作
    36. List categoryList = categoryService.queryCategoryListByParentId(pid);
    37. if(CollectionUtils.isEmpty(categoryList)) {
    38. //如果结果集为空,响应404
    39. return ResponseEntity.notFound().build();
    40. }
    41. //查询成功,响应200
    42. return ResponseEntity.ok(categoryList);//这里才真正放了数据
    43. } catch (Exception e) {
    44. e.printStackTrace();
    45. }
    46. //自定义状态码,然后返回
    47. //500返回一个服务器内部的错误
    48. //这里也可以不返回,程序出错,本身就会返回500
    49. return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build()
    50. }
    51. }

    下面我们去Service创建queryCategoryListByParentId这个方法

    看一下完整代码

    1. package com.leyou.item.service;
    2. import com.leyou.item.mapper.CategoryMapper;
    3. import com.leyou.item.pojo.Category;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.stereotype.Service;
    6. import java.util.List;
    7. /**
    8. * Created by Administrator on 2023/8/29.
    9. */
    10. @Service
    11. public class CategoryService {
    12. @Autowired
    13. private CategoryMapper categoryMapper;
    14. /**
    15. * 根据父节点的id来查询子结点
    16. * @param pid
    17. * @return
    18. */
    19. public List queryCategoryListByParentId(Long pid) {
    20. Category category = new Category();
    21. category.setParentId(pid);
    22. return categoryMapper.select(category);
    23. }
    24. }

    上面都做完了,现在去数据库操作把分类中的数据给插入一下,类似于如下这些数据

     下面就是在数据中存在的数据

     下面我开始去启动:

    我们的数据肯定是去走网关的

    网关很明显我们是可以看到数据的

     但是在项目里面点击就出不来

     上面明显就是出现了跨域的问题

    跨域我们就是在服务端进行一个配置

    说的简单点,服务器就给给我们配置如下信息

    我们这里在服务器搭配一个类来配置这些信息就可以了

    我们这里用SpringMVC帮我们写的一个cors跨域过滤器来做:CrosFilter

    具体代码如下

    1. package com.leyou.config;
    2. import org.springframework.context.annotation.Bean;
    3. import org.springframework.context.annotation.Configuration;
    4. import org.springframework.web.cors.CorsConfiguration;
    5. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    6. import org.springframework.web.filter.CorsFilter;
    7. /**
    8. * Created by Administrator on 2023/8/31.
    9. */
    10. @Configuration
    11. public class LeyouCorsConfiguration {
    12. @Bean
    13. public CorsFilter corsFilter() {
    14. //1.添加CORS配置信息
    15. CorsConfiguration config = new CorsConfiguration();
    16. //1) 允许的域,不要写*,否则cookie就无法使用了
    17. config.addAllowedOrigin("http://manage.leyou.com");
    18. config.addAllowedOrigin("http://www.leyou.com");
    19. //2) 是否发送Cookie信息
    20. config.setAllowCredentials(true);
    21. //3) 允许的请求方式
    22. config.addAllowedMethod("OPTIONS");
    23. config.addAllowedMethod("HEAD");
    24. config.addAllowedMethod("GET");
    25. config.addAllowedMethod("PUT");
    26. config.addAllowedMethod("POST");
    27. config.addAllowedMethod("DELETE");
    28. config.addAllowedMethod("PATCH");
    29. // 4)允许的头信息
    30. config.addAllowedHeader("*");
    31. //2.添加映射路径,我们拦截一切请求
    32. UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
    33. configSource.registerCorsConfiguration("/**", config);
    34. //3.返回新的CorsFilter.
    35. return new CorsFilter(configSource);
    36. }
    37. }

    重新启动一下网关服务器

    下面来讲品牌查询 

     

    我们现在要做的就是查询出上面的品牌

     我们必须弄明白请求方式,请求路径,请求参数,响应数据决定返回值

    一般来说如果页面要展示一个列表的话,就要返回一个List集合对象或者返回一个分页对象

    我们就必须定义一个分页对象

    分页对象后面大家都要用,我们就放到common里面去

    先来把这个分页对象给做了

    1. package com.leyou.common.pojo;
    2. import lombok.AllArgsConstructor;
    3. import lombok.Data;
    4. import lombok.NoArgsConstructor;
    5. import java.util.List;
    6. /**
    7. * Created by Administrator on 2023/9/2.
    8. */
    9. @Data
    10. @NoArgsConstructor
    11. @AllArgsConstructor
    12. public class PageResult {
    13. private Long total;//总条数
    14. private Integer totalPage;//总页数
    15. private List items;//当前页面数据对象
    16. public PageResult(Long total,List items) {
    17. this.total = total;
    18. this.items = items;
    19. }
    20. }

    下面我们来做一下前端页面

     先去找这个页面,在menu.js里面,去查看商品的路径在什么位置

    上面就是品牌的路径/item/brand,下面我们看组件在哪里

    去到下面这个位置

    这个位置去找我们的路由页面

     

     

    所有的页面组件全部都在pages里面放着

    我们这里自己来写一下组件

    我们自己定义一个MyBrand1.vue组件

     

    我们这个页面主要还是去做一个分页的表格

    可以去Vuetify里面查找

    我们这里应该去找从服务端就已经分页与排序好的数据

    下面我们可以去看到这里面的模板代码

     上面就是我们要用的模板代码

    数据脚本当然是你在script里面,可以查看一下

    下面我们去看一下品牌表展示什么样的内容,我们看一下数据库里面的字段,先来创建一张产品表,然后把数据也给插入进去

    下面我们把数据给插进去,类似于插入下面这些数据

    看一下,很明显这个表的数据就已经存在了

    我们表头我们直接可以从下面的位置修改

    下面直接展示品牌页面前端所有代码