AdminLTE用django部署


前言

最近從網上看到AdminLTE這個web前端的主題挺好的,我平時用python就是寫一些后台,准備以后就用這個框架了,這里就是把這個用django初始化一下這個項目。

基礎環境介紹

Python 3.6.0
Django 1.11
AdminLTE lasted # git clone from github

環境准備

創建一個lte的django項目,不需要創建app,我們就做個index頁面能展示就行了,以后用哪部分改哪部分就行了。AdminLTE從github上下載最新的解壓到一個路徑就好了,然后把在django的項目中做如下操作

mkdir static
cd static
mkdir {css,js,plugins}

然后把bower_components,dist,plugins都放到plugins目錄里面,打開index.html,我們發現這里面引用了一個google的css文件,直接wget下來,然后放到static/css目錄下,命名為googleapis.css。在templates下面創建如下5個文件

mojideMacBook-Pro-2:templates hongzhi.wang$ tree -a
.
├── base.html
├── content-header.html
├── header.html
├── index.html
└── sidebar.html

把整個index.html都copy到base.html里面。

部署

具體操作如下:

{% load static %} base.html開頭
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css"> 
改成
<link rel="stylesheet" href="{% static 'plugins/bower_components/Ionicons/css/ionicons.min.css' %}">

<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
改成
<link rel="stylesheet" href="{% static 'plugins/dist/css/skins/_all-skins.min.css' %}">

其他的引用都如此做,我寫了一個python的正則,大家可以參考一下print(re.sub('([\w]+/[\w\.\-/]+)',r"{% static 'plugins/\1' %}",s)),我用這個替換了index.html,然后都放到base里面

接着根據index.html的結構拆分成5個html文件

views 編寫

lte/views.py 文件如下

from django.views.generic import TemplateView

class IndexView(TemplateView):
    template_name = 'index.html'

    def get(self, request, *args, **kwargs):
        return super(IndexView, self).get(request, *args, **kwargs)

urls 編寫

lte/urls.py 文件如下

from django.conf.urls import url
from django.contrib import admin
from .views import IndexView
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', IndexView.as_view(), name='index'),
]

運行結果

然后運行就能看到這個AdminLTE這個index的頁面了,如果我們想臨時看AdminLTE這個主題的效果可以在git clone下載的主目錄下面python -m SimpleHTTPServer 8000,然后就能通過8000端口訪問這個示例的主題了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM