devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django使用bootstrap实例

作者：AllinToyou | 2024-04-10 00:48:30

赞

踩

django使用bootstrap实例
下载python版本进行安装
https://www.python.org/downloads/
windows版本下载msi文件双击安装


下载Django版本进行安装
https://www.djangoproject.com/download/
下载压缩包解压，cmd进入解压后的django版本目录
执行安装命令：
E:\Django-1.9.12>python setup.py install


添加PATH环境变量
C:\Python27\Lib\site-packages\Django-1.9.12-py2.7.egg\django\bin




基本命令
================================
1. 新建一个 django project
D:\develop>django-admin.py startproject mysite


2. 新建 app


python manage.py startapp app-name
或 django-admin.py startapp app-name


3. 同步数据库


python manage.py syncdb
 
注意：Django 1.7.1及以上的版本需要用以下命令
python manage.py makemigrations
python manage.py migrate
这种方法可以创建表，当你在models.py中新增了类时，运行它就可以自动在数据库中创建表了，不用手动创建。


4. 使用开发服务器
开发服务器，即开发时使用，一般修改代码后会自动重启，方便调试和开发，但是由于性能问题，建议只用来测试，不要用在生产环境。

python manage.py runserver
 
# 当提示端口被占用的时候，可以用其它端口：
python manage.py runserver 8001
python manage.py runserver 9999
（当然也可以kill掉占用端口的进程）
 
# 监听所有可用 ip （电脑可能有一个或多个内网ip，一个或多个外网ip，即有多个ip地址）
python manage.py runserver 0.0.0.0:8000
# 如果是外网或者局域网电脑上可以用其它电脑查看开发服务器
# 访问对应的 ip加端口，比如 http://172.16.20.2:8000


5. 清空数据库
python manage.py flush
此命令会询问是 yes 还是 no, 选择 yes 会把数据全部清空掉，只留下空表。


6. 创建超级管理员
python manage.py createsuperuser
 
# 按照提示输入用户名和对应的密码就好了邮箱可以留空，用户名和密码必填
 
# 修改 用户密码可以用：
python manage.py changepassword username

7. 导出数据 导入数据
python manage.py dumpdata appname > appname.json
python manage.py loaddata appname.json
关于数据操作 详见：数据导入数据迁移，现在了解有这个用法就可以了。


8. Django 项目环境终端
python manage.py shell
如果你安装了 bpython 或 ipython 会自动用它们的界面，推荐安装 bpython。


这个命令和 直接运行 python 或 bpython 进入 shell 的区别是：你可以在这个 shell 里面调用当前项目的 models.py 中的 API，对于操作数据，还有一些小测试非常方便。


9. 数据库命令行
python manage.py dbshell
Django 会自动进入在settings.py中设置的数据库，如果是 MySQL 或 postgreSQL,会要求输入数据库用户密码。


在这个终端可以执行数据库的SQL语句。如果您对SQL比较熟悉，可能喜欢这种方式。


10. 更多命令
终端上输入 python manage.py 可以看到详细的列表，在忘记子名称的时候特别有用。




URL映射
========================
mysite
├── app1
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py 新增
│   ├── apps.py
│   └── views.py
├── templates 新增模板目录
│   └── app1
│    └── index.html
├── static 新增 静态媒体目录
│   └── images
│        └── lilies.jpg
├── manage.py
└── mysite
    ├── __init__.py
    ├── settings.py 修改
    ├── urls.py
    └── wsgi.py


在settings.py中增加以下配置
静态文件路径 
  1. STATIC_PATH = os.path.join(BASE_DIR,'static')
  2. STATIC_URL = '/static/' # You may find this is already defined as such.
  3. STATICFILES_DIRS = (
  4.     STATIC_PATH,
  5. )

模板文件路径 
  1. TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')
  2.  
  3.  
  4. TEMPLATES = [
  5.     {
  6.         'BACKEND': 'django.template.backends.django.DjangoTemplates',
  7.         'DIRS': [TEMPLATE_PATH],
  8.         'APP_DIRS': True,
  9.         'OPTIONS': {
  10.             'context_processors': [
  11.                 'django.template.context_processors.debug',
  12.                 'django.template.context_processors.request',
  13.                 'django.contrib.auth.context_processors.auth',
  14.                 'django.contrib.messages.context_processors.messages',
  15.             ],
  16.         },
  17.     },
  18. ]




mysite工程中的urls.py中增加内容
    url(r'^app1/', include('app1.urls')),


app1中新增的urls.py中内容 
  1. from django.conf.urls import patterns, url
  2. from app1 import views
  3.  
  4.  
  5. urlpatterns = [
  6.         url(r'^$', views.index, name='index')
  7. ]



为了建立映射,我们用到了tuple.
在Django里必须用urlpatterns来命名这个元组.
这个urlpatterns元组包含一些django.conf.urls.url()函数的调用,而每个函数里都有一个唯一的映射.
在上面的代码里,我们只用了url()一次,所以我们只映射了一个URL.
django.conf.urls.url()函数的第一个参数是正则表达式^$,指的是匹配一个空字符串.
所有匹配这个模式的URL都会映射到views.index()这个视图.
用户的请求信息会包含在HttpRequest对象里作为参数传递给视图.
我们给url()函数可选参数name赋值为index.


index.html内容如下 
  1. <!DOCTYPE html>
  2.  
  3. {% load staticfiles %} <!-- New line -->
  4.  
  5. <html>
  6.     <head>
  7.         <title>SSOC</title>
  8.     </head>
  9.  
  10.     <body>
  11.         <h1>SSOC says...</h1>
  12.         hello world! <strong>{{ boldmessage }}</strong><br />
  13.         <img src="{% static "images/lilies.jpg" %}" alt="Picture of app1" /> 
  14.     </body>
  15.  
  16.  
  17. </html>
  18. </html>




首先,我们需要使用{% load static %}标签来使用静态媒体.所以我们才可以用{% static "rango.jpg" %在模板里调用static文件.Django模板标签用{ }来表示.在这个例子里我们用static标签,它将会把STATIC_URL和rango.jpg连接起来,如下所示.


<img src="/static/images/rango.jpg" alt="Picture of Rango" /> <!-- New line -->
如果因为什么原因图片不能加载我们可以用一些文本来代替.这就是alt属性的作用 - 如果图片加载失败就显示alt属性中的文本.


好了,让我们再次运行Django服务访问http://127.0.0.1:8000/rango.幸运的话可以看到下图.




模板
========================


mysite
├── app1
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   ├── apps.py
│   └── views.py
├── templates
│   ├── base.xml 新增
│   ├── nav.xml 新增
│   └── app1
│    └── index.html 新增
├── static
│   ├── images
│   └── bootstrap
├── manage.py
└── mysite
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py




index.xml 

  1. {% extends 'base.html' %}
  2.  
  3. {% block title %}My-SSOC{% endblock %}
  4.  
  5. {% block content %}
  6.         hello world! 
  7. <p class="text-warning">kkkkkkkkkkkk warning class</p>
  8. <p class="text-danger">fffffffff danger class</p>
  9. {% endblock %}


base.html 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>{% block title %}SSOC{% endblock %} - wangyu</title>
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
  8.  
  9.       <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  10.  	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  11. 	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  12.  
  13.    </head>
  14.    <body>
  15. 	{% include 'nav.html' %}
  16.  
  17.  
  18. 	{% block content %}
  19. 	<div>This is origin content</div>
  20. 	{% endblock %}
  21.  
  22.  
  23.    </body>
  24. </html>



nav.html 
  1. <nav class="navbar navbar-default" role="navigation">
  2. 	<div class="container-fluid">
  3. 	<div class="navbar-header">
  4. 		<a class="navbar-brand" href="#">SSOC</a>
  5. 	</div>
  6. 	<div>
  7. 		<ul class="nav navbar-nav">
  8. 			<li class="dropdown">
  9. 				<a href="#" class="dropdown-toggle" data-toggle="dropdown">haha<b class="caret"></b></a>
  10. 					<ul class="dropdown-menu">
  11. 					<li><a href="#">a1</a></li>
  12. 					<li><a href="#">a22</a></li>
  13. 					<li><a href="#">Jaf Report</a></li>
  14. 					<li class="divider"></li>
  15. 					<li><a href="#">df</a></li>
  16. 					<li class="divider"></li>
  17. 					<li><a href="#">bg</a></li>
  18. 				</ul>
  19. 			</li>
  20. 			<li><a href="#">SVN</a></li>
  21. 			<li class="dropdown">
  22. 				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a>
  23. 				<ul class="dropdown-menu">
  24. 					<li><a href="#">jmeter</a></li>
  25. 					<li><a href="#">EJB</a></li>
  26. 					<li><a href="#">Jasper Report</a></li>
  27. 					<li class="divider"></li>
  28. 					<li><a href="#">divide</a></li>
  29. 					<li class="divider"></li>
  30. 					<li><a href="#">another</a></li>
  31. 				</ul>
  32. 			</li>
  33. 		</ul>
  34. 	</div>
  35. 	</div>
  36. </nav>
  37.  
  38.



声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/395753
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号