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

4）在HelloController添加模型数据

package com.leyou.page.web;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

@Controller

public class HelloController {

@GetMapping(“hello”)

public String toHello(Model model){

//将消息添加到模型当中

model.addAttribute(“msg”,“hello, thymeleaf!”);

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

}

}

5）在hello.html当中获取对应的数据

和jsp类似只不过${}是在属性值里面写的，这样做的好处就是在没有后台java的情况下前端页面更加规范，并且不会报错

msg:

6）编写启动类测试运行

修改包路径

package com.leyou;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class LyPageApplication {

public static void main(String[] args) {

SpringApplication.run(LyPageApplication.class);

}

}

刷新一下Maven项目

启动微服务

访问8080端口

访问成功

7）Thymeleaf变量

• a、创建User实体类

package com.leyou.page.pojo;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

@Data

@AllArgsConstructor

@NoArgsConstructor

public class User {

String name;

int age;

User friend;

}

• b、完善HelloController

package com.leyou.page.web;

import com.leyou.page.pojo.User;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

@Controller

public class HelloController {

@GetMapping(“hello”)

public String toHello(Model model){

User user = new User();

user.setAge(21);

user.setName(“Jack Chen”);

user.setFriend(new User(“李小龙”,30,null));

//将消息添加到模型当中

model.addAttribute(“user”,user);

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

}

}

• c、在hello.html

msg:

重新运行

刷新页面

页面效果

8）其他用法

刷新页面，发现只展示了文本

展示真正的标签

刷新页面

9）内置对象

• dates

完善hello.html

刷新页面

格式化日期

刷新页面

10）Thymeleaf自己的一些功能

• 运算（加减乘除 判断 布尔运算 三元运算符）

刷新页面

• 循环

修改HelloController

package com.leyou.page.web;

import com.leyou.page.pojo.User;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

import java.util.ArrayList;

@Controller

public class HelloController {

@GetMapping(“hello”)

public String toHello(Model model){

User user1 = new User(“李1龙”,30,null);

User user2 = new User(“李2龙”,22,null);

User user3 = new User(“李3龙”,20,null);

User user4 = new User(“李4龙”,31,null);

User user5 = new User(“李5龙”,35,null);

ArrayList users = new ArrayList<>();

users.add(user1);

users.add(user2);

users.add(user3);

users.add(user4);

users.add(user5);

//将消息添加到模型当中

model.addAttribute(“users”,users);

model.addAttribute(“user”,user1);

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.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 /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

  

  Docker步步实践

  目录文档：

  

  

  ①Docker简介

  ②基本概念

  ③安装Docker

  

  ④使用镜像：

  

  ⑤操作容器：

  

  ⑥访问仓库：

  

  ⑦数据管理：

  

  ⑧使用网络：

  

  ⑨高级网络配置：

  

  ⑩安全：

  

  ⑪底层实现：

  

  ⑫其他项目：

  

  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

  

  Docker步步实践

  目录文档：

  [外链图片转存中…(img-lPAaUJ8K-1725888775057)]

  [外链图片转存中…(img-yYsVh9kM-1725888775058)]

  ①Docker简介

  ②基本概念

  ③安装Docker

  [外链图片转存中…(img-0oDLTjdk-1725888775058)]

  ④使用镜像：

  [外链图片转存中…(img-U2I7vEOQ-1725888775059)]

  ⑤操作容器：

  [外链图片转存中…(img-uYnClpun-1725888775059)]

  ⑥访问仓库：

  [外链图片转存中…(img-TaXpSQ7p-1725888775060)]

  ⑦数据管理：

  [外链图片转存中…(img-mqteeZM5-1725888775060)]

  ⑧使用网络：

  [外链图片转存中…(img-Gim5yBSu-1725888775060)]

  ⑨高级网络配置：

  [外链图片转存中…(img-41KERuUh-1725888775060)]

  ⑩安全：

  [外链图片转存中…(img-v0njw9Zo-1725888775061)]

  ⑪底层实现：

  [外链图片转存中…(img-8BsYP6jT-1725888775061)]

  ⑫其他项目：

  [外链图片转存中…(img-Cdyui0Y8-1725888775061)]