[django项⽬]给⽹站添加后台管理系统
后台站点⾸页功能
本次我们来完成针对前端各个模块的管理, 也就是我们的后台管理站点
所谓后台, 其功能⽆⾮就是：增删改查, ⾸先我们需要完成⼀个⼤体的框架, 然后再慢慢填充各部分功能, 就如同我们对前台做得⼀样
I. 后台模板抽取
1>获取静态站点模板
本项⽬选择开源的后台模板AdminLTE,，直接下载zip压缩⽂件即可。
源⽂件⾮常⼤，⽤到了上百个插件，按需索取即可。
下载完成后你可以打开index.html这个⽂件来欣赏⼀下, ⼤概长这样:
[外链图⽚转存失败(img-cLFAB19N-1567158079336)(%E5%90%8E%E5%8F%B0%E5%BC%80%E5%8F%91.assets/
)]
⽬前这个前端页⾯, 对我们的项⽬来说太复杂了, 所以我们选⽤官⽅给⽤户提供的模板, 也就是⽂件夹中的starter.html, 打开来看:
去掉了⼀些花⾥胡哨的东西, 页⾯完全可以满⾜我们的需求, 甚⾄有些功能我们⽤不到, 这将在后⾯的模板抽取过程中选择性的剔除2>模板抽取
1. 模板⽂件
1. 创建templates/myadmin/⽂件夹
2. 将下载的⽂件夹中的starter.html页⾯复制到myadmin⽂件夹中
3. 改名为index.html, 然后删除模板中的⼀些不再我们计划内的功能, 如图:
当然你也可以留⼀些你喜欢的功能到之后完善
2. 静态⽂件
1. 创建static/css/fonts⽂件夹然后从下载⽂件拷贝以下⽂件到项⽬中:
(PS: 建议直接复制⽂件名进⾏搜索)
1. f
2. fontawesome-webfont.woff
3. fontawesome-webfont.woff2
2. 创建static/css/myadmin⽂件夹然后从下载⽂件拷贝
1. AdminLTE.min.css
2. bootstrap.min.css
3. font-awesome.min.css
4. ionicons.min.css
5. skin-blue.min.css
3. 创建static/js/myadmin⽂件夹然后从下载⽂件拷贝
1. adminlte.min.js
2. bootstrap.min.js
3. jquery.min.js
4. 创建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="oss.maxcdn/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="oss.maxcdn/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 -->
免费管理系统html模板<ul class="sidebar-menu"data-widget="tree">
{#        <li class="header">后台</li>#}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。