【愚公系列】2022年01月 Django商城项目14-用户中心-界面设计
【愚公系列】2022年01月 Django商城项目14-用户中心-界面设计
愚公搬代码
发布于 2022-01-21 13:56:12
发布于 2022-01-21 13:56:12
文章目录
一、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 src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
let username = "{{ username }}";
let mobile = "{{ mobile }}";
let email = "{{ email }}";
let email_active = "{{ email_active }}";
</script>
</head>
<body>
<div id="app" v-cloak=v-cloak>
<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>
{# url 本质是 reverse#}
<a href="{{ url('users:logout') }}">退出</a>
</div>
<div v-else=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:center') }}">用户中心</a>
<span>|</span>
<a href="../static/cart.html">我的购物车</a>
<span>|</span>
<a href="../static/user_center_order.html">我的订单</a>
</div>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="index.html" 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="#">索尼微单</a></li>
<li><a href="#">优惠15元</a></li>
<li><a href="#">美妆个护</a></li>
<li><a href="#">买2免1</a></li>
</ul>
</div>
</div>
<div class="main_con clearfix">
<div class="left_menu_con clearfix">
<h3>用户中心</h3>
<ul>
<li><a href="user_center_info.html" class="active">· 个人信息</a></li>
<li><a href="../static/user_center_order.html">· 全部订单</a></li>
<li><a href="../static/user_center_site.html">· 收货地址</a></li>
<li><a href="../static/user_center_pass.html">· 修改密码</a></li>
</ul>
</div>
<div class="right_content clearfix">
<div class="info_con clearfix">
<h3 class="common_title2">基本信息</h3>
<ul class="user_info_list">
<li><span>用户名：</span>小徐</li>
<li><span>联系方式：</span>13960699696</li>
<li>
<span>Email：</span>
<input type="text" name="email" class="email" />
<input type="button" name="" value="保 存" />
<input type="reset" name="" value="取 消" />
</li>
</ul>
</div>
<h3 class="common_title2">最近浏览</h3>
<div class="has_view_list">
<ul class="goods_type_list clearfix">
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods003.jpg') }}" /></a>
<h4><a href="../static/detail.html">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods004.jpg') }}" /></a>
<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods005.jpg') }}" /></a>
<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods006.jpg') }}" /></a>
<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
<div class="operate">
<span class="price">￥2699.00</span>
<span class="unit">台</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
<li>
<a href="../static/detail.html"><img src="{{ static('images/goods/goods007.jpg') }}" /></a>
<h4><a href="#">急速路由</a></h4>
<div class="operate">
<span class="price">￥64.5</span>
<span class="unit">6.45/500g</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer no-mp">
<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 © 2022 福建小徐网络科技有限公司 All Rights Reserved</p>
<p>电话：13960699696 闽ICP备*******8号</p>
</div>
</div>
<script type="text/javascript" src="{{ static('js/host.js') }}"></script>
<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
<script type="text/javascript" src="{{ static('js/user_center_info.js') }}"></script>
</body>
</html>二、js文件
var vm = new Vue({
el: '#app',
// 修改Vue变量的读取语法，避免和django模板语法冲突
delimiters: ['[[', ']]'],
data: {
host: host,
username: '',
mobile: mobile,
email: email,
email_active: email_active,
set_email: false,
error_email: false,
error_email_message: '',
send_email_btn_disabled: false,
send_email_tip: '重新发送验证邮件',
histories: []
},
// ES6语法
mounted() {
// 额外处理用户数据
this.email_active = (this.email_active=='True') ? true : false;
this.set_email = (this.email == '') ? true : false;
this.username = getCookie('username');
console.log(this.username)
// 请求浏览历史记录
//this.browse_histories();
},
methods: {
// 检查email格式
check_email(){
var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
if (re.test(this.email)) {
this.error_email = false;
} else {
this.error_email_message = '邮箱格式错误';
this.error_email = true;
return;
}
},
// 取消保存
cancel_email(){
this.email = '';
this.error_email = false;
},
// 保存email
save_email(){
// 检查email格式
this.check_email();
if (this.error_email == false) {
var url = this.host + '/emails/';
axios.put(url, {
email: this.email
}, {
headers: {
'X-CSRFToken':getCookie('csrftoken')
},
responseType: 'json'
})
.then(response => {
if (response.data.code == '0') {
this.set_email = false;
this.send_email_btn_disabled = true;
this.send_email_tip = '已发送验证邮件';
} else if (response.data.code == '4101') {
location.href = '/login/?next=/info/';
} else { // 5000 5001
this.error_email_message = response.data.errmsg;
this.error_email = true;
}
})
.catch(error => {
console.log(error.response);
});
}
},
// 请求浏览历史记录
browse_histories(){
var url = this.host + '/browse_histories/';
axios.get(url, {
responseType: 'json'
})
.then(response => {
this.histories = response.data.skus;
for(var i=0; i<this.histories.length; i++){
this.histories[i].url = '/goods/' + this.histories[i].id + '.html';
}
})
.catch(error => {
console.log(error.response);
})
}
}
});三、页面效果
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-01-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录