1. 用户名写入到cookie

# 响应登录结果
response =  redirect(reverse('home:index'))

# 设置状态保持的周期
if remember != 'on':
    # 没有记住用户：浏览器会话结束就过期
    request.session.set_expiry(0)
    # 设置cookie
    response.set_cookie('is_login', True)
    response.set_cookie('username', user.username, max_age=30 * 24 * 3600)
else:
    # 记住用户：None表示两周后过期
    request.session.set_expiry(None)
    # 设置cookie
    response.set_cookie('is_login', True, max_age=14*24 * 3600)
    response.set_cookie('username', user.username, max_age=30 * 24 * 3600)
#返回响应
return response

2. Vue渲染首页用户名

1.index.html

<!-- 如果用户已经登录，则显示用户名下拉框 -->
<li class="nav-item dropdown" v-if="is_login">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">[[username]]</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu">
        <a class="dropdown-item" href="../static/write_blog.html">写文章</a>
        <a class="dropdown-item" href='../static/center.html'>个人信息</a>
        <a class="dropdown-item" href='#'>退出登录</a>
    </div>
</li>
<!-- 如果用户未登录，则显示登录按钮 -->
<li class="nav-item" v-else>
    <a class="nav-link" href="login.html">登录</a>
</li>

2.index.js

mounted(){
    //获取用户名信息
    this.username=getCookie('username');
    //获取是否登录信息
    this.is_login=getCookie('is_login');
},

 效果展示：