bootstrap+django快速构建一个blog

来源：互联网发布：奔驰换大灯编程教程编辑：程序博客网时间：2024/06/05 15:29

一、开发环境

操作系统：Windows 7

python版本：2.7.5

django版本：1.7.4

bootstrap版本：v3.3.2

二、创建项目

备注：由于没有更改系统的环境变量，所以创建项目的命令如上

让我们来看看这个项目中都有什么内容

可以看到startproject命令创建了一个manage.py文件和一个mysite文件夹，mysite文件夹中包含settings.py、urls.py、wsgi.py、__init__.py四个文件。

manage.py文件时同django项目交互的工具。

__init__.py文件的作用是将一个目录变成一个python包。

settings.py文件包含了项目的默认设置，包括数据库信息，调试标志等。

urls.py文件在django中叫做URLconf，它是一个将URL模式映射到你的应用程序上的配置文件。

wsgi.py是WSGI web应用的一个入口文件(关于它的具体作用我们以后再说)。

三、修改配置文件

编辑settings.py文件

由于配置文件默认使用的是sqlite3数据库，在这里我采用的是mysql数据库，所以将settings.py文件改成上图的右侧所示，数据库名、用户名、密码、主机、端口号你可以根据自己所使用的来进行配置，其中LANGUAGE_CODE、TIME_ZONE、USE_I18N、USE_L10N、USE_TZ等的含义可以参考官方文档，这里就不再赘述。

四、运行开发服务器

由于django1.7与以前的版本有了较多的改变，在执行python manage.py runserver之前需要执行python manage.py migrate来创建数据库，如下图所示。

这时，我们在浏览器中访问http://127.0.0.1:8000/即可看到如下所示页面

五、创建blog应用

执行完python manage.py startapp blog应用后，可以看到自动生成了一个blog文件夹，如上图所示。

接下来编辑settings.py配置文件，将我们新建的blog app添加到配置文件中。

如图所示，不要忘记末尾的逗号，否则会报错！！！！

六、设计数据库表结构

接下来我们就要设计我们的数据库表结构，来定义我们的Model。

编辑blog文件夹下的models.py文件，添加如下图所示代码

然后编辑blog文件夹下的admin.py文件，添加如下图所示代码

接下来对上面的更改进行应用，并创建访问admin后台的用户，

用浏览器打开http://127.0.0.1:8000/admin，即可看到如下界面

输入我们刚才创建的用户名和密码进行登录即可看到如下界面

点击Blog posts右侧的Add按钮，让我们来添加一篇帖子吧

然后点击Save按钮就完成一篇帖子的添加工作了，将会跳转到如下页面。

7、建立用户能够看到的blog模板

建立与blog文件夹同级的static文件夹和templates文件夹，然后在static文件夹和templates文件夹下分别建立blog文件夹，效果如下图所示

在templates的blog文件夹下新建一个archive.html文件，添加以下内容

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{% static "favicon.ico" %}">

<title>My Blog</title>


<link href="{% static "bootstrap/3.3.2/css/bootstrap.min.css" %}" rel="stylesheet">


<link href="{% static "blog/blog.css" %}" rel="stylesheet">



<script src="{% static "assets/js/ie-emulation-modes-warning.js" %}"></script>



</head>

<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>

<div class="container">
<div class="row">

<div class="col-sm-8 blog-main">
{% for post in posts %}
<div class="blog-post">
<h2 class="blog-post-title">{{ post.title }}</h2>
<p class="blog-post-meta">{{ post.timestamp }}</p>

<p>{{ post.body }}</p>
</div>
{% endfor %}
</div>
</div>
</div>

<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>



<script src="{% static "jquery/1.11.2/jquery.min.js" %}"></script>
<script src="{% static "bootstrap/3.3.2/js/bootstrap.min.js" %}"></script>
<script src="{% static "assets/js/docs.min.js" %}"></script>

<script src="{% static "assets/js/ie10-viewport-bug-workaround.js" %}"></script>
</body>
</html>

然后编辑blog下的views.py文件，添加以下内容

from django.shortcuts import render

from blog.models import BlogPost

def archive(request):
posts = BlogPost.objects.all()
return render(request, 'blog/archive.html', {'posts': posts})

然后编辑mysite文件夹下的urls.py文件，添加以下内容

from django.conf.urls import patterns, include, url
from django.contrib import admin

urlpatterns = patterns('',
# Examples:
# url(r'^$', 'mysite.views.home', name='home'),
url(r'^blog/', include('blog.urls')),

url(r'^admin/', include(admin.site.urls)),
)

并在blog文件夹下新建urls.py文件，在其中添加以下内容

from django.conf.urls import patterns, url

urlpatterns = patterns('',
url(r'^$', 'blog.views.archive', name='archive'),
)

在static文件夹下将我们引用的静态文件放到指定的文件夹下

然后在浏览器中访问http://127.0.0.1:8000/blog/即可看到如下效果

源码可以在附件中下载

0 0