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

简介:

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


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


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

wKioL1lwFa_j0I7kAACHNmFcDj8017.png


第一篇文章里我曾经说我的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,在原有基础上追加这样一句话: 

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


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

1
2
3
4
5
6
7
# 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,把下面的内容添加进去,目的是添加一个对应的视图:

1
2
3
4
#显示首页
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产生了连接:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% 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"之后,就会看到成果:

wKiom1lwHkbTMYm7AARqKCjCPOE808.png


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



 本文转自 苏幕遮618 51CTO博客,原文链接:http://blog.51cto.com/chenx1242/1949231


相关文章
|
2月前
|
移动开发 前端开发 小程序
分享46个Bootstrap模板,总有一款适合您
分享46个Bootstrap模板,总有一款适合您
23 1
|
3月前
|
SQL 前端开发 JavaScript
Python 教程之 Django(10)模板
Python 教程之 Django(10)模板
34 0
|
2月前
|
移动开发 监控 前端开发
分享42个Bootstrap模板,总有一款适合您
分享42个Bootstrap模板,总有一款适合您
29 4
|
30天前
|
开发框架 人工智能 前端开发
使用Python、Django和Bootstrap构建在线教育平台
使用Python、Django和Bootstrap构建在线教育平台
20 0
|
2月前
|
移动开发 开发框架 前端开发
分享56个Bootstrap模板,总有一款适合您
分享56个Bootstrap模板,总有一款适合您
38 6
|
2月前
|
前端开发 JavaScript 视频直播
分享44个Bootstrap模板,总有一款适合您
分享44个Bootstrap模板,总有一款适合您
53 1
|
3月前
|
前端开发 JavaScript Python
Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST
16 0
|
3月前
|
Python
百度搜索:蓝易云【Django自带的Admin后台中如何获取当前登录用户】
在上面的代码中,`@staff_member_required`装饰器确保只有管理员可以访问 `my_custom_view`视图,而 `@login_required`装饰器确保只有登录的用户可以访问该视图。然后,可以使用 `request.user.username`获取当前登录用户的用户名,并将其传递到模板中进行显示或其他操作。
32 3
|
3月前
|
前端开发 JavaScript Python
Web实战:基于Django与Bootstrap的在线计算器
Web实战:基于Django与Bootstrap的在线计算器
68 0
|
4月前
|
算法 Java Python
Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
46 0