携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情

每日英语:

A person who never made a mistake never tried anything new.

翻译：一个人从不犯错，只是因为他不曾尝试过任何新鲜事物。 ——阿尔伯塔·爱因斯坦

1.对搜索数据进行渲染

搜索数据渲染我们需要在mall-search-web中调用mall-search-service，因此需要在mall-search-web引入mall-search-api依赖，并且在com.xz.mall.search.feign.SkuSearchFeign添加搜索调用方法，代码如下：

/**
 * 商品搜索
 */
@GetMapping
RespResult<Map<String, Object>> search(@RequestParam(required = false) Map<String, Object> searchMap);

mall-search-web依赖引入：

<dependencies>
    <dependency>
        <groupId>com.xz</groupId>
        <artifactId>mall-search-api</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </dependency>
</dependencies>

在启动类上com.xz.mall.WebSearchApplication上添加@EnableFeignClients注解，代码如下：

@SpringBootApplication
@EnableFeignClients(basePackages = "com.xz.mall.search.feign")
public class WebSearchApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSearchApplication.class, args);
    }

}

1.1 对列表数据进行加载

Thymeleaf语法库：

th:abbr	th:accept	th:accept-charset
th:accesskey	th:action	th:align
th:alt	th:archive	th:audio
th:autocomplete	th:axis	th:background
th:bgcolor	th:border	th:cellpadding
th:cellspacing	th:challenge	th:charset
th:cite	th:class	th:classid
th:codebase	th:codetype	th:cols
th:colspan	th:compact	th:content
th:contenteditable	th:contextmenu	th:data
th:datetime	th:dir	th:draggable
th:dropzone	th:enctype	th:for
th:form	th:formaction	th:formenctype
th:formmethod	th:formtarget	th:fragment
th:frame	th:frameborder	th:headers
th:height	th:high	th:href
th:hreflang	th:hspace	th:http-equiv
th:icon	th:id	th:inline
th:keytype	th:kind	th:label
th:lang	th:list	th:longdesc
th:low	th:manifest	th:marginheight
th:marginwidth	th:max	th:maxlength
th:media	th:method	th:min
th:name	th:onabort	th:onafterprint
th:onbeforeprint	th:onbeforeunload	th:onblur
th:oncanplay	th:oncanplaythrough	th:onchange
th:onclick	th:oncontextmenu	th:ondblclick
th:ondrag	th:ondragend	th:ondragenter
th:ondragleave	th:ondragover	th:ondragstart
th:ondrop	th:ondurationchange	th:onemptied
th:onended	th:onerror	th:onfocus
th:onformchange	th:onforminput	th:onhashchange
th:oninput	th:oninvalid	th:onkeydown
th:onkeypress	th:onkeyup	th:onload
th:onloadeddata	th:onloadedmetadata	th:onloadstart
th:onmessage	th:onmousedown	th:onmousemove
th:onmouseout	th:onmouseover	th:onmouseup
th:onmousewheel	th:onoffline	th:ononline
th:onpause	th:onplay	th:onplaying
th:onpopstate	th:onprogress	th:onratechange
th:onreadystatechange	th:onredo	th:onreset
th:onresize	th:onscroll	th:onseeked
th:onseeking	th:onselect	th:onshow
th:onstalled	th:onstorage	th:onsubmit
th:onsuspend	th:ontimeupdate	th:onundo
th:onunload	th:onvolumechange	th:onwaiting
th:optimum	th:pattern	th:placeholder
th:poster	th:preload	th:radiogroup
th:rel	th:rev	th:rows
th:rowspan	th:rules	th:sandbox
th:scheme	th:scope	th:scrolling
th:size	th:sizes	th:span
th:spellcheck	th:src	th:srclang
th:standby	th:start	th:step
th:style	th:summary	th:tabindex
th:target	th:title	th:type
th:usemap	th:value	th:valuetype
th:vspace	th:width	th:wrap
th:xmlbase	th:xmllang	th:xmlspace

1.1.1 语法说明

数据结果集循环语法：www.thymeleaf.org/doc/tutoria…

th:each对象遍历，功能类似jstl中的<c:forEach>标签。

<tr th:each="user,userStat:${users}">
    <td>
    	下标:<span th:text="${userStat.index}"></span>,
    </td>
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.address}"></td>
</tr>

th:text:输出指定数据，例如th:text="${user.address}"表示输出user对象中的address属性。

th:src：加载指定图片

总结：

本篇主要介绍了一下对搜索数据渲染前的初步操作，以及介绍了一下Thymeleaf语法库，简单介绍了一下数据结果集循环语法。下一篇会介绍一下其他语法的使用说明。