在Django项目中使用Bootstrap模板

本文最后更新于2016年6月13日,已超过 1 年没有更新,如果文章内容失效,还请反馈给我,谢谢!

=Start=

缘由:

这是一个看脸的社会,对于开发来说也是这样:即便后台逻辑做的屌炸天,但是如果没有一个漂亮的前端展示界面,对于别人来说,还是太low了……他们才不会管你花了多少精力去解决后端复杂的逻辑,只会丢下一句——这不是我想要的。

没办法,学习一下如何美化前端界面吧。对于人手不足的后端开发团队来说,花时间去学习CSS、JavaScript、PS等技术,然后自己设计前端界面,这显然是不现实的;一个比较靠谱的办法就是,选用网上现成的Bootstrap模板,然后在其基础上按需修改。下面就是在一个Django项目中套用Bootstrap模板的过程记录。

正文:
1.Django环境搭建

我的系统是CentOS 6.5,用的Python是自己编译安装的Python 2.7,PIP也是手动安装的,Django的搭建过程主要参考:Django 环境搭建,是用的PIP方式进行Django的安装,下面主要记录一下在此过程中碰到的问题。

问题一:django.core.exceptions.ImproperlyConfigured: Error loading either pysqlite2 or sqlite3 modules (tried in that order): No module named _sqlite3

默认情况下Python是会安装 sqlite3 模块的,但是,如果你没有 sqlite-devel 环境就不行,所以需要先安装 sqlite-devel :
$ sudo yum install sqlite-devel

然后重新编译安装 Python :「./configure && make && sudo make install」即可。

2.Django基本命令与模板

3.套用Bootstrap模板

在GitHub上面有两个开源的项目用来整合Django和Bootstrap:

但是使用这些插件的话,会增加额外的学习成本,所以我偏向于使用原生的方式调用Bootstrap模板。

因为Bootstrap就是一堆css和js以及字体文件,并且属于静态资源,所以我们只需要配置好Django的静态文件访问路径,能够让templates里面的代码访问到Bootstrap相关的文件即可。

因为我选用的Bootstrap模板是ace,这里就直接说一下我是如何将ace模板用在Django项目上的:

然后去浏览器上访问: http://127.0.0.1:8080/ 看看效果,或者通过访问 http://127.0.0.1:8080/assets/css/ace.min.css 看Django是否能够正确找到静态文件。

上面这种使用的是Django自带的Web服务器,如果需要在线上跑,建议使用Nginx+uwsgi的方式,具体可以参考之前记录的一篇文章「基于Nginx和uwsgi在CentOS上部署Django」,在这种情况下使用Bootstrap模板的话,可以在Nginx的配置文件里面加一个location,让templates里面的HTML代码能够访问到Bootstrap相关的CSS/JS文件即可。比如:

参考链接:

=END=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/2719.html

《在Django项目中使用Bootstrap模板》上有10条评论

  1. 建议将静态资源文件和模板文件分开存放:django_proj/django_app/static & django_proj/django_app/templates。(可能需要修改templates中的HTML文件的href)这样可以和Flask应用的开发公用一套Bootstrap模板。
    ==
    首先,把Bootstrap模板中的HTML文件都拷贝到 django_proj/django_app/templates 目录下,使Django能够找到;
    然后,在 django_proj/django_app/ 目录下新建一个名为 static 的目录用于存放静态文件(.css/.js/.png/…),并且最好在static下面建几个子目录(比如:css/fonts/images/js),并将要用到的文件分别拷贝至对应子目录中,方便分类;
    之后,启动一个简单的Django模板应用,访问一下页面,看哪些资源没有找到,然后有针对性的移动、下载至对应目录即可(必要时可以新建一个模板处理公共资源的请求)。

  2. Django 静态文件
    https://code.ziqiangxuetang.com/django/django-static-files.html

    Django中的HTML渲染(涉及到 js/css/img 等静态文件)
    https://docs.djangoproject.com/en/1.8/howto/static-files/

    # 在应用 app_name 所在目录下创建 static 目录用于存放一些js/css/img等静态文件
    # 静态文件放在对应的 app 下的 static 文件夹中 或者 STATICFILES_DIRS 中的文件夹中。
    # 当 DEBUG = True 时,Django 就能自动找到放在里面的静态文件。(Django 通过 STATICFILES_FINDERS 中的“查找器”,找到符合的就停下来,寻找的过程 类似于 Python 中使用 import xxx 时,找 xxx 这个包的过程)。

    # app_name/views.py
    def test(request):
    return render(request, 'test.html')

    # app_name/static/test.html

    test

    查询

发表评论

电子邮件地址不会被公开。 必填项已用*标注