Python项目:Django 设置应用程序的样式并进行部署

简介: Python项目:Django 设置应用程序的样式并进行部署

文章目录

设置项目样式

Django-bootstrap3 应用程序

使用 bootstrap 设置项目样式

修改 base.html

使用 jumbotron 设置主页样式

设置登录页面的样式

设置 `new_topic` 页面的样式

设置 `topics` 页面样式

设置 `topic` 页面中条目样式

小结


前面已经基本实现了使用 Django 搭建 Web 应用程序项目“学习笔记”:


  • Django入门项目搭建
  • Django构建Web应用程序添加用户管理

经过前面两步,目前项目功能基本完备,但是黑没有设置样式,并且运行也仅仅只能在本地计算机上运行。

现在,就开始以一种简单的方式设置项目样式,并将其部署到网络服务器上,以方便大家进行访问。


设置样式,将用到 bootstrap 库,这是一组工具,用于为 Web 应用程序设置样式,使得其能够在任何现代设备上都看起来很专业,无论是大型平板还是智能手机。


设置项目样式

之前开发项目仅仅考虑到它的功能性,而没用关注样式设置的问题。这是因为能够正确运行的应用程序才是更重要的,但是当程序能够正确运行后,外观也就很重要了。

接下来,将简单介绍一下关于应用程序 Django-bootstrap3 ,并将其继承到项目中,为部署项目做准备。


Django-bootstrap3 应用程序

将使用 Django-bootstrap3 将 bootstrap 继承到项目中。这个应用程序下载必要的 bootstrap 文件,将它们放在项目的合适位置,能够使得在项目的模版中使用样式设置指令。


安装 Django-bootstrap3.(使用pip)


<.../Scripts> .\python.exe -m pip install --upgrade pip 
<...\Scripts> .\pip3.8.exe install django-debootstrap3                                                                                                                 ERROR: Could not find a version that satisfies the requirement django-debootstrap3
ERROR: No matching distribution found for django-debootstrap3
PS F:\Python实验\实例代码\AlienInvasion\项目(Django)\learning_log_20\11_env\Scripts> .\pip3.8.exe install django-bootstrap3                                                                                                                   Collecting django-bootstrap3
  Downloading django_bootstrap3-14.2.0-py3-none-any.whl (23 kB)
Requirement already satisfied: django<4.0,>=2.2 in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\django-3.1.3-py3.8.egg (from django-bootstrap3) (3.1.3)
Requirement already satisfied: asgiref<4,>=3.2.10 in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\asgiref-3.3.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (3.3.1)
Requirement already satisfied: pytz in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\pytz-2020.4-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (2020.4)
Requirement already satisfied: sqlparse>=0.2.2 in f:\python实验\实例代码\alieninvasion\项目(django)\learning_log_20\11_env\lib\site-packages\sqlparse-0.4.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (0.4.1)
Installing collected packages: django-bootstrap3
Successfully installed django-bootstrap3-14.2.0


接下来,需要在 learning_log/settings.py 中的 INSTALLED_APPS 中添加应用程序:


# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #第三方应用
    'bootstrap3',
    #   自定义应用
    'learning_logs',
    # 账户管理应用
    'users',
]


添加 bootstrap3 应用程序名称,我们需要使得 Django-bootstrap3 包含 jQuery ,这是一个 JavaScript 库,能够使用 bootstrap 模版提供的一些交互元素。所以在 settings.py 末尾添加如下代码:


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
LOGIN_URL = '/users/login/'
#django-bootstrap3 设置
BOOTSTRAP3={
    'include_jquery':True,
}



添加这样的代码将使得不需要手动下载 jQuery 并能够正确使用。


使用 bootstrap 设置项目样式

bootstrap 基本上就是一个大型的样式设置工具集,还提供了大量的模版,你可将它们应用于项目以创建独特的总体风格。对bootstrap初学者来说,这些模版比各个样式设置工具使用起来要容易得多。要查看bootstrap提供的模版,可以访问:getbootstrap ,单击 Get started ,往下能找到 Examples 部分,并找到 Navbars in action ,这里将使用模版 Static top navbar ,它能提供了简单的顶部导航条、页面标题和用于放置页面内容的容易。

2020120420375754.png20201204203742594.png


修改 base.html

现在就需要修改 base.html 模版文件,以使用前述 bootstrap 模版。现在将 base.html 分为以下几部分分别修改:


  1. 定义 HTML 头部

对于 base.html 所做的第一项修改,首先需要在文件中定义 HTML 头部,使得显示“学习笔记”的每个页面时,浏览器标题栏都显示这个网站的名称。此外还需要添加一些在模版中使用 bootstrap 所需要的信息。删除 base.html 的全部代码,输入下面的代码:

{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learning Log</title>
  {% bootstrap_css %}
  {% bootstrap_javascript %}
  </head>


  1. 定义导航栏

下面就需要来定义页面顶部的导航栏:

<body>
  <!-- Static navbar -->
  <nav class="navbar navbar-default navbar-static-top">
   <div class="container">
     <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#navbar"
     aria-expanded="false" aria-controls="navbar">
       </button>
    <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
        Learning Log</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
    </ul>
    <ul class="navbar-nav navbar-right">
      {% if user.is_authenticated %}
     <li><a>Hello, {{ user.username }}.</a></li>
     <li><a href="{% url 'users:logout' %}">log out</a></li>
    {% else %}
     <li><a href="{% url 'users:register' %}">register</a></li>
     <li><a href="{% url 'users:login' %}">log in</a></li>
    {% endif %}
    </ul>
  </div><!--/.nav-collapse -->
      </div>
  </nav>


  1. 定义页面的主要部分

剩余部分就是包含页面的主要部分:


<div class="container">
   <div class="page-header">
     {% block header %}{% endblock header %}
   </div>
   <div>
     {% block content %}{% endblock content %}
   </div>
  </div><!-- /container -->
  </body>
</html>


使用 jumbotron 设置主页样式

下面使用新定义的 header 块及另一个名为 jumbotron 的 bootstrap 元素修改主页。 jumbotron 元素是一个大框,相比于页面的其他部分显得很独特,想要在其中包含任何东西都是可以的;通常用于在主页中呈现项目的简要描述。修改 index.html 内容如下:


{% extends "learning_logs/base.html" %}
{% block header %}
  <div class='jumbotron'>
    <h1>Track your learning.</h1>
  </div>
{% endblock header%}
{% block content %}
  <h2>
    <a href="{% url 'users:register' %}">Register an account</a> to make your own Learning Log, and list the topics ypu're learning about.
  </h2>
  <h2>
    Whenever you learn something new about a topic, make an entry summarizing what you're learned
  </h2>
{% endblock content %}


设置登录页面的样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>Log in to your account.</h2>
{% endblock header %}
{% block content %}
  <form method="post" action="{% url 'users:login' %} class="form">
    {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
   <button name="submit" class="btn btn-primary">log in</button>
  {% endbuttons %}
  <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
  </form>
{% endblock content %}

20201206084442935.png

设置 new_topic 页面的样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>Add a new topic:</h2>
{% endblock header %}
{% block content %}
  <p>Add a new topic:</p>
  <form action="{% url 'learning_logs:new_topic' %}" method='post' class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
  {% buttons %}
   <button name="submit" class="btn btn-primary">add topic</button>
  {% endbuttons %}
  </form>
{% endblock content %}

20201206084442935.png

设置 topics 页面样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h1>Topics</h1>
{% endblock header %}
{% block content %}
  <ul>
    {% for topic in topics %}
   <li>
     <h3>
    <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
  </h3>
   </li>
  {% empty %}
   <li>No topics have been added yet.</li>
  {% endfor %}
  </ul>
  <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3>
{% endblock content %}

20201206084506400.png20201206084547257.png

设置 topic 页面中条目样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>{{Topic}}</h2>
{% endblock header %}
{% block content %}
  <p>
    <a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a>
  </p>
  {% for entry in entries %}
    <div class="panel panel-default">
   <div class="panel-heading">
     <h3>
    {{ entry.date_added|date:'M d, Y H:i' }}
    <small>
      <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
    </small>
  </h3>
   </div>
   <div class="panel body">
     {{ entry.text|linebreaks }}
   </div>
  </div><!-- panel -->
  {% empty %}
   There are no entries for this topic yet.
  {% endfor %}
{% endblock content %}


20201206084604325.png20201206084630921.png20201206084642208.png

小结

本篇在前面的Django初始项目基础上,完成了样式的修改,这里使用 bootstrap3 的样式进行修改,通过这样的方式可以参考 bootstrap3 的网站其他样式书写方式编写自己喜欢的显示样式。


本篇最终实现了 “学习笔记” 的效果显示优化,在完成了Web应用的完整开发后,下面就需要将项目移交部署到服务器上以方便大家访问了。(Django项目服务器部署操作请看下一篇内容——会保持积极更新)


*项目中编写的代码已保存到GitHub上供大家参考:GitHub项目


相关文章
|
25天前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
24天前
|
存储 数据可视化 数据挖掘
Python数据分析项目:抖音短视频达人粉丝增长趋势
Python数据分析项目:抖音短视频达人粉丝增长趋势
|
27天前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
28 4
|
2月前
|
IDE 关系型数据库 MySQL
Django学习一:创建Django框架,介绍Django的项目结构和开发逻辑。创建应用,编写主包和应用中的helloworld
这篇文章是关于如何创建一个Django框架,介绍Django的项目结构和开发逻辑,并指导如何创建应用和编写“Hello, World!”程序的教程。
95 3
Django学习一:创建Django框架,介绍Django的项目结构和开发逻辑。创建应用,编写主包和应用中的helloworld
|
1月前
|
弹性计算 Linux iOS开发
Python 虚拟环境全解:轻松管理项目依赖
本文详细介绍了 Python 虚拟环境的概念、创建和使用方法,包括 `virtualenv` 和 `venv` 的使用,以及最佳实践和注意事项。通过虚拟环境,你可以轻松管理不同项目的依赖关系,避免版本冲突,提升开发效率。
89 3
|
2月前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
75 1
|
2月前
|
机器学习/深度学习 人工智能 算法
【玉米病害识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练
玉米病害识别系统,本系统使用Python作为主要开发语言,通过收集了8种常见的玉米叶部病害图片数据集('矮花叶病', '健康', '灰斑病一般', '灰斑病严重', '锈病一般', '锈病严重', '叶斑病一般', '叶斑病严重'),然后基于TensorFlow搭建卷积神经网络算法模型,通过对数据集进行多轮迭代训练,最后得到一个识别精度较高的模型文件。再使用Django搭建Web网页操作平台,实现用户上传一张玉米病害图片识别其名称。
72 0
【玉米病害识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练
|
2月前
|
机器学习/深度学习 算法框架/工具 Python
基于深度学习的手写数字识别项目GUI(Deep Learning Project – Handwritten Digit Recognition using Python)
基于深度学习的手写数字识别项目GUI(Deep Learning Project – Handwritten Digit Recognition using Python)
101 0
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
168 45
|
1月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
58 2