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

基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

2017年12月11日 10:19:24 笨_鸟_不_会_飞 阅读数：12574
 
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/linzhefeng89/article/details/78752658

bootstrap是目前最受欢迎的前端框架，bootstrap是基于HTML、CSS、JAVASCRIPT的，她界面美光、代码简介、开发灵活，因此深受开发者的喜爱，本文中用的bootstrap框架的版本是3.0以上的版本，若大家对bootstrap框架有兴趣可以直接到她的官方网站直接查阅相应的文档信息，官网地址：http://getbootstrap.com/。

由于bootstrap实际上我们在谷歌的时候会发现已经有大量的大神已经基于bootstrap给我们搭建好了各种各样的DEMO，因此我们完全没有必要自己去闭门造车，我们直接拿着前人写好的DEMO我们自己修改下就可以变成我们自己的东西，由于深入bootstrap的话那就是要一个专题来讲解了，此处主要讲解的是如何基于bootstrap来搭建一套完整的权限架构因此就不再此处深入的去讲解该框架，只要大家跑过一遍代码可以懂得如何使用就好了，若像更深入的去学习，那么大家去网上搜索下资料，上面有大量的资料供大家学习。

首先基于我们的第五章的工程我们将我们事先已经封装好的bootstrap脚本引入到我们现有的工程，大家若需要该快的代码，请大家直接在文章的末尾去github上自己去拿此块封装的代码，目录如下：

到此我们的bootstraop框架引入完成，那么基于bootstrap框架我们现在开始开发属于我们的第一个bootstrap页面登陆页，打开我们的templates文件在底下找到我们login.html页面，进行重新的编辑该页面代码如下：

  1.  
    <!DOCTYPE html>
  2.  
    <html xmlns:th="http://www.thymeleaf.org">
  3.  
    <head>
  4.  
    <meta content="text/html;charset=UTF-8"/>
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6.  
    <title>登录页面</title>
  7.  
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
  8.  
    <style type="text/css">
  9.  
    body {
  10.  
    padding-top: 50px;
  11.  
    }
  12.  
    .starter-template {
  13.  
    padding: 40px 15px;
  14.  
    text-align: center;
  15.  
    }
  16.  
    </style>
  17.  
    </head>
  18.  
    <body>
  19.  
    <!--/
  20.  
    <nav class="navbar navbar-inverse navbar-fixed-top">
  21.  
    <div class="container">
  22.  
    <div class="navbar-header">
  23.  
    <a class="navbar-brand" href="#">Spring Security演示</a>
  24.  
    </div>
  25.  
    <div id="navbar" class="collapse navbar-collapse">
  26.  
    <ul class="nav navbar-nav">
  27.  
    <li><a th:href="@{/}"> 首页 </a></li>
  28.  
     
  29.  
    </ul>
  30.  
    </div>.nav-collapse
  31.  
    </div>
  32.  
    </nav>
  33.  
    -->
  34.  
    <div class="container">
  35.  
     
  36.  
    <div class="starter-template">
  37.  
    <p th:if="${param.logout}" class="bg-warning">已成功注销</p><!-- 1 -->
  38.  
    <p th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}=='Bad credentials'?'账号/密码错误！':${session.SPRING_SECURITY_LAST_EXCEPTION.message}" class="bg-danger">
  39.  
     
  40.  
    </p> <!-- 2 -->
  41.  
    <h2>使用账号密码登录</h2>
  42.  
    <form name="form" th:action="@{/login}" action="/login" method="POST"> <!-- 3 -->
  43.  
    <div class="form-group">
  44.  
    <label for="username">账号</label>
  45.  
    <input type="text" class="form-control" name="username" id="username" value="" placeholder="账号" />
  46.  
    </div>
  47.  
    <div class="form-group">
  48.  
    <label for="password">密码</label>
  49.  
    <input type="password" class="form-control" name="password" id="password" placeholder="密码" />
  50.  
    </div>
  51.  
    <input type="submit" id="login" value="Login" class="btn btn-primary" />
  52.  
    </form>
  53.  
    </div>
  54.  
     
  55.  
    </div>
  56.  
     
  57.  
    </body>
  58.  
    </html>

重新加载并运行我们的程序我们会看到我们全新的页面效果如下所示：


       到此我们的登陆的首页已经完成了，接着我们再开发我们登陆成功以后的主页main.html，在我们编写我们的主页的时候，我们需要重新设计下我们的数据库，因此我们现有的表结构无法支撑起来我们的整个业务系统，因此我们重新设计了我们的数据库如下图：

接着我们直接生成我们的数据库执行脚本，并在我们的数据库中执行，同时使用我们上一章开发的工具我们来快速生成我们的代码,并根据我们的权限架构来修改我们的代码，以下是经过修改以后的代码的结构：

在我们的工程中有一些我们经常用到的CSS或者js 我们并不想每个页面都进行一次引用，因此我们新建一个全局的引用到我们的工程（在templates底下新建一个文件夹include同时创建includebase.html文件）中如下：

  1.  
    <html xmlns:th="http://www.thymeleaf.org">
  2.  
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
  3.  
    <link th:href="@{/css/bootstrap-table.css}" rel="stylesheet"/>
  4.  
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet"/>
  5.  
    <link th:href="@{/css/bootstrap-datetimepicker.css}" rel="stylesheet"/>
  6.  
    <link th:href="@{/css/bootstrapValidator.min.css}" rel="stylesheet"/>
  7.  
    <link th:href="@{/css/fileinput.css}" rel="stylesheet"/>
  8.  
    <link th:href="@{/css/fileinput-rtl.css}" rel="stylesheet"/>
  9.  
    <link th:href="@{/css/theme.css}" rel="stylesheet"/>
  10.  
    <link th:href="@{/css/zTreeStyle/metro.css}" rel="stylesheet"/>
  11.  
     
  12.  
     
  13.  
    <script th:src="@{/js/sockjs.min.js}"></script>
  14.  
    <script th:src="@{/js/stomp.min.js}"></script>
  15.  
    <script th:src="@{/js/jquery.js}"></script>
  16.  
    <script th:src="@{/js/distpicker/distpicker.data.js}"></script>
  17.  
    <script th:src="@{/js/distpicker/distpicker.js}"></script>
  18.  
    <script th:src="@{/js/websocket/socketUtil.js}"></script>
  19.  
    <script th:src="@{/js/bootstrap.min.js}"></script>
  20.  
    <script th:src="@{/js/bootstrap/nav/nav.js}"></script>
  21.  
    <script th:src="@{/js/bootstrap/tab/bootstrap-tab.js}"></script>
  22.  
    <script th:src="@{/js/bootstrap/tree/tree.js}"></script>
  23.  
    <script th:src="@{/js/bootstrap/alert/alert.js}"></script>
  24.  
    <script th:src="@{/js/bootstrap/table/bootstrap-table.js}"></script>
  25.  
    <script th:src="@{/js/bootstrap/date/bootstrap-datetimepicker.js}"></script>
  26.  
    <script th:src="@{/js/bootstrap/validator/bootstrapValidator.min.js}"></script>
  27.  
    <script th:src="@{/js/bootstrap/upload/fileinput.min.js}"></script>
  28.  
    <script th:src="@{/js/bootstrap/upload/plugins/sortable.js}"></script>
  29.  
    <script th:src="@{/js/bootstrap/upload/locales/zh.js}"></script>
  30.  
    <script th:src="@{/js/bootstrap/upload/theme.js}"></script>
  31.  
    <script th:src="@{/js/bootstrap/ztree/jquery.ztree.all-3.5.min.js}"></script>
  32.  
    <script th:src="@{/js/bootstrap/checkbox/checkbox.js}"></script>
  33.  
    <script th:src="@{/js/ajaxutil/ajaxUtil.js}"></script>
  34.  
    <script th:src="@{/js/dict/dictUtil.js}"></script>
  35.  
    <script th:src="@{/js/bootstrap/date/date.prototype.format.js}"></script>
  36.  
    <script th:src="@{/js/bootstrap/util/number.pick.util.js}"></script>
  37.  
     
  38.  
    </html>

通过以上的代码的快速生成、修改以及配置我们这才可以正式开发我们的登陆成功以后的首页，首页代码如下：

  1.  
    <html xmlns:th="http://www.thymeleaf.org"
  2.  
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  3.  
    <head th:include="include/includebase"></head>
  4.  
    <link th:href="@{css/sb-admin.css}" rel="stylesheet"/>
  5.  
    <script th:inline="javascript">
  6.  
    $(function () {
  7.  
    // 页面加载完成以后开启websocket的连接
  8.  
    var options = new Array();
  9.  
    options.sockurl = '/ricky-websocket';
  10.  
    options.stompClienturl = '/ricky/topic/greetings';
  11.  
    options.login = [[${#authentication.name}]];
  12.  
    options.success = function(greeting){
  13.  
    var r = eval("("+JSON.parse(greeting.body).content+")")
  14.  
    alert(r);
  15.  
    // $("#greetings").append("<tr><td>" + JSON.parse(greeting.body).content + "</td></tr>");
  16.  
    }
  17.  
    $.fn.socketConnect(options);
  18.  
    // 初始化nav
  19.  
    $.fn.bootstrapNav({index:'main',navTitle:'XXXX管理系统'});
  20.  
    // 初始化标签页
  21.  
    $("#tabContainer").tabs({
  22.  
    data: [{
  23.  
    id: '99999999',
  24.  
    text: '首页',
  25.  
    url: "home",
  26.  
    closeable: false
  27.  
    }],
  28.  
    showIndex: 0,
  29.  
    loadAll: false
  30.  
    })
  31.  
    //
  32.  
    $.fn.bootstrapTree({url:"/user/mainTree",treeId:'menu_tree',tabId:"tabContainer"});
  33.  
    $.fn.dictUtil("/dict/loadDict");
  34.  
    });
  35.  
    </script>
  36.  
    <body >
  37.  
    <div id="wrapper">
  38.  
     
  39.  
    <!-- Navigation -->
  40.  
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  41.  
    <!-- Brand and toggle get grouped for better mobile display -->
  42.  
    <div class="navbar-header" id="navbar_header">
  43.  
     
  44.  
    </div>
  45.  
    <!-- Top Menu Items -->
  46.  
    <ul class="nav navbar-right top-nav">
  47.  
    <li class="dropdown">
  48.  
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
  49.  
    <ul class="dropdown-menu message-dropdown">
  50.  
    <li class="message-preview">
  51.  
    <a href="#">
  52.  
    <div class="media">
  53.  
    <span class="pull-left">
  54.  
    <img class="media-object" src="http://placehold.it/50x50" alt="" />
  55.  
    </span>
  56.  
    <div class="media-body">
  57.  
    <h5 class="media-heading"><strong>John Smith</strong>
  58.  
    </h5>
  59.  
    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
  60.  
    <p>Lorem ipsum dolor sit amet, consectetur...</p>
  61.  
    </div>
  62.  
    </div>
  63.  
    </a>
  64.  
    </li>
  65.  
    <li class="message-preview">
  66.  
    <a href="#">
  67.  
    <div class="media">
  68.  
    <span class="pull-left">
  69.  
    <img class="media-object" src="http://placehold.it/50x50" alt="" />
  70.  
    </span>
  71.  
    <div class="media-body">
  72.  
    <h5 class="media-heading"><strong>John Smith</strong>
  73.  
    </h5>
  74.  
    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
  75.  
    <p>Lorem ipsum dolor sit amet, consectetur...</p>
  76.  
    </div>
  77.  
    </div>
  78.  
    </a>
  79.  
    </li>
  80.  
    <li class="message-preview">
  81.  
    <a href="#">
  82.  
    <div class="media">
  83.  
    <span class="pull-left">
  84.  
    <img class="media-object" src="http://placehold.it/50x50" alt="" />
  85.  
    </span>
  86.  
    <div class="media-body">
  87.  
    <h5 class="media-heading"><strong>John Smith</strong>
  88.  
    </h5>
  89.  
    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
  90.  
    <p>Lorem ipsum dolor sit amet, consectetur...</p>
  91.  
    </div>
  92.  
    </div>
  93.  
    </a>
  94.  
    </li>
  95.  
    <li class="message-footer">
  96.  
    <a href="#">Read All New Messages</a>
  97.  
    </li>
  98.  
    </ul>
  99.  
    </li>
  100.  
    <li class="dropdown">
  101.  
    <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>
  102.  
    <ul class="dropdown-menu">
  103.  
    <li>
  104.  
    <a href="#" ><i class="fa fa-fw fa-gear"></i> 修改密码 </a>
  105.  
    </li>
  106.  
    <li class="divider"></li>
  107.  
    <li>
  108.  
    <a href="/logout" ><i class="fa fa-fw fa-power-off"></i>退 出</a>
  109.  
    </li>
  110.  
    </ul>
  111.  
    </li>
  112.  
    </ul>
  113.  
    <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
  114.  
    <div class="collapse navbar-collapse navbar-ex1-collapse">
  115.  
    <ul class="nav navbar-nav side-nav" id="menu_tree">
  116.  
     
  117.  
    </ul>
  118.  
    </div>
  119.  
    <!-- /.navbar-collapse -->
  120.  
    </nav>
  121.  
    <div id="page-wrapper" style="border-radius:5px 5px 0 0;">
  122.  
    <div id="tabContainer"></div>
  123.  
    </div>
  124.  
    </div>
  125.  
    <!--
  126.  
    <div th:text="${#authentication.name}">
  127.  
    The value of the "name" property of the authentication object should appear here.
  128.  
    </div>
  129.  
    这是一个登陆成功以后的首页
  130.  
    <div class="row">
  131.  
    <div class="col-md-12">
  132.  
    <table id="conversation" class="table table-striped">
  133.  
    <thead>
  134.  
    <tr>
  135.  
    <th>Greetings</th>
  136.  
    </tr>
  137.  
    </thead>
  138.  
    <tbody id="greetings">
  139.  
    </tbody>
  140.  
    </table>
  141.  
    </div>
  142.  
    </div>
  143.  
    -->
  144.  
    </body>
  145.  
    </html>

那么到此处我们已经完成了整个系统的基础架构的百分80的开发工作了，那么剩下的就是开发我们相应的功能模块。

本章代码的GitHub地址：https://github.com/185594-5-27/csdndemo/tree/master-base-tree

上一篇文章地址：基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【五】【编写基础代码快速生成工具】

下一篇文章地址：基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【七】【菜单维护模块】

基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】的更多相关文章

  1. IDEA SpringBoot+JPA+MySql+Redis+RabbitMQ 秒杀系统

    先放上github地址:spike-system,可以直接下载完整项目运行测试 SpringBoot+JPA+MySql+Redis+RabbitMQ 秒杀系统 技术栈:SpringBoot, MyS ...

  2. 基于.net core 2.0+mysql+AceAdmin搭建一套快速开发框架

    前言 .net core已经出来一段时间了,相信大家对.net core的概念已经很清楚了,这里就不再赘述.笔者目前也用.net core做过一些项目,并且将以前framework下的一些经验移植到了 ...

  3. 基于 Express + MySQL + Redis 搭建多用户博客系统

    1. 项目地址 https://github.com/caochangkui/node-express-koa2-project/tree/master/blog-express 2. 项目实现 Ex ...

  4. springboot+jpa+mysql+redis+swagger整合步骤

    springboot+jpa+MySQL+swagger框架搭建好之上再整合redis: 在电脑上先安装redis: 一.在pom.xml中引入redis 二.在application.yml里配置r ...

  5. 从 0 使用 SpringBoot MyBatis MySQL Redis Elasticsearch打造企业级 RESTful API 项目实战

    大家好!这是一门付费视频课程.新课优惠价 699 元,折合每小时 9 元左右,需要朋友的联系爱学啊客服 QQ:3469271680:我们每课程是明码标价的,因为如果售价为现在的 2 倍,然后打 5 折 ...

  6. 基于Docker的Mysql主从复制搭建

    来源:https://www.cnblogs.com/songwenjie/p/9371422.html?tdsourcetag=s_pctim_aiomsg   为什么基于Docker搭建? 资源有 ...

  7. 基于 Docker 的 MySQL 主从复制搭建

    出处:https://www.jianshu.com/p/ab20e835a73f

  8. 搭建一套完整的Mysql5.7innodbcluster(GroupReplication+mysqlrouter)

    先说三个大步骤: 搭Mysql5.7 Group Replication ,配置成单主模式 安装Mysqlshell,配innodbcluster 安装Mysql-router 第一步:搭Mysql5 ...

  9. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

随机推荐

  1. golang反射

    要点 1.变量 2.反射 3.结构体反射 4.反射总结以及应用场景 一.变量介绍 1.变量的内在机制 A.类型信息,这部分是元信息,是预定义好的 B.值类型,这部分是程序运行过程中,动态改变的 var ...

  2. json_encode 的局限 , 使用自定义的函数 .returnJson.

    $arr = array("liming", "tom", "green"); $arr2 = array( 1 => "l ...

  3. 四：客服端防护HTTP发送请求类

    一.源代码: public class swtDefendOperate{private BackgroundWorker backgroundWorker;//DefendType的值 Verify ...

  4. Java中栈的应用，括号匹配

    package edu.yuliang.Data_Structure_Basics; import org.omg.PortableInterceptor.SYSTEM_EXCEPTION; /* 给 ...

  5. js中Attribute和property的区别与联系

    相信大多数的初学者对js中的property和attribute的关系很容易搞混, Attribute大多用于DOM的操作中,比如ele.attributes指的是一个元素的特性集合,是一个nodel ...

  6. golang context

    ex1 package main import ( "fmt" ) // 最佳context 实践 // Context 目标是实现各个goroutine能及时终止退出. func ...

  7. 【转载】 “强化学习之父”萨顿：预测学习马上要火，AI将帮我们理解人类意识

    原文地址: https://yq.aliyun.com/articles/400366 本文来自AI新媒体量子位(QbitAI)     ------------------------------- ...

  8. python 9

    一.常识 在制作统计表时,要创建一个listname_list,来存放列明,这样以后进行列明删减的更新时,比较方便. 二.函数的初识 代码遇到def就跳过,把函数内容放到内存中,遇到函数名再来执行函数 ...

  9. 项目启动失败，异常代码（StandardEngine[Catalina].StandardHost[localhost].StandardContext[/credit]]） ，dataSource 也报错

    问题:tomcat 项目启动失败(有多个springboot项目)! 28-Apr-2019 12:01:12.162 严重 [localhost-startStop-1] org.apache.ca ...

  10. hello1实例的分析

    JSF简介一. 什么是 JSF:JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架.它提供了一种以组件为中心来开发 Java Web 用户界面的方法 ...