- 将 static 文件夹中的 center.html 拖入 templates 文件夹中
- 定义视图:在 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)
- 定义路由:在 users 文件夹的 urls.py 文件中加入:
from users.views import UserCenterView path('center/', UserCenterView.as_view(),name='center'),
- 修改 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' %}"
- 设置未登录用户跳转的路由:在 blog 文件夹的 settings.py 文件添加:
LOGIN_URL = '/login/'
- 修改用户信息数据显示:在 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)
- 修改 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 %}
-
用户中心修改
- 修改视图:在 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
- 在 blog 文件夹的 settings.py 文件中设置图片上传的路径并新建文件夹 media:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/') MEDIA_URL = '/media/'
- 在 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)
- 成功搭建后的用户中心界面如下:
学习介绍链接:https://blog.csdn.net/castlegirl/article/details/135075747?spm=1001.2014.3001.5501
项目链接:GitHub - haifengyuhui/project_blogweb: Project: A website for haifengyuhui's blog