一、后台模板抽取
1.获取静态站点模板
本项目选择开源的后台模板AdminLTE,github地址,直接下载zip压缩文件即可。
源文件非常大，用到了上百个插件，按需索取即可。
2.模板抽取
创建templates/myadmin/文件夹，将下载的文件夹中的starter.html页面复制到myadmin文件夹中，改名为index.html,将不需要的组件删除。
创建static/js/myadmin，static/css/myadmin，static/css/fonts文件夹，将需要的js，css，fonts文件从下载文件中复制粘贴到响应文件夹
创建static/images/myadmin文件夹，将用户图像文件存放其中
抽取后的后台模板页面代码为：
{% load static %}
HHXPython后台
二、后台首页面
1.接口设计
- 接口说明：
| 类目 | 说明 |
|---|---|
| 请求方法 | GET |
| url定义 | /admin/ |
| 参数格式 | 无参数 |
-
返回结果：
后台首页面
2.后端代码
- 创建名为
myadmin的app
在虚拟机中，cd到apps目录下，运行创建app的命令
$ cd yourporjectrootdir/apps
yourporjectrootdir/apps $ python ../manage.py startapp myadmin
2 . 在settings.py中的INSTALLED_APPS中删除djangoadmin，添加创建好的myadmin
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')
4 . 路由 myadmin/urls.py 中定义如下路由
from django.urls import path
from . import views
app_name = 'myadmin'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
]
三、首页菜单渲染功能开发
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. 后端代码
- 视图 修改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 . 路由 在myadmin/urls.py中添加如下路由：
path('home/', views.HomeView.as_view(), name='home'),
path('wait/', views.WaitView.as_view(), name='wait'),
3. 前端代码
- html
...
...
在templates/myadmin/下创建content_base.html模板文件
{% block page_header %}
{% endblock %}
{% block page_option %}{% endblock %}
{% block content %}
{% endblock %}
在templates/myadmin/下创建home.html模板文件
{% extends 'myadmin/content_base.html' %}
{% block page_header %}工作台{% endblock %}
{% block content %}
通知：
所有人员涨薪100%！
{% endblock %}
在templates/myadmin/下创建wait.html模板文件
{% extends 'myadmin/content_base.html' %}
{% block page_header %}敬请期待{% endblock %}
{% block content %}
Sorry
功能正在紧急开发中，敬请期待！
{% endblock %}
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);
$bars.removeClass('active');
$this.addClass('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(
$this.children('a:first').data('url'),
(response, status, xhr)=>{
if(status !== 'success'){
message.showError('服务器超时，请重试！')
}
}
);
});
$bars[0].click();
});