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"之后，就会看到成果：

至此，框架已经搭建完毕，剩下的内容就是把这个框架跟前几篇文章里的内容相结合起来。

转载于:https://blog.51cto.com/chenx1242/1949231

Django运维后台的搭建之四：用bootstrap模板让运维前台变得更漂亮相关推荐

Django运维后台的搭建之一：使用model建立数据信息
2017年的上半年对我来说是极其难忘的一年,整个乐橙运营部的平台运维全靠我一个人,而且同时公司又新上了一个阿里深圳区一个阿里公有云一个杭州公有云三套环境外加一套演示环境.所以一直念叨的运维后台始终拖拖 ...
Django运维后台的搭建之二：建立template和对应的ModelForm
在前一篇我们已经建立了一套数据库用来存储我们的云资源资料以及有了一个简单的admin后台,但是这个后台毕竟太难看了,我们可以自己搭建一个更漂亮的界面来满足领导的需求,那么这个时候就需要template ...
大米运维 -- 监控体系搭建
文章目录 0.监控体系框架 1.监控系统设计 1.1 评估系统 1.2 监控种类 1.3 监控技术方案/软件选取(主观因素) 1.4 监控体系的人员安排 2.监控系统搭建 3.数据采集编写 3.1 可 ...
2003京淘项目Day-03京淘后台项目搭建
1.SpringBoot 整合JSP 1.1 创建项目 1.1.1 创建项目 1.1.2 编辑POM.xml文件添加继承/依赖/插件 <!--parent标签作用:管理所有被springBoo ...
OMS运维管理平台搭建很多坑的解决方案分享
OMS运维管理平台搭建一.基础OMS系统部署 1.Django下载地址下载地址: 2.环境: 3.pip 安装 pip下载 4.Saltstack安装 5.MariaDB安装 6.nginx环境 7 ...
无人化运维离我们有多远？阿里智能化运帷平台深度揭秘
阿里妹导读:DevOps 的概念提出接近10年了,提升协作效率,降低开发成本,更稳健可持续的业务运营是DevOps的主旋律.阿里巴巴是如何开展DevOps的? 阿里集团基础架构事业群运维中台负责人如柏 ...
Django框架学习——1—(虚拟环境搭建、MVC思想与Django的MVT区别、Django项目的创建、运行Django项目、项目结构介绍)
1.虚拟环境搭建创建新的Django框架的虚拟环境: 注意:如果没有pipenv指令,需要安装这个支持库,同时需要记住配置它的环境变量,否则虚拟环境会安装在默认文件夹下(一般是C:\Users\Ad ...
Django 快速入门课程「搭建个人博客」
文章目录 1. 初探 Django 1. Why Django? 2. 新建 Python 虚拟环境 3. 安装 Django 并新建项目 4. 初始化生成文件用途 5. 检测 Django 项目是否 ...
基于django的微信小程序搭建
因为疫情封校被迫关起来,终于有时间整理之前的课程设计. 基于django的微信小程序搭建(不定期记录踩坑日常) 开发工具 (一)pycharm (二)mysql (三)微信开发者工具 (四)IP穿透 ...

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

Django运维后台的搭建之四：用bootstrap模板让运维前台变得更漂亮相关推荐

最新文章

热门文章