Skip to main content

10.用弹窗优化用户体验：新增不一定非要跳页面

学到这里，你会发现学生管理和班级管理功能非常类似，实现方式也是类似。

但做到这一步，很多同学都会开始有一个新的焦虑：

“功能是有了，但怎么感觉体验不好”

尤其是这样一个场景👇 当我们点击「新增」按钮的时候：

  • 页面直接跳走
  • 用户上下文被打断
  • 体验非常“生硬”

对比下面2种方式，你跟喜欢哪一个呢？我想大多数人会选择下面的方式。

image-20260105131356718

image-20260108094308071

所以这一节，我们不再写 Django， 而是做一件非常 Web、非常真实项目的事情：

用弹窗的方式来完成新增操作。

1.先稳住：弹窗不是后端的事​

我先帮你卸一个心理包袱。

很多新手一听“弹窗”，第一反应是：

“是不是 Django 又有新用法了？” “是不是要写很复杂的后端逻辑？”

答案是：完全不是。

弹窗这件事， 100% 是前端的事情。

也就是说：

  • 不改数据库
  • 不改模型
  • 不影响你前面写的任何视图

我们只是换一种“展示方式”。

2.为什么不用原生 alert？​

我们先看最原始的方式。

用 JavaScript 的 alert()， 一行代码就能弹：

alert("Hello World")

但问题也很明显：

  • 丑
  • 简陋
  • 不可定制
  • 项目中几乎不用

所以在真实项目中，我们都会选择现成的 UI 插件。

image-20260104181814851

3.我们选用 SweetAlert2​

市面上弹窗插件很多。但我选择 SweetAlert2，原因只有几个：

  1. 效果好，看起来像“正经系统”
  2. 文档清晰，新手能直接抄
  3. 不依赖框架（和 Django 完全不冲突）
  4. 后面做「上传 Excel」时还能继续用

打开它的官网，你可以先别看文档，直接看 Demo。

网址：https://sweetalert2.github.io/

你会发现它支持的东西非常多：

  • 成功 / 错误 / 警告 / 问号
  • HTML 内容
  • 动画
  • 表单
  • 文件上传
  • 不同弹出位置

image-20260104182036998

image-20260104182109392

image-20260104182221974

这一步我一般都会和小伙伴说一句话：

别急着学，用到哪一个，抄哪一个。

4.安装方式：我们选最“教学友好”的​

SweetAlert2 有很多安装方式：

  • NPM
  • CDN
  • 框架集成

但在教学阶段，我刻意不选 NPM。

原因很简单：

你现在最重要的是理解“它怎么工作”， 不是“工程化怎么配置”。

所以我们直接用 本地文件引入。

我已经提前准备好了两个文件：

  • sweetalert2.css
  • sweetalert2.js

你只需要记住一句话：

CSS 负责样式，JS 负责弹窗逻辑。

5.用一个最小 HTML 验证弹窗是否能跑​

我们先不着急将它加入学生管理系统项目，先来测试玩玩。这也是我一致秉持的学习方法：

学习新知识时，先做一个小demo，跑通了没问题，最后再整合到项目中。

在桌面创建一个文件夹，例如test，新建一个文件index.html, 引入前面准备好的sweetalert.css和sweetalert.js。目录结构如下：

test/
└── index.html
└── sweetalert.css
└── sweetalert.js

在index.html中先把基础结构搭好：

<link rel="stylesheet" href="sweetalert2.css">
<script src="sweetalert2.js"></script>

然后在 body 里放一个按钮：

<button id="click-me">点我一下</button>

这一步的目的只有一个：

确认 SweetAlert 能不能正常工作。

6.第一段 JS：点按钮 → 弹窗​

接下来我们要写 JavaScript 了。

如果你没学过 JS，先别慌。 这一段代码，我只要求你做到一件事：

能看懂“它在干嘛”。

<script>
document.getElementById('click-me').addEventListener('click', function () {
    Swal.fire({
        title: '提示',
        text: '这是一个弹窗',
        icon: 'success'
    })
})
</script>

【代码解析】

  1. 找到 ID 叫 click-me 的按钮
  2. 监听它的点击事件
  3. 点击后，调用 SweetAlert 的弹窗方法

如果你此时打开浏览器：

  • 页面有按钮
  • 点击后弹窗出现

👉 说明你已经成功接入插件了。

如下图所示。

image-20260104183926907

**说明:**尝试把代码中的icon: 'success'修改为icon: 'errro',看看会发生什么变化。

7.真正的重点：在弹窗里放“一个页面”​

到这里，其实才刚刚进入重点。

前面的弹窗内容都很简单，但我们真实项目中要干什么？

👉 新增学生 / 新增班级 / 填一大堆表单。

如果你把所有 HTML 都写在 JS 里：

  • 难维护
  • 难看
  • 极其痛苦

所以我们换一种思路。

8.用 iframe 把“完整页面”塞进弹窗​

SweetAlert 支持 HTML，那我们直接在 HTML 里放一个。例如我们新建一个student_form.html文件，此时目录结果如下：

test/
└── index.html
└── student_form.html
└── sweetalert.css
└── sweetalert.js

Student_form.html代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>添加学生</title>
	<link rel="stylesheet" href="sweetalert2.css">
	<script src="sweetalert2.js"></script>
</head>
<body>
<div>
	<h1>添加学生信息</h1>
	<form>
		<div>
			<label>学号:</label>
			<input type="text" name="student_number"> 
		</div>
		<div>
			<label>姓名:</label>
			<input type="text" name="student_number"> 
		</div>
		<div>
			<label>选择班级：</label>
			<select name='grade_number'>
				<option value='x0101'>1年1班</option>
				<option value='x0102'>1年2班</option>
			</select>
		</div>
		<button>提交</button>
	</form>
</div>

</body>
</html>

直接访问时，页面效果如下图。 image-20260104184855054

现在我们想在index.html页面中，点击新增学生按钮，以弹窗形式弹出student_form.html页面。我们可以在index.html页面中这样操作：

<iframe src="student_form.html"
        width="100%"
        height="800px"
        frameborder="0">
</iframe>

这一刻你要意识到一件事：

弹窗里显示的，其实是一个“完整页面”。

  • 它可以是 Django 模板
  • 可以有表单
  • 可以提交数据
  • 可以复用你之前写的视图

这一步，是前后端真正开始配合的地方。

9.控制弹窗位置和尺寸​

比如你想让弹窗从右上角出来：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>测试SweetAlart2</title>
	<link rel="stylesheet" href="sweetalert2.css">
	<script src="sweetalert2.js"></script>
</head>
<body>
<div>
	<button id="click-me">点我一下</button>
	<button id="add_student">新增学生</button>
</div>

<script>
document.getElementById('click-me').addEventListener('click', function () {
    Swal.fire({
        title: '提示',
        text: '这是一个弹窗',
        icon: 'success'
    })
})

document.getElementById('add_student').addEventListener('click', function () {
	Swal.fire({
	    html: '<iframe src="student_form.html" width="400px" height="200px" frameborder="0"></iframe>',
	    position: 'top-end',
	    width: 600,
	    showConfirmButton: false
	})
})
</script>

</body>
</html>

这一刻你会明显感觉到：

“这已经不像 Demo 了。”

image-20260104191002734

**说明：**参考SweetAlert2官网中的参数说明，尝试修改Swal.fire()中的各种参数。

本章小结：你现在多了一种“打开页面”的方式​

到这里，你已经学会了：

  • 为什么项目里不用原生 alert
  • SweetAlert2 的基本使用方式
  • 如何用 iframe 在弹窗中展示完整页面
  • 为后续“弹窗新增学生 / 班级”打基础

更重要的是，你应该开始意识到一件事：

前端的展示方式，是可以完全不影响后端逻辑的。

你现在立刻可以做的 3 件事（一定要做）​

别只看，马上动手：

  1. 把新增班级的页面，放进弹窗里试一下
  2. 调整 iframe 高度，看看效果差异
  3. 思考一个问题： 👉 删除确认，是不是也可以用弹窗？

下一节，我们就把这个弹窗 真正接入 Django 页面，而不是本地 HTML。

到那一步，你的项目体验会再上一个台阶。

好，这一节我们就到这里。 小伙伴们，下节再见 👋

【大熊课堂精品课程】
Python零基础入门动画课: https://www.bilibili.com/cheese/play/ss7988
Django+Vue：全栈开发: https://www.bilibili.com/cheese/play/ss8134
PyQT6开发桌面软件: https://www.bilibili.com/cheese/play/ss12314
Python办公自动化: https://www.bilibili.com/cheese/play/ss14990
Cursor AI编程+MCP：零基础实战项目课: https://www.bilibili.com/cheese/play/ss105194189
Pandas数据分析实战: https://www.bilibili.com/cheese/play/ss734522035
AI大模型+Python小白应用实战: https://www.bilibili.com/cheese/play/ss3844