文章目录
- 一,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,配置域名
修改windows
的hosts
文件,配置域名search.gulimall.com
的ip
地址为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
。