Blog System | Note-3

发表于

Blog System | Note-3

@2018年7月30日 10:16:35 Knowledge From Imooc

集成Bootstrap

Bootstrap是什么

​ 基于HTML、CSS、JS的前端框架；响应式布局；移动设备优先；

​ 响应式meta标签；Normalize.css；使用Normalize建立跨浏览器的一致性；Reboot；

HTML5 doctype
1
2
3
<!DOCTYPE html>
<html lang="en">
</html>
Bootstrap网格系统

Q:什么是移动设备优先策略

A:基础的CSS是移动优先，优先设计更小的宽度；媒体查询（针对平板，PC）；渐进增强（随屏幕大小增加而添加元素）；响应式（viewport尺寸的增加，系统自动分为十二列）；

架构设计与分层

Q:为什么需要分层

A： 不分层时，数据访问，数据获取，数据判断，数据展示冗杂在同一个文件当中；代码职责不准确，难以拓展；代码混杂，难以维护；代码无分工，难以组织；

​ 分层时：将业务功能分层（显示层，业务层，数据访问层）；良好的层次关系（上层依赖于下层，下层支撑上层，但下层不能直接访问上层）；每层保持独立；

Q:三层架构

A:展示层（Persentation Layer）：提供与用户交互的界面；

业务层（Business Layer）：用于实现业务逻辑；

数据访问层（Data Access Layer）：与数据库交互的一层；

Q:博客系统的架构设计及职责划分

A:表示层（Controller，View）、业务层（Entity，VO，Service）、数据访问层（Repository）

职责划分：博客系统—RESTful API—文件管理系统；

博客系统：关系型数据库，NoSQL（ElasticSearch）

文件管理系统：NoSQL（MongoDB）

应用@

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" data-th-fragment="header">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Tether core CSS -->
    <link href="/css/tether.css" th:href="@{/css/tether.css}" type="text/css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/tether/1.4.4/js/tether.js"></script>
    <!-- Bootstrap CSS -->
    <link href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet">

    <!-- Font-Awesome CSS -->
    <link href="/css/font-awesome.css" th:href="@{/css/font-awesome.css}" type="text/css" rel="stylesheet">

    <!-- NProgress CSS -->
    <link href="/css/nprogress.css" th:href="@{/css/nprogress.css}" type="text/css" rel="stylesheet">

    <!-- thinker-md CSS -->
    <link href="/css/thinker-md.vendor.css" th:href="@{/css/thinker-md.vendor.css}" type="text/css" rel="stylesheet">

    <!-- bootstrap tags CSS -->
    <link href="/css/component-tageditor.css" th:href="@{/css/component-tageditor.css}" type="text/css"
          rel="stylesheet">

    <!-- bootstrap chosen CSS -->
    <link href="/css/component-chosen.css" th:href="@{/css/component-chosen.css}" type="text/css" rel="stylesheet">

    <!-- toastr CSS -->
    <link href="/css/toastr.css" th:href="@{/css/toastr.css}" type="text/css" rel="stylesheet">

    <!-- jQuery image cropping plugin CSS -->
    <link href="/css/cropbox.css" th:href="@{/css/cropbox.css}" type="text/css" rel="stylesheet">

    <!-- Custom styles -->
    <link href="/css/style.css" th:href="@{/css/style.css}" type="text/css" rel="stylesheet">
    <link href="/css/thymeleaf-bootstrap-paginator.css" th:href="@{/css/thymeleaf-bootstrap-paginator.css}"
          type="text/css" rel="stylesheet">

</head>
    
// 引用header
<head th:replace="~{fragments/header :: header}">
</head>
    
<body>
    <div class="container"></div>
    <div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>

需求分析

参照Note-1 Core Function

原型设计

提供给用户最终产品的基本效果；方便开发人员进行开发；二次开发；

权限管理（基于角色的权限管理）

角色

代表具有一系列的行为和责任的实体；限定功能范围；用户账号与角色相关联

RBAC

基于角色的访问控制 Role-Based Access Control

隐式访问控制（与角色密切关联）

显示访问控制（与权限关联，权限与角色关联）

解决方案

Apache Shiro、Spring Security

Spring Security

基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架

认证

认证是建立主体的过程；（主体：在应用程序中执行操作的用户、设备或系统）

授权

又称访问控制；授权指决定是否允许主体在应用程序中执行操作

身份验证技术

HTTP BASIC；HTTP Digest；HTTP X.509；LDAP；基于表单的认证；OpenID；单点登录；Remember-Me；匿名身份验证；Run-as；JAAS；

模块

Core；Remoting；Web；Config；LADP；ACL；CAS；OpenID；Test；

应用@

1
2
3
4
// 添加 Spring Security 依赖
compile('org.springframework.boot:spring-boot-starter-security')
// 添加 Thymeleaf Spring Security 依赖
compile('org.thymeleaf.extras:thymeleaf-extras-springsecurity4:3.0.2.RELEASE')
后台应用@
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 安全配置类
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers("/css/**","/js/**","/fonts/**","/index").permitAll()  // 可访问
        .antMatchers("/users/**").hasRole("ADMIN")  // 需要角色
        .and()
        .formLogin()  // 基于FORM表单登录验证
        .loginPage("/login").failureUrl("/login-error");  // 自定义登录界面
}
@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception{
    // 认证信息管理 存储于内存中
    auth.inMemoryAuthentication().withUser("admin").password("123123").roles("ADMIN");
}
}

// 控制器
@Controller
public class MainController {
	@GetMapping("/")
	public String root(){...}

	@GetMapping("/index")
	public String index(){...}

	@GetMapping("/login")
	public String login(){...}

	@GetMapping("/login-error")
	public String loginError(Model model){...}
}
前端应用@
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!--index.html-->
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    ...
<div sec:authorize="isAuthenticated()">
    <p>已有用户登录</p>
    <p>登录用户为：<span sec:authentication="name"></span></p>
    <p>登录角色为：<span sec:authentication="principal.authorities"></span></p>
</div>
<div sec:authorize="isAnonymous()">
    <p>未有用户登录</p>
</div>
<!--header.html-->
<!-- 登录判断 -->
<div sec:authorize="isAuthenticated()" class="row">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <span class="nav-link" sec:authentication="name"></span>
        </li>
    </ul>
    <form th:action="@{/logout}" method="post">
        <input class="btn btn-outline-success" type="submit" th:value="登出">
    </form>
</div>
<div sec:authorize="isAnonymous()">
    <a th:href="@{~/login}" class="btn btn-success my-2 my-sm-0" type="submit">登录</a>
</div>
<!--login.html-->
<form th:action="@{~/login}" method="post">
    <div class="form-group col-md-5">
        <label for="username" class="col-form-label">帐号</label>
        <input type="text" class="form-control" id="username" maxlength="50">
    </div>

    <div class="form-group col-md-5">
        <label for="password" class="col-form-label">密码</label>
        <input type="password" class="form-control" id="password" maxlength="50">
    </div>
    <div class="form-group col-md-5">
        <button type="submit" class="btn btn-primary">登录</button>
    </div>
    <!--登录错误的提示信息-->
    <div class="form-group col-md-5" th:if="${loginError}">
        <p class="blog-label-error" th:text="${errMsg}"></p>
    </div>
</form>

附录

BootCDN

Bootstrap

Bootstrap-CSS

@2018年7月30日 15:17:49