当前位置：首页 > article >正文

django开发流程2

article 2024/11/17 18:26:09

一，通过视图函数访问html

1.首先导入render

from django.shortcuts import render

2.在mysite下面创建一个目录 templates

3.在mysite下方的settings中修改存放模板的路径

二.添加静态文件

1.在mysite下面创建一个目录 (静态文件) :static

2.自定义静态文件路径

（1）在global_settings.py中找到

自定义静态文件路径

复制到mysite下方的settings

3.在静态文件中添加css, js, img等样式, 并且在index.html中引入静态文件

运行结果如下:

三，添加bootstrap样式

1.创建一个base.html 引入样式

2.引入完之后，需要修改里面css, js路径

base.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    {% block title %}
      <title>轩哥小说网</title>

      {% endblock %}
{% block css %}


{% endblock %}


    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/js/bootstrap-3.4.1-dist/css/bootstrap.min.css">

  </head>

  <body>
  <div class="container-fluid">
    {% include 'base/header.html' %}
  </div>

    <div class="container">
    {% block body %}

    {% endblock %}
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    {% block js %}

    {% endblock %}
  </body>
</html>

3. header.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">小说网站</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" ><a href="/">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">推荐 </a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      {% if not request.user.is_authenticated %}
        <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
        {% else %}
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">{{ request.user.username }}<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">我的收藏</a></li>
            <li><a href="#">个人中心</a></li>
            <li><a href="#">修改密码</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">退出</a></li>
          </ul>
        </li>
        {% endif %}
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

4.修改index.html

{% extends 'base/base.html'  %}


{% block title %}
<title>首页</title>
{% endblock %}


{% block body %}
    <h1>这里是首页</h1>
    {{ cs }}
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                  {% for c in cs %}
                    {% if forloop.first %}
                <li role="presentation" class="active"><a href="#tab{{ c.id }}" aria-controls="{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>

                    {% else %}
                <li role="presentation"><a href="#tab{{ c.id }}" aria-controls="{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>

                    {% endif %}
                  {% endfor %}

              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                   {% for c in cs %}
                    {% if forloop.first %}<div role="tabpanel" class="tab-pane active" id="tab{{ c.id }}">
                    {% else %}
                <div role="tabpanel" class="tab-pane" id="tab{{ c.id }}">
                    {% endif %}
                    <ul class="list-group">
                        {% for b in c.book_set.all %}
                      <li class="list-group-item">
                          <a href="/detail/{{ b.id }}">{{ b.title }}</a>
                      </li>
                        {% endfor %}
                    </ul>

                </div>
                    {% endfor %}



                </div>
              </div>
        </div>
    </div>
{% endblock %}

5.detail.html

{% extends 'base/base.html' %}

{% block title %}
<title>小说网-详情页</title>
{% endblock %}

{% block body %}
<div class="container">
    <h1>这里是{{ book.title }}详情</h1>

</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{ book.title }}</h3>
    </div>
    <div class="panel-body">
        {{ book.pub_date }}
    </div>
</div>

{% endblock %}

6.view.py

from django.http import HttpResponse
from django.shortcuts import render
from .models import Book, Category


def index(request):
    cs = Category.objects.all()
    return render(request, "./main/index.html", context={"cs": cs})


def detail(request, num):
    book = Book.objects.get(id=num)
    return render(request, "./main/detail.html", context={"book": book})


def about(request):
    return HttpResponse("关于我们")

查看全文

http://www.kler.cn/a/324721.html