【Django博客网站】b站项目学习系列五：用户中心界面

• 目录

  用户中心展示

  用户中心修改

  ---

• 用户中心展示

1. 将 static 文件夹中的 center.html 拖入 templates 文件夹中
2. 定义视图：在 users 文件夹的 views.py 文件中加入：

   from django.contrib.auth.mixins import LoginRequiredMixin   # 判断用户是否登录
   class UserCenterView(LoginRequiredMixin,View):   # 默认跳转链接：accounts/login/?next=xxx
       def get(self,request):         
           user = request.user        # 获取用户信息
           context = {        #组织模板渲染数据
               'username': user.username,
               'mobile': user.mobile,
               'avatar': user.avatar.url if user.avatar else None,
               'user_desc': user.user_desc
           }
           return render(request,'center.html',context=context)

3. 定义路由：在 users 文件夹的 urls.py 文件中加入：

   from users.views import UserCenterView
   path('center/', UserCenterView.as_view(),name='center'),

4. 修改 center.html 中的资源加载方式：

   在 <!-- Header部分 --> 修改：
   在 <title> 用户信息 </title> 后加入：{% load staticfiles %}
   在 <!-- 引入bootstrap的css文件 --> 替换："{% static 'bootstrap/css/bootstrap.min.css' %}"
   在 <!-- 引入vuejs --> 替换："{% static 'js/vue-2.5.16.js' %}"、"{% static 'js/axios-0.18.0.min.js' %}"
   在 <!-- content --> 替换：
   在 <!-- 页面跳转部分 --> 替换：'{% url 'users:center' %}'、'{% url 'users:logout' %}'
   在 <!-- Footer部分 --> 替换："{% static 'js/host.js' %}"、"{% static 'js/common.js' %}"、"{% static 'js/center.js' %}"

5. 设置未登录用户跳转的路由：在 blog 文件夹的 settings.py 文件添加：

   LOGIN_URL = '/login/'

6. 修改用户信息数据显示：在 users 文件夹的 views.py 文件中替换和加入：

   context = {   # 组织模板渲染数据
       'username': user.username,
       'mobile': user.mobile,
       'avatar': user.avatar.url if user.avatar else None,
       'user_desc': user.user_desc
   }
   return render(request,'center.html',context=context)

7. 修改 templates 文件中 center.html 文件的数据显示：在 <!--content--> 中：

   在 <!-- username --> 中：<input type="text" class="form-control" id="username" name="username" value="{{ username }}" >
   在 <!-- phone --> 中：：<input type="text" class="form-control" disabled="disabled" id="phone" name="phone" value="{{ mobile }}">
   在 <!-- desc --> 中：<textarea type="text" class="form-control" id="desc" name="desc" rows="12" >{{ user_desc }}</textarea>
   在 <!--<br><h5 class="col-md-4">暂无头像</h5><br>--> 中：
   {% if avatar %}
   <img src="{{ avatar }}" style="..." class="col-md-4"><br>
   {% else %}
       <img src="{% static 'img/mei.png' %}" style="..." class="col-md-4"><br>   
   {% endif %}
   在 <!--content--> 中： <form method="post" enctype="multipart/form-data"> 之后添加：{% csrf_token %}

• ---

  用户中心修改

1. 修改视图：在 users 文件夹的 views.py 文件中加入：

   def post(self,request):
       user = request.user   # 接收数据
       avatar = request.FILES.get('avatar')
       username = request.POST.get('username',user.username)
       user_desc = request.POST.get('desc',user.user_desc)
       try:
           user.username=username   # 修改数据库数据
           user.user_desc=user_desc
           if avatar:
              user.avatar=avatar
           user.save()
   except Exception as e:
           logger.error(e)
           return HttpResponseBadRequest('更新失败，请稍后再试')
       response = redirect(reverse('users:center'))   # 返回响应，刷新页面
       response.set_cookie('username',user.username,max_age=30*24*3600)   # 更新cookie
   return response

2. 在 blog 文件夹的 settings.py 文件中设置图片上传的路径并新建文件夹 media：

   MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
   MEDIA_URL = '/media/'

3. 在 blog 文件夹的 urls.py 文件中设置图片访问路由规则：

   from django.conf import settings
   from django.conf.urls.static import static
   urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. 成功搭建后的用户中心界面如下：

---

 学习介绍链接：https://blog.csdn.net/castlegirl/article/details/135075747?spm=1001.2014.3001.5501

项目链接：GitHub - haifengyuhui/project_blogweb: Project: A website for haifengyuhui's blog