在Google Colab的Django服务器中实现HTML页面数据交互的问题

1. 修复视图函数核心错误 #

你的视图函数存在两处关键错误，直接导致页面渲染和数据获取失败：

from django.shortcuts import render

# 修正后的home视图
def home(request):
    # 第二个参数是模板文件名，而非完整URL，Django会自动从模板目录查找
    return render(request, 'home.html')

# 修正后的result视图
def result(request):
    # 注意是request.GET（大写GET），而非request.Get
    no1 = int(request.GET.get('no1', 0))  # 增加默认值避免空值报错
    no2 = int(request.GET.get('no2', 0))
    answer = no1 + no2
    # 同样使用模板文件名，而非URL
    return render(request, 'result.html', {'answer': answer})

• 要点：render函数的第二个参数是模板文件的相对路径，Django会根据settings.py中的配置自动查找模板，不需要写完整URL。
• 给request.GET.get添加默认值（如0），可避免用户未输入值时出现类型转换错误。

2. 配置模板目录 #

1. 在Django项目根目录创建templates文件夹，将home.html和result.html放入其中。
2. 打开settings.py，修改TEMPLATES中的DIRS配置，指向模板文件夹：

TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / 'templates'],  # 让Django能找到模板文件
        'APP_DIRS': True,
        ...
    },
]

3. 设置URL映射 #

打开项目根目录的urls.py，添加视图对应的URL规则：

from django.contrib import admin
from django.urls import path
from .views import home, result  # 导入你的视图函数

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home, name='home'),  # 根路径指向首页
    path('result/', result, name='result'),  # 结果页路径
]

4. 正确配置Colab中的Django服务器 #

4.1 修正ALLOWED_HOSTS #

在settings.py中设置：

ALLOWED_HOSTS = ['*']  # 允许所有主机访问，适配Colab环境

4.2 启动服务器的正确命令 #

在Colab单元格执行：

python manage.py runserver 0.0.0.0:8000

• 用0.0.0.0代替127.0.0.1，让服务器监听所有网络接口，Colab代理才能访问到。
• 执行后，Colab会生成一个代理链接，必须通过这个链接访问应用，不能用http://127.0.0.1:8000。

5. 确保模板表单配置正确 #

home.html中的表单要指向result路径，示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
</head>
<body>
    <form action="/result/" method="GET">
        <input type="number" name="no1" placeholder="输入数字1">
        <input type="number" name="no2" placeholder="输入数字2">
        <button type="submit">求和</button>
    </form>
</body>
</html>

• action="/result/"确保表单提交到配置的结果视图路径。
• method="GET"对应视图中用request.GET获取参数。

6. 结果页展示求和结果 #

result.html通过模板变量展示计算结果：

<!DOCTYPE html>
<html>
<head>
    <title>求和结果</title>
</head>
<body>
    <h1>求和结果：{{ answer }}</h1>
    <a href="/">返回首页</a>
</body>
</html>

测试步骤 #

1. 按上述步骤修改所有代码和配置。
2. 在Colab执行启动服务器的命令。
3. 点击Colab生成的代理链接进入首页。
4. 输入两个数字，点击求和按钮，即可跳转到结果页查看计算结果。

内容的提问来源于stack exchange，提问作者Mario