模型分析： 由于Django自帶的用戶系統(tǒng)里面并沒有用戶頭像這個字段，所以我們需要創(chuàng)建一個模型" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 網(wǎng)站添加用戶頭像功能（基于Django框架）

網(wǎng)站添加用戶頭像功能（基于Django框架）

時間：2023-04-30 05:09:02 | 來源：網(wǎng)站運營

時間：2023-04-30 05:09:02 來源：網(wǎng)站運營

網(wǎng)站添加用戶頭像功能（基于Django框架）：

概要：

為了增加用戶對于網(wǎng)站的歸屬感，今天添加了用戶上傳頭像的功能，最終的效果如下：

模型分析：

由于Django自帶的用戶系統(tǒng)里面并沒有用戶頭像這個字段，所以我們需要創(chuàng)建一個模型，但是該模型要與User這個用戶系統(tǒng)關聯(lián)起來，由于一個用戶只能對應于一個頭像，一個頭像也唯一對應于一個用戶，所以這里需要定義的關系為一對一的關系，即在創(chuàng)建用戶頭像這個的模型時，需要用外鍵一對一的關聯(lián)User這個模型。這樣就可以通過User來查詢到對應用戶的用戶頭像，模型的問題解決了，就需要來創(chuàng)建字段了，這里就又不同的方案，之前想的是直接使用ImageField字段來上傳圖像作為頭像，但是之后覺得這樣比較麻煩，因為這樣每次上傳的圖片都會堆積在服務器，會對服務器造成一定的壓力，而且還需要對上傳的圖片進行命名的處理，否則可能會造成同樣名稱的文件相互覆蓋，所以最后我打算不使用這種方法，而是將用戶的上傳的圖像進行base64編碼，然后使用TextField來保存對應的編碼，這樣不僅避免圖片在服務器堆積，而且可以提高頭像的加載速度。

模型創(chuàng)建：

from django.db import modelsfrom django.contrib.auth.models import User# Create your models here.# 創(chuàng)建一個新的模型，通過外鍵關聯(lián)到User這個模型，從而對User進行定義class Add_User_Info(models.Model): # 通過外鍵關聯(lián)User user = models.OneToOneField(User, on_delete=models.CASCADE) user_img_base64 = models.TextField(default='')def get_user_img(self): if Add_User_Info.objects.filter(user=self).exists(): return Add_User_Info.objects.get(user=self).user_img_base64 else: return ''User.get_user_img = get_user_img這里還定義了方法get_user_img，是為了能夠直接通過User.get_user_img()來得到user_img_base64字段的內(nèi)容，而不是通過Add_User_Info這個字段來間接查詢到。

前端設計：

前端主要完成的圖片的上傳、預覽和圖片base64的轉碼，這里為了使上傳圖片更加的方便，在上傳圖片時添加圖片修剪功能，使得上傳的圖像更加的清晰。

最終效果：

對應的代碼：

{% extends 'new_siwei.html' %}{% load staticfiles %}{% block hea %}<title>{{ title }}</title><link rel="stylesheet" type="text/css" href="/static/CSS/font-awesome.4.6.0.css"><link rel="stylesheet" href="/static/CSS/amazeui.min.css"><link rel="stylesheet" href="/static/CSS/amazeui.cropper.css"><link rel="stylesheet" href="/static/CSS/custom_up_img.css">{% endblock %}{% block other %}<div class='containter'> <div class='row'> <div class='col-xs-10 col-xs-offset-1'> {% if user.is_authenticated %} <h2> {{ user.username }} </h2> <ul> {% if user.get_nickname == '' %} <li>昵稱：沒有昵稱⊙_⊙&nbsp;&nbsp;<a id='lg_a' href='/change_nickname/?from={{ request.get_full_path }}'>創(chuàng)建昵稱</a></li> {% else %} <li> <div class="up-img-cover" id="up-img-touch" style="display: inline-block"> <span id="lg_a" onclick="" style="cursor: pointer;" data-am-popover="{content: '點擊上傳', trigger: 'hover focus'}">修改頭像</span> </div> </li> <li><a id='lg_a' href='/change_password/?from={{ request.get_full_path }}'>修改密碼</a></li> <li><a id='lg_a' href='/change_nickname/?from={{ request.get_full_path }}'>修改昵稱</a></li> <li><div>昵稱：{{ user.get_nickname }}&nbsp;&nbsp;</div></li> {% endif %} <li> 郵箱：{% if user.email %}{{ user.email }}{% else %} 未綁定 <a id='lg_a' href='/bind_email/?from={{ request.get_full_path }}'>綁定</a> {% endif %} </li> <li> 近期登錄：{{ user.last_login|date:"Y-m-d H:i:s" }} </li> <li> 最近瀏覽： <ul> {% for article in articles %} <li style="list-style-type:none; width:70%"> <span id='lg_a' class='glyphicon glyphicon-phone'></span><a href='/new_blog/content/?page={{ article.content_object.pk }}' target="_blank"> {{ article.content_object.title }}</a><span style='float: right'>{{ article.Read_time }}</span> </li> {% endfor %} </ul> </li> </ul> {% else %} <span> 未登錄，跳轉到首頁。。。 </span> <script type='text/javascript'> window.location.href = '/main'; </script> {% endif %} </div> </div></div> <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1"> <div class="am-modal-dialog up-frame-parent up-frame-radius"> <div class="am-modal-hd up-frame-header"> <label>修改頭像</label> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a> </div> <div class="am-modal-bd up-frame-body"> <div class="am-g am-fl"> <div class="am-form-group am-form-file"> <div class="am-fl"> <button type="button" class="am-btn am-btn-default am-btn-sm"> <i class="am-icon-cloud-upload"></i> 選擇要上傳的文件</button> </div> <input type="file" id="inputImage"> </div> </div> <div class="am-g am-fl" > <div class="up-pre-before up-frame-radius"> <img alt="" src="" id="image" > </div> <div class="up-pre-after up-frame-radius"> </div> </div> <div class="am-g am-fl"> <div class="up-control-btns"> <span class="am-icon-rotate-left" onclick="rotateimgleft()"></span> <span class="am-icon-rotate-right" onclick="rotateimgright()"></span> <span class="am-icon-check" id="up-btn-ok" url="/update_user_img/"></span> </div> </div> </div> </div></div><!--加載框--><div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading"> <div class="am-modal-dialog"> <div class="am-modal-hd">正在上傳...</div> <div class="am-modal-bd"> <span class="am-icon-spinner am-icon-spin"></span> </div> </div></div><!--警告框--><div class="am-modal am-modal-alert" tabindex="-1" id="my-alert"> <div class="am-modal-dialog"> <div class="am-modal-hd">信息</div> <div class="am-modal-bd" id="alert_content"> 頭像上傳成功！ </div> <div class="am-modal-footer"> <span class="am-modal-btn">確定</span> </div> </div></div><script src="/static/JS/jquery-1.8.3.min.js"></script><script src="/static/JS/amazeui.min.js" charset="utf-8"></script><script src="/static/JS/cropper.min.js" charset="utf-8"></script><script src="/static/JS/custom_up_img.js" charset="utf-8"></script>{% endblock %}{% block footer %}{% endblock %}

后端設計：

后端主要負責的是：判斷該用戶是否存在頭像字段的記錄，如果不存在該記錄，則需要創(chuàng)建對應的記錄，對于存在記錄的用戶，當修改頭像后需要獲得修改后的base64編碼，然后更改對應的頭像字段的內(nèi)容。

代碼：

from django.shortcuts import render, HttpResponsefrom django.http import JsonResponsefrom .models import Add_User_Infofrom django.views.decorators.csrf import csrf_exempt# 頭像上傳對應的方法@csrf_exemptdef upload_result(request): if request.method == 'POST': data = {} data['status'] = 'SUCCESS' data['message'] = '上傳成功' user = request.user if user.is_anonymous: # 未登錄，不能進行頭像的更改 data['status'] = 'ERROR' data['message'] = '未登錄' return JsonResponse(data) # 判斷對應的記錄是否存在，如果不存在則創(chuàng)建對應的記錄 if not Add_User_Info.objects.filter(user=user).exists(): rc = Add_User_Info(user=user) rc.save() update = Add_User_Info.objects.get(user=user) update.user_img_base64 = request.POST['image'] update.save() return JsonResponse(data) return HttpResponse('該請求不符合條件！')這里使用了csrf_exempt這個修飾器，是因為前端是通過POST請求發(fā)送的數(shù)據(jù)，所以就需要用到CSRF令牌，這里為了方便就直接在該方法中使用修飾器禁用了CSRF令牌。

原文地址、我的網(wǎng)站。

關鍵詞：功能,頭像,用戶

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉