Django运维后台的搭建之四:用bootstrap模板让运维前台变得更漂亮

我对于PHP和ajax是属于二把刀的水平,所以做网页前端肯定是比上天还难,但是我又想把网页做的漂亮可爱,怎么办呢?我就只好去download别人的模板,在这里我使用了bootstrap框架做的模板。

各位可以去https://wrapbootstrap.com  ,里面有很多漂亮的模板提供下载,当然是付费下载。我在这片文章里使用的是https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR  这个。

首先把这个ace.zip上传到服务器里,然后解压缩,看到里面有这些东西:

第一篇文章里我曾经说我的django文件的目录就是/django,而建立的project叫DahuaCloud,那么我现在就去/django/DahuaCloud里去#mkdir static,用这个static文件夹去存放一些静态的文件,比如js,css等等。

把刚刚解压缩的这个ace文件夹里的assets文件夹全部放到static这个文件里,然后把blank.html文件改名成index.html,改完后把它cp到/django/DahuaCloud/Online/templates这个文件夹里。

以上都是准备工作,剩下的才是真正的改动。

#vim /django/DahuaCloud/DahuaCloud/url.py,在原有基础上追加这样一句话:

    url(r‘^index/‘,Online.views.index,name=‘index‘),

然后#vim /django/DahuaCloud/DahuaCloud/setting.py,在文章的末尾把static的目录添加上:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/

STATIC_URL = ‘/static/‘
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, ‘static‘),
)

还要 #vim /django/DahuaCloud/Online/views.py,把下面的内容添加进去,目的是添加一个对应的视图:

#显示首页
def index(request):
    context = {}
    return render(request,‘index.html‘,context)

然后 #vim /django/DahuaCloud/Online/templates/index.html,这个文件就是刚刚改名的那个blank.html。添加一句{% load staticfiles %},这样就是与setting.py里面的STATICFILES_DIRS产生了连接:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8" />
                <title>欢迎登陆陈男神的运维平台!</title>
                <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
                <meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <!-- basic styles -->
                <link href="{%static ‘assets/css/bootstrap.min.css‘%}" rel="stylesheet" />
                <link rel="stylesheet" href="{%static ‘assets/css/font-awesome.min.css‘%}" />
                <!--[if IE 7]>
                  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
                <![endif]-->
                <!-- page specific plugin styles -->
                <!-- fonts -->
                <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
                <!-- ace styles -->
                <link rel="stylesheet" href="{%static ‘assets/css/ace.min.css‘%}" />
                <link rel="stylesheet" href="{%static ‘assets/css/ace-rtl.min.css‘%}" />
                <link rel="stylesheet" href="{%static ‘assets/css/ace-skins.min.css‘%}" />

在settings.py中,我们定义static标签的路径是/static/, 因此,href="{%static‘assets/css/bootstrap.min.css‘%}",将会被解析为href="/static/assets/css/bootstrap.min.css‘%}"。这样即使今后静态文件所在位置发生变动,我们只需要调整settings.py的配置即可,不需要更改原来的页面。

保存之后,启动django,在浏览器里输入"外网地址:8000/index"之后,就会看到成果:

时间: 2024-08-10 17:02:40

Django运维后台的搭建之四:用bootstrap模板让运维前台变得更漂亮的相关文章

Django运维后台的搭建之一:使用model建立数据信息

2017年的上半年对我来说是极其难忘的一年,整个乐橙运营部的平台运维全靠我一个人,而且同时公司又新上了一个阿里深圳区一个杭州公有云两套环境外加一套演示环境.所以一直念叨的运维后台始终拖拖拉拉,现在公司又招来一个小弟给我打下手,我终于有时间去把这个小心愿完成,于是就有了这一系列文章,主要是给自己一个记录也是为了方便后来人. 首先,先说一下我的环境,本人使用阿里云centos7.0,django的版本是1.10.3,python是2.7,django目录就是/django. 首先在/django里#

Django运维后台的搭建之五:引入databases和django-crispy-forms

在上一篇,我们已经把我们做的运维外面套上了bootstrap框架,但是那仅仅是一个外壳,这一次是要把里面的壤也扣上这样的框架. 首先,编辑index.html,添加block元素,用于主页存放不同的内容: <div class="page-content">      <div class="page-content-area">                       <div class="page-header&qu

Django运维后台的搭建之三:用url去精细定制与反向解析

上一篇文章里,我们做了一个alionlineecs(阿里云线上环境服务器)的添加界面,但是要知道我们的计划里是有六个分支的,而alionlineecs仅仅是其中之一,要是每一个都这么写的话,那么views.py肯定又臭又长,充满了大量的复制片段. 对于这样的情况,我们就用一种统一的方式,把这些alionlineecs\alifuncecs\slb\rds等等这些分支当成一个变量,再自定义两个url,比如lists这个url就是展示功能,当在浏览器里输入"外网地址:8000/lists/alion

Django开发运维后台(二):建立模型与更新数据

上一篇文章我已经新建了一个SaAdmin的APP,现在开始在这APP下面来code 1.修改setting.py的数据库连接: DATABASES = {     'default': {         'ENGINE':'django.db.backends.mysql',         'NAME': 'QjshAdmin',         'USER': 'root',         'PASSWORD': 'lihuipeng',         'HOST': 'localho

Linux运维学习之 —— 搭建本地yum源

yum是RPM的前端工具,通过yum命令可以帮我们自动解决安装rpm包之间的依赖关系.下面是搭建本地yum仓库的步骤: 1.挂载光盘(光盘为CentOS-6.5-x86_64-bin-DVD2.iso)     mount /dev/cdrom1 /media ls一下/media这个目录,可以看到以下内容 2.创建本地文件夹,将Packages下的rpm包全部拷贝到本地文件夹     mount /dev/cdrom1 /media/     cp -r /media/Packages/* /

[运维] 第六篇:告警是数据中心运维的核心驱动力!

告警事件是数据中心运维的核心驱动力,我们做的所有运维工作都是要减少业务出现故障的概率,提供更高的业务可用性.不知道大家是否认可这句话?还是看这张图,通过这张图,把这个问题讲透:        作为综合事件管理平台自身,需要有这样几个部件:1 丰富事件接口.作为数据中心的核心驱动引擎,需要有丰富的事件接口可以将各种IT事件,甚至非IT事件接收过来,常见的接口有rest.web service.snmp.soap.socket.xml.文本.jdbc等.因为面对的对象不同,所以能够使用的方式是完全不

thinkphp 后台的搭建

前面说过前台的初步搭建,现在来写一写后台的搭建 tp中的前台搭建和后台搭建差不多类似,分工比较明确 先说一个后台分组的设置吧 前台有的功能 后台也差不多拥有 所以,现在在shop文件夹下,新建一个后台Admin文件夹,放置后台代码 并在Admin下创建需要的文件夹存放需要的代码 在controller里创建需要的php代码 同样输入和以前所说的固定格式(注意变换名称) 然后创建后台的静态页面,和前台是一样的 之后界面内容就会显示出来,样式不会醋来.接下来就开始修改路径显示样式和图片 后台的静态资

聊聊运维(1)证明你是坏运维的七个迹象,不要做CPR运维

大部分运维都有迷茫的阶段 干上几年运维,肯定感到迷惑和彷徨,因为运维是一个要求沉下心来了,不断精益求精的职业,而当下的大背景是浮躁,运维不是小鲜肉,明显是一个收益低,见效慢的职业. 运维有没有前途? 论职位,在一般企业最高级别到中层: 论收入,在任何企业肯定不会超过核心业务部门员工收入: 论压力,出现问题,永远是运维在背锅,因为不管什么起因,最终的操作都是运维. 所以浮躁的运维也非常多,浮躁的运维通常有以下七个迹象之一: 一 从不或者很少备份 数据是企业运行的基石,备份是使自己处于不败之地的终极

【开源】OSharp框架解说系列(2.1):EasyUI的后台界面搭建及极致重构

〇.前言 要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用比较普遍的easyui框架. 以前在用easyui的时候,每个页面都得从0做起,或者不厌其烦地由以前的页面通过“复制-粘贴”的方式来修改,久页久之,就会造成页面庞大且难以维护.其实,前端的html,javascript代码与后端的代码是一样的,通过一定的组织,把重复的代码抽离出来,同样也通过达到很好的复用率.而MVC的天生的Layout