首页 > 代码库 > [python][django学习篇][9]设计正在博客视图(3)

[python][django学习篇][9]设计正在博客视图(3)

2024-11-24 00:58:02   202人阅读

需求： 真正的首页视图函数，当用户访问我们的博客首页时，他将看到我们发表的博客文章列表，就像 演示项目 里展示的这样。t

https://docs.djangoproject.com/en/1.10/howto/static-files/

  1. 编写博客视图函数
    • 从数据库获取文章的标题，将其作为模板变量传递到模板，所以视图函数 
      • # coding=utf8


from django.shortcuts import render
from django.http import HttpResponse
from .models import Post

# Create your views here.


def index(request):
    post_list = Post.objects.all().order_by(‘-create_time‘)
    return render(request, ‘blog/index.html‘, context={‘post_list‘: post_list})


        Post.objects.all()返回的是QuerySet,一个类似列表的对象，存储所有文章。 order_by排序， -表示逆序表示先显示最近编写的文章（注意要修改index.html）

  2. 处理静态文件（使用网上模板：点我下载）
    • 静态文件的存储文件夹：应用blog目录下static文件夹，在static创建一个blog目录，里面有css 和js两个文件夹，拷贝网上模板代替html加载css 和javaScript文件
    • 暂时使用网上模板的index.html代替原来的template/blog/index.html， 打开网址可以看到首页显示非常混乱，这是因为没有加载css文件成功需要以 Django 的方式来正确地处理 CSS 和 JavaScript 等静态文件的加载路径。CSS 样式文件通常在 HTML 文档的 head 标签里引入
    • 打开网上的index.html 中的<head>标签如下：　　 
      • <!DOCTYPE html>
<html>
<head>
    <title>Black &amp; White</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href=http://www.mamicode.com/"css/bootstrap.min.css">
    <link rel="stylesheet" href=http://www.mamicode.com/"http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href=http://www.mamicode.com/"css/pace.css">
    <link rel="stylesheet" href=http://www.mamicode.com/"css/custom.css">

    <!-- js -->
    <script src=http://www.mamicode.com/"js/jquery-2.1.3.min.js"></script>
    <script src=http://www.mamicode.com/"js/bootstrap.min.js"></script>
    <script src=http://www.mamicode.com/"js/pace.min.js"></script>
    <script src=http://www.mamicode.com/"js/modernizr.custom.js"></script>
</head>


        可以看到css文件都在link 的href属性里面，可以看到诸如 `href="http://www.mamicode.com/css/bootstrap.min.css" 或者 src="http://www.mamicode.com/js/jquery-2.1.3.min.js" 这样的引用，由于引用文件的路径不对，所以浏览器引入这些文件失败。我们需要把它们改成正确的路径

      • 修改后的Html, 
        templates/blog/index.html

+ {% load staticfiles %}
<!DOCTYPE html>
<html>
  <head>
      <title>Black &amp; White</title>

      <!-- meta -->
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- css -->
      - <link rel="stylesheet" href=http://www.mamicode.com/"css/bootstrap.min.css">
      <link rel="stylesheet" href=http://www.mamicode.com/"http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
      - <link rel="stylesheet" href=http://www.mamicode.com/"css/pace.css">
      - <link rel="stylesheet" href=http://www.mamicode.com/"css/custom.css">
      + <link rel="stylesheet" href=http://www.mamicode.com/"{% static ‘blog/css/bootstrap.min.css‘ %}">
      + <link rel="stylesheet" href=http://www.mamicode.com/"{% static ‘blog/css/pace.css‘ %}">
      + <link rel="stylesheet" href=http://www.mamicode.com/"{% static ‘blog/css/custom.css‘ %}">

      <!-- js -->
      - <script src=http://www.mamicode.com/"js/jquery-2.1.3.min.js"></script>
      - <script src=http://www.mamicode.com/"js/bootstrap.min.js"></script>
      - <script src=http://www.mamicode.com/"js/pace.min.js"></script>
      - <script src=http://www.mamicode.com/"js/modernizr.custom.js"></script>
      + <script src=http://www.mamicode.com/"{% static ‘blog/js/jquery-2.1.3.min.js‘ %}"></script>
      + <script src=http://www.mamicode.com/"{% static ‘blog/js/bootstrap.min.js‘ %}"></script>
      + <script src=http://www.mamicode.com/"{% static ‘blog/js/pace.min.js‘ %}"></script>
      + <script src=http://www.mamicode.com/"{% static ‘blog/js/modernizr.custom.js‘ %}"></script>
  </head>
  <body>
      <!-- 其它内容 -->
      - <script src=http://www.mamicode.com/"js/script.js‘ %}"></script>
      + <script src=http://www.mamicode.com/"{% static ‘blog/js/script.js‘ %}"></script>
  </body>
</html>

        为了能在模板中使用 {% static %} 模板标签，别忘了在最顶部 {% load staticfiles %} 。static 模板标签位于 staticfiles 模块中，只有通过 load 模板标签将该模块引入后，才能在模板中使用 {% static %} 标签。

[python][django学习篇][9]设计正在博客视图(3)


联系
我们