美文网首页Django学习
Django + uwsgi + nginx + bootstr

Django + uwsgi + nginx + bootstr

作者: SamDing | 来源:发表于2015-11-20 17:03 被阅读220次

动态URL

运行已经做好的博客框架, 会发现一个问题, 只有一个主页的空盒子, 而大部分时候我们希望能够让每篇博客文章都有一个独立的页面.

我第一个想到的方法是给每篇博客文章加一个view函数逻辑, 然后设置一个独立的url(我不知道语言比如PHP, 或者web框架rail等是如果解决的, 我是第一次仔细的学习web框架, 也没有前端开发经验), 但是这种方法耦合性太强, 而且用户不友好, 缺点非常多

Django给我们提供了一个方便的解决方法, 就是动态URL
现在修改my_blog/article/views.py代码:

# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse
from article.models import Article
from datetime import datetime
from django.http import Http404

# Create your views here.
def home(request):
    post_list = Article.objects.all()  #获取全部的Article对象
    return render(request, 'home.html', {'post_list' : post_list})

def detail(request, id):
    try:
        post = Article.objects.get(id=str(id))
    except Article.DoesNotExist:
        raise Http404
    return render(request, 'post.html', {'post' : post})

因为id是每个博文的唯一标识, 所以这里使用id对数据库中的博文进行查找

在my_blog/my_blog/urls.py中修改url设置:


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

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

    url(r'^admin/', include(admin.site.urls)),
    url(r'^$', 'article.views.home', name = 'home'),
    url(r'^(?P<id>\d+)/$', 'article.views.detail', name='detail'),
)

然后在templates下建立一个用于显示单页博文的界面:

#post.html
{% extends "base.html" %}

{% block content %}
<div class="posts">
        <section class="post">
            <header class="post-header">
                <h2 class="post-title">{{ post.title }}</h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time|date:"Y /m /d"}}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content }}
                    </p>
                </div>
        </section>
</div><!-- /.blog-post -->
{% endblock %}

可以发现只需要对home.html进行简单的修改, 去掉循环就可以了.

修改home.html和base.html, 加入动态链接和主页, 归档, 专题和About Me按钮

<!--home.html-->
{% extends "base.html" %}

{% block content %}
<div class="posts">
    {% for post in post_list %}
        <section class="post">
            <header class="post-header">
                <h2 class="post-title"><a href="{% url "detail" id=post.id %}">{{ post.title }}</a></h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time |date:"Y /m /d"}}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content }}
                    </p>
                </div>
                <a class="pure-button" href="{% url "detail" id=post.id %}">Read More >>> </a>
        </section>
    {% endfor %}
</div><!-- /.blog-post -->
{% endblock %}
<!--base.html-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Andrew Liu Blog</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
    <link rel="stylesheet" href="http://picturebag.qiniudn.com/blog.css">

</head>
<body>
<div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="header">
            <h1 class="brand-title"><a href="{% url "home" %}">Andrew Liu Blog</a></h1>
            <h2 class="brand-tagline">雪忆 - Snow Memory</h2>
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">归档</a>
                    </li>
                    <li class="nav-item">
                        <a class="pure-button" href="https://github.com/Andrew-liu/my_blog_tutorial">Github</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-error pure-button" href="http://weibo.com/dinosaurliu">Weibo</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">专题</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">About Me</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>


    <div class="content pure-u-1 pure-u-md-3-4">
        <div>
            {% block content %}
            {% endblock %}
            <div class="footer">
                <div class="pure-menu pure-menu-horizontal pure-menu-open">
                    <ul>
                        <li><a href="http://andrewliu.tk/about/">About Me</a></li>
                        <li><a href="http://twitter.com/yuilibrary/">Twitter</a></li>
                        <li><a href="http://github.com/yahoo/pure/">GitHub</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

其中主要改动

- 添加了几个导航按钮, 方便以后添加功能(暂时不添加登陆功能)
- 添加read more按钮
- 在博客文章的增加一个链接, 链接的href属性为`{% url "detail" id=post.id %}`, 当点击这个文章题目时, 会将对应的数据库对
象的id传入的url中, 类似于url传参, 不记得的同学可以重新回到前几页翻一下. 这里将数据库对象唯一的id传送给url设置, url
取出这个id给对应的view中的函数逻辑当做参数. 这样这个id就传入对应的参数中被使用

比如: 点击到的博客文章标题的对象对应的id=2, 这个id被传送到name=detail的url中, '^(?P<id>\d+)/$'正则表达式匹配后>取出id, 然后将id传送到article.views.detail作为函数参数, 然后通过get方法获取对应的数据库对象, 然后对对应的模板进行渲染, 发送到浏览器中..

此时重新运行服务器, 然后在浏览器中输入http://127.0.0.1:8000/点击对应的博客文章题目, 可以成功的跳转到一个独立的页面中

Mou icon

相关文章

  • Django + uwsgi + nginx + bootstr

    流程 首先申请一个属于你自己的域名和服务器 购买域名后截得设置域名解析,将你的域名指向服务器 登录服务器后使用gi...

  • Django + uwsgi + nginx + bootstr

    Django简介 写作目的 喜欢一个学习观点以教促学, 一直以来, 学习的时候经常会发现, 某个方法某个问题自己已...

  • Django + uwsgi + nginx + bootstr

    开发环境 下面仅仅是我的项目开发环境, 没有必要追求完全一致... 虚拟环境配置 使用virtualenv创建虚拟...

  • Django + uwsgi + nginx + bootstr

    Django Model 每一个Django Model都继承自django.db.models.Model 在M...

  • Django + uwsgi + nginx + bootstr

    Admin简介 Django有一个优秀的特性, 内置了Django admin后台管理界面, 方便管理者进行添加和...

  • Django + uwsgi + nginx + bootstr

    网页程序的逻辑 request进来->从服务器获取数据->处理数据->把网页呈现出来 url设置相当于客户端向服务...

  • Django + uwsgi + nginx + bootstr

    添加多说 在Django1.5版本前是有内置的评论系统的, 不过现在已经放弃使用了, 在国内比较常用的是多说, 在...

  • Django + uwsgi + nginx + bootstr

    搜索功能 搜索功能的实现设计: 前段界面输入搜索关键字, 传送到对应view中 在对应的view中进行数据库关键字...

  • Django + uwsgi + nginx + bootstr

    Django是一个全面型框架, 很多功能都可以直接找到, 对于RSS功能, 可以从其中的高层框架的聚合Feed框架...

  • Django + uwsgi + nginx + bootstr

    项目地址 my_blog Demo博客基本建好了, 未来我们还有更多的工作要做: 将view封装到类中 重写增删改...

网友评论

    本文标题:Django + uwsgi + nginx + bootstr

    本文链接:https://www.haomeiwen.com/subject/wdilhttx.html