1. 创建视图函数
# 需要处于登陆的视图,多继承:LoginRequiredMixin,View
class UserinfoView(LoginRequiredMixin, View):
def get(self, request):
# 登陆-->进入用户中心页面;不登陆-->进入登陆页面
data = {"username": request.user.username, "mobile": request.user.mobile}
return render(request, "users/userinfo.html", context=data)
2. 创建路由
# 用户中心
re_path(r'userinfo/$', UserinfoView.as_view(), name="userinfo"),
3. 创建userinfo.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/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 class="login_btn fl">
欢迎您：<em>{[ username ]}</em>
<span>|</span>
<a href="{{ url('users:logout') }}">退出</a>
</div>
<div class="user_link fl">
<span>|</span>
<a href="{{ url('users:userinfo') }}">用户中心</a>
<span>|</span>
<a href="">我的购物车</a>
<span>|</span>
<a href="">我的订单</a>
</div>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="{{ url('shouye:index') }}" class="logo fl"><img src="{{ static('images/logo.png') }}"></a>
<div class="search_wrap fl">
<form method="get" action="/search/" class="search_con">
<input type="text" class="input_text fl" name="q" placeholder="搜索商品">
<input type="submit" class="input_btn fr" name="" value="搜索">
</form>
<ul class="search_suggest fl">
<li><a href="#">满199减100</a></li>
<li><a href="#">家装建材</a></li>
<li><a href="#">潮流家电</a></li>
<li><a href="#">华为新品</a></li>
</ul>
</div>
</div>
<div class="main_con clearfix">
<div class="left_menu_con clearfix">
<h3>用户中心</h3>
<ul>
<li><a href="{{ url('users:userinfo') }}" class="active">· 个人信息</a></li>
<li><a href="">· 收货地址</a></li>
<li><a href="">· 全部订单</a></li>
<li><a href="">· 修改密码</a></li>
</ul>
</div>
<div class="right_content clearfix" v-cloak>
<div class="info_con clearfix">
<h3 class="common_title2">基本信息</h3>
<ul class="user_info_list">
<li><span>用户名：</span>{[ username ]}</li>
<li><span>联系方式：</span>{[ mobile ]}</li>
</ul>
</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 © 2018 北京*******有限公司 All Rights Reserved</p>
<p>电话：010-******* 京ICP备********号</p>
</div>
</div>
</body>
<script type="text/javascript">
let username = "{{ username }}";
let mobile = "{{ mobile }}";
</script>
<script type="text/javascript" src="{{ static('js/userinfo.js') }}"></script>
</html>
4. 创建userinfo,js
var v = new Vue({
el: "#app",
delimiters: ["{[", "]}"],
data: {
username: username,
mobile: mobile,
},
mounted() {
},
methods: {}
})
浙公网安备 33010602011771号