Django中使用後臺網站模板
阿新 • • 發佈：2018-12-12
背景：
一直想自己開發一個網站，但是前端知識又不多，好在有模板可以使用，下載地址：https://download.csdn.net/download/wjgccsdn/10843808
開幹：
環境：
win 10
python 2.7
Django 1.11
pycharm 專業版
一、建立Django工程：
1.1 按照如下建立Django工程
1.2 建立後單擊Edit Configurations
開啟後輸入如下，然後單擊三角箭頭，啟動服務
1.3 訪問一下127.0.0.1:8000
二、建立應用
2.1 在工作目錄下，E:\AutoTestSite，執行 python manage.py startapp showcase
2.2 建立應用後要在setting中註冊該應用
三、 靜態檔案設定
3.1 在專案根目錄下（與manage.py同級）下建立static路徑，將下載的後臺模板檔案引用的靜態檔案放進去
3.2 開啟專案的settings檔案，在最下面新增這麼一行配置，用於指定靜態檔案的搜尋目錄：
STATICFILES_DIRS = [ os.path.join(BASE_DIR,"static"), ]
3.3 在showcase目錄下新建模板資料夾：templates,再在templates資料夾內建立showcase資料夾，該資料夾中存放html模板檔案,最後結構如下
四、 編寫base.html檔案
這是網站的基礎模板檔案
{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="renderer" content="webkit"> {% block title %} <title>H+ 後臺主題UI框架 - 主頁</title> {% endblock %} <meta name="keywords" content="H+後臺主題,後臺bootstrap框架,會員中心主題,後臺HTML,響應式後臺"> <meta name="description" content="H+是一個完全響應式，基於Bootstrap3最新版本開發的扁平化主題，她採用了主流的左右兩欄式佈局，使用了Html5+CSS3等現代技術"> <!--[if lt IE 9]> <meta http-equiv="refresh" content="0;ie.html" /> <![endif]--> <link rel="shortcut icon" href="{% static 'favicon.ico' %}"> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet"> <link href="{% static 'css/animate.css' %}" rel="stylesheet"> <link href="{% static 'css/style.css' %}" rel="stylesheet"> </head> <body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden"> <div id="wrapper"> <!--左側導航開始--> <nav class="navbar-default navbar-static-side" role="navigation"> <div class="nav-close"><i class="fa fa-times-circle"></i> </div> <div class="sidebar-collapse"> <ul class="nav" id="side-menu"> <li class="nav-header"> <div class="dropdown profile-element"> <span><img alt="image" class="img-circle" src="{% static 'img/profile_small.jpg'%}" /></span> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <span class="clear"> <span class="block m-t-xs"><strong class="font-bold">Beaut-zihan</strong></span> <span class="text-muted text-xs block">超級管理員<b class="caret"></b></span> </span> </a> <ul class="dropdown-menu animated fadeInRight m-t-xs"> <li><a class="J_menuItem" href="form_avatar.html">修改頭像</a> </li> <li><a class="J_menuItem" href="profile.html">個人資料</a> </li> <li><a class="J_menuItem" href="contacts.html">聯絡我們</a> </li> <li><a class="J_menuItem" href="mailbox.html">信箱</a> </li> <li class="divider"></li> <li><a href="login.html">安全退出</a> </li> </ul> </div> <div class="logo-element">H+ </div> </li> <li> <a href="#"> <i class="fa fa-home"></i> <span class="nav-label">主頁</span> <span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li> <a class="J_menuItem" href="index_v1.html" data-index="0">主頁示例一</a> </li> <li> <a class="J_menuItem" href="index_v2.html">主頁示例二</a> </li> <li> <a class="J_menuItem" href="index_v3.html">主頁示例三</a> </li> <li> <a class="J_menuItem" href="index_v4.html">主頁示例四</a> </li> <li> <a href="index_v5.html" target="_blank">主頁示例五</a> </li> </ul> </li> <li> <a class="J_menuItem" href="/layouts"><i class="fa fa-columns"></i> <span class="nav-label">佈局</span></a> </li> <li> <a href="#"> <i class="fa fa fa-bar-chart-o"></i> <span class="nav-label">統計圖表</span> <span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li> <a class="J_menuItem" href="graph_echarts.html">百度ECharts</a> </li> <li> <a class="J_menuItem" href="graph_flot.html">Flot</a> </li> <li> <a class="J_menuItem" href="graph_morris.html">Morris.js</a> </li> <li> <a class="J_menuItem" href="graph_rickshaw.html">Rickshaw</a> </li> <li> <a class="J_menuItem" href="graph_peity.html">Peity</a> </li> <li> <a class="J_menuItem" href="graph_sparkline.html">Sparkline</a> </li> <li> <a class="J_menuItem" href="graph_metrics.html">圖表組合</a> </li> </ul> </li> <li> <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">信箱 </span><span class="label label-warning pull-right">16</span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="mailbox.html">收件箱</a> </li> <li><a class="J_menuItem" href="mail_detail.html">檢視郵件</a> </li> <li><a class="J_menuItem" href="mail_compose.html">寫信</a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">表單</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="form_basic.html">基本表單</a> </li> <li><a class="J_menuItem" href="form_validate.html">表單驗證</a> </li> <li><a class="J_menuItem" href="form_advanced.html">高階外掛</a> </li> <li><a class="J_menuItem" href="form_wizard.html">表單嚮導</a> </li> <li> <a href="#">檔案上傳 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="form_webuploader.html">百度WebUploader</a> </li> <li><a class="J_menuItem" href="form_file_upload.html">DropzoneJS</a> </li> <li><a class="J_menuItem" href="form_avatar.html">頭像裁剪上傳</a> </li> </ul> </li> <li> <a href="#">編輯器 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="form_editors.html">富文字編輯器</a> </li> <li><a class="J_menuItem" href="form_simditor.html">simditor</a> </li> <li><a class="J_menuItem" href="form_markdown.html">MarkDown編輯器</a> </li> <li><a class="J_menuItem" href="code_editor.html">程式碼編輯器</a> </li> </ul> </li> <li><a class="J_menuItem" href="suggest.html">搜尋自動補全</a> </li> <li><a class="J_menuItem" href="layerdate.html">日期選擇器layerDate</a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">頁面</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="contacts.html">聯絡人</a> </li> <li><a class="J_menuItem" href="profile.html">個人資料</a> </li> <li> <a href="#">專案管理 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="projects.html">專案</a> </li> <li><a class="J_menuItem" href="project_detail.html">專案詳情</a> </li> </ul> </li> <li><a class="J_menuItem" href="teams_board.html">團隊管理</a> </li> <li><a class="J_menuItem" href="social_feed.html">資訊流</a> </li> <li><a class="J_menuItem" href="clients.html">客戶管理</a> </li> <li><a class="J_menuItem" href="file_manager.html">檔案管理器</a> </li> <li><a class="J_menuItem" href="calendar.html">日曆</a> </li> <li> <a href="#">部落格 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="blog.html">文章列表</a> </li> <li><a class="J_menuItem" href="article.html">文章詳情</a> </li> </ul> </li> <li><a class="J_menuItem" href="faq.html">FAQ</a> </li> <li> <a href="#">時間軸 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="timeline.html">時間軸</a> </li> <li><a class="J_menuItem" href="timeline_v2.html">時間軸v2</a> </li> </ul> </li> <li><a class="J_menuItem" href="pin_board.html">標籤牆</a> </li> <li> <a href="#">單據 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="invoice.html">單據</a> </li> <li><a class="J_menuItem" href="invoice_print.html">單據列印</a> </li> </ul> </li> <li><a class="J_menuItem" href="search_results.html">搜尋結果</a> </li> <li><a class="J_menuItem" href="forum_main.html">論壇</a> </li> <li> <a href="#">即時通訊 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="chat_view.html">聊天視窗</a> </li> <li><a class="J_menuItem" href="webim.html">layIM</a> </li> </ul> </li> <li> <a href="#">登入註冊相關 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a href="login.html" target="_blank">登入頁面</a> </li> <li><a href="login_v2.html" target="_blank">登入頁面v2</a> </li> <li><a href="register.html" target="_blank">註冊頁面</a> </li> <li><a href="lockscreen.html" target="_blank">登入超時</a> </li> </ul> </li> <li><a class="J_menuItem" href="404.html">404頁面</a> </li> <li><a class="J_menuItem" href="500.html">500頁面</a> </li> <li><a class="J_menuItem" href="empty_page.html">空白頁</a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-flask"></i> <span class="nav-label">UI元素</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="typography.html">排版</a> </li> <li> <a href="#">字型圖示 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li> <a class="J_menuItem" href="fontawesome.html">Font Awesome</a> </li> <li> <a class="J_menuItem" href="glyphicons.html">Glyphicon</a> </li> <li> <a class="J_menuItem" href="iconfont.html">阿里巴巴向量圖示庫</a> </li> </ul> </li> <li> <a href="#">拖動排序 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="draggable_panels.html">拖動面板</a> </li> <li><a class="J_menuItem" href="agile_board.html">任務清單</a> </li> </ul> </li> <li><a class="J_menuItem" href="buttons.html">按鈕</a> </li> <li><a class="J_menuItem" href="tabs_panels.html">選項卡 & 面板</a> </li> <li><a class="J_menuItem" href="notifications.html">通知 & 提示</a> </li> <li><a class="J_menuItem" href="badges_labels.html">徽章，標籤，進度條</a> </li> <li> <a class="J_menuItem" href="grid_options.html">柵格</a> </li> <li><a class="J_menuItem" href="plyr.html">視訊、音訊</a> </li> <li> <a href="#">彈框外掛 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="layer.html">Web彈層元件layer</a> </li> <li><a class="J_menuItem" href="modal_window.html">模態視窗</a> </li> <li><a class="J_menuItem" href="sweetalert.html">SweetAlert</a> </li> </ul> </li> <li> <a href="#">樹形檢視 <span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a class="J_menuItem" href="jstree.html">jsTree</a> </li> <li><a class="J_menuItem" href="tree_view.html">Bootstrap Tree View</a> </li> <li><a class="J_menuItem" href="nestable_list.html">nestable</a> </li> </ul> </li> <li><a class="J_menuItem" href="toastr_notifications.html">Toastr通知</a> </li> <li><a class="J_menuItem" href="diff.html">文字對比</a> </li> <li><a class="J_menuItem" href="spinners.html">載入動畫</a> </li> <li><a class="J_menuItem" href="widgets.html">小部件</a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-table"></i> <span class="nav-label">表格</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="table_basic.html">基本表格</a> </li> <li><a class="J_menuItem" href="table_data_tables.html">DataTables</a> </li> <li><a class="J_menuItem" href="table_jqgrid.html">jqGrid</a> </li> <li><a class="J_menuItem" href="table_foo_table.html">Foo Tables</a> </li> <li><a class="J_menuItem" href="table_bootstrap.html">Bootstrap Table <span class="label label-danger pull-right">推薦</span></a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-picture-o"></i> <span class="nav-label">相簿</span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="basic_gallery.html">基本相簿</a> </li> <li><a class="J_menuItem" href="carousel.html">圖片切換</a> </li> <li><a class="J_menuItem" href="blueimp.html">Blueimp相簿</a> </li> </ul> </li> <li> <a class="J_menuItem" href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS動畫</span></a> </li> <li> <a href="#"><i class="fa fa-cutlery"></i> <span class="nav-label">工具 </span><span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a class="J_menuItem" href="/form_builder">表單構建器</a> </li> </ul> </li> </ul> </div> </nav> <!--左側導航結束--> <!--右側部分開始--> <div id="page-wrapper" class="gray-bg dashbard-1"> <div class="row border-bottom"> <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a> <form role="search" class="navbar-form-custom" method="post" action="search_results.html"> <div class="form-group"> <input type="text" placeholder="請輸入您需要查詢的內容 …" class="form-control" name="top-search" id="top-search"> </div> </form> </div> <ul class="nav navbar-top-links navbar-right"> <li class="dropdown"> <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i> <span class="label label-warning">16</span> </a> <ul class="dropdown-menu dropdown-messages"> <li class="m-t-xs"> <div class="dropdown-messages-box"> <a href="profile.html" class="pull-left"> <img alt="image" class="i