欢迎加入QQ讨论群258996829
麦子学院 头像
苹果6袋
6
麦子学院

在Django项目中套用Bootstrap模板过程

发布时间:2016-07-03 00:36  回复:0  查看:6700   最后回复:2016-07-03 00:36  

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

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

 

1.Django环境搭建

我的系统是CentOS 6.5,用的Python是自己编译安装的Python 2.7PIP也是手动安装的,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基本命令与模板

在Django项目中套用Bootstrap模板过程

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

#1. 新建一个 django project

django-admin.py startproject ui_project

cd ui_project/

 

#2. 新建 app

django-admin.py startapp ui_app

 

vim ui_project/settings.py #将新定义的app名称(ui_app)加到settings.py中的INSTALL_APPS

vim ui_app/views.py    #定义视图函数(访问页面时的内容)

vim ui_project/urls.py #定义视图函数相关的URL[即:访问什么网址对应什么内容]

 

#3. 同步数据库

python manage.py makemigrations

python manage.py migrate

 

#4. 运行测试

python manage.py runserver

python manage.py runserver 0.0.0.0:8080

在Django项目中套用Bootstrap模板过程

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

# http://www.ziqiangxuetang.com/django/django-template.html

# http://www.ziqiangxuetang.com/django/django-template2.html

 

#步骤一

$ vim ui_app/views.py    #定义视图函数(访问页面时的内容)

    from django.shortcuts import render

    def index(request):

        return render(request, 'index.html')

 

#步骤二

$ mkdir -p ui_app/templates #创建templates目录用于存放HTML模板文件

$ echo "Hello, Django!" > ui_app/templates/index.html   #编辑HTML模板文件

 

#步骤三

$ vim ui_project/urls.py #定义视图函数相关的URL

    urlpatterns = [

        url(r'^$', ui_app.views.index, name='index'),

        url(r'^admin/', include(admin.site.urls)),

    ]

 

3.套用Bootstrap模板

GitHub上面有两个开源的项目用来整合DjangoBootstrap

https://github.com/dyve/django-bootstrap-toolkit #对应bootstrap 2.0

https://github.com/dyve/django-bootstrap3 #对应bootstrap 3.0

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

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

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

在Django项目中套用Bootstrap模板过程

1

2

3

4

5

6

7

8

9

10

11

#ui_project目录下新建一个叫做assets的目录用于存放静态文件

$ git clone https://github.com/bopoda/ace.git

$ cp -r ace/assets/ .

$ cp -f ace/index.html ui_app/templates/

 

$ vim ui_project/settings.py

#添加下面的内容

PROJECT_ROOT = os.path.join(os.path.abspath(os.path.dirname(__file__)), '..')

STATICFILES_DIRS = (

    os.path.join(BASE_DIR, "assets"),

)

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

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

在Django项目中套用Bootstrap模板过程

1

2

3

4

5

6

7

8

9

10

11

server {

    listen      80;

    server_name localhost;

    # ...

 

    location /assets {

        alias /opt/learn_django/ui_project/assets;

    }

 

    #...

}

 

 

 

原文来自:crazyof.me 

您还未登录,请先登录

热门帖子

最新帖子