後臺站點首頁功能
本次我們來完成針對前端各個模塊的管理, 也就是我們的後臺管理站點
所謂後臺, 其功能無非就是:增刪改查
, 首先我們需要完成一個大體的框架, 然後再慢慢填充各部分功能, 就如同我們對前臺做得一樣
I. 後臺模板抽取
1>獲取靜態站點模板
本項目選擇開源的後臺模板AdminLTE
,github地址,直接下載zip壓縮文件即可。
源文件非常大,用到了上百個插件,按需索取即可。
下載完成後你可以打開index.html
這個文件來欣賞一下, 大概長這樣:
[外鏈圖片轉存失敗(img-cLFAB19N-1567158079336)(%E5%90%8E%E5%8F%B0%E5%BC%80%E5%8F%91.assets/)]
目前這個前端頁面, 對我們的項目來說太複雜了, 所以我們選用官方給用戶提供的模板, 也就是文件夾中的starter.html
, 打開來看:
去掉了一些花裏胡哨的東西, 頁面完全可以滿足我們的需求, 甚至有些功能我們用不到, 這將在後面的模板抽取過程中選擇性的剔除
2>模板抽取
-
模板文件
-
創建
templates/myadmin/
文件夾 -
將下載的文件夾中的starter.html頁面複製到myadmin文件夾中
-
改名爲index.html, 然後刪除模板中的一些不再我們計劃內的功能, 如圖:
當然你也可以留一些你喜歡的功能到之後完善
-
-
靜態文件
-
創建
static/css/fonts
文件夾然後從下載文件拷貝以下文件到項目中:(PS: 建議直接複製文件名進行搜索)
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
-
創建
static/css/myadmin
文件夾然後從下載文件拷貝-
AdminLTE.min.css
-
bootstrap.min.css
-
font-awesome.min.css
-
ionicons.min.css
-
skin-blue.min.css
-
-
創建
static/js/myadmin
文件夾然後從下載文件拷貝- adminlte.min.js
- bootstrap.min.js
- jquery.min.js
-
創建
static/images/myadmin
文件夾, 將用戶圖像文件存放其中, 圖片在dist\img
, 你也可以使用自己喜歡的圖片
-
抽取後的後臺模板頁面代碼爲:
<!-- templates/myadmin/index.html -->
{% load static %}
<!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>HHXPython後臺</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 'css/myadmin/bootstrap.min.css' %}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'css/myadmin/font-awesome.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'css/myadmin/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect. -->
<link rel="stylesheet" href="{% static 'css/myadmin/skin-blue.min.css' %}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- 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]-->
</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">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="{% url 'news:index' %}" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>X</b>PY</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>HHX</b>Python</span>
<!-- 好好學python -->
</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>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- 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 'images/myadmin/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">Jax</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="{% static 'images/myadmin/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
<p>
Jax - Web開發工程師
<small>2019年7月入職</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">個人信息</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">退出登錄</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<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 'images/myadmin/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Jax</p>
</div>
</div>
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
{# <li class="header">後臺</li>#}
<!-- Optionally, you can add icons to the links -->
<li class="active"><a href="#" data-url="{% url 'myadmin:home' %}"><i class="fa fa-desktop"></i> <span>工作臺</span></a></li>
{# <li class="header">首頁</li>#}
<li class="treeview">
<a href="#"><i class="fa fa-newspaper-o"></i> <span>文章管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#" data-url="{% url 'myadmin:wait' %}">文章標籤管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">文章管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">熱門文章管理</a></li>
</ul>
</li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}"><i class="fa fa-picture-o"></i><span>輪播圖管理</span></a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}"><i class="fa fa-folder"></i><span>文檔管理</span></a></li>
<li class="treeview">
<a href="#"><i class="fa fa-book"></i> <span>在線課堂</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#" data-url="{% url 'myadmin:wait' %}">課程分類管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">課程管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">講師管理</a></li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-book"></i> <span>系統設置</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#" data-url="{% url 'myadmin:wait' %}">權限管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">用戶管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">分組管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">菜單管理</a></li>
<li><a href="#" data-url="{% url 'myadmin:wait' %}">個人詳情</a></li>
</ul>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id="content">
<!-- Content Header (Page header) -->
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
聰明源於勤奮,天才源於積累!
</div>
<!-- Default to the left -->
<strong>Copyright © 2019 <a href="#">Company</a>.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="{% static 'js/myadmin/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'js/myadmin/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'js/myadmin/adminlte.min.js' %}"></script>
<!-- message -->
<script src="{% static 'js/base/message.js' %}"></script>
<!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. -->
</body>
</html>
II. 後臺首頁面
1>接口設計
- 接口說明:
類目 | 說明 |
---|---|
請求方法 | GET |
url定義 | /admin/ |
參數格式 | 無參數 |
-
返回結果:
後臺首頁面
2>後端代碼
2.1>創建app
# 在虛擬機中,cd到apps目錄下,運行創建app的命令
python ../manage.py startapp myadmin
2.2>setting.py
# 在settings.py中的INSTALLED_APPS中註釋掉djangoadmin,添加創建好的myadmin
INSTALLED_APPS = [
# django自帶的app
# 'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 以下是自定義的app,分別對應一些頁面或功能
'news',
'users',
'doc',
'course',
'verification',
'haystack',
'myadmin', # <<<< 新增
]
2.3>視圖
# myadmin/views.py 中定義如下視圖
from django.shortcuts import render
from django.views import View
class IndexView(View):
"""
後臺首頁視圖
"""
def get(self, request):
return render(request, 'myadmin/index.html')
2.4>路由
# myadmin中創建urls.py, 然後定義如下路由
from django.urls import path
from . import views
app_name = 'myadmin'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
]
# 主路由urls.py中, 新增一行
path('admin/', include('myadmin.urls')),
完成這些之後可以打開頁面看一下, 你應該會看到對應的功能模塊, 已經按照我們的設計來顯示
III. 首頁菜單渲染功能開發
前面我們後臺界面上的數據是在前端的, 這次我們將其挪到後端, 用渲染的方式進行顯示
別急, 一步步來
1>分析菜單數據
根據頁面風格,設計菜單數據
menus = [
{
"name": "工作臺",
"url": "myadmin:home",
"icon": "fa-desktop"
},
{
"name": "新聞管理",
"icon": "fa-newspaper-o",
"children": [
{
"name": "新聞標籤管理",
"url": "myadmin:wait"
}, {
"name": "新聞管理",
"url": "myadmin:wait"
}, {
"name": "熱門新聞管理",
"url": "myadmin:wait"
}
]
},
{
"name": "輪播圖管理",
"icon": "fa-picture-o",
"url": "myadmin:home"
},
{
"name": "文檔管理",
"icon": "fa-folder",
"url": "myadmin:home"
},
{
"name": "在線課堂",
"icon": "fa-book",
"children": [
{
"name": "課程分類管理",
"url": "myadmin:wait"
},
{
"name": "課程管理",
"url": "myadmin:wait"
},
{
"name": "講師管理",
"url": "myadmin:wait"
}
]
},
{
"name": "系統設置",
"icon": "fa-cogs",
"children": [
{
"name": "權限管理",
"url": "myadmin:wait"
},
{
"name": "用戶管理",
"url": "myadmin:wait"
},
{
"name": "菜單管理",
"url": "myadmin:wait"
},
{
"name": "個人信息",
"url": "myadmin:wait"
}
]
}
]
2>後端代碼
2.1>視圖
視圖這裏我們先寫死代碼, 原因是後續我們需要引入權限功能, 即不同權限的用戶可以看到不同的菜單內容
# 修改myadmin/views.py中的IndexView視圖
class IndexView(View):
"""
後臺首頁視圖
"""
def get(self, request):
# 將我們設計的菜單數據粘貼到這
menus = [
{
"name": "工作臺",
"url": "myadmin:home",
"icon": "fa-desktop"
},
{
"name": "新聞管理",
"icon": "fa-newspaper-o",
"children": [
{
"name": "新聞標籤管理",
"url": "myadmin:wait"
}, {
"name": "新聞管理",
"url": "myadmin:wait"
}, {
"name": "熱門新聞管理",
"url": "myadmin:wait"
}
]
},
{
"name": "輪播圖管理",
"icon": "fa-picture-o",
"url": "myadmin:home"
},
{
"name": "文檔管理",
"icon": "fa-folder",
"url": "myadmin:home"
},
{
"name": "在線課堂",
"icon": "fa-book",
"children": [
{
"name": "課程分類管理",
"url": "myadmin:wait"
},
{
"name": "課程管理",
"url": "myadmin:wait"
},
{
"name": "講師管理",
"url": "myadmin:wait"
}
]
},
{
"name": "系統設置",
"icon": "fa-cogs",
"children": [
{
"name": "權限管理",
"url": "myadmin:wait"
},
{
"name": "用戶管理",
"url": "myadmin:wait"
},
{
"name": "菜單管理",
"url": "myadmin:wait"
},
{
"name": "個人信息",
"url": "myadmin:wait"
}
]
}
]
return render(request, 'myadmin/index.html', context={'menus': menus})
# 在 myadmin/views.py中添加下面兩個視圖
class HomeView(View):
"""
工作臺視圖
"""
def get(self, request):
return render(request, 'myadmin/home.html')
class WaitView(View):
"""
未上線功能提示
"""
def get(self, request):
return render(request, 'myadmin/wait.html')
2.2>路由
# 在myadmin/urls.py中添加如下路由:
path('home/', views.HomeView.as_view(), name='home'),
path('wait/', views.WaitView.as_view(), name='wait'),
3>前端代碼
3.1>html
<!-- 修改templates/myadmin/index.html 中側欄處代碼 -->
...
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
{% for menu in menus %}
{% if 'children' in menu %}
<li class="treeview">
<a href="#"><i class="fa {{ menu.icon }}"></i> <span>{{ menu.name }}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
{% for child in menu.children %}
<li><a href="#" data-url="{% url child.url %}">{{ child.name }}</a></li>
{% endfor %}
</ul>
</li>
{% else %}
<li ><a href="#" data-url="{% url menu.url %}"><i class="fa {{ menu.icon }}"></i> <span>{{ menu.name }}</span></a></li>
{% endif %}
{% endfor %}
{# <li class="header">後臺</li>#}
<!-- Optionally, you can add icons to the links -->
</ul>
<!-- /.sidebar-menu -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id="content">
<!-- 這裏是通過js生成的模板數據, 必須要帶id="content"纔會有效 -->
<!-- 所謂的模板數據也就是後面會提到的content_base.html -->
</div>
<!-- /.content-wrapper -->
...
<!-- 添加菜單控制js -->
<script src="{% static 'js/myadmin/menu.js' %}"></script>
在templates/myadmin/下創建content_base.html模板文件
<!-- templates\myadmin\content_base.html -->
<section class="content-header">
<h1>
{% block page_header %}
{% endblock %}
<small>{% block page_option %}{% endblock %}</small>
</h1>
</section>
<!-- Main content -->
<section class="content container-fluid">
{% block content %}
<!--------------------------
| Your Page Content Here |
-------------------------->
{% endblock %}
</section>
<!-- /.content -->
在templates/myadmin/下創建home.html模板文件
<!-- templates\myadmin\home.html -->
{% extends 'myadmin/content_base.html' %}
{% block page_header %}工作臺{% endblock %}
{% block content %}
通知:
所有人員工資翻倍!
{% endblock %}
在templates/myadmin/下創建wait.html模板文件
<!-- templates\myadmin\wait.html -->
{% extends 'myadmin/content_base.html' %}
{% block page_header %}敬請期待{% endblock %}
{% block content %}
<div class="callout callout-info">
<h4>Sorry</h4>
<p>功能正在緊急開發中,敬請期待!</p>
</div>
{% endblock %}
3.2>js
在static/js/myadmin/中創建menu.js
$(()=>{
let $sideBar = $('.sidebar-menu'); // 邊欄ul
let $bars = $('.sidebar-menu').find('li:not(.treeview)'); // 所有的菜單
// 當我們的菜單被點擊時, 會進入以下函數
$bars.click(function () {
$this = $(this); // this代表 當前的菜單
$bars.removeClass('active'); // 移出所有的active
$this.addClass('active'); // 給當前菜單添加active
if($this.parent()[0] === $sideBar[0]){
// 如果當前菜單是父菜單, 則展開其內容, 以下爲固定寫法
$sideBar.children('li.treeview.menu-open').children('ul').slideUp();
$sideBar.children('li.treeview.menu-open').removeClass('menu-open')
}
$('#content').load( // 渲染id爲content的html部分
$this.children('a:first').data('url'), // 通過路由的方式渲染頁面
(response, status, xhr)=>{
if(status !== 'success'){
message.showError('服務器超時,請重試!')
}
}
);
});
// 執行第一個菜單"工作臺", 讓其被選中
$bars[0].click();
});
到此時後臺界面的大體框架就完成了, 運行服務, 打開網站看一下:
後臺框架完成, 之後我們再一點點添加其中的功能, 預告下一次我們做的是菜單列表
項目源碼:https://gitee.com/hao4875/newssite