首先说明:登录注册都是我下载的模板,加以调整。
本次更新的主要内容是新增了个人主页功能。
登录用户点击 ‘我的’ 选项可进入自己的个人主页。
游客身份不可查看用户信息,避免信息泄露(我主要是玩爬虫的),后续添加,已登录用户可互相查看。(重要信息需点击。依靠js加载。)
全面升级登录注册页面,可在登录页跳往注册页,反之亦然。重点是变好看了。
还有static文件夹的使用,网上的教程看得我头疼。
这里记一个static的使用
首先,在你的settings.py里:
# 静态文件夹路径
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
然后,看看层级目录:
看好同级结构。
在我的static下有一个Myapp是针对Myapp应用的,因为你可能做得够大的话还会有别的应用。
然后,在html里引用css或js,这里给出我的登录html
login.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.username
class Meta:
db_table = 'userinfo'
views.py
def profile(request,username):
name = request.user
user = 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 views
urlpatterns = [
#主页,用来显示类别等其他数据
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:
登录:我是动态的:
注册:我好看
登录后:
个人主页:
其实,上图中红色图案是头像,原图是这样的:https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3100494582,1138448188&fm=26&gp=0.jpg
我还不会改,还在学。编辑资料暂时不支持,后续会更新
然后,最近考虑把它放到git上去,这里太麻烦了。。。
转载:https://blog.csdn.net/s_kangkang_A/article/details/102591674