Python3.4+Django1.9+Bootstrap3
Posted ❦邪恶毅小人❦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python3.4+Django1.9+Bootstrap3相关的知识，希望对你有一定的参考价值。
实现和原理
Python集成Django开发框架后，可以通过在cmd命令提示符下建立工程，工程名为learn_models
django-admin.py startproject learn_models
再进入到learn_models里面，新建一个app项目
cd learn_models python 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="{% static ‘bootstrap/css/bootstrap.min.css‘ %}" rel="stylesheet" type="text/css">
<link href="{% static ‘bootstrap/css/bootstrap.css‘ %}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{% static ‘bootstrap/js/bootstrap.min.js‘ %}"></script>
<script type="text/javascript" src="{% 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 makemigrations python manage.py migrate #运行工程 python manage.py runserver
然后打开 http://127.0.0.1:8000/test/ 出现在偏中间的hello world 表明整合成功
以上是关于Python3.4+Django1.9+Bootstrap3的主要内容，如果未能解决你的问题，请参考以下文章
Python3.4+Django1.9+Bootstrap3
virtualenv(python3.4), pip install mysqlclient 错误
升级到 Django 1.11 后 append_slash 不再起作用