基于Django框架构建 Web 应用【期末作业】———应用创建与网页搭建

本文链接：https://blog.youkuaiyun.com/AnZyr/article/details/148761457

ps:记得吗本文章是在完成课程期末作业为记录而写，如有不足之处欢迎指正

一、前言

一、项目概述

本网页应用旨在通过 Python 技术栈，构建一个功能完善的线上平台能够，实现用户信息管理、内容展示、交互操作等诸多功能，以此作为 Python 所学知识在 Web 开发领域的一次综合实践。

二、技术选型

        后端：选用Python作为核心编程语言，利用其简洁、易读性强的特点，便于快速开发服务端逻辑。并选用 Django 框架，其包含的 ORM 模型、表单验证等功能，更能高效地处理复杂的数据操作和网站架构，适用于大型、功能完备的 Web 应用。
        前端：首先借助HTML格式文件构建网页的基本结构，合理布局页面元素，如导航栏、内容区、侧边栏等。其次通过 CSS3 的新特性，实现页面的美观、动态效果，对网页布局进行精准美化，例如设置响应式布局，使应用在不同尺寸的设备上均能良好展示。最后结合原生 JS 或现代框架（如 Vue.js、React.js），增强网页的交互性，如实现表单校验、动态加载数据、页面局部刷新等功能。
        数据库：选用 MySQL 作为关系型数据库，承载用户数据、内容数据等信息，便于进行复杂查询操作。
        其他工具：Git：用于代码版本管理，团队协作时能有效追踪代码更改、合并分支，保障项目稳定、高效推进。
        PyCharm：作为 Python 的集成开发环境，提供智能代码补全、调试、代码格式化等功能，能大幅提升开发效率，减少代码调试时间。

二、代码部分

在上一节中我们已经搭建好所需要用到的环境，这一节将着重介绍如何借助所搭建的环境来创建Web应用以及网页设计。

(左图是我们已有的项目层级目录右边是对应的文件说明)

一、快速上手Django

我们现已有名叫myApp的项目，借助Django框架我们建立Web应用要快捷很多，首先myApp文件夹下的views.py文件，定义函数welcome：

接着去Terminal终端输入命令python manage.py runserver

出现以下页面显示，说明我们的环境没有什么问题（tips:这里有一个细节）

方框中的（venv）表示我们正在使用一个名叫venv的虚拟环境，由于在前面部分我们将部分库装载到了虚拟环境中，如果不启用虚拟环境会提示部分库找不到的情况，所以在使用前确保自己以正确启用虚拟环境！！！

此处是关于上述细节的一个小插曲

如何启用虚拟环境，如下图所示当我使用deactivate后(venv)消失说明虚拟环境已关闭，如何重新激活/开启呢？

如果你在 Windows 系统上，并且使用的是虚拟环境管理工具如 venv，在虚拟环境目录下的 “Scripts” 文件夹中有 “activate.bat” 文件。你可以通过在终端中输入 “venv\Scripts\activate”（假设你的虚拟环境文件夹是 “venv”）来激活虚拟环境。

类似关闭命令，将deactivate[美[diˈæktɪˌveɪt]，英[diːˈæktɪveɪt]，v. 使（仪器等）停止工作；使失活；网络释义：停用；使无效；去活化；]换成activate[ACTIVATE翻译：启动，开动；激活]即开启虚拟环境。

紧接我们编写URL与视图函数的对应关系——打开urls.py文件，在其中urlpatterns中添加url与函数的映射关系，添加相关导入模块的语句我们是在myApp文件中创建的python文件所以是from myApp 导入什么？一个名叫views的python文件所以是import views，建立什么？WelCome与函数之间的映射所以得到如下内容，并在终端运行python manage.py runserver命令，这是终端会显示一个网址（椭圆形框柱部分），点击进入浏览器：

在网址后缀部分添加我们所映射的路径

即可显示我们之间前所编辑的页面

该页面十分简洁，只有一段“Hello world ”的字符串，但好在他证明了目前我们的环境配置以及程序可以正常运行，后面我们将在此基础上作出进一步优化。

二、网页设计HTML文件的创建

通过向kimi提问什么是Html文件得到如下回答：

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言，以下是详细介绍：

基本构成

标签（Tag） ：由一对尖括号（< 和 >）包裹的单词或字母组合，如<html>、<head>、<body>等，用于定义网页的各个元素和结构。
元素（Element） ：由开始标签、结束标签和它们之间的内容组成，如<p>这是一个段落。</p>，其中<p>是开始标签，</p>是结束标签，“这是一个段落”是元素的内容。
属性（Attribute） ：用于提供有关 HTML 元素的更多关于信息，通常在开始标签中指定，以名称/值对的形式出现，如<a href="https://example.com">链接</a>中的href是属性，其值为https://example.com。

主要作用

网页结构搭建 ：通过各种标签来定义网页的结构，如使用<header>定义页面的头部，<nav>定义导航栏，<main>定义主体内容区域，<footer>定义页脚等。
文本内容呈现 ：可以使用不同的标签对文本进行格式化，如<h1>到<h6>用于定义标题，<p>用于定义段落，<ul>和<ol>用于定义列表等，以使文本内容以合适的样式展示在网页上。
图片与媒体插入 ：使用<img>标签可以在网页中插入图片，通过src属性指定图片的路径或 URL，alt属性提供图片的替代文本。此外，还可以使用<audio>和<video>标签来嵌入音频和视频文件。
超链接创建 ：通过<a>标签创建超链接，使用href属性指定链接的目标 URL，使用户能够从一个网页跳转到另一个网页或页面的特定位置

1.在Django项目下的Django框架

在Django项目中我们通常将Html文件置于templates目录下，这个templates文件夹是我们借助pycharm创建Django项目时自动生成的，我们可以在此目录下（紫色的被标记为Templates的文件夹）创建html文件。（ps:如果你是pure python项目你需要在对应应用文件夹[我这里是myApp]下创建templates文件夹用于存放Html文件）

（当前的目录层级情况）

确保static在对应应用文夹下（此处图片路径高亮并显示找不到对应文件资源，不用管它），不然可能会因为报找不到对应资源文件而发生错误。运行结果如下图所示：

小猫图片以及页面标题都正常显示，OK没有问题。

目前我们的资源文件夹static创建于应用下，当我们只有一个应用时其实也没啥问题，俩个应该也能接受，那如果三个四个呢，通过这种方式创建资源文件夹会产生一个问题，就是资源冗余需要重复创建同一个文件夹static会浪费很多内存资源。所以我们换一种静态资源的引用格式采用load方法。这样我们可以让所用应用共用一个静态资源。现在我们对html代码进行适当修改：

首先将static移动至与myApp同一层级目录下，目录层级及代码修改，需要注意的地方已用红框标识。文件头处插入{% load static %}以及src路径的读取方式有所修改

（后面突然图片不显示了，所以这里在补充一点，以这种方式导入静态资源要配置settings不然后面会报错）

在 settings.py 文件中，你需要配置 STATICFILES_DIRS，以便Django知道在哪里查找静态文件。由于static目录与myApp在同一层级，你可以将它们的路径添加到 STATICFILES_DIRS 中：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),  # 项目根目录下的 static 目录
    os.path.join(BASE_DIR, 'myApp/static'),  # myApp 应用目录下的 static 目录
]

在 Django 模板中，{% load static %} 是一个模板标签，用于加载 static 模板标签库。这个标签库提供了一个方便的方法来生成静态文件的 URL，这些静态文件包括图片、CSS 文件、JavaScript 文件等。通过这种方式我们可以实现静态资源的共享。

此处进行一个小总结，创建网页的流程如下：

1.在urls.py中建立路由 2.在views.py中创建对应的函数 3.在templates下创建tpl.html文件

现在我们已经可以创建最基础的页面了，相较于其他网页我们的网页十分简单一点也不高端，现在我们将做出进一步的优化以及介绍一下其他的东西。

1.css样式

CSS（层叠样式表）是一种用于网页设计的标记语言，主要用于设置HTML文档的样式和布局。CSS 样式可以控制文本颜色、背景图像、字体样式、边距、边框、表格样式、列布局等。在前面有一处的运行结果我嫌显示的图片太大，所以在<img >中加入了style属性

style="height: 600px;width: 960px"

的方式来设置图片的显示大小。除了这种方式外我们还可以设置css样式，在head标签中写style标签（方便样式复用）

然后在img标签行中添加class属性并赋值"img"，调用我们设计的img样式也可以到达s上图中style属性的效果

结尾附上一张多样式共同作用统一标签段的写法

2.BootStrap

目前我们已经知道了，网页组件的样式可以通过style和css的方式来设计。但如果我们想要从零到一的设计好一个网站还是太困难了，需要一步步摸索调整。BootStrap为我们提供了许多组件来帮我们实现网页的快速搭建。

（BootstrapV3中文文档首页）

这里面提供了各种各样的组件、css样式...让我们的网页设计可以变得像搭积木一样简单，如何使用？首先，我们需要点击下载Bootstrap进入下载页面。

下载后保存解压到static目录下

随后在页面上引入Bootstrap

去组件 · Bootstrap v3 中文文档 | Bootstrap 中文网组件中找到一个合适的导航栏，我找到的是这个:

右键检查

选中所需要的这个

按照下图的方式复制，并粘贴到代码中即可：

放入<body>中，刷新页面。

从运行结果中我们可以看到最上面出现了导航栏，说明我们已经成功了，细节我们将在后续进行设计。但如果下来Dropdown我们发现并没有像模板那样出现下拉式菜单，解决方式是引入BootStrap依赖 jQuery（下载地址：jQuery）

JQuery网站首页

单击download jQuery

继续点击download，进入如下页面，右击鼠标另存为。将他保存在static目录下
随后在代码中引入依赖即可实现下拉菜单。

3.前端JavaScript与jQuery

前端开发中，JavaScript 是一种核心编程语言，而 jQuery 是一个基于 JavaScript 的库。它们都有各自的特点和用途。

JavaScript

JavaScript 是一种解释型的、面向对象的脚本语言，主要用于构建网页的交互功能。它是网页开发的三大技术之一，另外两种是 HTML 和 CSS。JavaScript 让网页具有动态交互性，能够操控网页内容、样式以及与用户的交互。

jQuery

jQuery 是一个轻量级的 JavaScript 库，它封装了常见的 JavaScript 操作，使得 HTML 文档的遍历、事件处理、动画和 AJAX 交互更简单。

简单来说：JavaScript，是一门编程语言，浏览器就是JavaScript语言的解释器。jQuery 相当于编程语言的第三方模块，例如python中的numpy、pyecharts等

代码以及运行效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识JavaScript</title>
    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="header" οnclick="myFunc()">大标题</div>
    <div class="item">内容</div>
</div>
<script type="text/javascript">
    function myFunc() {
        //
        alert("你点击了我！");
        confirm("需要继续吗？");
    }
</script>
</body>
</html>

点击大标题部分会显示弹窗“你点击了我！”