Django使用bootstrap实例

2024-04-27 15:18:47

字体：大中小

来源：转载

供稿：网友

下载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 projectD:/develop>django-admin.py startproject mysite2. 新建 apppython manage.py startapp app-name或 django-admin.py startapp app-name3. 同步数据库python manage.py syncdb 注意：Django 1.7.1及以上的版本需要用以下命令python manage.py makemigrationspython manage.py migrate这种方法可以创建表，当你在models.py中新增了类时，运行它就可以自动在数据库中创建表了，不用手动创建。4. 使用开发服务器开发服务器，即开发时使用，一般修改代码后会自动重启，方便调试和开发，但是由于性能问题，建议只用来测试，不要用在生产环境。python manage.py runserver # 当提示端口被占用的时候，可以用其它端口：python manage.py runserver 8001python manage.py runserver 9999（当然也可以kill掉占用端口的进程） # 监听所有可用 ip （电脑可能有一个或多个内网ip，一个或多个外网ip，即有多个ip地址）python manage.py runserver 0.0.0.0:8000# 如果是外网或者局域网电脑上可以用其它电脑查看开发服务器# 访问对应的 ip加端口，比如 http://172.16.20.2:80005. 清空数据库python manage.py flush此命令会询问是 yes 还是 no, 选择 yes 会把数据全部清空掉，只留下空表。6. 创建超级管理员python manage.py createsuperuser # 按照提示输入用户名和对应的密码就好了邮箱可以留空，用户名和密码必填 # 修改用户密码可以用：python manage.py changepassWord username7. 导出数据导入数据python manage.py dumpdata appname > appname.jsonpython 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 dbshellDjango 会自动进入在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中增加以下配置静态文件路径

STATIC_PATH = os.path.join(BASE_DIR,'static')STATIC_URL = '/static/' # You may find this is already defined as such.STATICFILES_DIRS = (    STATIC_PATH,)模板文件路径TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [TEMPLATE_PATH],        'APP_DIRS': True,        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],        },    },]mysite工程中的urls.py中增加内容    url(r'^app1/', include('app1.urls')),app1中新增的urls.py中内容from django.conf.urls import patterns, urlfrom app1 import viewsurlpatterns = [        url(r'^$', views.index, name='index')]为了建立映射,我们用到了tuple.在Django里必须用urlpatterns来命名这个元组.这个urlpatterns元组包含一些django.conf.urls.url()函数的调用,而每个函数里都有一个唯一的映射.在上面的代码里,我们只用了url()一次,所以我们只映射了一个URL.django.conf.urls.url()函数的第一个参数是正则表达式^$,指的是匹配一个空字符串.所有匹配这个模式的URL都会映射到views.index()这个视图.用户的请求信息会包含在HttpRequest对象里作为参数传递给视图.我们给url()函数可选参数name赋值为index.index.html内容如下<!DOCTYPE html>{% load staticfiles %} <!-- New line --><html>    <head>        <title>SSOC</title>    </head>    <body>        <h1>SSOC says...</h1>        hello world! <strong>{{ boldmessage }}</strong><br />        <img src="{% static "images/lilies.jpg" %}" alt="Picture of app1" />     </body></html></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.pyindex.xml{% extends 'base.html' %} {% block title %}My-SSOC{% endblock %} {% block content %}        hello world! <p class="text-warning">kkkkkkkkkkkk warning class</p><p class="text-danger">fffffffff danger class</p>{% endblock %}base.html<!DOCTYPE html><html>   <head>      <meta charset="utf-8">      <title>{% block title %}SSOC{% endblock %} - wangyu</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/CSS/bootstrap.min.css" rel="stylesheet"> 	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>   <body>	{% include 'nav.html' %}	{% block content %}	<div>This is origin content</div>	{% endblock %}   </body></html>nav.html<nav class="navbar navbar-default" role="navigation">	<div class="container-fluid">	<div class="navbar-header">		<a class="navbar-brand" href="#">SSOC</a>	</div>	<div>		<ul class="nav navbar-nav">			<li class="dropdown">				<a href="#" class="dropdown-toggle" data-toggle="dropdown">haha<b class="caret"></b></a>					<ul class="dropdown-menu">					<li><a href="#">a1</a></li>					<li><a href="#">a22</a></li>					<li><a href="#">Jaf Report</a></li>					<li class="divider"></li>					<li><a href="#">df</a></li>					<li class="divider"></li>					<li><a href="#">bg</a></li>				</ul>			</li>			<li><a href="#">SVN</a></li>			<li class="dropdown">				<a href="#" class="dropdown-toggle" data-toggle="dropdown">java<b class="caret"></b></a>				<ul class="dropdown-menu">					<li><a href="#">jmeter</a></li>					<li><a href="#">EJB</a></li>					<li><a href="#">Jasper Report</a></li>					<li class="divider"></li>					<li><a href="#">divide</a></li>					<li class="divider"></li>					<li><a href="#">another</a></li>				</ul>			</li>		</ul>	</div>	</div></nav>