Blog System | Note-1

发表于

Blog System | Note-1

@2018年7月29日 09:49:20 Knowledge From Imooc

Core Function

用户管理：注册、登录、增加、修改、删除、搜索

安全设置：角色授权、权限设置

博客管理：发表、编辑、删除、分类、设置标签、上传图片、模糊查询、排序、统计

评论管理：发表、删除、统计

点赞管理：点赞、取消、统计

分类管理：创建、编辑、删除、查询

标签管理：创建、删除、查询

首页搜索：全文检索、最新文章、最热文章、热门标签、用户、文章、最新发布

Core Technology

FrontEnd：Bootstrap、Thymeleaf、jQuery、HTML5、JS、CSS

BackEnd：Spring、Spring Boot、Spring MVC、Spring Data、Spring Security、Hibernate

DataSource：MySQL、H2、MongoDB（存储非结构化数据）

Other：ElasticSearch（搜索）、Gradle（管理构建）

Thymeleaf & Spring Boot

Thymeleaf是Java模版引擎，自然模版，原型即页面，OGNL，SpringEL，遵守WEB标准，支持HTML5

Thymeleaf标准方言

1
2
3
> <span th:tex=""> 引入命名空间
> <span data-th-text=""> 自定义属性
>

标准表达式，设置属性值，迭代器，条件语句，模版布局，属性优先级，注释，内联，基本对象，工具对象

Thymeleaf基本入门

变量表达式

语法：${…} 

1
2
> <span th:text="${book.author.name}">
>
消息表达式(文本外部化、国际化、i18n)

语法：#{…} 

1
2
> <th th:text="#{header.address.city}">
>
选择表达式

语法：*{} 

1
2
3
4
5
> <div th:object="${book}">
>     ...
>     <span th:text="*{title}">...</span>
> </div>
>

与变量表达式的区别：选择表达式是在当前选择的对象，而不是全部上下文变量映射执行

链接表达式

语法: @{}

1
2
> <a th:href="@{http://www.baidu.com}" ... </a>
>
分段表达式

语法： th:insert 或 th:replace

字面量（文字），算术操作，比较和等价，三元运算符，无操作（_）：

文字，数字，布尔，null

+，-，*，/，%

.>，<，==，!=，>=，<=

设置属性值(Setting Attribute Values)

设置任意属性值(Setting the value of any attribute)

1
2
3
4
5
> <from action="subscribe.html" th:attr="action=@{/subscribe}">
> ==>	<from action="/abc/subscribe">
> <input type="submit" value="Subscribe" th:attr="value=#{subscribe.submit}"/>
> ==>	<input type="submit" value="Subscribe">
>

设置值到指定的属性(Setting value to specific attributes)

1
2
3
> <from action="subscribe.html" th:action="@{/subscribe}">
> <input type="submit" value="Subscribe" th:value="#{subscribe.submit}"/>
>

固定值布尔属性(Fixed-value boolean attributes)

1
2
3
4
> <input type="checkbox" name="option2" checked /> <!-- HTML -->
> <input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->
> <input type="checkbox" name="active" th:checked="${user.active}" />
>
迭代器 Iteration

基本迭代 th:each

1
2
> <li th:each="book" : ${book}  th:text="${book.title}">Book Of Java</li>
>

状态变量

​ -index,count,size,current,even/odd,first,last

1
2
3
4
5
6
7
8
9
10
11
> <table>
>   <tr>
>     <th>NAME</th>
>     <th>IN STOCK</th>
>   </tr>
>   <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
>     <td th:text="${prod.name}">Onions</td>
>     <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
>   </tr>
> </table>
>
条件语句 Conditional Evaluation

th:if th:unless

1
2
3
4
5
> <a href="comments.html" 
>          th:href="@{/product/comments(prodId=${prod.id})}" 
>          th:if(unless)="${not #lists.isEmpty(prod.comments)}">view</a>
>     </td>
>

th:switch

1
2
3
4
5
6
> <div th:switch="${user.role}">
>   <p th:case="'admin'">User is an administrator</p>
>   <p th:case="#{roles.manager}">User is a manager</p>
>   <p th:case="*">User is some other thing</p>
> </div>
>
模版布局 Template Layout

定义和引用片段

1
2
3
4
5
6
7
> // 定义
> <div th:fragment="copy">
> 	&copy; 2011 The Good Thymes Virtual Grocery
> </div>
> // 引用
> <div th:insert="~{footer :: copy}"></div>
>

不使用fragments

1
2
3
4
5
6
7
> // 定义
> <div id="copy-section">
>   &copy; 2011 The Good Thymes Virtual Grocery
> </div>
> // 引用
> <div th:insert="~{footer :: #copy-section}"></div>
>

th:insert 和 th:replace 和 th:include的区别

​ -th:insert 简单的插入指定的片段作为正文的主标签

​ -th:replace 指定实际片段来替换其主标签

e.g

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
> <footer th:fragment="copy">
>   &copy; 2018
> </footer>
> // use
> <div th:insert="footer :: copy"></div>
> <div th:replace="footer :: copy"></div>
> <div th:include="footer :: copy"></div>
> // result
> <div>
>     <footer>
> 		&copy; 2018
>     </footer>
> </div>
> 
> <footer>
> 	&copy; 2018
> </footer>
> 
> <div>
>     &copy; 2018
> </div>
>
属性优先级 Attribute Precedence

Q:同一个标签写入多个th:*属性,谁先执行?属性优先级表

A:根据优先级表，与标签前后顺序无关，与优先级有关

1
2
3
<ul>
  <li th:each="item : ${items}" th:text="${item.description}">Item description here...</li>
</ul>
注释 Comments and Blocks

标准HTML/XML

​ -

Thymeleaf解析器级注释块

​ 删除所有 <!--/* 和 */-- 之间的内容

原型注释块

​ 当模版静态打开时，注释块则不显示；当模版执行时，注释的代码被显示<!--/*/ …/*/--> 

1
2
3
4
5
6
7
8
> <span>hello!</span>
> <!--/*/
>   <div th:text="${...}">
>     ...
>   </div>
> /*/-->
> <span>goodbye!</span>
>
内联 Inlining

直接将表达式写入文本当中

[[…]] 对应 th:text 转换特殊符号

1
2
3
> <p>The message is "[[${msg}]]"</p>
> <p>The message is "This is &lt;b&gt;great!&lt;/b&gt;"</p>
>

[(…)] 对应 th:utext utext不转换特殊符号

1
2
3
> <p>The message is "[(${msg})]"</p>
> <p>The message is "This is <b>great!</b>"</p>
>

禁用内联

​ -th:inline=”none”

JS内联

1
2
3
4
5
6
7
8
> <script th:inline="javascript">
>     var username = [[${session.user.name}]];
> </script>
> // RESULT	
> <script th:inline="javascript">
>     var username = "Sebastian \"Fruity\" Applejuice";
> </script>
>
表达式基本对象

#ctx : 上下文对象

#locale：直接访问与java.util.Locale 关联的当前的请求

request/session/application等

Web上下文对象

​ -#request #session #servletContext

Thymeleaf与Spring Boot集成

修改build.gradle

1
2
3
4
ext['thymeleaf.version'] = '3.0.3.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.2.0'
// 添加 Thymeleaf 的依赖
compile('org.springframework.boot:spring-boot-starter-thymeleaf')

Coding

API设计

GET /users 返回用户列表list.html

GET /users/{id} 返回用户view.html

GET /users/form 返回新增或修改用户的form.html

POST /users 新增或修改用户，成功后重定向

GET /users/delete/{id} 根据id删除用户数据

GET /users/modify/{id} 根据id修改用户数据

数据

未使用数据库或持久化数据层时，可使用ConcurrentMap的方式暂时存储数据在内存当中，充当测试数据

Different
SSM Spring Boot
Service Repository
ServiceImpl RepositoryImpl
Entity Domain

FrontEnd

引入Thymeleaf命名空间

1
2
<html xmlns:th="http://www.thymeleaf.org" 
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

具体运用：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div th:replace="~{fragments/header :: header}"></div>
<h3 th:text="${userModel.title}"></h3>
// th:href
<a th:href="@{/users/form}">创建用户</a>
<a th:href="@{'/users/delete/'+${userModel.user.id}}">删除</a>
// th:if
<tr th:if="${userModel.userList.size()} == 0"></tr>
// th:each
<tr th:each="user : ${userModel.userList}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.email}"></td>
    <td><a th:href="@{'/users/'+${user.id}}" th:text="${user.name}"></a></td>
</tr>

附录

一、目录文件解释

buildscript.gradle (代码块中脚本优先执行)

  • ext 用于定义动态属性（sprintBootVersion = ‘2.0.3 RELEASE’）
  • repositories 使用中央仓库以及spring仓库
  • dependencies 依赖关系
  • classpath 声明执行其余脚本时，ClassLoader可使用这些依赖项（可引用ext中动态属性${sprintBootVersion}）
  • 使用插件
  • 指定生成编译文件版本 默认jar
  • 依赖关系（编译阶段、测试阶段）

二、Gradle

  1. 按约定声明构建和建设
  2. 强大的支持多工程的构建
  3. 强大的依赖管理（基于Apache Ivy），提供最大的便利去构建工程
  4. 全力支持已有的 Maven 或者Ivy仓库基础建设
  5. 支持传递性依赖管理，在不需要远程仓库和pom.xml和ivy配置文件的前提下
  6. 基于groovy脚本构建，其build脚本使用groovy语言编写
  7. 具有广泛的领域模型支持构建
  8. 深度 API
  9. 易迁移
  10. 自由和开放源码，Gradle是一个开源项目，基于 ASL

三、Thymeleaf

Tutorial:Using Thymeleaf 3.0

@2018年7月29日 14:19:06