谷粒商城微服务分布式高级篇六——商城首页

最新推荐文章于 2024-05-17 20:48:02 发布

hi163hello

最新推荐文章于 2024-05-17 20:48:02 发布

阅读量966

点赞数

分类专栏： Gulimall

原文链接：https://blog.csdn.net/D_A_I_H_A_O/article/details/106272782

版权

Gulimall 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

文章目录

商城首页
Nginx
- 搭建域名访问环境

商城首页

效果

在这里插入图片描述

Themeleaf

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
2.Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3.Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

常用：

1、使用SpingBoot Thymeleaf j静态文件默认放在templates下，静态资源默认放在static下

在这里插入图片描述

2、导入thymeleaf的名称空间

<html xmlns:th="http://www.thymeleaf.org">

   
   
   
   1

3、 ${}:取上下文环境中的message变量

   <p th:text="${message}">被替换了!</p><!--th:text和th:utext功能一样，区别在于前者不会转义html标签，后者会。 -->
   <P>[[${message}]]</P>
   <div th:utext="${message}">被替换了!</div>
   <p data-th-text="${message}">被替换了!</p><!-- (data-th-text:只能在html5中使用) -->

   
   
   
   1
2
3
4

4、{}:也是取上下文变量，但{}的上下文是父标签(th:object)所选择的对象

<div th:object="${session.user}">
      <p th:text="*{id}"></p>
      <p th:text="*{username}"></p>
      <p th:text="*{password}"></p>
   </div>
   <!-- 相当于 -->
   <div>
      <p th:text="${session.user.id}"></p>
      <p th:text="${session.user.username}"></p>
      <p th:text="${session.user.password}"></p>
   </div>
   <!-- 如果对象没有被选择，${}和*{}两个表达式效果是一样的 -->
   <p th:text="*{session.user.username}"></p>
   <p th:text="${session.user.username}"></p>

   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、 @{}:用来处理URL链接地址的实现跳转

 <!-- 绝对地址 -->
<a th:href="@{https://fanlychie.github.io}">...</a>

   
   
   
   1
2

6、~{}：用来引用一段公共的HTML代码片段

~{templatename}：引用整个模板文件的代码片段

   
   
   
   1

~{templatename :: selector}：selector 可以是 th:fragment 指定的名称或其他选择器。如类选择器、ID选择器等

   
   
   
   1

~{::selector}：相当于 ~{this :: selector}，表示引用当前模板定义的代码片段               

   
   
   
   1

    前面是包名，后面是属性或选择器
   <div th:insert="~{commons/common :: css }"></div>
   <div th:include="~{commons/common :: #footer}"></div>
   <div th:include="~{commons/common :: js }"></div>

   
   
   
   1
2
3
4

7、引用公共页

<!-- 建议保留href,以为th:href是通过服务器的，没有服务器就无效，则可以使用href-->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}">

   
   
   
   1
2

8、th:fragment:定义一段公共的代码片段，然后可以通过th:insert、th:replace、th:include将这些公共的代码引入到模板文件中

<div th:fragment="css">
      <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}">
   </div>
    通过th:insert属性引用一段公共的代码片段：
    <div th:insert="~{base ::css}"></div>
其中，~{}是可选的，我们可以去掉这层的包裹：
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">th:</span>insert</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>base ::css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

若 index.html 与 base.html 不在同级目录，如 templates/commons/base.html：
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">th:</span>insert</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>~{commons/base ::css}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

使用th:fragment属性定义代码片段时，你还可以声明一组参数：
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">th:</span>fragment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>crumbs(parent, child)<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name"><span class="token namespace">th:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>${parent}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name"><span class="token namespace">th:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>${child}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &lt;i&gt; 用户中心&lt;/i&gt; &lt;i&gt;我的订单&lt;/i&gt; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">th:</span>insert</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>::crumbs(<span class="token punctuation">'</span>用户中心<span class="token punctuation">'</span>, <span class="token punctuation">'</span>我的订单<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

此外，我们还可以通过类选择器、ID选择器等来引用公共的代码片段：
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">th:</span>insert</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>~{base :: #footer}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
th:replace也可以用来引用公共的代码片段。不同的是，th:insert是直接将代码片段插入到标签体内，而th:replace则是用代码片段直接替换标签体内容。

<!–
<div>
<div id=“footer”>© 2017 fanlychie</div>
</div>
–>
<div th:insert="~{base :: footerFragment}"></div>
<!–
<div id=“footer”>© 2017 fanlychie</div>
–>
<div th:replace="~{base :: footerFragment}"></div>

9、遍历（迭代）的语法th:each=“自定义的元素变量名称 : ${集合变量名称}”

<a href="login.html" th:each="user:${users}" th:text="${user.username}">登录</a>

结果：<a href=“login.html”>admin1</a> <a href=“login.html”>admin2</a> <a href=“login.html”>admin3</a>

10、th:if 当表达式的评估结果为真时则显示内容，否则不显示

项目使用

引入依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
	&lt;!-- 代码热部署 --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-devtools&lt;/artifactId&gt;
        &lt;optional&gt;true&lt;/optional&gt;
    &lt;/dependency&gt;

开启代码热部署，ctrl+shift+F9 即可以修改html后不用重启服务器即可查看。

关闭缓存

application.properties新增thymeleaf配置

#这个开发配置为false，避免改了模板还要重启服务器
spring.thymeleaf.cache=false

 
 
 
 1
2

导入资源

导入首页html和静态资源，静态资源可直接访问，发现静态资源无法获取到，增加配置

#我们应该以什么样的路径来访问静态资源
spring.mvc.static-path-pattern=/static/**
#告诉Spring Boot应该在何处查找静态资源文件
spring.resources.static-locations=classpath:/static/

 
 
 
 1
2
3
4

一级分类

@GetMapping({"/", "index.html" })
public String indexPage(Model model) {
	List<CategoryEntity> categoryEntities = categoryservice.getLevel1Categorys();
	model.addAttribute("categorys", categoryEntities);
    return "index";
}

 
 
 
 1
2
3
4
5
6

    /**
     * 查询所有一级分类
     *
     * @return
     */
    @Override
    public List<CategoryEntity> getLevel1Categorys() {
        List<CategoryEntity> categoryEntities = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", 0));
    <span class="token keyword">return</span> categoryEntities<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

html

<ul>
    <li th:each="category:${categorys}">
        <a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}"><b
                th:text="${category.name}"></b></a>
    </li>
</ul>

 
 
 
 1
2
3
4
5
6

二级分类

二级分类由js发起请求获得json
在这里插入图片描述

   @ResponseBody
    @GetMapping("/index/json/catalog.json")
    public Map<String, List<Catalog2Vo>> getCatalogJson() {
        Map<String, List<Catalog2Vo>> map = categoryservice.getCatalogJson();
        return map;
    }

 
 
 
 1
2
3
4
5
6

/**
 * 查出所有分类 返回首页json
 *
 * @return
 */
@Override
public Map<String, List<Catalog2Vo>> getCatalogJson() {
    //所有一级分类
    List<CategoryEntity> level1Categorys = getLevel1Categorys();
<span class="token comment">//封装数据 map k,v 结构</span>
Map<span class="token operator">&lt;</span>String<span class="token punctuation">,</span> List<span class="token generics function"><span class="token punctuation">&lt;</span>Catalog2Vo<span class="token punctuation">&gt;</span></span><span class="token operator">&gt;</span> map <span class="token operator">=</span> level1Categorys<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toMap</span><span class="token punctuation">(</span>k <span class="token operator">-</span><span class="token operator">&gt;</span> k<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> v <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//每一个的一级分类，查到这个一级分类的二级分类</span>
    List<span class="token generics function"><span class="token punctuation">&lt;</span>CategoryEntity<span class="token punctuation">&gt;</span></span> category2Entities <span class="token operator">=</span> baseMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">QueryWrapper</span><span class="token generics function"><span class="token punctuation">&lt;</span>CategoryEntity<span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token string">"parent_cid"</span><span class="token punctuation">,</span> v<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    List<span class="token generics function"><span class="token punctuation">&lt;</span>Catalog2Vo<span class="token punctuation">&gt;</span></span> catelog2Vos <span class="token operator">=</span> null<span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>category2Entities <span class="token operator">!=</span> null<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        catelog2Vos <span class="token operator">=</span> category2Entities<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>level2 <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">//封装catalog2Vo</span>
            Catalog2Vo catalog2Vo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Catalog2Vo</span><span class="token punctuation">(</span>v<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> null<span class="token punctuation">,</span> level2<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> level2<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">//每一个二级分类，查到三级分类</span>
            List<span class="token generics function"><span class="token punctuation">&lt;</span>CategoryEntity<span class="token punctuation">&gt;</span></span> category3Entities <span class="token operator">=</span> baseMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">QueryWrapper</span><span class="token generics function"><span class="token punctuation">&lt;</span>CategoryEntity<span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token string">"parent_cid"</span><span class="token punctuation">,</span> level2<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>category3Entities <span class="token operator">!=</span> null<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                List<span class="token generics function"><span class="token punctuation">&lt;</span>Object<span class="token punctuation">&gt;</span></span> catalog3List <span class="token operator">=</span> category3Entities<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>level3 <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
                    <span class="token comment">//封装catalog3Vo</span>
                    Catalog2Vo<span class="token punctuation">.</span>Catalog3Vo catalog3Vo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Catalog2Vo<span class="token punctuation">.</span>Catalog3Vo</span><span class="token punctuation">(</span>level2<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> level3<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> level3<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">return</span> catalog3Vo<span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token comment">//封装catalog3Vo到catalog2Vo</span>
                catalog2Vo<span class="token punctuation">.</span><span class="token function">setCatalog3List</span><span class="token punctuation">(</span>catalog3List<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> catalog2Vo<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//返回v=catalog2Vo</span>
    <span class="token keyword">return</span> catelog2Vos<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token keyword">return</span> map<span class="token punctuation">;</span>

}

Nginx

Nginx与Tomact，Apache：nginx和apache是静态的web服务器，tomcat是动态的web服务器。
Nginx除了具有web服务器的属性外，还有反向代理的功能，还有负载均衡功能。
Nginx所以叫Web服务器，反向代理服务器，负载均衡服务器.

正向代理 隐藏客户端
反向代理 隐藏服务端

 
 
 
 1
2

在这里插入图片描述
知乎上截取的图

搭建域名访问环境

在这里插入图片描述

在这里插入图片描述
1、修改window下hosts文件

虚拟机ip 域名

这样当请求域名时则转发到虚拟机

2、在nginx挂载目录下有一个conf.d文件，nginx会读取这下面所有的配置文件，创建一个mall.conf为商城服务做配置，这里转发请求到网关
在这里插入图片描述

server {
    listen       80;
    server_name 域名;
#charset koi8<span class="token operator">-</span>r<span class="token punctuation">;</span>
#access_log  <span class="token operator">/</span><span class="token keyword">var</span><span class="token operator">/</span>log<span class="token operator">/</span>nginx<span class="token operator">/</span>log<span class="token operator">/</span>host<span class="token punctuation">.</span>access<span class="token punctuation">.</span>log  main<span class="token punctuation">;</span>

location <span class="token operator">/</span> <span class="token punctuation">{</span>
   proxy_set_header Host $host<span class="token punctuation">;</span>
   proxy_pass http<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>网关中配置的名字<span class="token punctuation">;</span>

<span class="token punctuation">}</span>

}

3、修改Nginx的nginx.conf,代理到windos下88端口（网关服务）

upstream mall{
server 192.168.175.1:88;
}

4、网关配置

   #nginx 要放最后
        - id: mall_host_route
          uri: lb://produc服务名
          predicates:
            - Host=**.网关中配置的名字

 
 
 
 1
2
3
4
5

监听nginx转发来的请求再转发到商城服务

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>