2025-09-05
今天主要两个事，一是优化下用户注册、登录、主页界面，二是搞清楚Django里前端和后端是怎么传输数据的和交互的。
因为优化界面主要是调教GPT来完成，所以不再赘述。
目前主要四个页面，base/login/register/home。
{{ user.username }}显然就是调用的名称。不过我的视图里home_views似乎没有返回参数……
{% extends "customer/base.html" %}
{% block title %}主页 - 喵喵CRM{% endblock %}
{% block content %}
<div style="text-align: center; padding: 50px 20px; max-width: 800px; margin: 0 auto;">
<h2>欢迎来到 喵喵CRM</h2>
<p style="font-size: 18px; color: #555;">你好，{{ user.username }}！这是你的个人主页。</p>
<div style="margin-top: 30px;">
<a href="{% url 'logout' %}" style="padding: 12px 20px; font-size: 18px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px;">登出</a>
</div>
</div>
{% endblock %}
# views
def home_view(request):
return render(request, "customer/home.html")
找Claude问了下（呜呜呜，GPT老师今天宕机了~），大概是因为user会被中间件直接传递，不需要手动传递，其他的参数或者字符串如果用的话需要手动传递。
# views
def register_view(request):
if request.method == "POST":
username = request.POST["username"]
password = request.POST["password"]
confirm_password = request.POST["confirm_password"]
form_errors = {} # 存储各种错误类型
# 用户名检查
if not username:
form_errors["username"] = "用户名不能为空！"
elif User.objects.filter(username=username).exists():
form_errors["username"] = "用户名已存在！"
# 密码检查
if not password:
form_errors["password"] = "密码不能为空！"
elif len(password) < 8:
form_errors["password"] = "密码不能少于8位！"
elif has_multiple_char_types(password):
form_errors["password"] = "密码需要大写、小写、数字、特殊符号组合！"
# 确认密码检查
if password != confirm_password:
form_errors["confirm_password"] = "两次密码输入不一致"
if form_errors:
# 如果有错误，返回注册页并传递错误信息
return render(request, "customer/register.html", {"form_errors": form_errors})
User.objects.create_user(username=username, password=password)
messages.success(request, "注册成功，请登录！")
return redirect("login")
页面的代码如下
{% extends "customer/base.html" %}
{% block title %}注册 - 喵喵CRM{% endblock %}
{% block content %}
<div style="max-width: 400px; margin: 0 auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<h2 style="text-align: center;">注册</h2>
<form method="post">
{% csrf_token %}
<!-- 用户名 -->
<div style="margin-bottom: 15px;">
<label for="username" style="display: block; margin-bottom: 5px; color: #555;">用户名</label>
<input type="text" name="username" id="username" value="{{ request.POST.username }}" required
style="width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px;">
{% if form_errors.username %}
<div style="color: red; font-size: 14px; margin-top: 5px;">{{ form_errors.username }}</div>
{% endif %}
</div>
<!-- 密码 -->
<div style="margin-bottom: 15px;">
<label for="password" style="display: block; margin-bottom: 5px; color: #555;">密码</label>
<input type="password" name="password" id="password" required
style="width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px;">
{% if form_errors.password %}
<div style="color: red; font-size: 14px; margin-top: 5px;">{{ form_errors.password }}</div>
{% endif %}
</div>
<!-- 确认密码 -->
<div style="margin-bottom: 15px;">
<label for="confirm_password" style="display: block; margin-bottom: 5px; color: #555;">确认密码</label>
<input type="password" name="confirm_password" id="confirm_password" required
style="width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px;">
{% if form_errors.confirm_password %}
<div style="color: red; font-size: 14px; margin-top: 5px;">{{ form_errors.confirm_password }}</div>
{% endif %}
</div>
<button type="submit" style="width: 100%; padding: 12px; font-size: 18px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">注册</button>
</form>
</div>
{% endblock %}
这个是urls.py的代码：
from django.urls import path
from . import views
urlpatterns = [
path("register/", views.register_view, name="register"),
path("login/", views.login_view, name="login"),
path("logout/", views.logout_view, name="logout"),
path("home/", views.home_view, name="home"),
]
我们简单梳理下逻辑，用户在浏览器输入网址访问注册页面，Django收到请求（GET）， 查找路由（urls.py），找到了views.register，跳转到这个函数。因为是GET，所以不走POST那些代码，直接return注册的页面，也就是register.html。
然后用户填写用户名和密码，提交（POST），Django还是找到views.register，不过这次是POST，所以走POST相关的代码。
POST相关的代码中，做出判断，如果有errors，则返回注册的页面，并且返回form_errors错误参数，而如果没有errors，调用User把数据保存到数据库（此处User是Django内置模型类），然后重定向到登录页面。
render一般是直接返回页面，URL网址不会改变，而redirect则是需要重新跳转到另一个页面，URL网址会发生变化。而且有个有趣的点，就是返回页面内容，render是路径，而redirect则是名称。
render渲染模板文件
需要找到具体的 HTML 模板文件
模板路径是文件系统中的真实路径
"customer/register.html" 对应 templates/customer/register.html
redirectURL 跳转
需要生成一个可访问的 URL
URL name 会通过 urls.py 解析成实际路径
"login" 通过 name='login' 解析成 /login/
其他几个页面类似，就不在看了。