第12次04 ：首页展示用户名

登录后，跳转到首页，首页会展示用户名；未登录时，首页将展示登录与注册的选项。

第一步：index.html

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小鱼商城-首页</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
    <script type="text/javascript" src="{{ static('js/jquery-1.12.4.min.js') }}"></script>
	<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
</head>
<body>
	<div id="app">
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到小鱼商城!</div>
			<div class="fr">
				<div v-if="username" class="login_btn fl">
                    欢迎您：<em>[[ username ]]</em>
                    <span>|</span>
{#                    <a href="{{ url('users:logout') }}">退出</a>#}
                </div>
				 <div v-else class="login_btn fl">
                    <a href="{{ url('users:login') }}">登录</a>
                    <span>|</span>
                    <a href="{{ url('users:register') }}">注册</a>
                </div>
{#				<div class="user_link fl">#}
{#					<span>|</span>#}
{#					<a href="{{ url('users:info') }}">用户中心</a>#}
{#					<span>|</span>#}
{#					<a href="cart.html">我的购物车</a>#}
{#					<span>|</span>#}
{#					<a href="user_center_order.html">我的订单</a>#}
{#				</div>#}
			</div>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2024 北京小鱼商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	</div>
    <script type="text/javascript" src="{{ static('js/common.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/slide.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/index.js') }}"></script>
</body>
</html>

第二步：补充后端代码，在登录与注册视图中增加设置cookie的语句

LoginView

python 复制代码

class LoginView(View):
    def get(self, request):
        return render(request, 'login.html')

    def post(self, request):
        username = request.POST.get('username')
        password = request.POST.get('password')
        remembered = request.POST.get('remembered')

        if not all([username, password]):
            return HttpResponseForbidden('缺少必须参数')

        if not re.match(r'^[a-zA-Z0-9_-]{5,20}$', username):
            return HttpResponseForbidden('请输入正确的用户名')

        if not re.match(r'^[a-zA-Z0-9]{8,20}$', password):
            return HttpResponseForbidden('密码8-20位')

        user = authenticate(username=username, password=password)

        if user is None:
            return render(request, 'login.html', {'account_errmsg': '账号或密码错误'})

        login(request, user)
        print(request.session.session_key)
        if remembered != 'on':
            request.session.set_expiry(0)
        else:
            request.session.set_expiry(None)  # 2周过期

        # 新增写入cookie
        response = redirect(reverse('contents:index'))
        response.set_cookie('username', user.username, max_age=3600 * 24 * 14)
        return response

注册视图

python 复制代码

class RegisterView(View):
    def get(self, request):
        return render(request, 'register.html')

    def post(self, request):
        username = request.POST.get('username')
        password = request.POST.get('password')
        password2 = request.POST.get('password2')
        mobile = request.POST.get('mobile')
        allow = request.POST.get('allow')

        if not all([username, password, password2, mobile, allow]):
            return HttpResponseForbidden('缺少必要参数')

        if not re.match(r'^[a-zA-Z0-9_-]{5,20}$', username):
            return HttpResponseForbidden('请输入5-20位的用户名')

        if not re.match(r'^[a-zA-Z0-9]{8,20}$', password):
            return HttpResponseForbidden('请输入8-20位的密码')

        if password != password2:
            return HttpResponseForbidden('两次密码不一致')

        if not re.match(r'^1[3-9]\d{9}$', mobile):
            return HttpResponseForbidden('请输入正确的手机号')

        if allow != 'on':
            return HttpResponseForbidden('请勾选协议')
        try:
            user = User.objects.create_user(username=username, password=password, mobile=mobile)
        except DatabaseError:
            render(request, 'register.html', {'register_errmsg': '注册失败'})
        login(request, user)
		# 新增设置cookie
        response = redirect(reverse('contents:index'))
        response.set_cookie('username', user.username, max_age=3600 * 24 * 14)
        return response

第三步：在users应用中增加退出登录的视图类，完成清除cookie和重定向到首页的逻辑，并配置路由

python 复制代码

from django.contrib.auth import logout
class LogoutView(View):
    """退出登录"""

    def get(self, request):
        # 清除登录信息
        logout(request)
        # 响应，重定向到首页
        response = redirect(reverse('contents:index'))
        # 删除cookie
        response.delete_cookie('username')
        return response

配置路由，users应用下子路由新增

python 复制代码

path('logout/', views.LogoutView.as_view(), name='logout'),