Django+JS 实现点击头像即可更改头像的方法示例

首先,在models.py中创建UserModels类

from django.db import models
from django.contrib.auth.models import AbstractUser


class UserModels(AbstractUser):
  nickname = models.CharField(max_length=50, null=True, verbose_name='用户昵称')
  mobile = models.CharField(max_length=11, null=True, verbose_name='电话')
  address = models.CharField(max_length=100, null=True, verbose_name='住址')
  sex = models.CharField(max_length=10, null=True, verbose_name='性别')
  head_img = models.ImageField(upload_to='%Y/%m', verbose_name='头像', null=True)

  class Meta:
    db_table = 'user'
    verbose_name = '用户'
    verbose_name_plural = verbose_name

想要显示在admin后台,则必须在admin.py文件中注册

from django.contrib import admin
from .models import UserModels

admin.site.register(UserModels)

然后,在settings.py中,

AUTH_USER_MODEL = 'customuser.UserModels'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

之后,python manage.py makemigrations

python manage.py migrate进行同步到数据库

然后,也就开始实现头像的更换

在urls.py中绑定路由:

 path('info/', TemplateView.as_view(template_name='user/userinfo.html'), name='user_info'),
 path('headimg/', headimg, name='user_img'),

在userinfo.html中:

html部分:

form action="#" method="post">
    {% csrf_token %}
  
  

个人信息

头像
{# input type="file" 这种标签,该标签自带的就有click事件。type='text'这种类型就没有点击事件。 #}
昵称:
{{ request.user.nickname }}
电话:
{{ request.user.mobile }}
住址:
{{ request.user.address }}
性别:
{{ request.user.sex }}
个人简介:
主人很懒,什么也没有留下。
编辑个人资料

js部分:

{# 点击头像图片,触发这个标签的click事件。#}
  

在views.py中完善函数:

def headimg(request):
  if request.method == 'POST':
    # 前端ajax请求,将图片对象、图片名称传递到了后台的views.py中;
    img = request.FILES.get('img_file')
    # 获取数据库head_img字段的值,并切割成列表。
    # ['2018', '10', 'h2.png']
    path = request.user.head_img.url.split('/')
    # 将列表的最后一个元素图片名称,替换成新的图片名称
    path[-1] = request.POST.get('img_name')
    # 再将列表合成一个字符串
    path = '/'.join(path)

    url = settings.MEDIA_ROOT + '/' + path

    # 将ajax传过来的图片写入到本地/static/images/....目录下。
    with open(url, 'wb') as f:
      for chunk in img.chunks():
        f.write(chunk)

    # 以上步骤实现了图片的后台保存,还需要修改当前用户数据库中的头像路径。
    request.user.head_img = path
    request.user.save()

    return HttpResponse('图片上传成功')

写完之后,我们就可以测试效果了:

首先,creatsuperuser 一个用户名:admin 密码:admin12345

之后,使用admin登录admin后台,在创建两个普通用户,分别设置一个图片作为头像

Django+JS 实现点击头像即可更改头像的方法示例_第1张图片

Django+JS 实现点击头像即可更改头像的方法示例_第2张图片

创建普通用户之后,使用其中一个test进行登录项目首页:

注意:使用admin后台创建的用户,密码是没有加密的,所以,在设置登录这一方便要注意你检测的是加密密码,还是不是加密密码。

在这里,我设置的test和test1的密码都是和admin的密码一样,那么在登录test的时候,


只需要,将admin的加密密码,粘贴到test和test1的密码中。保存。之后,使用test 密码admin12345进行登录

登录成功之后,

来到修改资料页面:

Django+JS 实现点击头像即可更改头像的方法示例_第3张图片

当点击头像的时候,就会让选择新头像:

Django+JS 实现点击头像即可更改头像的方法示例_第4张图片

选择你的新头像:即上传成功

Django+JS 实现点击头像即可更改头像的方法示例_第5张图片

之后,再访问资料页面,就展示的是新头像了

Django+JS 实现点击头像即可更改头像的方法示例_第6张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(Django+JS 实现点击头像即可更改头像的方法示例)