ホームページ >データベース >mysql チュートリアル >springboot+bootstrap+mysql+redis に基づいて完全な権限構造を構築する方法

springboot+bootstrap+mysql+redis に基づいて完全な権限構造を構築する方法

PHPz転載: 2023-05-27 09:43:25802ブラウズ

まず、カプセル化されたブートストラップスクリプトを既存のプロジェクトに導入します。ディレクトリは次のとおりです:

この時点で、ブートストラップフレームワークの導入は完了です。ブートストラップフレームワークに基づいて、最初のブートストラップページのログインページの開発を開始します。テンプレートファイルを開いて、一番下にある 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}==&#39;Bad credentials&#39;?&#39;账号/密码错误！&#39;:${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>

リロードして、 run us プログラムでは、新しいページの効果が次のようになっていることがわかります。

springboot+bootstrap+mysql+redis に基づいて完全な権限構造を構築する方法
この時点で、ログインホームページが完成しました。その後、メインホームページを開発します。成功したログイン.html では、ホームページを作成するときにデータベースを再設計する必要があるため、既存のテーブル構造ではビジネスシステム全体をサポートできないため、以下に示すようにデータベースを再設計します。

##次に、データベース実行スクリプトを直接生成し、データベース内で実行します。同時に、前の章で開発したツールを使用してコードを迅速に生成し、権限構造に従ってコードを変更します。変更後のコードの構造は次のとおりです:

springboot+bootstrap+mysql+redis に基づいて完全な権限構造を構築する方法

私たちのプロジェクトでは、頻繁に使用する CSS または js がいくつかあります。各ページを参照したくありません。そこで、次のようにプロジェクトへのグローバル参照を作成します (テンプレートの下に新しいフォルダーを作成し、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>

springboot+bootstrap+mysql+redis に基づいて完全な権限構造を構築する方法

上記のコードにより、ログインに成功した後、正式にホームページを開発できます。ホームページのコードは次のとおりです:

<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 = &#39;/ricky-websocket&#39;;
        options.stompClienturl = &#39;/ricky/topic/greetings&#39;;
        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:&#39;main&#39;,navTitle:&#39;XXXX管理系统&#39;});
        // 初始化标签页
        $("#tabContainer").tabs({
            data: [{
                id: &#39;99999999&#39;,
                text: &#39;首页&#39;,
                url: "home",
                closeable: false
            }],
            showIndex: 0,
            loadAll: false
        })
        //
        $.fn.bootstrapTree({url:"/user/mainTree",treeId:&#39;menu_tree&#39;,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>

以上がspringboot+bootstrap+mysql+redis に基づいて完全な権限構造を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：mysqlの左外部結合クエリの構文は何ですか次の記事：mysqlの左外部結合クエリの構文は何ですか

続きを見る