zoukankan      html  css  js  c++  java
  • Python2.7+Django1.8+Bootstrap3 实现增删改查、分页(一)

    前言

      好久没写博客了,这次因为工作原因,实现了一个基于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:USERSSHILEIDINGLEARN_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:USERSSHILEIDINGLEARN_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源码 ,直接同步下数据库然后运行即可,有兴趣的话可以直接看,里面我注释的很详细,如果有耐心,且听我下回分解!
  • 相关阅读:
    yocto/bitbake 学习资源
    QEMU/KVM学习资源
    ubuntu 中创建和删除用户
    git 重命名本地和远程分支
    Ubuntu 上搭建 FTP 服务器
    gdb 常见用法
    git log 显示与特定文件相关的 commit 信息
    基于 qemu system mode 运行 arm 程序
    基于 qemu user mode 运行 aarch64 程序
    checking in(airport)
  • 原文地址:https://www.cnblogs.com/dingshilei/p/4667642.html
Copyright © 2011-2022 走看看