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

一，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。