（九）Django 在线平台(用户中心页)

最新推荐文章于 2025-07-02 17:10:47 发布

Lx_strive

最新推荐文章于 2025-07-02 17:10:47 发布

阅读量593

点赞数

CC 4.0 BY-SA版权

分类专栏： Django

本文链接：https://blog.youkuaiyun.com/weixin_41827390/article/details/80683327

本文详细介绍了如何配置Django在线平台的用户中心页，包括新建并继承母版usercenter-base.html，设置用户个人信息页面的URL配置，views编写，以及前端如何显示登录用户信息，利用default_if_none处理空值问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置用户页面新建继承母版usercenter-base.html页面

<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
	<title>{% block title %}个人信息- X.xx在线网{% endblock %}</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'js/plugins/queryCity/css/cityLayout.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'css/lq.datetimepick.css' %}"/>
    {% block custom_css %}
    {% endblock %}


    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>

</head>
<body>
<section class="headerwrap headerwrap2">
    <header>
		<div  class="header2 header">
 			<div class="top">
				<div class="wp">
					<div class="fl"><p>服务电话：<b>33333333</b></p></div>
					<!--登录后跳转-->


                        <div class="personal">
                            <dl class="user fr">
                                <dd>bobby<img class="down fr" src="../images/top_down.png"/></dd>
                                <dt><img width="20" height="20" src="../media/image/2016/12/default_big_14.png"/></dt>
                            </dl>
                            <div class="userdetail">
                            	<dl>
	                                <dt><img width="80" height="80" src="../media/image/2016/12/default_big_14.png"/></dt>
	                                <dd>
	                                    <h2>django</h2>
	                                    <p>bobby</p>
	                                </dd>
                                </dl>
                                <div class="btn">
	                                <a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
	                                <a class="fr" href="/logout/">退出</a>
                                </div>
                            </div>
                        </div>
                        <a href="usercenter-message.html">
                            <div class="msg-num"><span id="MsgNum">0</span></div>
                        </a>


				</div>
			</div>

    <div class="middle">
        <div class="wp">
            <a href="index.html"><img class="fl" src="../images/logo2.png"/></a>
            <h1>我的慕学网</h1>
        </div>
    </div>
			</div>
    </header>
</section>



<!--crumbs start-->
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>
                <li><a href="/user/home/">个人中心</a>></li>
                <li>个人信息</li>
            </ul>
        </div>
    </section>
{% endblock %}
<section>
	<div class="wp list personal_list">
	<div class="left">
        <ul>
            <li class="active2"><a href="usercenter-info.html">个人资料</a></li>
            <li ><a href="usercenter-mycourse.html">我的课程</a></li>
            <li ><a href="usercenter-fav-course.html">我的收藏</a></li>
            <li >
                <a href="usercenter-message.html" style="position: relative;">
                    我的消息
                </a>
            </li>
        </ul>
	</div>

    {% block right_content %}
    <div class="right">
		<div class="personal_des ">
			<div class="head" style="border:1px solid #eaeaea;">
				<h1>个人信息</h1>
			</div>
			<div class="inforcon">
				<div class="left" style="width:242px;">
                    <iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
                    <form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="/users/image/upload/" target='frameFile'>
                        <label class="changearea" for="avatarUp">
                            <span id="avatardiv" class="pic">
                                <img width="100" height="100" class="js-img-show" id="avatarShow" src="../media/image/2016/12/default_big_14.png"/>
                            </span>
                            <span class="fl upload-inp-box" style="margin-left:70px;">
                                <span class="button btn-green btn-w100" id="jsAvatarBtn">修改头像</span>
                                <input type="file" name="image" id="avatarUp" class="js-img-up"/>
                            </span>
                        </label>
                        <input type='hidden' name='csrfmiddlewaretoken' value='799Y6iPeEDNSGvrTu3noBrO4MBLv6enY' />
                    </form>
                    <div style="border-top:1px solid #eaeaea;margin-top:30px;">
                        <a class="button btn-green btn-w100" id="jsUserResetPwd" style="margin:80px auto;width:100px;">修改密码</a>
                    </div>
				</div>
				<form class="perinform" id="jsEditUserForm" autocomplete="off">
					<ul class="right">
						<li>昵