首页 > 代码库 > Python3.4+Django1.9+Bootstrap3

Python3.4+Django1.9+Bootstrap3

实现和原理

Python集成Django开发框架后,可以通过在cmd命令提示符下建立工程,工程名为learn_models

django-admin.py startproject learn_models

再进入到learn_models里面,新建一个app项目

cd learn_modelspython manage.py startapp learn

此时目录的结构有这些文件

C:\USERS\SHILEIDING\LEARN_MODELS│  manage.py│  ├─learn│  │  admin.py│  │  models.py│  │  tests.py│  │  views.py│  │  __init__.py│  │  │  └─migrations│	  __init__.py│	  └─learn_models  settings.py  settings.pyc  urls.py  wsgi.py  __init__.py  __init__.pyc  

再去官网下载最新的Bootstrap3框架文件 http://getbootstrap.com/getting-started/#download 下载的文件夹可以看出有css、fonts、js三个(功能相当大),这就是Bootstrap 3的全部,以下就要在刚新建的Django工程集合Bootstrap3,进入learn_models目录,新建一个static文件夹,再在static里面新建一个bootstrap文件夹,将下载的三个文件夹放进去。

回到learn_models目录,进入learn目录里,新建一templates文件夹,里面存放Bootstrap的html界面,如此处新建一文件test.html,要引用Bootstrap 和jQuery等相关库,这里重点是定位存放的static文件

<!DOCTYPE html>{% load staticfiles %}<html><head lang="en">    <meta charset="UTF-8">     <!-- 引入jQuery -->    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>    <script src="http://code.jquery.com/jquery-latest.js"></script>     <!-- 引入 Bootstrap -->     <link href="http://www.mamicode.com/{% static ‘bootstrap/css/bootstrap.min.css‘ %}" rel="stylesheet" type="text/css">     <link href="http://www.mamicode.com/{% static ‘bootstrap/css/bootstrap.css‘ %}" rel="stylesheet" type="text/css">      <script type="text/javascript" src="http://www.mamicode.com/{% static ‘bootstrap/js/bootstrap.min.js‘ %}"></script>     <script type="text/javascript" src="http://www.mamicode.com/{% static ‘bootstrap/js/bootstrap.js‘ %}"></script>               <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>        <![endif]-->     <title>数据展示平台</title>         </head><body><!-- bootstrap 特性容器 --> <div class="container">     <h1>Hello, world! </h1>  </div></body></html>

文件开头的 {% load staticfiles %}就是加载static目录,为了找到static目录,需要稍微修改下".../learn_models/learn_models/settings.py"中的配置,主要有两块修改

INSTALLED_APPS = (  ‘django.contrib.admin‘,  ‘django.contrib.auth‘,  ‘django.contrib.contenttypes‘,  ‘django.contrib.sessions‘,  ‘django.contrib.messages‘,  ‘django.contrib.staticfiles‘,  #注册新建的app   ‘learn‘,)
INSTALLED_APPS中添加新建的app,然后配置static相关

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

将static目录放在 STATICFILES_DIRS 中,这样就可以load到我们刚下载的bootstrap 了,bootstrap依赖于jQuery库,所以一定要添加,我们这里是直接引用的,如果有下载版本只需放在static里再引用就行。

这时前端html已经可以使用相关bootstrap属性了,但如何通过Django 的http协议访问呢?这就是Django传奇的MVC模型了,刚刚的templates文件夹就是表现层,展示给用户看的前端,views.py负责处理业务逻辑层,处理请求和返回请求,models.py负责数据存取层,处理数据库的相关属性。前端发出的GET或POST请求要通过urls.py映射到views的相关方法中,所以要在urls.py中配置映射关系,这里假设请求路径为 http://127.0.0.1:8000/test/ 则配置为

urlpatterns = [    url(r‘^admin/‘, include(admin.site.urls)),  #前面是正则表达式    url(r‘^test/‘,‘learn.views.test‘,name=‘test‘), ]

映射到对应的views.py中,这里简单实现test方法,在views.py中添加即可

#Bootstrap 测试def test(request):     return render(request, ‘test.html‘)

当浏览器发出test请求后,先通过urls映射到views中的test方法,处理逻辑后推到前端test.html中显示,html显示的内容可以利用下载的bootstrap渲染。

运行

在cmd中cd到 learn_models目录下 ,此时的目录结构如下

C:\USERS\SHILEIDING\LEARN_MODELS│  manage.py│  ├─learn│  │  admin.py│  │  models.py│  │  tests.py│  │  views.py│  │  __init__.py│  │  │  ├─migrations│  │	  __init__.py│  │	  │  └─templates│		  test.html│		  ├─learn_models│	  settings.py│	  settings.pyc│	  urls.py│	  wsgi.py│	  __init__.py│	  __init__.pyc│	  └─static  └─bootstrap    ├─css    │	  bootstrap-theme.css    │	  bootstrap-theme.css.map    │	  bootstrap-theme.min.css    │	  bootstrap.css    │	  bootstrap.css.map    │	  bootstrap.min.css    │	      ├─fonts    │	  glyphicons-halflings-regular.eot    │	  glyphicons-halflings-regular.svg    │	  glyphicons-halflings-regular.ttf    │	  glyphicons-halflings-regular.woff    │	  glyphicons-halflings-regular.woff2    │	      └─js        bootstrap.js        bootstrap.min.js        npm.js        

可以看到有manage.py,这正是运行的管理器,先同步数据库,然后运行工程

#同步数据库python manage.py makemigrationspython manage.py migrate#运行工程python manage.py runserver

然后打开 http://127.0.0.1:8000/test/ 出现在偏中间的hello world 表明整合成功  

Python3.4+Django1.9+Bootstrap3