Beego使用AdminLTE
2024-06-04 01:29:30
在GOPATH的src目录中创建一个Beego项目
bee new projectName
下载AdminLTE，并将文件复制至项目/static/目录中
下载地址：https://adminlte.io/
将AdminLTE文件夹下的文件复制到项目中的static文件夹中
在模板目录创建layouts文件夹，默认在/views/目录下
在layouts目录中创建下面四个文件
admin_template.html
header.html
sidebar.html
footer.html
复制下面内容到admin_template.html
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>AdminLTE Dashboard</title><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.css"><!-- Font Awesome --><link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.css"><!-- Ionicons --><link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.css"><!-- Theme style --><link rel="stylesheet" href="/static/dist/css/AdminLTE.css"><!-- AdminLTE Skins. We have chosen the skin-blue for this starterpage. However, you can choose any other skin. Make sure youapply the skin class to the body tag so the changes take effect. --><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css"><!-- Morris chart --><link rel="stylesheet" href="/static/bower_components/morris.js/morris.css"><!-- jvectormap --><link rel="stylesheet" href="/static/bower_components/jvectormap/jquery-jvectormap.css"><!-- Date Picker --><link rel="stylesheet" href="/static/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"><!-- Daterange picker --><link rel="stylesheet" href="/static/bower_components/bootstrap-daterangepicker/daterangepicker.css"><!-- bootstrap wysihtml5 - text editor --><link rel="stylesheet" href="/static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- Google Font --><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="wrapper"><!-- Main Header -->{{.HtmlHead}}<!-- Left side column. contains the logo and sidebar -->{{.HtmlSidebar}}<!-- Content Wrapper. Contains page content --><div class="content-wrapper"><!-- Content Header (Page header) --><section class="content-header"><h1>Page Header<small>Optional description</small></h1><ol class="breadcrumb"><li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li><li class="active">Here</li></ol></section><!-- Main content --><section class="content container-fluid"><!--------------------------| Your Page Content Here |-------------------------->{{.LayoutContent}}</section><!-- /.content --></div><!-- /.content-wrapper --><!-- Main Footer -->{{.HtmlFooter}}<!-- Control Sidebar --><aside class="control-sidebar control-sidebar-dark" style="display: none;"><!-- Create the tabs --><ul class="nav nav-tabs nav-justified control-sidebar-tabs"><li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li><li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li></ul><!-- Tab panes --><div class="tab-content"><!-- Home tab content --><div class="tab-pane" id="control-sidebar-home-tab"><h3 class="control-sidebar-heading">Recent Activity</h3><ul class="control-sidebar-menu"><li><a href="javascript:void(0)"><i class="menu-icon fa fa-birthday-cake bg-red"></i><div class="menu-info"><h4 class="control-sidebar-subheading">Langdon's Birthday</h4><p>Will be 23 on April 24th</p></div></a></li><li><a href="javascript:void(0)"><i class="menu-icon fa fa-user bg-yellow"></i><div class="menu-info"><h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4><p>New phone +1(800)555-1234</p></div></a></li><li><a href="javascript:void(0)"><i class="menu-icon fa fa-envelope-o bg-light-blue"></i><div class="menu-info"><h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4><p>nora@example.com</p></div></a></li><li><a href="javascript:void(0)"><i class="menu-icon fa fa-file-code-o bg-green"></i><div class="menu-info"><h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4><p>Execution time 5 seconds</p></div></a></li></ul><!-- /.control-sidebar-menu --><h3 class="control-sidebar-heading">Tasks Progress</h3><ul class="control-sidebar-menu"><li><a href="javascript:void(0)"><h4 class="control-sidebar-subheading">Custom Template Design<span class="label label-danger pull-right">70%</span></h4><div class="progress progress-xxs"><div class="progress-bar progress-bar-danger" style="width: 70%"></div></div></a></li><li><a href="javascript:void(0)"><h4 class="control-sidebar-subheading">Update Resume<span class="label label-success pull-right">95%</span></h4><div class="progress progress-xxs"><div class="progress-bar progress-bar-success" style="width: 95%"></div></div></a></li><li><a href="javascript:void(0)"><h4 class="control-sidebar-subheading">Laravel Integration<span class="label label-warning pull-right">50%</span></h4><div class="progress progress-xxs"><div class="progress-bar progress-bar-warning" style="width: 50%"></div></div></a></li><li><a href="javascript:void(0)"><h4 class="control-sidebar-subheading">Back End Framework<span class="label label-primary pull-right">68%</span></h4><div class="progress progress-xxs"><div class="progress-bar progress-bar-primary" style="width: 68%"></div></div></a></li></ul><!-- /.control-sidebar-menu --></div><!-- /.tab-pane --><!-- Stats tab content --><div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane --><!-- Settings tab content --><div class="tab-pane" id="control-sidebar-settings-tab"><form method="post"><h3 class="control-sidebar-heading">General Settings</h3><div class="form-group"><label class="control-sidebar-subheading">Report panel usage<input type="checkbox" class="pull-right" checked></label><p>Some information about this general settings option</p></div><!-- /.form-group --><div class="form-group"><label class="control-sidebar-subheading">Allow mail redirect<input type="checkbox" class="pull-right" checked></label><p>Other sets of options are available</p></div><!-- /.form-group --><div class="form-group"><label class="control-sidebar-subheading">Expose author name in posts<input type="checkbox" class="pull-right" checked></label><p>Allow the user to show his name in blog posts</p></div><!-- /.form-group --><h3 class="control-sidebar-heading">Chat Settings</h3><div class="form-group"><label class="control-sidebar-subheading">Show me as online<input type="checkbox" class="pull-right" checked></label></div><!-- /.form-group --><div class="form-group"><label class="control-sidebar-subheading">Turn off notifications<input type="checkbox" class="pull-right"></label></div><!-- /.form-group --><div class="form-group"><label class="control-sidebar-subheading">Delete chat history<a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a></label></div><!-- /.form-group --></form></div><!-- /.tab-pane --></div></aside><!-- /.control-sidebar --><!-- Add the sidebar's background. This div must be placedimmediately after the control sidebar --><div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/static/bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="/static/bower_components/raphael/raphael.min.js"></script>
<script src="/static/bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="/static/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/static/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/static/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/static/bower_components/moment/min/moment.min.js"></script>
<script src="/static/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/static/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="/static/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- Optionally, you can add Slimscroll and FastClick plugins.Both of these plugins are recommended to enhance theuser experience. -->
</body>
</html>
复制下面内容到header.html
<header class="main-header"><!-- Logo --><a href="javascript:void(0)" class="logo"><!-- mini logo for sidebar mini 50x50 pixels --><span class="logo-mini"><b>A</b>LT</span><!-- logo for regular state and mobile devices --><span class="logo-lg"><b>Admin</b>LTE</span></a><!-- Header Navbar --><nav class="navbar navbar-static-top" role="navigation"><!-- Sidebar toggle button--><a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span></a><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse pull-left" id="navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li><li class="divider"></li><li><a href="#">One more separated link</a></li></ul></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li><li class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --><!-- Navbar Right Menu --><div class="navbar-custom-menu"><ul class="nav navbar-nav"><!-- Messages: style can be found in dropdown.less--><li class="dropdown messages-menu"><!-- Menu toggle button --><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope-o"></i><span class="label label-success">4</span></a><ul class="dropdown-menu"><li class="header">You have 4 messages</li><li><!-- inner menu: contains the messages --><ul class="menu"><li><!-- start message --><a href="#"><div class="pull-left"><!-- User Image --><img src="/static/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"></div><!-- Message title and timestamp --><h4>Support Team<small><i class="fa fa-clock-o"></i> 5 mins</small></h4><!-- The message --><p>Why not buy a new awesome theme?</p></a></li><!-- end message --></ul><!-- /.menu --></li><li class="footer"><a href="#">See All Messages</a></li></ul></li><!-- /.messages-menu --><!-- Notifications Menu --><li class="dropdown notifications-menu"><!-- Menu toggle button --><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o"></i><span class="label label-warning">10</span></a><ul class="dropdown-menu"><li class="header">You have 10 notifications</li><li><!-- Inner Menu: contains the notifications --><ul class="menu"><li><!-- start notification --><a href="#"><i class="fa fa-users text-aqua"></i> 5 new members joined today</a></li><!-- end notification --></ul></li><li class="footer"><a href="#">View all</a></li></ul></li><!-- Tasks Menu --><li class="dropdown tasks-menu"><!-- Menu Toggle Button --><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-flag-o"></i><span class="label label-danger">9</span></a><ul class="dropdown-menu"><li class="header">You have 9 tasks</li><li><!-- Inner menu: contains the tasks --><ul class="menu"><li><!-- Task item --><a href="#"><!-- Task title and progress text --><h3>Design some buttons<small class="pull-right">20%</small></h3><!-- The progress bar --><div class="progress xs"><!-- Change the css width attribute to simulate progress --><div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">20% Complete</span></div></div></a></li><!-- end task item --></ul></li><li class="footer"><a href="#">View all tasks</a></li></ul></li><!-- User Account Menu --><li class="dropdown user user-menu"><!-- Menu Toggle Button --><a href="#" class="dropdown-toggle" data-toggle="dropdown"><!-- The user image in the navbar--><img src="/static/dist/img/user2-160x160.jpg" class="user-image" alt="User Image"><!-- hidden-xs hides the username on small devices so only the image appears. --><span class="hidden-xs">Alexander Pierce</span></a><ul class="dropdown-menu"><!-- The user image in the menu --><li class="user-header"><img src="/static/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"><p>Alexander Pierce - Web Developer<small>Member since Nov. 2012</small></p></li><!-- Menu Body --><li class="user-body"><div class="row"><div class="col-xs-4 text-center"><a href="#">Followers</a></div><div class="col-xs-4 text-center"><a href="#">Sales</a></div><div class="col-xs-4 text-center"><a href="#">Friends</a></div></div><!-- /.row --></li><!-- Menu Footer--><li class="user-footer"><div class="pull-left"><a href="#" class="btn btn-default btn-flat">Profile</a></div><div class="pull-right"><a href="#" class="btn btn-default btn-flat">Sign out</a></div></li></ul></li><!-- Control Sidebar Toggle Button --><li><a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a></li></ul></div></nav>
</header>
复制下面内容到sidebar.html
<aside class="main-sidebar"><!-- sidebar: style can be found in sidebar.less --><section class="sidebar"><!-- Sidebar user panel (optional) --><div class="user-panel"><div class="pull-left image"><img src="/static/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"></div><div class="pull-left info"><p>Alexander Pierce</p><!-- Status --><a href="#"><i class="fa fa-circle text-success"></i> Online</a></div></div><!-- search form (Optional) --><form action="#" method="get" class="sidebar-form"><div class="input-group"><input type="text" name="q" class="form-control" placeholder="Search..."><span class="input-group-btn"><button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button></span></div></form><!-- /.search form --><!-- Sidebar Menu --><ul class="sidebar-menu" data-widget="tree"><li class="header">HEADER</li><!-- Optionally, you can add icons to the links --><li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li><li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li><li class="treeview"><a href="#"><i class="fa fa-link"></i> <span>Multilevel</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a><ul class="treeview-menu"><li><a href="#">Link in level 2</a></li><li><a href="#">Link in level 2</a></li></ul></li></ul><!-- /.sidebar-menu --></section><!-- /.sidebar -->
</aside>
复制下面内容到footer.html
<footer class="main-footer"><!-- To the right --><div class="pull-right hidden-xs">Anything you want</div><!-- Default to the left --><strong>Copyright © 2016 <a href="#">Company</a>.</strong> All rights reserved.
</footer>
在模板目录创建adminlte文件夹，默认在/views/目录下
在adminlte目录中添加test.html文件
复制下面内容到test.html
<!-- Small boxes (Stat box) -->
<div class="row"><div class="col-lg-3 col-xs-6"><!-- small box --><div class="small-box bg-aqua"><div class="inner"><h3>150</h3><p>New Orders</p></div><div class="icon"><i class="ion ion-bag"></i></div><a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a></div></div><!-- ./col --><div class="col-lg-3 col-xs-6"><!-- small box --><div class="small-box bg-green"><div class="inner"><h3>53<sup style="font-size: 20px">%</sup></h3><p>Bounce Rate</p></div><div class="icon"><i class="ion ion-stats-bars"></i></div><a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a></div></div><!-- ./col --><div class="col-lg-3 col-xs-6"><!-- small box --><div class="small-box bg-yellow"><div class="inner"><h3>44</h3><p>User Registrations</p></div><div class="icon"><i class="ion ion-person-add"></i></div><a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a></div></div><!-- ./col --><div class="col-lg-3 col-xs-6"><!-- small box --><div class="small-box bg-red"><div class="inner"><h3>65</h3><p>Unique Visitors</p></div><div class="icon"><i class="ion ion-pie-graph"></i></div><a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a></div></div><!-- ./col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row"><!-- Left col --><section class="col-lg-7 connectedSortable"><!-- Custom tabs (Charts with tabs)--><div class="nav-tabs-custom"><!-- Tabs within a box --><ul class="nav nav-tabs pull-right"><li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li><li><a href="#sales-chart" data-toggle="tab">Donut</a></li><li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li></ul><div class="tab-content no-padding"><!-- Morris chart - Sales --><div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div><div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div></div></div><!-- /.nav-tabs-custom --><!-- Chat box --><div class="box box-success"><div class="box-header"><i class="fa fa-comments-o"></i><h3 class="box-title">Chat</h3><div class="box-tools pull-right" data-toggle="tooltip" title="Status"><div class="btn-group" data-toggle="btn-toggle"><button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i></button><button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button></div></div></div><div class="box-body chat" id="chat-box"><!-- chat item --><div class="item"><img src="/static/dist/img/user4-128x128.jpg" alt="user image" class="online"><p class="message"><a href="#" class="name"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>Mike Doe</a>I would like to meet you to discuss the latest news aboutthe arrival of the new theme. They say it is going to be one thebest themes on the market</p><div class="attachment"><h4>Attachments:</h4><p class="filename">Theme-thumbnail-image.jpg</p><div class="pull-right"><button type="button" class="btn btn-primary btn-sm btn-flat">Open</button></div></div><!-- /.attachment --></div><!-- /.item --><!-- chat item --><div class="item"><img src="/static/dist/img/user3-128x128.jpg" alt="user image" class="offline"><p class="message"><a href="#" class="name"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>Alexander Pierce</a>I would like to meet you to discuss the latest news aboutthe arrival of the new theme. They say it is going to be one thebest themes on the market</p></div><!-- /.item --><!-- chat item --><div class="item"><img src="/static/dist/img/user2-160x160.jpg" alt="user image" class="offline"><p class="message"><a href="#" class="name"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>Susan Doe</a>I would like to meet you to discuss the latest news aboutthe arrival of the new theme. They say it is going to be one thebest themes on the market</p></div><!-- /.item --></div><!-- /.chat --><div class="box-footer"><div class="input-group"><input class="form-control" placeholder="Type message..."><div class="input-group-btn"><button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button></div></div></div></div><!-- /.box (chat box) --><!-- TO DO List --><div class="box box-primary"><div class="box-header"><i class="ion ion-clipboard"></i><h3 class="box-title">To Do List</h3><div class="box-tools pull-right"><ul class="pagination pagination-sm inline"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">»</a></li></ul></div></div><!-- /.box-header --><div class="box-body"><!-- See dist/js/pages/dashboard.js to activate the todoList plugin --><ul class="todo-list"><li><!-- drag handle --><span class="handle"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></span><!-- checkbox --><input type="checkbox" value=""><!-- todo text --><span class="text">Design a nice theme</span><!-- Emphasis label --><small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small><!-- General tools such as edit or delete--><div class="tools"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i></div></li><li><span class="handle"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></span><input type="checkbox" value=""><span class="text">Make the theme responsive</span><small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small><div class="tools"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i></div></li><li><span class="handle"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></span><input type="checkbox" value=""><span class="text">Let theme shine like a star</span><small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small><div class="tools"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i></div></li><li><span class="handle"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></span><input type="checkbox" value=""><span class="text">Let theme shine like a star</span><small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small><div class="tools"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i></div></li><li><span class="handle"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></span><input type="checkbox" value=""><span class="text">Check your messages and notifications</span><small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small><div class="tools"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i></div></li><li><span class="handle"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></span><input type="checkbox" value=""><span class="text">Let theme shine like a star</span><small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small><div class="tools"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i></div></li></ul></div><!-- /.box-body --><div class="box-footer clearfix no-border"><button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button></div></div><!-- /.box --><!-- quick email widget --><div class="box box-info"><div class="box-header"><i class="fa fa-envelope"></i><h3 class="box-title">Quick Email</h3><!-- tools box --><div class="pull-right box-tools"><button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"title="Remove"><i class="fa fa-times"></i></button></div><!-- /. tools --></div><div class="box-body"><form action="#" method="post"><div class="form-group"><input type="email" class="form-control" name="emailto" placeholder="Email to:"></div><div class="form-group"><input type="text" class="form-control" name="subject" placeholder="Subject"></div><div><textarea class="textarea" placeholder="Message"style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea></div></form></div><div class="box-footer clearfix"><button type="button" class="pull-right btn btn-default" id="sendEmail">Send<i class="fa fa-arrow-circle-right"></i></button></div></div></section><!-- /.Left col --><!-- right col (We are only adding the ID to make the widgets sortable)--><section class="col-lg-5 connectedSortable"><!-- Map box --><div class="box box-solid bg-light-blue-gradient"><div class="box-header"><!-- tools box --><div class="pull-right box-tools"><button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"title="Date range"><i class="fa fa-calendar"></i></button><button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button></div><!-- /. tools --><i class="fa fa-map-marker"></i><h3 class="box-title">Visitors</h3></div><div class="box-body"><div id="world-map" style="height: 250px; width: 100%;"></div></div><!-- /.box-body--><div class="box-footer no-border"><div class="row"><div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4"><div id="sparkline-1"></div><div class="knob-label">Visitors</div></div><!-- ./col --><div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4"><div id="sparkline-2"></div><div class="knob-label">Online</div></div><!-- ./col --><div class="col-xs-4 text-center"><div id="sparkline-3"></div><div class="knob-label">Exists</div></div><!-- ./col --></div><!-- /.row --></div></div><!-- /.box --><!-- solid sales graph --><div class="box box-solid bg-teal-gradient"><div class="box-header"><i class="fa fa-th"></i><h3 class="box-title">Sales Graph</h3><div class="box-tools pull-right"><button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button><button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i></button></div></div><div class="box-body border-radius-none"><div class="chart" id="line-chart" style="height: 250px;"></div></div><!-- /.box-body --><div class="box-footer no-border"><div class="row"><div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4"><input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"data-fgColor="#39CCCC"><div class="knob-label">Mail-Orders</div></div><!-- ./col --><div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4"><input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"data-fgColor="#39CCCC"><div class="knob-label">Online</div></div><!-- ./col --><div class="col-xs-4 text-center"><input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"data-fgColor="#39CCCC"><div class="knob-label">In-Store</div></div><!-- ./col --></div><!-- /.row --></div><!-- /.box-footer --></div><!-- /.box --><!-- Calendar --><div class="box box-solid bg-green-gradient"><div class="box-header"><i class="fa fa-calendar"></i><h3 class="box-title">Calendar</h3><!-- tools box --><div class="pull-right box-tools"><!-- button with a dropdown --><div class="btn-group"><button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></button><ul class="dropdown-menu pull-right" role="menu"><li><a href="#">Add new event</a></li><li><a href="#">Clear events</a></li><li class="divider"></li><li><a href="#">View calendar</a></li></ul></div><button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button><button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i></button></div><!-- /. tools --></div><!-- /.box-header --><div class="box-body no-padding"><!--The calendar --><div id="calendar" style="width: 100%"></div></div><!-- /.box-body --><div class="box-footer text-black"><div class="row"><div class="col-sm-6"><!-- Progress bars --><div class="clearfix"><span class="pull-left">Task #1</span><small class="pull-right">90%</small></div><div class="progress xs"><div class="progress-bar progress-bar-green" style="width: 90%;"></div></div><div class="clearfix"><span class="pull-left">Task #2</span><small class="pull-right">70%</small></div><div class="progress xs"><div class="progress-bar progress-bar-green" style="width: 70%;"></div></div></div><!-- /.col --><div class="col-sm-6"><div class="clearfix"><span class="pull-left">Task #3</span><small class="pull-right">60%</small></div><div class="progress xs"><div class="progress-bar progress-bar-green" style="width: 60%;"></div></div><div class="clearfix"><span class="pull-left">Task #4</span><small class="pull-right">40%</small></div><div class="progress xs"><div class="progress-bar progress-bar-green" style="width: 40%;"></div></div></div><!-- /.col --></div><!-- /.row --></div></div><!-- /.box --></section><!-- right col -->
</div>
<!-- /.row (main row) -->
在controllers/default.go文件中添加
type AdminLTETestController struct {beego.Controller
}
func (c *AdminLTETestController) Get() {c.Layout = "layouts/admin_template.html"c.LayoutSections = make(map[string]string)c.LayoutSections["HtmlHead"] = "layouts/header.html"c.LayoutSections["HtmlSidebar"] = "layouts/sidebar.html"c.LayoutSections["HtmlFooter"] = "layouts/footer.html"c.TplName = "adminlte/test.html"
}
在routes/router.go文件中添加
beego.Router("/adminlte/test", &controllers.AdminLTETestController{})
打开终端进入项目目录执行
bee run
打开浏览器输入网址
127.0.0.1:8080/adminlte/test
效果如下
Beego使用AdminLTE相关推荐
- go系列（5）- beego自己写controller
前边的系列文章已经讲述了如何安装环境, beego的处理逻辑都是在Controller里面完成的,下面就写一个最简单的Controller. 我们在写自己的controller的时候,一定要继承bee ...
- AdminLTE的使用
官方文档link1.AdminLTE的必要配置文件<!-- Tell the browser to be responsive to screen width --> <meta c ...
- php写网页6,基于ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码，ThinkPHP6开发的后台权限管理系统...
源码介绍 基于最新ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码,基于最新版本的ThinkPHP 6.0.0RC3框架,后台前端框架采用AdminLTE.系统的核心理 ...
- 和lock一起学beego 博客系统开发为例(六)
为什么80%的码农都做不了架构师?>>> 接着上篇来写<和lock一起学beego 博客系统开发为例(五)> 这篇主要完成以下事项: 下篇我们要完成下面三个任务: ...
- 和lock一起学beego 博客系统开发为例(五)
为什么80%的码农都做不了架构师?>>> 接着上篇来写<和lock一起学beego 博客系统开发为例(四)> 这篇主要完成以下事项: 下篇我们要完成下面三个任务: ...
- beego学习笔记（4）：开发文档阅读（3）
通过运行 bee new quickstart 来创建新的项目,其结构如下: quickstart |-- conf | `-- app.conf |-- controllers | `-- defa ...
- beego api mysql_beego搭建api服务
beego介绍 beego是一个Golang实现的开源Go应用开发框架,他可以用来快速开发 API.Web 及后端服务等各种应用,是一个 RESTful的框架,主要设计灵感来源于tornado.sin ...
- Beego的controller怎么用嵌入实现继承问题
Go Lang是无继承层次的轻量级面向对象编程范式.Go Lang中的接口与实现之间完全是非侵入式的.这种接口实现方式很值得称赞.不但如此,在Go Lang中只有类型嵌入而没有类型继承.这规避了很多与 ...
- beego mysql session_关于go中beego/session的小总结
下面是我在使用的连接方式 (还有一个报错的地方是因为我只引入了session包,没有引入session/mysql),这些引入细节在session/mysql里面都有介绍,所以看文档的时候要注意读这些 ...
- beego + nginx 实现反向代理统一认证
2019独角兽企业重金招聘Python工程师标准>>> 前言 上回在 用 Nginx 的 auth_request 模块集成 LDAP 认证 里介绍了如何用 Nginx 的 auth ...
最新文章
- 网站商务通如何导出查看历史聊天纪录
- wxWidgets：wxToggleButton类用法
- 如何用 Linq 进行多重 Orderby ?
- Android中的Touch事件处理流程
- 嵌入式linux调试技术
- Linux笔记-centos7源码安装Mysql5.6（图解详细）
- python写入mysql数据库_python调用http接口,数据写入mysql数据库并下载录音文件
- 卸载sqlserver
- wxpython pyqt_python gui 中三大框架tkinter ,wxpython, pyqt如何选择
- C++ #include iostream #include iostream.h #include string.h区别及作用
- [转载] 【Java核心技术卷】关于除以0的计算
- 解压出来的文件md5会改变吗_监控Linux文件变化，防止系统被黑
- vue进入页面加载数据缓慢实现loading提示
- 用gambit学博弈论--完全信息动态博弈（一）
- Python处理僵尸进程
- linux 设备类型misc,linux驱动开发之misc类设备介绍
- 数字电路实验 01 - | TTL门电路的逻辑功能测试
- STM32的Flash地址空间的数据读取
- office2016的word打开程序之后显示需要修复问题解决解决
- C语言 小明的调查作业