Django开发个人网站——个人信息管理和头像上传操作

用户信息修改与头像上传

知识要点：管理个人信息，头像上传与裁剪

上期文章：密码修改与操作

B站视频：Django开发个人网站

个人信息编辑

我们在进行任何操作时，只要涉及到数据部分，都需要设计数据库，现在让我们先看一看我们的设计的个人信息数据模型。

class UserProfile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    birth = models.CharField(max_length=100, blank= True, default="konw")
    phone = models.CharField(max_length=100, blank=True)
    school = models.CharField(max_length=100, blank=True)
    company = models.CharField(max_length=100, blank=True)
    profession = models.CharField(max_length=100, blank=True)
    address = models.CharField(max_length=100, blank=True)
    about = models.TextField(blank=True)
    photo = models.ImageField(blank=True)

    def __str__(self):
        return 'user:{}'.format(self.user.username)

我们对个人信息添加了一些内容，这些内容包括 school，company，profession，address，about，photo，当然别忘了在表单中添加它们。

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ('user', 'birth', 'phone', 'school', 'company', 'profession', 'address', 'about','photo')

下面就是对数据的操作处理部分了，编辑views.py：

首先是个人信息的展示部分，编写infor_show函数：

@login_required(login_url='/account/login/')
def infor_show(request):
    userinfo = UserProfile.objects.get(user=request.user)
    return render(request,"account/infor_show.html",{
   'userinfo':userinfo})

这个函数很简单，就是将从数据库中去得到个人信息数据返回给前端。

根据views.py,我们需要编写一个infor_show.html页面：

{% extends "base.html" %}
{% load static %}
{% block title %}我的信息{% endblock %}
{% block content %}
    <div class="row text-center">
    <h1>我的资料</h1>
    <div class="col-md-6">
        <div class="row">
        <div class="col-md-3 text-right">
            <span>用户名：</span>
        </div>
        <div class="col-md-9 text-left">
            {
  { userinfo.user.username }}
        </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-right">
                <span>出生日期：</span>
            </div>
            <div class="col-md-9 text-left">
                {
  { userinfo.birth }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-right">
                <span>联系方式：</span>
            </div>
            <div class="col-md-9 text-left">
                {
  { userinfo.phone }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-right">
                <span>学校：</span>
            </div>
            <div class="col-md-9 text-left">
                {
  { userinfo.school }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-right">
                <span>公司：</span>
            </div>
            <div class="col-md-9 text-left">
                {
  { userinfo.company }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-right">
                <span>地址：</span>
            </div>
            <