Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）

admin管理员组

文章数量:1655698

return “hello”;//普通字符串会被当成视图名称，综合前缀和后缀寻找视图

}

}

完善hello.html

刷新页面

11） JS模板（内联模板）

浏览器控制台

3、创建item.html

• 手机

• Apple

• Apple iPhone 6s

• <

• >

  Apple iPhone 6s 4GB 128GB 土豪金 价　　格

  ¥降价通知

  累计评价 612188

  促　　销

  加价购

  满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换

  购热销商品

  支　　持

  以旧换新，闲置手机回收 4G套餐超值抢 礼品购

  配 送 至

  上海

  {{o}} 

  <input autocomplete=“off” type=“text” disabled v-model=“num” minnum=“1”

  class=“itxt”/>

  <a href=“javascript:void(0)” class=“increment plus” @click=“increment”>+

  <a href=“javascript:void(0)” class=“increment mins” @click=“decrement”>-

• <a href=“#” @click.prevent=“addCart” target=“_blank”

  class=“sui-btn btn-danger addshopcar”>加入购物车

• 相关分类

• 推荐品牌
• 手机
• 手机壳
• 内存卡
• Iphone配件
• 贴膜
• 手机耳机
• 移动电源
• 平板电脑

• Apple苹果iPhone 6s (A1699)

  ¥

  6088.00

  加入购物车

• Apple苹果iPhone 6s (A1699)

  ¥

  6088.00

  加入购物车

• Apple苹果iPhone 6s (A1699)

  ¥

  6088.00

  加入购物车

  Apple苹果iPhone 6s (A1699)

  ¥

  6088.00

  加入购物车

  Apple苹果iPhone 6s (A1699)

  ¥

  6088.00

  加入购物车

  推荐品牌

  选择搭配

  ￥5299

  +

• Feless费勒斯VR

  39

• Feless费勒斯VR

  50

• Feless费勒斯VR

  59

• Feless费勒斯VR

  99

  已选购0件商品 套餐价 ￥5299

  加入购物车

• 商品介绍

• 规格与包装

• 售后保障

• 商品评价

• 手机社区
• 分辨率：1920*1080(FHD)
• 后置摄像头：1200万像素
• 前置摄像头：500万像素
• 核 数：其他
• 频 率：以官网信息为准
• 品牌： Apple
• 商品名称：APPLEiPhone 6s Plus
• 商品编号：1861098
• 商品毛重：0.51kg
• 商品产地：中国大陆
• 热点：指纹识别，Apple Pay，金属机身，拍照神器
• 系统：苹果（IOS）
• 像素：1000-1600万
• 机身内存：64GB

• 包装清单

  手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C

  数字耳机X1、Type-C 数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1（备注：最终以实物为准）

  售后保障

  商品评价

  手机社区

  猜你喜欢

• DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

  ¥

  3699.00

  已有6人评价

• Apple苹果iPhone 6s/6s Plus 16G 64G 128G

  ¥

  4388.00

  已有700人评价

• DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

  ¥

  4088.00

  已有700人评价

• DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

  ¥

  4088.00

  已有700人评价

• DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

  ¥

  4088.00

  已有700人评价

• DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

  ¥

  4088.00

  已有700人评价

  4、删除刚刚创建的一些测试内容

  4、在resources下创建配置文件application.yml

  server:

  port: 8086

  spring:

  application:

  name: page-service

  thymeleaf:

  cache: false #设置缓存关闭

  eureka:

  client:

  service-url:

  defaultZone: http://127.0.0.1:10086/eureka

  instance:

  lease-renewal-interval-in-seconds: 5 # 每隔5秒发送一次心跳

  lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期

  5、nginx反向代理

  server {

  listen 80;

  server_name www.leyou;

  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 /item {

  proxy_pass http://192.168.58.2:8086; #主机地址 下的8086端口

  proxy_connect_timeout 600;

  proxy_read_timeout 600;

  }

  location / {

  proxy_pass http://192.168.58.2:9002; #主机地址 下的9001端口

  proxy_connect_timeout 600;

  proxy_read_timeout 600;

  }

  }

  重新加载nginx

  6、完善启动类

  package com.leyou;

  import org.springframework.boot.SpringApplication;

  import org.springframework.boot.autoconfigure.SpringBootApplication;

  import org.springframework.cloud.client.discovery.EnableDiscoveryClient;

  import org.springframework.cloud.openfeign.EnableFeignClients;

  @SpringBootApplication

  @EnableDiscoveryClient

  @EnableFeignClients

  public class LyPageApplication {

  public static void main(String[] args) {

  SpringApplication.run(LyPageApplication.class);

  }

  }

  6、完善search.html页面实现对应点击商品查看详情功能

  7、创建PageController

  package com.leyou.page.web;

  import org.springframework.stereotype.Controller;

  import org.springframework.ui.Model;

  import org.springframework.ui.ModelMap;

  import org.springframework.web.bind.annotation.GetMapping;

  import org.springframework.web.bind.annotation.PathVariable;

  @Controller

  public class PageController {

  @GetMapping(“item/{id}.html”)

  public String toItemPage(@PathVariable(“id”) Long spuId, Model model){

  //准备模型数据

  //返回视图

  return “/item”;

  }

  }

  重新运行

  点击实现页面跳转

  8、封装模型数据

  首先我们一起来分析一下，在这个页面中需要哪些数据

  我们已知的条件是传递来的spu的id，我们需要根据spu的id查询到下面的数据：

  • spu信息

  • spu的详情

  • spu下的所有sku

  • 品牌

  • 商品三级分类

  • 商品规格参数、规格参数组

  （1）商品微服务提供接口

  1）查询spu，根据页面id查询对应的sup的信息

  a、完善GoodsApi

  /*

  根据spu的id查询spu

  */

  @GetMapping(“/spu/{id}”)

  Spu querySpuById(@PathVariable(“id”) Long id);

  b、完善GoodsController

  /*

  根据spu的id查询spu

  */

  @GetMapping(“/spu/{id}”)

  public ResponseEntity querySpuById(@PathVariable(“id”) Long id){

  return ResponseEntity.ok(goodsService.querySpuById(id));

  }

  c、完善goodsService

  public Spu querySpuById(Long id) {

  Spu spu = spuMapper.selectByPrimaryKey(id);

  if(spu == null){

  throw new LyException(ExceptionEnum.GOODS_NOT_FOND);

  }

  //查询sku

  List skus = querySkuBySpuId(spu.getId());

  //查询详情detail

  SpuDetail spuDetail = queryDetailById(spu.getId());

  spu.setSkus(skus);

  spu.setSpuDetail(spuDetail);

  return spu;

  }

  2）查询规格参数组

  a、拓展SpecGroup

  package com.leyou.item.pojo;

  import lombok.Data;

  import tk.mybatis.mapper.annotation.KeySql;

  import javax.persistence.Id;

  import javax.persistence.Table;

  import javax.persistence.Transient;

  import java.util.List;

  @Table(name = “tb_spec_group”)

  @Data

  public class SpecGroup {

  @Id

  @KeySql(useGeneratedKeys = true)

  private Long id;

  private Long cid;

  private String name;

  @Transient

  private List params;

  }

  b、完善SpecificationApi

  @GetMapping(“spec/group”)

  List queryGroupByCid(@RequestParam(“cid”) Long cid);

  c、完善SpecificationController，这里的方法名可以与api当中的方法名不一致，因为调用是通过路径去调用的

  /*

  根据父类查询规格组以及组内参数

  */

  @GetMapping(“group”)

  public ResponseEntity<List> queryListByCid(@RequestParam(“cid”) Long cid){

  return ResponseEntity.ok(specificationService.queryListByCid(cid));

  }

  d、完善specificationService

  public List queryListByCid(Long cid) {

  //查询规格参数组

  List specGroups = queryGroupByCid(cid);

  //查询当前分类下的参数

  List specParams = queryParamList(null, cid, null);

  /*

  下拉代码的目的是将specParams集合放入specGroups当中，一一对应

  如果通过双层for循环性能太低

  在specParams集合当中的SpecParam对应拥有SpecGroup的id

  所以将SpecParam对应拥有SpecGroup的id作为键而 List做为值组合为map集合

  遍历specGroups集合获取其specGroup的id到map当中查询到对应的specParams集合，然后放入到specGroup.setParams当中

  */

  //先把规格参数变为map，map的key是规格组id，map的值是组下的所有参数

  Map<Long,List> map = new HashMap<>();

  for (SpecParam param : specParams) {

  if(!map.containsKey(param.getGroupId())){//判断map当中是否已经存在param.getGroupId()，如果存在

  //这一组id在map当中不存在

  //新增一个list

  map.put(param.getGroupId(),new ArrayList<>());

  }

  map.get(param.getGroupId()).add(param);//将集合添加到map当中

  }

  //填充param到Group当中

  for (SpecGroup specGroup : specGroups) {

  specGroup.setParams(map.get(specGroup.getId()));

  }

  return specGroups;

  }

  （2）实现页面数据的封装

  1）在ly-page创建对应的包结构，复制之前在ly-search创建的client

  2）分析页面所需要的数据

  3）创建对应的Service

  package com.leyou.page.service;

  import org.springframework.stereotype.Service;

  @Service

  public class PageService {

  }

  4）将上述对应的数据在添加到PageController的Model当中

  a、完善PageController

  package com.leyou.page.web;

  import com.leyou.page.service.PageService;

  import org.springframework.beans.factory.annotation.Autowired;

  import org.springframework.stereotype.Controller;

  import org.springframework.ui.Model;

  import org.springframework.ui.ModelMap;

  import org.springframework.web.bind.annotation.GetMapping;

  import org.springframework.web.bind.annotation.PathVariable;

  import org.springframework.web.bind.annotation.RequestMapping;

  import java.util.Map;

  @Controller

  @RequestMapping(“item”)

  public class PageController {

  @Autowired

  private PageService pageService;

  @GetMapping(“{id}.html”)

  public String toItemPage(@PathVariable(“id”) Long spuId, Model model){

  //查询数据

  Map<String,Object> attributes = pageService.loadModel(spuId);

  //准备模型数据

  model.addAllAttributes(attributes);

  //返回视图

  return “item”;

  }

  }

  b、完善service

  package com.leyou.page.service;

  import com.leyou.item.pojo.*;

  import com.leyou.page.client.BrandClient;

  import com.leyou.page.client.CategoryClient;

  import com.leyou.page.client.GoodsClient;

  import com.leyou.page.client.SpecificationClient;

  import org.springframework.beans.factory.annotation.Autowired;

  import org.springframework.stereotype.Service;

  import java.util.*;

  @Service

  public class PageService {

  @Autowired

  private BrandClient brandClient;

  @Autowired

  private CategoryClient categoryClient;

  @Autowired

  private GoodsClient goodsClient;

  @Autowired

  private SpecificationClient specificationClient;

  public Map<String, Object> loadModel(Long spuId) {

  Map<String, Object> model = new HashMap<>();

  //查询spu

  Spu spu = goodsClient.querySpuById(spuId);

  //查询skus

  List skus = spu.getSkus();

  //查询spuDetail

  SpuDetail spuDetail = spu.getSpuDetail();

  //查询brand

  Brand brand = brandClient.queryBrandById(spu.getBrandId());

  //查询商品的分类

  List categories = categoryClient.queryCategoryByIds(Arrays.asList(spu.getCid1(), spu.getCid2(), spu.getCid3()));

  //查询规格参数

  List groups = specificationClient.queryGroupByCid(spu.getCid3());

  // 查询特殊的规格参数

  List params = specificationClient.queryParamList(null, spu.getCid3(), false);

  Map<Long, String> paramMap = new HashMap<>();

  params.forEach(param -> {

  paramMap.put(param.getId(), param.getName());

  });

  model.put(“spu”,spu);

  model.put(“skus”,skus);

  model.put(“spuDetail”,spuDetail);

  model.put(“detail”,spuDetail);

  model.put(“brand”,brand);

  model.put(“categories”,categories);

  model.put(“groups”,groups);

  model.put(“specs”,groups);

  model.put(“paramMap”,paramMap);

  return model;

  }

  }

  三、页面静态化

  ---

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  uerySpuById(spuId);

  //查询skus

  List skus = spu.getSkus();

  //查询spuDetail

  SpuDetail spuDetail = spu.getSpuDetail();

  //查询brand

  Brand brand = brandClient.queryBrandById(spu.getBrandId());

  //查询商品的分类

  List categories = categoryClient.queryCategoryByIds(Arrays.asList(spu.getCid1(), spu.getCid2(), spu.getCid3()));

  //查询规格参数

  List groups = specificationClient.queryGroupByCid(spu.getCid3());

  // 查询特殊的规格参数

  List params = specificationClient.queryParamList(null, spu.getCid3(), false);

  Map<Long, String> paramMap = new HashMap<>();

  params.forEach(param -> {

  paramMap.put(param.getId(), param.getName());

  });

  model.put(“spu”,spu);

  model.put(“skus”,skus);

  model.put(“spuDetail”,spuDetail);

  model.put(“detail”,spuDetail);

  model.put(“brand”,brand);

  model.put(“categories”,categories);

  model.put(“groups”,groups);

  model.put(“specs”,groups);

  model.put(“paramMap”,paramMap);

  return model;

  }

  }

  三、页面静态化

  ---

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-4SkZutoH-1714922006727)]

  [外链图片转存中…(img-GXkH1dU2-1714922006728)]

  [外链图片转存中…(img-1UqvswxY-1714922006728)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

本文标签： 网络商城项目商品后端入门