30-Django项目实战(8)

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/.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" %}">


{% endblock %}

{% block body  %}
<body class="member">
<div class="header">
<a href="/" class="logo">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>

<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>

<div class="mod_profile js_user_data" style="">
<div class="section_inner">
    <div class="profile__cover_link">
        
    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>


<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、歌曲搜索框、热搜歌曲、网站导航栏功能、用户基本信息和歌曲播放记录。

你可能感兴趣的:(web全栈开发,django,python,后端)