优化网站导航条，把右上角信息重新布置了一下，新版本会在头像旁边显示用户名，点击用户名会显示用户详情，但是不提供修改功能，修改需要点击“修改用户信息”，或者从导航条修改用户信息进入，，并且修改完后会跳转到网站首页，不会要求重新登录。
在base.html文件中修改如下：
{% load staticfiles %}
<!-- 设置引入静态文件 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- 网站采用的字符编码 -->
<meta charset="utf-8">
<!-- 预留网站标题的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
<!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
<script src="{% static 'jquery-3.6.1.min.js' %}"></script>
<!-- 引入layer.js -->
<script src="{% static 'layer/layer.js' %}"></script>
<!-- 引入popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script>
$('div#article_body table').addClass('table table-bordered');
$('div#article_body thead').addClass('thead-light');
</script>
</head>
<body>
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 导航栏商标 -->
<a class="navbar-brand" href="#">我的博客</a>
<!-- 导航入口 -->
<div>
<ul class="navbar-nav">
<!-- 条目 -->
<li class="nav-item">
<a class="nav-link" href="{% url 'articles:index' %}">文章 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'articles:create' %}">写文章 </a>
</li>
<!-- start 如果用户已经登录则显示用户名和头像 -->
{# 判断用户是否登录#}
{% if user.is_authenticated %}
{% if user.avater %}
<img src=" {{ user.avater.url }} " style="width: 38px;height: 38px; border-radius: 15%;">
{% endif %}
<a class="nav-link" href="{% url 'user:info2' user.id %}">{{ user.username }}</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'user:logout' %}">退出登录</a>
<a class="dropdown-item" href="{% url 'user:info' user.id %}">修改个人信息</a>
</div>
</li>
{% else %}
<!-- 如果用户未登录，则显示 “登录” -->
<li class="nav-item">
<a class="nav-link" href="{% url 'user:login' %}">登录</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'user:register' %}">注册</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- 预留具体页面的位置 -->
{% block content %}{% endblock content %}
<div>
<br><br><br>
</div>
<footer class="py-3 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">Blog-个人博客</p>
</div>
</footer>
</body>
</html>在user/view.py中修改如下：
# 个人中心
class Info2(LoginRequired): # as_view 重写这个方法
# 展示个人中心html页面
def get(self, request, id):
return render(request, 'user/info2.html')
# 实现用户中心的功能逻辑
def post(self,request,id): # 细节的时候
# 本质 ===》修改已经存在的用户的一些数据？
# user = get_object_or_404(User, pk=id)
return redirect(reverse('user:info', kwargs={'id': id}))
# 修改个人信息
class Info(LoginRequired): # as_view 重写这个方法
# 展示个人中心html页面
def get(self, request, id):
return render(request, 'user/info.html')
# 实现用户中心的功能逻辑
def post(self,request,id): # 细节的时候
# 本质 ===》修改已经存在的用户的一些数据？
user = get_object_or_404(User, pk=id)
# get_object_or_404(模型的类名,条件)
# 如果找到了对应的哪一条数据，就返回数据，如果没找到，就返回一个404错误
# 1. 接受参数 数据校验 数据入库 返回结果
user.phone = request.POST.get('phone')
user.bio = request.POST.get('bio')
avater = request.FILES.get('avater')
# 重新上传了头像才更改
if avater:
user.avater = avater
user.save()
return redirect(reverse('articles:index'))在user/urls.py中修改如下：
from django.urls import path
from . import views
app_name = 'user'
urlpatterns = [
# 注册
path('register', views.Register.as_view(), name='register'),
# 登录
path('login', views.Login.as_view(), name='login'),
# 退出登录
path('logout', views.user_loginout, name='logout'),
# 个人中心
path('info2/<int:id>', views.Info2.as_view(), name='info2'),
# 修改用户信息
path('info/<int:id>', views.Info.as_view(), name='info'),
]在info.html的同目录下，创建info2.html文件
{% extends "base.html" %}
{% block title %} 用户信息 {% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-12">
<br>
<div class="col-md-4">用户名: {{ user.username }}</div>
<br>
<!-- 有头像则展示头像 -->
{% if user.avater %}
<div class="col-md-4">头像</div>
<img src="{{ user.avater.url }}" style="max-width: 20%; border-radius: 15%;" class="col-md-4">
{% else %}
<h5 class="col-md-4">暂无头像</h5>
{% endif %}
<!-- 有头像则展示头像 -->
<br>
<br>
<form method="post" action="{% url 'user:info2' user.id %}" enctype="multipart/form-data">
{% csrf_token %}
<!-- phone -->
<div class="form-group col-md-4">
<label for="phone">电话: {{ user.phone }}</label>
</div>
<!-- avatar -->
<!-- bio -->
<div class="form-group col-md-4">
<label for="bio">简介: {{ user.bio }}</label>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">修改个人信息</button>
</form>
</div>
</div>
</div>
{% endblock content %}修改info.html文件如下：
{% extends "base.html" %}
{% block title %} 用户信息 {% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-12">
<br>
<div class="col-md-4">用户名: {{ user.username }}</div>
<br>
<!-- 有头像则展示头像 -->
{% if user.avater %}
<div class="col-md-4">头像</div>
<img src="{{ user.avater.url }}" style="max-width: 20%; border-radius: 15%;" class="col-md-4">
{# <img src="" style="max-width: 20%; border-radius: 15%;" class="col-md-4">#}
{% else %}
<h5 class="col-md-4">暂无头像</h5>
{% endif %}
<!-- 有头像则展示头像 -->
<br>
<br>
<form method="post" action="{% url 'user:info' user.id %}" enctype="multipart/form-data">
{# <form method="post" action="" enctype="multipart/form-data">#}
{% csrf_token %}
<!-- phone -->
<div class="form-group col-md-4">
<label for="phone">电话</label>
<input type="text" class="form-control" id="phone" name="phone" value="{{ user.phone }}">
{# <input type="text" class="form-control" id="phone" name="phone" value="">#}
</div>
<!-- avatar -->
<div class="form-group">
<label for="avatar">上传头像</label>
<input type="file" class="form-control-file" name="avater" id="avatar">
</div>
<!-- bio -->
<div class="form-group col-md-4">
<label for="bio">简介</label>
<textarea type="text" class="form-control" id="bio" name="bio" rows="12">{{ user.bio }}</textarea>
{# <textarea type="text" class="form-control" id="bio" name="bio" rows="12"></textarea>#}
</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
</div>
{% endblock content %}优化排序功能
在之前的网站中，当用户在输入框中不输入信息选择最新/最热排序时，会提示没有和None相关的文章，这个时候就会出错，需要对view.py中的逻辑处理进行优化。
def index(request):
# 接收参数
search = request.GET.get('search')
order = request.GET.get('order')
# 用户的关键字查找出对应的数据内容
# 用户可能通过关键字来查找对应的数据内容 ==》有可能需要按照什么排序
# 有关键字 按照浏览量来查找
# 有关键字 按照创建时间来查找
# 没有关键字 按照浏览量来查找
# 没有关键字 按照创建时间来查找
if search is None or search == 'None':
# 按照浏览量来查找
if order == 'read_num':
articles = Articles.objects.all().order_by('-read_num')
else:
articles = Articles.objects.all()
else:
# 按照浏览量来查找
if order == 'read_num':
articles = Articles.objects.filter(
Q(title__icontains=search) | Q(body__icontains=search) | Q(column__title__icontains=search)).order_by('-read_num')
# 按照创建时间来查找
else:
articles = Articles.objects.filter(
Q(title__icontains=search) | Q(body__icontains=search) | Q(column__title__icontains=search))
# 做分页 导入django的分页类 开发项目的时候
paginator = Paginator(articles, settings.PAGE_NUM)
page = request.GET.get('page', 1)
# 在html页面中 每次只展示一页的数据
articles = paginator.get_page(page)
return render(request, 'articles/index.html', locals())
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
