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

最新推荐文章于 2022-05-28 16:10:41 发布

s_kangkang_A

最新推荐文章于 2022-05-28 16:10:41 发布

阅读量570

点赞数 1

分类专栏： django学习实战文章标签： static 静态文件的使用方法个人主页的实现 django

本文链接：https://blog.csdn.net/s_kangkang_A/article/details/102591674

版权

django学习实战专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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

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

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

游客身份不可查看用户信息，避免信息泄露（我主要是玩爬虫的），后续添加，已登录用户可互相查看。（重要信息需点击。依靠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.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：