Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序(1)

于 2024-07-04 20:07:11 发布
阅读量256 收藏 7
点赞数 4
分类专栏： 资料搜公宗号 文章标签： java spring boot spring cloud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85158356/article/details/140188581
版权

Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。

Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而加强开发团队的协作。

在线文档地址

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process

在这里插入图片描述

在这里插入图片描述

Spring官方支持的服务的渲染模板中，并不包含jsp。

而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVc的视图技术，

及SpringBoot的自动化配置集成非常完美，几乎没有任何成本，

你只用关注Thymeleaf的语法即可。

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”>

leyou

com.leyou.parent

1.0.0-SNAPSHOT

4.0.0

com.leyou.service

ly-page

org.springframework.boot

spring-boot-starter-web

org.springframework.cloud

spring-cloud-starter-netflix-eureka-client

org.springframework.cloud

spring-cloud-starter-openfeign

org.springframework.boot

spring-boot-starter-thymeleaf

com.leyou.service

ly-item-interface

1.0.0-SNAPSHOT

（3）项目开始前先编写测试类学习一下
1）编写HelloController

在这里插入图片描述

2）在resources下创建固定文件夹名称的文件夹（templates）

在这里插入图片描述

3）在templates当中创建后缀为html的文件（hello.html会作为视图返回）

在这里插入图片描述

原理:访问当前的HelloController会自动找hello.html显示

在这里插入图片描述

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的情况下前端页面更加规范，并且不会报错

在这里插入图片描述

hello

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、删除刚刚创建的一些测试内容

                        在这里插入图片描述

                        最后前端到底应该怎么学才好？

                        如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

                        不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

                        在这里插入图片描述

                        在这里插入图片描述

                        在这里插入图片描述

                        在这里插入图片描述

                      2401_85158356
                      关注
                      • 4
                        点赞
                      • 踩
                      • 7
                        收藏
                        觉得还不错? 一键收藏
                      • 0
                        评论
                      专栏目录
                      评论
                      添加红包

                      请填写红包祝福语或标题

                      个

                      红包个数最小为10个

                      元

                      红包金额最低5元

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

                      抵扣说明：

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

                      余额充值