Django基础篇--上下文处理器和前端代码复用

最新推荐文章于 2024-09-13 20:10:33 发布

gengjuan_sunny

最新推荐文章于 2024-09-13 20:10:33 发布

阅读量252

点赞数

分类专栏： django 文章标签： django

本文链接：https://blog.csdn.net/gengjuan_sunny/article/details/110958498

版权

本文介绍了Django中如何利用上下文管理器减少代码冗余，详细阐述了上下文管理器的工作流程及配置方法。同时，探讨了前端公共代码复用策略，通过创建base.html模板和使用block标签实现不同页面间的代码共享。

摘要由CSDN通过智能技术生成

一、上下文管理器

在views中重复使用的代码，可以通过上下文管理器（在setting.py文件中的TEMPLATES中配置）中实现，减少代码冗余

上下文管理器的处理流程如下：

先走完views里面的代码，将结果返回给前端
然后再将上下文的结果返回给前端
上下文只有在返回的是html的时候，才会走上下文处理器

当views和上下文处理器中都定义了的变量值，那么HTML页面中以views中定义的为准。

1.1 上下文context_process.py代码

from . import models
def category_process(request):
    #  先走到views，然后在走到setting中的TEMPLATES上下文管理器中
    categories = models.Category.objects.all()
    return {
   'title': 'XXX博客', 'categories': categories}

1.2 setting.py文件中的配置

#做前后端不分离时,TEMPLATES有用
TEMPLATES = [
    {
   
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],#这里设置templates目录
        'APP_DIRS': True,
        'OPTIONS': {
   
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'user.context_process.Total_tittle',
                'user.context_process.tag_process',
            ],

1.3 然后对html页面标签变量进行更改

二、前端公共代码复用

前端很多代码是在不同页面中都是一样的，每个都去修改一遍，工作量太大，并且代码重复，所以引入了公共代码复用。

先建立复用代码base.html，如果这一块代码不是公共的，则预留代码块

{% block body%}
//预留代码块，body是唯一
{% endblock %}

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="referrer" content="origin">
    <!-- TDK and ICO -->
    <title>Tend to Code_一个使用django和bootstrap搭建的个人博客_TendCode</title>

    <meta name="description"
          content="TendCode是一个Django搭建的博客，本网站后端使用Django框架搭建，前端使用Bootstrap框架，主要分享博主在Python以及其他编程语言的学习心得。">
    <meta name="keywords" content="Python自学,Python爬虫,Django博客,Python web开发,个人博客">
    <!--站长验证-->

    <link rel="shortcut icon" href="/static/blog/img/favicon.ico" type="image/x-icon"/>
    <!-- Bootstrap and font-awesome CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="/static/js/headroom.min.js"></script>
    <!-- blog CSS -->
    <link href="/static/css/base.css" rel="stylesheet">

    <!--根据cookies判断是否启用暗色主题-->
    {% block css %}
    {% endblock %}
</head>
<body>
<!--导航开始-->

<nav class="navbar navbar-expand-md bg-white fixed-top blog-navbar py-md-0">
    <a class="navbar-brand d-md-none d-lg-block" id="site-logo-name" href="/">
        <strong class="px-2">{
  { title }}</strong>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item mr-2">

                <a class="nav-link py-md-3 active" href="/"><i class="fa fa-home mr-1"></i>首页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item mr-2">

                <a class="nav-link py-md-3 " href="./archive.html"><i class="fa fa-sitemap mr-1"></i>归档</a>
            </li>



            <form class="nav-item navbar-form mr-2 py-md-2" role="search" method="get" id="searchform"
                  action="/search/">
                <div class="input-group">
                    <input type="search