首先将已经封装好的bootstrap脚本引入到我们现有的工程,目录如下:

到此我们的bootstraop框架引入完成,那么基于bootstrap框架我们现在开始开发属于我们的第一个bootstrap页面登陆页,打开我们的templates文件在底下找到我们login.html页面,进行重新的编辑该页面代码如下:
登录页面 body { padding-top: 50px;}.starter-template { padding: 40px 15px; text-align: center;}<!--/ -->已成功注销
使用账号密码登录
重新加载并运行我们的程序我们会看到我们全新的页面效果如下所示:

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

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

在我们的工程中有一些我们经常用到的CSS或者js 我们并不想每个页面都进行一次引用,因此我们新建一个全局的引用到我们的工程(在templates底下新建一个文件夹include同时创建includebase.html文件)中如下:
通过以上的代码的快速生成、修改以及配置我们这才可以正式开发我们的登陆成功以后的首页,首页代码如下:
$(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("" + JSON.parse(greeting.body).content + " "); } $.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"); }); <!-- The value of the "name" property of the authentication object should appear here.这是一个登陆成功以后的首页 Greetings
-->
以上就是基于springboot+bootstrap+mysql+redis怎么搭建完整的权限架构的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/160840.html
微信扫一扫
支付宝扫一扫