30-Django项目实战（8）

最新推荐文章于 2023-07-26 18:19:58 发布

莎萌玩家

最新推荐文章于 2023-07-26 18:19:58 发布

阅读量677

点赞数 2

分类专栏： web全栈开发文章标签： django python 后端

本文链接：https://blog.csdn.net/m0_73344153/article/details/131054327

版权

web全栈开发专栏收录该内容

24 篇文章 4 订阅

订阅专栏

1 用户中心

当用户成功登录后，浏览器将重定向访问用户中心，改页面分为用户基本信息和歌曲播放记录，说明如下：

（1）用户基本信息；显示当前用户的用户头像和用户名，并设有用户注销链接。

（2）歌曲播放记录；播放记录来自于歌曲播放页的播放列表，并对播放记录进行分页显示。

1.1 路由

我们在项目应用user中实现用户中心，首先在user的urls.py中分别定义路由home和logout，代码如下：

from django.urls import path
from .views import *
urlpatterns = [
    # 用户注册和登录
    path('login.html', loginView, name='login'),
    # 用户中心
    path('home/<int:page>.html', homeView, name='home'),
    # 用户退出登录
    path('logout.html', logoutView, name='logout'),
]

路由home设置路由变量page，该变量是歌曲播放记录经过分页处理后的某一页页数，视图函数homeView负责接收和处理路由home的HTTP请求。路由logout实现用户退出功能，该路由的请求处理和响应过程由视图函数logoutView完成。

1.2 视图

在user的view.py中分别定义视图函数homeView和logoutView，代码如下：

from django.contrib.auth import login, logout
from index.models import *
from django.contrib.auth.decorators import login_required
from django.core.paginator import Paginator
from django.core.paginator import EmptyPage
from django.core.paginator import PageNotAnInteger


# 用户中心
# 设置用户登录限制
@login_required(login_url='/user/login.html')
def homeView(request, page):
    # 热搜歌曲
    searchs = Dynamic.objects.select_related('song').order_by('-search').all()[:4]
    # 分页功能
    songs = request.session.get('play_list', [])
    paginator = Paginator(songs, 3)
    try:
        pages = paginator.page(page)
    except PageNotAnInteger:
        pages = paginator.page(1)
    except EmptyPage:
        pages = paginator.page(paginator.num_pages)
    return render(request, 'home.html', locals())


# 退出登录
def logoutView(request):
    logout(request)
    return redirect('/')

视图函数logoutView调用内置方法logout实现用户退出功能，并重定向访问网站首页。视图函数homeView使用装饰器login_required限制用户访问权限，只有当前用户成功登录后才能访问用户中心。

从视图函数homeView的执行过程中看到，它实现了热搜歌曲的数据查询和歌曲播放记录的分页处理，但用户中心需要展示用户基本信息。

在settings.py的配置属性TEMPLATES中定义了处理器context_processors，在解析模板文件之前，Django依次运行处理器几个的程序。当运行到处理器auth时，程序会生成变量user和perms，并且将变量传入模板上下文TemplateContext中，因此用户中心的用户基本信息可以使用模板上下文user实现数据展示，无须在视图函数homeView中重复定义。

1.3 模板

最后打开模板文件home.html，在模板文件里编写用户中心的网页内容，代码如下：

{% extends "base.html"  %}
{% load static %}
{% block link %}
<link rel="shortcut icon" href="{% static "favicon.ico" %}">
<link rel="stylesheet" href="{% static "css/common.css" %}">
<link rel="stylesheet" href="{% static "css/user.css" %}">
{% endblock %}

{% block body  %}
<body class="member">
<div class="header">
<a href="/" class="logo"><img src="{% static "image/logo.png" %}"></a>
<div class="search-box">
    <form id="searchForm" action="{% url 'search' 1 %}" method="post">
    {% csrf_token %}
        <div class="search-keyword">
        <input id="kword" name="kword" type="text" class="keyword" maxlength="120">
        </div>
        <input id="subSerch" type="submit" class="search-button" value="搜 索">
    </form>
    <div id="suggest" class="search-suggest"></div>
    <div class="search-hot-words">
        {% for s in searchs %}
            <a target="play" href="{% url 'play' s.song.id %}">{{ s.song.name }}</a>
        {% endfor %}
    </div>
</div>
</div><!--end header-->

<div class="nav-box">
<div class="nav-box-inner">
    <ul class="nav clearfix">
        <li><a href="{% url 'index' %}">首页</a></li>
        <li><a href="{% url 'ranking' %}" target="_blank">歌曲排行</a></li>
        <li><a href="{% url 'home' 1 %}" target="_blank">用户中心</a></li>
    </ul>
</div>
</div><!--end nav-box-->

<div class="mod_profile js_user_data" style="">
<div class="section_inner">
    <div class="profile__cover_link">
        <img src="{% static "image/user.jpg" %}" class="profile__cover">
    </div>
    <h1 class="profile__tit">
        <span class="profile__name">{{ user.username }}</span>
    </h1>
        <a href="{% url 'logout' %}" style="color:white;">退出登录</a>
</div>
</div>

<div class="main main--profile" style="">
<div class="mod_tab profile_nav" role="nav" id="nav">
    <span class="mod_tab__item mod_tab__current" id="hear_tab">我听过的歌</span>
</div>
<div class="js_box" style="display: block;">
<div class="profile_cont">
<div class="js_sub" style="display: block;">
<div class="mod_songlist">
    <ul class="songlist__header">
        <li class="songlist__header_name">歌曲</li>
        <li class="songlist__header_author">歌手</li>
        <li class="songlist__header_time">时长</li>
    </ul>
    <ul class="songlist__list">
        {% for item in pages.object_list %}
        <li>
            <div class="songlist__item songlist__item--even">
            <div class="songlist__songname">
                <a href="{% url 'play' item.id %}" class="js_song songlist__songname_txt" >{{ item.name }}</a>
            </div>
            <div class="songlist__artist">
                <a href="javascript:;" class="singer_name">{{ item.singer }}</a>
            </div>
            <div class="songlist__time">{{ item.time }}</div>
            </div>
        </li>
        {% endfor %}
    </ul>
</div><!--end mod_songlist-->

<!--分页-->
<div class="page-box">
    <div class="pagebar" id="pageBar">

        {% if pages.has_previous %}
        <a href="{% url 'home' pages.previous_page_number %}" class="prev" target="_self"><i></i>上一页</a>
        {% endif %}

        {% for page in pages.paginator.page_range %}
            {% if pages.number == page %}
                <span class="sel">{{ page }}</span>
            {% else %}
                <a href="{% url 'home' page %}" target="_self">{{ page }}</a>
            {% endif %}
        {% endfor %}

        {% if pages.has_next %}
        <a href="{% url 'home' pages.next_page_number %}" class="next" target="_self">下一页<i></i></a>
        {% endif %}
    </div>
</div>
</div>
</div>
</div>
</div>
</body>
{% endblock  %}

模板文件home.html实现了CSS样式文件引入、网站LOGO、歌曲搜索框、热搜歌曲、网站导航栏功能、用户基本信息和歌曲播放记录。

莎萌玩家

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
30-Django项目实战（8）

当用户成功登录后，浏览器将重定向访问用户中心，改页面分为用户基本信息和歌曲播放记录，说明如下：（1）用户基本信息；显示当前用户的用户头像和用户名，并设有用户注销链接。（2）歌曲播放记录；播放记录来自于歌曲播放页的播放列表，并对播放记录进行分页显示。我们在项目应用user中实现用户中心，首先在user的urls.py中分别定义路由home和logout，代码如下：路由home设置路由变量page，该变量是歌曲播放记录经过分页处理后的某一页页数，视图函数homeView负责接收和处理路由home的HTTP请求
复制链接

扫一扫