全面升级登录注册，添加个人主页功能

本文主要是介绍全面升级登录注册，添加个人主页功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先说明：登录注册都是我下载的模板，加以调整。

本次更新的主要内容是新增了个人主页功能。

登录用户点击 ‘我的’ 选项可进入自己的个人主页。

游客身份不可查看用户信息，避免信息泄露（我主要是玩爬虫的），后续添加，已登录用户可互相查看。（重要信息需点击。依靠js加载。）

全面升级登录注册页面，可在登录页跳往注册页，反之亦然。重点是变好看了。

还有static文件夹的使用，网上的教程看得我头疼。

这里记一个static的使用

首先，在你的settings.py里：

# 静态文件夹路径
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')
]

然后，看看层级目录：

看好同级结构。

在我的static下有一个Myapp是针对Myapp应用的，因为你可能做得够大的话还会有别的应用。

然后，在html里引用css或js，这里给出我的登录html

{% load static %}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>登录</title><link rel="stylesheet" href="{% static 'Myapp/css/login.css' %}" />
<style type="text/css">
<!--
a:link {
font-size: 12px;
color: white;
text-decoration: none;
}
a:visited {
font-size: 12px;
color: white;
text-decoration: none;
}
a:hover {
font-size: 12px;
color: white;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<main><form class="form" method="post">{% csrf_token  %}<div class="form__cover"></div><div class="form__loader"><div class="spinner active"><svg class="spinner__circular" viewBox="25 25 50 50"><circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"></circle></svg></div></div><div class="form__content"><h1>欢迎</h1><div class="styled-input"><input type="text" name="username" class="styled-input__input"><div class="styled-input__placeholder"><span class="styled-input__placeholder-text">昵称</span></div><div class="styled-input__circle"></div></div><div class="styled-input"><input type="password" name="password" class="styled-input__input"><div class="styled-input__placeholder"><span class="styled-input__placeholder-text">密码</span></div><div class="styled-input__circle"></div></div><button type="submit" value="登录" class="styled-button"><span class="styled-button__real-text-holder"><span class="styled-button__real-text">登录</span><span class="styled-button__moving-block face"><span class="styled-button__text-holder"><span class="styled-button__text">登录</span></span></span><span class="styled-button__moving-block back"><span class="styled-button__text-holder"><span class="styled-button__text">登录</span></span></span></span></button><button type="button" value="注册" class="styled-button"><span class="styled-button__real-text-holder"><span class="styled-button__real-text"><a href="http://127.0.0.1:8000/register/">注册</a></span><span class="styled-button__moving-block face"><span class="styled-button__text-holder"><span class="styled-button__text"><a href="http://127.0.0.1:8000/register/">注册</a></span></span></span><span class="styled-button__moving-block back"><span class="styled-button__text-holder"><span class="styled-button__text"><a href="http://127.0.0.1:8000/register/">注册</a></span></span></span></span></button></div></form>
</main><script type="text/javascript" src="{% static 'Myapp/js/login.js' %}"></script>{% if info %}<script>window.alert('{{ info }}');</script>
{% endif %}
</body>
</html>

划重点：

1，{% load static %}

2，<link rel="stylesheet" href="{% static 'Myapp/css/login.css' %}" />

3，<script type="text/javascript" src="{% static 'Myapp/js/login.js' %}"></script>

然后，个人页面的各个代码：

models.py

class UserInfo(models.Model):# 用户名username = models.CharField(max_length=20,verbose_name='用户名')# 联系方式userphone = models.CharField(max_length=11,verbose_name="联系方式")# 头像链接userimg = models.CharField(max_length=2000,verbose_name="头像链接")# 地址useraddress = models.CharField(max_length=200,verbose_name="地址")# 用户类型usercate = models.CharField(max_length=20,verbose_name="用户类型")# 用户简介userdetail = models.CharField(max_length=1000,verbose_name='简介')def __str__(self):return self.usernameclass Meta:db_table = 'userinfo'

views.py

def profile(request,username):name = request.useruser = UserInfo.objects.filter(username=name).first()if user:return render(request, 'Myapp/profile.html', {'user':user})return HttpResponseRedirect('/tologin/')

urls.py:

from django.urls import path
from . import viewsurlpatterns = [#主页，用来显示类别等其他数据path('',views.index),# 登录path('tologin/',views.tologin),# 注册path('register/',views.register),# 注销path('lagout/',views.lagout),# 个人主页path('profile/<str:username>',views.profile),
]

profile.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>个人主页</title>
</head>
<body>
<p><div style="width:100px; height:100px; border-radius:100%; overflow:hidden;"><img src="{{ user.userimg }}"></div>
</p>
<p>昵称：{{ user.username }}
</p>
<p>联系方式：{{ user.userphone }}
</p>
<p>地址：{{ user.useraddress }}
</p>
<p>用户类型：{{ user.usercate }}
</p>
<p>简介：{{ user.userdetail }}
</p>
</body>
</html>

效果：

主页：我很low：