Django3.0应用03：设置首页

发表于   |   分类于 Django   |   暂无评论

设置模板及静态网页css等目录

在根目录下新建模板目录templates

并在其中按照Bootstrap教程中的内容，新建index.html文件；

修改setting.py文件中的templates部分中路径部分

'DIRS': [os.path.join(BASE_DIR, 'templates')],

新建静态文件夹static

并在其中新建css，img，images，js，media等文件夹。
修改setting.py文件中的static等路径部分

STATIC_URL = '/static/'
STATIC_ROOT = 'static/'
#STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

配置前端静态页面的URL

打开项目urls.py文件，修改为如下代码：

from django.urls import path, include, re_path
from django.views.static import serve
from gaokao.settings import MEDIA_ROOT,STATIC_ROOT
import xadmin

urlpatterns = [
    path('',include('college.urls')),
    path('xadmin/',xadmin.site.urls ),
    re_path('media/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT}),
    re_path('static/(?P<path>.*)', serve, {"document_root": STATIC_ROOT}),
]

这样就使用college的url设置为网页路径设置。

新建首页

新建base.html,导入Bootstrap

    <!doctype html>
    <html lang="en">
    {% load static %}
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
       
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/simplex/bootstrap.min.css" integrity="sha384-FYrl2Nk72fpV6+l3Bymt1zZhnQFK75ipDqPXK0sOR0f/zeOSZ45/tKlsKucQyjSp" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <title>{% block title%} 高考信息 - 首页{% endblock %}</title>
      </head>
<body>
        <div class="container">        
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="/">高考信息</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarColor03">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="/">首页 <span class="sr-only">(current)</span></a>
                        </li>                    
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        
            <div></div><br>
       
            <div class="row">
                <div class="col-8" >
                    {% block content %}{% endblock %}
                </div>
                <div class="col-4">
                    {% block left %}{% endblock %}
                </div>

            </div>
           
        </div><!-- /.container -->

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
         </body>
</html>

django3.0后使用{% load static %}，而不是原先{% load staticfiles %}

设置college的urls.py

from django.urls import path, include, re_path
from django.views.static import serve
from gaokao.settings import MEDIA_ROOT,STATIC_ROOT
from college.views import IndexView, CollegeDetailView


urlpatterns = [
    path('',IndexView.as_view(), name="index"), 
    re_path('college_detail/(?P<college_code>.*)/', CollegeDetailView.as_view(), name="college_detail"),    
]

设置college的views.py

from django.shortcuts import render
from django.views.generic import View,DetailView
from .models import College
from django.core.paginator import Paginator
# Create your views here.
class IndexView(View):
    def get(self, request):
        # 取出文章分类
        colleges = College.objects.all()[:10]
        return render(request, "index.html", {
           "colleges":colleges,
          
            
        })

class CollegeDetailView(DetailView):
    def get(self, request, college_code):
        college = College.objects.get(code = college_code)

        return render(request, "college-detail.html", {
            "college": college,
           
        })

修改index.html文件

{% extends 'base.html' %}
{% block title %}首页 - 高考信息{% endblock %}
{% block content %}
        <div>
            <div>
                <h3><a href="#">大学</a></h3> 
            </div>           
            <div> 
                {% for college in colleges %}  
                        <div><a href="{% url 'college_detail' college.code %}" target="_blank">{{ college.name }}</a></div>  
                {% endfor %} 
            </div>  
        </div>
       
{% endblock %}

{% block left %}
    <div class="card">        
        
    </div> 
    <div class="card">        
        
    </div>       
{% endblock %}
添加新评论