谷粒商城实战笔记-173~174-商城业务-检索服务-搭建页面环境-调整页面

news2024/9/20 1:13:44

文章目录

  • 一,173-商城业务-检索服务-搭建页面环境
    • 1,引入thymeleaf
    • 2,search模块导入模板页面
    • 3,配置域名
    • 4,上传静态资源到nginx的html目录
    • 5,nginx配置
      • 5.1 域名监听配置
      • 5.2 静态资源静态配置
    • 6,search模块的controller增加访问页面的接口
    • 7,网关配置
  • 二,174-商城业务-检索服务-调整页面跳转
    • 1,点击搜索页左上角跳转到首页
    • 2,首页点击搜索
    • 3,首页点击分类跳转到搜索页面
  • 错误记录

一,173-商城业务-检索服务-搭建页面环境

本节的主要内容是搭建检索服务的环境,配置动静分离。

1,引入thymeleaf

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2,search模块导入模板页面

将课程提供的搜索模块的index.html复制到工厂资源目录下的templates文件夹中,并命名为list.html

在这里插入图片描述

注意,因为动静分类,list.html中的图片、js文件、超链接需要修改地址,都以/static/search开头,目的是让nginx识别到这些请求,并将其转发到nginx静态资源。

在这里插入图片描述

3,配置域名

修改windowshosts文件,配置域名search.gulimall.comip地址为192.168.56.10

在这里插入图片描述

4,上传静态资源到nginx的html目录

把课程资源中搜索模块的静态资源用xftp上传到nginx容器挂载的目录/mydata/nginx/html/static/search目录下。

在这里插入图片描述

5,nginx配置

5.1 域名监听配置

在nginx的server块配置文件中,增加对域名search.gulimall.com的配置,后续还有其他服务可能需要nginx的转发,所以配成*.gulimall.com

在这里插入图片描述

5.2 静态资源静态配置

search.gulimall.com下所有对static路径的访问,都是对静态资源的访问,这些请求将直接由nginx找到前面上传的静态资源,并返回给前端。

6,search模块的controller增加访问页面的接口

	@GetMapping(value = "/list.html")
    public String listPage() {

        return "list";
    }

在这里插入图片描述

7,网关配置

对于search.gulimall.com的访问请求,ngnix转发给网关,网关转发给search服务。

在这里插入图片描述

二,174-商城业务-检索服务-调整页面跳转

这一节主要解决首页和搜索页的跳转

1,点击搜索页左上角跳转到首页

在这里插入图片描述

修改list.html,页面左上角图片的链接地址。

	<div class="logo">
        <a href="http://gulimall.com"><img src="/static/search/image/logo1.jpg" alt=""></a>
    </div>

在这里插入图片描述

2,首页点击搜索

在首页点击搜索时,跳转到搜索界面。

在这里插入图片描述

product模块修改index.html模块。

<a href="javascript:search()" ><img src="index/img/img_09.png"/></a>

在这里插入图片描述

特别注意在超链接中注册点击事件的方式:href="javascript:search()"

注意,还要修改search()函数对应的代码,搜索页面模板的名称是list.html

在这里插入图片描述

3,首页点击分类跳转到搜索页面

在这里插入图片描述

课程提供的原码中点击分类跳转首页的代码中,域名是gmall.com,需要改为gulimall.com
在这里插入图片描述
注意重新上传到nginx的静态资源目录。

错误记录

search的静态资源应该放在/mydata/nginx/html/static/search目录下,不能少了static

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2033607.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Altium Designer 18原理图器件自动标号

前言&#xff1a; 当我们绘制原理图时&#xff0c;元器件的位号是不会自动生成的&#xff0c;位号大都是乱的&#xff0c;造成出图时十分不和谐。 器件位号修改 第一种方法&#xff1a; 可以先修改一个器件位号&#xff0c;按住shift 键然后再拖动器件会生成一个新的&…

Python面试宝典第33题:电话号码的字母组合

题目 给定一个仅包含数字2-9的字符串&#xff0c;返回所有它能表示的字母组合&#xff0c;答案可以按任意顺序返回。给出数字到字母的映射如下图&#xff08;与手机按键相同&#xff09;。注意&#xff1a;1不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits &quo…

【网络】IP的路径选择——路由控制

目录 路由控制表 默认路由 主机路由 本地环回地址 路由控制表的聚合 网络分层 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 路由控制表 在数据通信中&#xff0c;IP地址作为网络层的标识&#xff0c;用于指定数据包的目标位置。然而&#xff0c;仅有IP地址并不足以确…

Linux 进程间通信之管道

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a; Linux 目录 一、通信 1、进程为什么要通信&#xff1f; 1.数据的类型 2.父进程和子进程算通信吗&#xff1f; 2、进程如何通信&#xff1f; 3、进程通信的常见方式&#xff1f; 二、管道 1、概念…

SpringBoot中整合Mybatis

一、Mybatis快速入门 1.1、在相应的模块中添加依赖的坐标 首先创建一个maven项目 在对应的pom.xml文件中引入下面的依赖 <dependencies><!--mybatis 依赖--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artif…

【已解决】如何解决雅马哈机械手无法连接到在线模式的问题

前言 在一个项目中用到了雅马哈机器手&#xff0c;但是现场操作的时候进场出现连接不上的问题&#xff0c;经过与官方技术讨论得出以下的解决方法。 解决方法 避免这个问题出现在操作完之后必须将机械手控制器切换成离线模式。主要原因&#xff1a;1、机械手控制器本身是属…

什么是知识中台?如何搭建企业知识中台?(企业必懂术语)

一、什么是知识中台&#xff1f; 知识中台是一个集中管理、整合和共享企业知识资源的平台。它利用云计算、大数据和人工智能等技术&#xff0c;将企业内部各部门、各员工手中的知识资源进行集中整合&#xff0c;形成统一的知识库。通过这个平台&#xff0c;员工可以快速查找、…

BGP边界网关协议基础详细

1.BGP概述 1.1 BGP基础 应用层协议&#xff0c;基于TCP&#xff0c;源端口号是随机&#xff0c;目的端口是179。 无类路由协议、外部网关路由协议、采用距离(路径)矢量算法、单播路由协议 核心作用为传递路由。 1.2 AS自治系统 AS是指由同一个技术管理机构管理&#xff0…

数据可视化:解锁数据奥秘的钥匙与实战指南

如何有效地解读和利用这些数据成为了企业和个人面临的重大挑战。数据可视化&#xff0c;作为连接数据与洞察的桥梁&#xff0c;正逐步成为数据分析与决策支持不可或缺的工具。本文将深入探讨数据可视化的本质、用途分类、设计原则、高效制作技巧&#xff0c;并通过Axure产品设计…

四数相加2 | LeetCode-454 | 哈希集合 | Java详细注释

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f579;️思路&#xff1a;四数相加 > 两数相加 &#x1f4cc;LeetCode链接&#xff1a;454. 四数相加 II 文章目录 1.题目描述&#x1f34e;2.题解&#x…

事件驱动系统设计之将事件检索与事件处理解耦

0 前言 part1讨论了集成过程中遇到的挑战以及幂等事件处理的作用。解决集成问题之后&#xff0c;我们需要反思事件检索的问题。我们的经验教训表明&#xff0c;将事件检索与事件处理解耦至关重要。 1 事件处理与请求/响应 API 紧耦合 part1讨论了将请求/响应 API 集成到事件…

变量的注意或许需要调试

输入一个自然数N&#xff08;1<N<9&#xff09;&#xff0c;从小到大输出用1~N组成的所有排列&#xff0c;也就说全排列。例如输入3则输出 123 132 213 231 312 321 输入格式: 输入一个自然数N&#xff08;1<N<9&#xff09; 输出格式: N的全排列&#xff0c;每行一…

8.12 day bug

bug1 一定要记得改变this指向&#xff0c;否则调用时this不再指向实例而是调用的上下文。 This.handleChange this.handleChange.bind(this); bug2 同样的代码莫名其妙就是没行&#xff0c;复制粘贴到通义千问&#xff0c;再复制回来居然就行了&#xff0c;prompt是“编写代…

R语言中的命名规则

在R语言中&#xff0c;为变量、元素、函数或对象命名时&#xff0c;遵循一定的规则是至关重要的。这些规则确保代码的可读性、可维护性&#xff0c;并避免与R语言的内部函数和保留字产生冲突。下面我们将详细探讨R中命名的具体规则和注意事项。 1、名字中允许的字符 R语言的命…

数据库方式实现实时排行榜

文章目录 &#x1f31e; Sun Frame&#xff1a;SpringBoot 的轻量级开发框架&#xff08;个人开源项目推荐&#xff09;&#x1f31f; 亮点功能&#x1f4e6; spring cloud模块概览常用工具 &#x1f517; 更多信息1.排行榜的设计1.实时榜单1.数据库统计2.redis 的 sorted set …

25届秋招还有金九银十?会是“史上最难”?

吉祥学安全&#xff1a;知星&#x1f517;http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247483727&idx1&sndb05d8c1115a4539716eddd9fde4e5c9&chksmc0e47813f793f105017fb8551c9b996dc7782987e19efb166ab665f44ca6d900210e6c4c0281&scene21#wechat…

友元的一些资料

友元&#xff1a;可以访问私有权限下的一种代码 全局函数作友元&#xff1a; 我们创建了两个属性&#xff0c;并且通过无参构造函数给属性赋了值&#xff0c; 这个时候再创建一个goodgay类&#xff0c;形参是应用的buil1的对象&#xff0c;用这个引用的对象调用属性。所以下面…

笔记(day17)集合概述、List、Set、比较器

集合Collection 一.概述 ​ 集合可以理解为数据结构的封装,根据不同的特性及操作性能进行分类 二.继承体系 三.Collection中常用方法 ​ collection是集合中的父类,所以collection中的方法是所有集合中都有的 ​ 集合中只能保存引用类型(Object),无法保存基本类型 ​ Colle…

记一次CSDN认证模块后端未校验漏洞

前言 作为一个程序员&#xff0c;一直充满好奇心&#xff0c;没事就喜欢找找漏洞&#xff0c;试想一下某些程序是否存在某些鉴权等漏洞&#xff0c;目前该漏洞已提交官方&#xff0c;且影响不大&#xff0c;现分享分析过程用于各位技术学习。 漏洞分析 https://i.csdn.net/#…

【Hot100】LeetCode—3. 无重复字符的最长子串

目录 1- 思路滑动窗口 2- 实现⭐3. 无重复字符的最长子串——题解思路 3- ACM 实现 原题链接&#xff1a;3. 无重复字符的最长子串 1- 思路 滑动窗口 借助 HashSet 来实现判重通过指针 i 和 right 指针实现一个滑动窗口 2- 实现 ⭐3. 无重复字符的最长子串——题解思路 clas…