基於springboot+bootstrap+mysql+redis搭建一套完整的權限架構【六】【引入bootstrap前端框架】

時間 2019-11-12

標籤基於 springboot+bootstrap+mysql+redis springboot bootstrap mysql redis 搭建一套完整權限架構引入前端框架欄目 Spring 简体版

原文原文鏈接

https://blog.csdn.net/linzhefeng89/article/details/78752658javascript

基於springboot+bootstrap+mysql+redis搭建一套完整的權限架構【六】【引入bootstrap前端框架】

2017年12月11日 10:19:24 笨_鳥_不_會_飛閱讀數：12574

bootstrap是目前最受歡迎的前端框架，bootstrap是基於HTML、CSS、JAVASCRIPT的，她界面美光、代碼簡介、開發靈活，所以深受開發者的喜好，本文中用的bootstrap框架的版本是3.0以上的版本，若你們對bootstrap框架有興趣能夠直接到她的官方網站直接查閱相應的文檔信息，官網地址：http://getbootstrap.com/。css

因爲bootstrap實際上咱們在谷歌的時候會發現已經有大量的大神已經基於bootstrap給咱們搭建好了各類各樣的DEMO，所以咱們徹底沒有必要本身去閉門造車，咱們直接拿着前人寫好的DEMO咱們本身修改下就能夠變成咱們本身的東西，因爲深刻bootstrap的話那就是要一個專題來說解了，此處主要講解的是如何基於bootstrap來搭建一套完整的權限架構所以就再也不此處深刻的去講解該框架，只要你們跑過一遍代碼能夠懂得如何使用就行了，若像更深刻的去學習，那麼你們去網上搜索下資料，上面有大量的資料供你們學習。html

首先基於咱們的第五章的工程咱們將咱們事先已經封裝好的bootstrap腳本引入到咱們現有的工程，你們若須要該快的代碼，請你們直接在文章的末尾去github上本身去拿此塊封裝的代碼，目錄以下：前端

到此咱們的bootstraop框架引入完成，那麼基於bootstrap框架咱們如今開始開發屬於咱們的第一個bootstrap頁面登錄頁，打開咱們的templates文件在底下找到咱們login.html頁面，進行從新的編輯該頁面代碼以下：java

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>登陸頁面</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<style type="text/css">
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>
</head>
<body>
<!--/
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Security演示</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a th:href="@{/}"> 首頁 </a></li>
</ul>
</div>.nav-collapse
</div>
</nav>
-->
<div class="container">
<div class="starter-template">
<p th:if="${param.logout}" class="bg-warning">已成功註銷</p>
<p th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}=='Bad credentials'?'帳號/密碼錯誤！':${session.SPRING_SECURITY_LAST_EXCEPTION.message}" class="bg-danger">
</p>
<h2>使用帳號密碼登陸</h2>
<form name="form" th:action="@{/login}" action="/login" method="POST">
<div class="form-group">
<label for="username">帳號</label>
<input type="text" class="form-control" name="username" id="username" value="" placeholder="帳號" />
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" name="password" id="password" placeholder="密碼" />
</div>
<input type="submit" id="login" value="Login" class="btn btn-primary" />
</form>
</div>
</div>
</body>
</html>

從新加載並運行咱們的程序咱們會看到咱們全新的頁面效果以下所示：

到此咱們的登錄的首頁已經完成了，接着咱們再開發咱們登錄成功之後的主頁main.html，在咱們編寫咱們的主頁的時候，咱們須要從新設計下咱們的數據庫，所以咱們現有的表結構沒法支撐起來咱們的整個業務系統，所以咱們從新設計了咱們的數據庫以下圖：mysql

接着咱們直接生成咱們的數據庫執行腳本，並在咱們的數據庫中執行，同時使用咱們上一章開發的工具咱們來快速生成咱們的代碼,並根據咱們的權限架構來修改咱們的代碼，如下是通過修改之後的代碼的結構：jquery

在咱們的工程中有一些咱們常常用到的CSS或者js 咱們並不想每一個頁面都進行一次引用，所以咱們新建一個全局的引用到咱們的工程（在templates底下新建一個文件夾include同時建立includebase.html文件）中以下：git

<html xmlns:th="http://www.thymeleaf.org">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/css/bootstrap-table.css}" rel="stylesheet"/>
<link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/css/bootstrap-datetimepicker.css}" rel="stylesheet"/>
<link th:href="@{/css/bootstrapValidator.min.css}" rel="stylesheet"/>
<link th:href="@{/css/fileinput.css}" rel="stylesheet"/>
<link th:href="@{/css/fileinput-rtl.css}" rel="stylesheet"/>
<link th:href="@{/css/theme.css}" rel="stylesheet"/>
<link th:href="@{/css/zTreeStyle/metro.css}" rel="stylesheet"/>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.min.js}"></script>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/distpicker/distpicker.data.js}"></script>
<script th:src="@{/js/distpicker/distpicker.js}"></script>
<script th:src="@{/js/websocket/socketUtil.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrap/nav/nav.js}"></script>
<script th:src="@{/js/bootstrap/tab/bootstrap-tab.js}"></script>
<script th:src="@{/js/bootstrap/tree/tree.js}"></script>
<script th:src="@{/js/bootstrap/alert/alert.js}"></script>
<script th:src="@{/js/bootstrap/table/bootstrap-table.js}"></script>
<script th:src="@{/js/bootstrap/date/bootstrap-datetimepicker.js}"></script>
<script th:src="@{/js/bootstrap/validator/bootstrapValidator.min.js}"></script>
<script th:src="@{/js/bootstrap/upload/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap/upload/plugins/sortable.js}"></script>
<script th:src="@{/js/bootstrap/upload/locales/zh.js}"></script>
<script th:src="@{/js/bootstrap/upload/theme.js}"></script>
<script th:src="@{/js/bootstrap/ztree/jquery.ztree.all-3.5.min.js}"></script>
<script th:src="@{/js/bootstrap/checkbox/checkbox.js}"></script>
<script th:src="@{/js/ajaxutil/ajaxUtil.js}"></script>
<script th:src="@{/js/dict/dictUtil.js}"></script>
<script th:src="@{/js/bootstrap/date/date.prototype.format.js}"></script>
<script th:src="@{/js/bootstrap/util/number.pick.util.js}"></script>
</html>

經過以上的代碼的快速生成、修改以及配置咱們這才能夠正式開發咱們的登錄成功之後的首頁，首頁代碼以下：

<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="include/includebase"></head>
<link th:href="@{css/sb-admin.css}" rel="stylesheet"/>
<script th:inline="javascript">
$(function () {
// 頁面加載完成之後開啓websocket的鏈接
var options = new Array();
options.sockurl = '/ricky-websocket';
options.stompClienturl = '/ricky/topic/greetings';
options.login = [[${#authentication.name}]];
options.success = function(greeting){
var r = eval("("+JSON.parse(greeting.body).content+")")
alert(r);
// $("#greetings").append(" <tr><td>" + JSON.parse(greeting.body).content + "</td></tr>");
}
$.fn.socketConnect(options);
// 初始化nav
$.fn.bootstrapNav({index:'main',navTitle:'XXXX管理系統'});
// 初始化標籤頁
$("#tabContainer").tabs({
data: [{
id: '99999999',
text: '首頁',
url: "home",
closeable: false
}],
showIndex: 0,
loadAll: false
})
//
$.fn.bootstrapTree({url:"/user/mainTree",treeId:'menu_tree',tabId:"tabContainer"});
$.fn.dictUtil("/dict/loadDict");
});
</script>
<body >
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header" id="navbar_header">
</div>
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
<ul class="dropdown-menu message-dropdown">
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="" />
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="" />
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="" />
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-footer">
<a href="#">Read All New Messages</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <font th:text="${#authentication.name}"></font> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#" ><i class="fa fa-fw fa-gear"></i> 修改密碼 </a>
</li>
<li class="divider"></li>
<li>
<a href="/logout" ><i class="fa fa-fw fa-power-off"></i>退出</a>
</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav" id="menu_tree">
</ul>
</div>
</nav>
<div id="page-wrapper" style="border-radius:5px 5px 0 0;">
<div id="tabContainer"></div>
</div>
</div>
<!--
<div th:text="${#authentication.name}">
The value of the "name" property of the authentication object should appear here.
</div>
這是一個登錄成功之後的首頁
<div class="row">
<div class="col-md-12">
<table id="conversation" class="table table-striped">
<thead>
<tr>
<th>Greetings</th>
</tr>
</thead>
<tbody id="greetings">
</tbody>
</table>
</div>
</div>
-->
</body>
</html>