您的位置：首页 > Web前端 > BootStrap

Python2.7+Django1.8+Bootstrap3 实现增删改查、分页（一）

2015-07-22 15:44 996 查看
前言

　　好久没写博客了，这次因为工作原因，实现了一个基于Python2.7+Django1.8+Bootstrap3架构的测试demo，除了常用的增删改查功能外，还增加了分页和批量操作等功能，从前端到后台一条龙，底层数据库使用的是Django自带的SQLite轻量级数据库，后面我将从安装和运行，实现的原理和框架，还有自己的心得体会来讲述这个demo的前生今世，我是很人性化的，源代码将在尾巴提供，虽然水平不行，但若转载还请注明出处，当然，不注明我也不会保留什么什么权利。

安装和配置

　　首先安装Python2.7，在下一步运行时，请注意选择勾选环境配置工具包，默认是关闭的，如果没设置，安装之后可手动添加"…/Python27"和"…/Python27/Scripts"到环境变量的path中。如果配置成功，进入cmd后，任何路径输入Python，可查看Python的版本信息。一般来说"…/Python27/Scripts"包含如下执行文本：

django-admin.exe
easy_install.exe
pip.exe


　　在cmd终端输入pip，一般来说会有反应，如果没有，说明未集成批评，则可直接下载：get-pip.py 然后运行在终端运行

python get-pip.py


　　就可以安装 pip,pip安装成功后利用pip安装Django

pip install Django


　　在python终端环境输入

import django
django.get_version()


　　查看输出的Django版本信息，若打印出来即说明安装成功！

实现和原理

　　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 表明整合成功。

尾巴

　　本来打算直接解释写好表格管理的基本操作demo的，但想想一开始学习时配置这一层着实走了不少弯路，就临时起意写个略带解释的整合Python、Django、bootstrap 的test工程，后面我将再写一篇，描述Django框架下实现基本操作的博客，这里贡献出demo源码 ，直接同步下数据库然后运行即可，有兴趣的话可以直接看，里面我注释的很详细，如果有耐心，且听我下回分解！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航