來源：笨_鳥_不_會_飛 發(fā)布時間：2018-11-01 15:27:19 閱讀量：1217
bootstrap是目前最受歡迎的前端框架，bootstrap是基于HTML、CSS、JAVASCRIPT的，她界面美光、代碼簡介、開發(fā)靈活，因此深受開發(fā)者的喜愛，本文中用的bootstrap框架的版本是3.0以上的版本，若大家對bootstrap框架有興趣可以直接到她的官方網(wǎng)站直接查閱相應(yīng)的文檔信息，官網(wǎng)地址：http://getbootstrap.com/。
由于bootstrap實際上我們在谷歌的時候會發(fā)現(xiàn)已經(jīng)有大量的大神已經(jīng)基于bootstrap給我們搭建好了各種各樣的DEMO，因此我們完全沒有必要自己去閉門造車，我們直接拿著前人寫好的DEMO我們自己修改下就可以變成我們自己的東西，由于深入bootstrap的話那就是要一個專題來講解了，此處主要講解的是如何基于bootstrap來搭建一套完整的權(quán)限架構(gòu)因此就不再此處深入的去講解該框架，只要大家跑過一遍代碼可以懂得如何使用就好了，若像更深入的去學(xué)習(xí)，那么大家去網(wǎng)上搜索下資料，上面有大量的資料供大家學(xué)習(xí)。
首先基于我們的第五章的工程我們將我們事先已經(jīng)封裝好的bootstrap腳本引入到我們現(xiàn)有的工程，大家若需要該快的代碼，請大家直接在文章的末尾去github上自己去拿此塊封裝的代碼，目錄如下：
到此我們的bootstraop框架引入完成，那么基于bootstrap框架我們現(xiàn)在開始開發(fā)屬于我們的第一個bootstrap頁面登陸頁，打開我們的templates文件在底下找到我們login.html頁面，進行重新的編輯該頁面代碼如下：
<!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><!-- 1 -->
<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> <!-- 2 -->
<h2>使用賬號密碼登錄</h2>
<form name="form" th:action="@{/login}" action="/login" method="POST"> <!-- 3 -->
<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>
重新加載并運行我們的程序我們會看到我們?nèi)碌捻撁嫘Ч缦滤荆?/span>
到此我們的登陸的首頁已經(jīng)完成了，接著我們再開發(fā)我們登陸成功以后的主頁main.html，在我們編寫我們的主頁的時候，我們需要重新設(shè)計下我們的數(shù)據(jù)庫，因此我們現(xiàn)有的表結(jié)構(gòu)無法支撐起來我們的整個業(yè)務(wù)系統(tǒng)，因此我們重新設(shè)計了我們的數(shù)據(jù)庫如下圖：
接著我們直接生成我們的數(shù)據(jù)庫執(zhí)行腳本，并在我們的數(shù)據(jù)庫中執(zhí)行，同時使用我們上一章開發(fā)的工具我們來快速生成我們的代碼,并根據(jù)我們的權(quán)限架構(gòu)來修改我們的代碼，以下是經(jīng)過修改以后的代碼的結(jié)構(gòu)：
在我們的工程中有一些我們經(jīng)常用到的CSS或者js 我們并不想每個頁面都進行一次引用，因此我們新建一個全局的引用到我們的工程（在templates底下新建一個文件夾include同時創(chuàng)建includebase.html文件）中如下：
<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>
通過以上的代碼的快速生成、修改以及配置我們這才可以正式開發(fā)我們的登陸成功以后的首頁，首頁代碼如下：
<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管理系統(tǒng)'});
// 初始化標(biāo)簽頁
$("#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">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" id="navbar_header">
</div>
<!-- Top Menu Items -->
<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>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav" id="menu_tree">
</ul>
</div>
<!-- /.navbar-collapse -->
</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>
---------------------
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
