目錄
- 項目介紹和源碼；
- 拿來即用的bootstrap模板；
- 服務器SSH服務配置與python中paramiko的使用；
- 用戶登陸與session;
- 最簡單的實踐之修改服務器時間；
- 查看和修改服務器配置與數據庫的路由；
- 基於websocket的實時日志實現；
- 查看服務器中的日志與前端的datatable的利用；
- 重啟服務器某個進程；
前言
想要快速的搭建好一個網站，前端必然少不了，如果自己大費周折在怎么去從0到1創建一個前端工作量就會太大了，所以最簡單的方法是直接在網上尋找已經寫好的前端模板資源，這樣的資源可以直接百度/谷歌關鍵詞：bootstrap前端模板，搜索會出來很多的模板，選擇覺得合適的模板就可以拿來作為自己網站的前端了。
下載前端模板
文章中用到的模板叫做DASHGUM，點擊該鏈接可以去預覽下這個前端資源的樣子，現在，准備把該模板下載下來，我們要把它改造成適合自己需求的樣子。
模板資源下載OK，打開資源可以看到圖1中資源的內容，這些內容是可以縮減的，用到的時候取里面的組件就好，只要css、js、assets文件在，並且被正確引用，組件的邏輯響應和樣式都不需要我們自己過多的考慮。
創建項目
我的django版本是1.11.10，直接可以通過pip安裝（安裝過程中如果提示缺什么庫就補什么庫），python是2.7的版本。准備就緒，開始創建項目。在目錄下執行django-admin.py startproject WebTool，項目根目錄下django-admin.py startapp server創建一個app，然后在根目錄下創建一個templates文件夾用來存放前端資源，在templates文件夾下創建一個app專屬的資源文件夾命名為servermaterial，把DASHGUM中的內容放在該目錄下，最后的項目結構如圖2所示。
簡單顯示
修改settings
- INSTALLED_APPS增加server：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'server', ]- MIDDLEWARE注釋掉django.middleware.csrf.CsrfViewMiddleware。
- 添加資源的相關配置：
STATIC_URL = '/templates/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "templates"), )- TEMPLATES的'DIRS'字段增加templates：
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ['templates'], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]修改資源
我們想要顯示index.html,於是打開index.html，修改其所有的css和js資源的href，如圖3，圖片只給出了css資源路徑的修改，js資源同理修改，在其前面加上/templates/servermaterial/這個資源路徑：
修改項目的urls
這里，考慮到項目的urls自身會處理諸如登陸的邏輯，並且一個項目可能會有多個app的情況，我們把這個index.html給server這個app自己去處理，在WebTool下的urls.py中增加一個路由到server的urls中，代碼如下:
from django.conf.urls import include, url from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^server/', include('server.urls', namespace="server")), ]app的urls和views
- 增加urls文件
app（本文中的app即server）本身不含有urls文件，我們需要自己創建一個路由文件，用來在app內部路由，代碼如下。
from django.conf.urls import url import views urlpatterns = [ url(r'^$', views.homepage), url(r'^home', views.homepage), ]- 修改views文件
views文件收到urls的請求，將index.html渲染出來，代碼如下。
# -*- coding: utf-8 -*- from __future__ import unicode_literals from django.shortcuts import render_to_response # Create your views here. def homepage(request): return render_to_response('servermaterial/index.html')開啟項目，進入index.html
在項目下運行python manage.py runserver 8888，然后打開網站輸入網址：http://127.0.0.1:8888/server/home就可以顯示如圖4的網址了，其中的邏輯就不闡述了，網址中的server是我的app，home是app中的urls，它調用views中的渲染函數渲染這個頁面。
簡化資源
如圖5，打開原始的資源中的index.html文件可以看到文件會帶有一個頁腳、網頁左側的導航和網頁上方的導航菜單和網頁獨有的內容，事實上你打開所有的如圖1的原始資源中的html文件都會有重復的部分，而本網頁的單獨內容寫在圖3的紅色框之內，即id='main-content'中的內容，其實這樣不利於網頁的擴展性。所以我們需要把模板簡化，於是我們把網站頁面共用的css,js資源以及導航欄、頁腳作為base.html，並將它保存在servermaterial下面取代原來所有的html文件（其它的html共用部分已經抽離在base.html中了，可以刪除掉，后面每個頁面單獨用到的組件再在原來的眾多html文件代碼中找）。
修改時，我們要考慮網站貼近自己的需求，有哪些功能需要寫在導航欄（配置、時間、重啟、日志等）里面，具體網頁做的功能需要從base.html中抽離出來，寫在id="main-content"中，其他的網頁只需要繼承這個base.html就可以了，改造后的base.html代碼如下：
代碼中{% block title %}{{ title }}{% endblock %}、{% block log %}{{ title }}{% endblock %}給繼承base.html的網頁提供自己的標題。
代碼中{% block username %}{% endblock %}給繼承base.html的網頁提供登陸人的名字。
代碼中{% block othercss %}{% endblock %}給繼承base.html的網頁提供自己的CSS格式。
代碼中{% block mainbody %}{% endblock %}給繼承base.html的網頁提供自己的具體網頁內容。
代碼中{% block scripts %}{% endblock %}給繼承base.html的網頁提供自己的js文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>{% block title %}{% endblock %}</title> <link rel="shortcut icon" href="/templates/favicon.ico"> <!-- Bootstrap core CSS --> <link href="/templates/servermaterial/assets/css/bootstrap.css" rel="stylesheet"> <!--external css--> <link href="/templates/servermaterial/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> <!-- Custom styles for this template --> <link href="/templates/servermaterial/assets/css/style.css" rel="stylesheet"> <link href="/templates/servermaterial/assets/css/style-responsive.css" rel="stylesheet"> <link href="/templates/servermaterial/assets/SweetAlert2/dist/sweetalert2.css" rel="stylesheet"> {% block othercss %}{% endblock %} </head> <body> <section id="container" > <!-- ********************************************************************************************************************************************************** TOP BAR CONTENT & NOTIFICATIONS *********************************************************************************************************************************************************** --> <!--header start--> <header class="header black-bg"> <div class="sidebar-toggle-box"> <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div> </div> <!--logo start--> <a href="home.html" class="logo"><b>{% block log %}{% endblock %}</b></a> <!--logo end--> <div class="top-menu"> <ul class="nav pull-right top-menu"> <li><a class="logout" href="#">退出服務器</a></li> </ul> </div> </header> <!--header end--> <!-- ********************************************************************************************************************************************************** MAIN SIDEBAR MENU *********************************************************************************************************************************************************** --> <!--sidebar start--> <aside> <div id="sidebar" class="nav-collapse "> <!-- sidebar menu start--> <ul class="sidebar-menu" id="nav-accordion"> <p class="centered"><a href="home.html"><img src="/templates/servermaterial/assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p> <h5 class="centered">{% block username %}{% endblock %},你好</h5> <li class="sub-menu"> <a href="servertime.html" > <i class="fa fa-calendar"></i> <span>服務器時間</span> </a> </li> <li class="sub-menu"> <a href="javascript:;" > <i class="fa fa-desktop"></i> <span>服務器日志</span> </a> <ul