一、密码修改功能页面设计

1.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>
</head>
<body><div id="app" 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="{{ url('users:center') }}">· 个人信息</a></li><li><a href="../static/user_center_order.html">· 全部订单</a></li><li><a href="{{ url('users:showaddress') }}" >· 收货地址</a></li><li><a href="{{ url('users:updatepass') }}" class="active">· 修改密码</a></li></ul></div><div class="right_content clearfix"><div class="info_con clearfix"><h3 class="common_title2">修改密码</h3><div class="site_con pass_change_con"><form class="change_pwd"><div class="form_group"><label>当前密码：</label><input @blur="check_opwd" type="password" class="old_pwd" name="old_pwd"><span class="old_pwd_error">请输入8-12位的密码</span></div><div class="form_group"><label>新密码：</label><input @blur="check_pwd" type="password" class="new_pwd" name="new_pwd"><span class="new_pwd_error">请输入8-12位的密码</span></div><div class="form_group"><label>确认新密码：</label><input @blur="check_cpwd" type="password" class="new_cpwd" name="new_cpwd"><span class="new_cpwd_error">两次输入的密码不一致</span></div><input @click="on_submit" type="submit" name="" value="确 定" class="info_submit" ><input type="reset" name="" value="取 消" class="info_submit info_reset"></form></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 © 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_pass.js') }}"></script>
</body>
</html>

2.JS

var vm = new Vue({el: '#app',// 修改Vue变量的读取语法，避免和django模板语法冲突delimiters: ['[[', ']]'],data: {host: host,old_pwd: '',new_pwd: '',new_cpwd: '',error_opwd: false,error_pwd: false,error_cpwd: false,username: '',},mounted() {this.username = getCookie('username');},methods: {// 检查旧密码check_opwd(){var re = /^[0-9A-Za-z]{8,20}$/;if (re.test(this.old_pwd)) {this.error_opwd = false;} else {this.error_opwd = true;}},// 检查新密码check_pwd(){var re = /^[0-9A-Za-z]{8,20}$/;if (re.test(this.new_pwd)) {this.error_pwd = false;} else {this.error_pwd = true;}},// 检查确认密码check_cpwd: function () {if (this.new_pwd != this.new_cpwd) {this.error_cpwd = true;} else {this.error_cpwd = false;}},// 提交修改密码on_submit: function () {this.check_opwd();this.check_pwd();this.check_cpwd();if (this.error_opwd == true || this.error_pwd == true || this.error_cpwd == true) {// 不满足修改密码条件：禁用表单window.event.returnValue = false}},}
});

具体后端逻辑就不在说明就是改个密码

二、页面效果

【愚公系列】2022年01月 Django商城项目18-用户中心-密码修改功能页面设计相关推荐

【愚公系列】2022年01月 Django商城项目13-登录界面-QQ登录功能实现
文章目录前言 1.QQ互联开发者申请 2.QQ互联应用申请 3.网站对接QQ登录一.django实际对接流程 1.创建抽象模型类 2.创建QQ用户模型类 3.注册应用 4.配置QQ登录信息 5.登 ...
【愚公系列】2022年01月 Django商城项目 24-商品列表页功能实现
文章目录一.商品列表页功能实现 1.后台查询代码二.面包屑信息展示 1.前台html代码 2.实际效果三.列表页信息展示 1.前台html代码 2.实际效果一.商品列表页功能实现 1.后台查询 ...
【愚公系列】2022年02月 Django商城项目 34-订单支付功能实现(支付宝)
文章目录前言一.回调逻辑处理 1.安装SDK 2.生成私钥公钥 3.setting中支付宝配置信息 4.生成支付URL 5.接收支付成功信息前言具体支付宝支付流程可参考这篇文章:https:/ ...
【愚公系列】2022年01月华为鸿蒙OS-03-四种模式开发实操
文章目录前言一.使用JS语言开发(传统代码方式) 1.index页面源码 2.details页面源码二.使用JS语言开发(低代码方式) 1.新建工程:注意选择 2.选择低代码新建页面 3.页面分 ...
2022年01月世界编程语言排行
2022年01月世界编程语言排行 2022年1月TIOBE指数一月标题:2021年度Python编程语言 Python赢得了久负盛名的TIOBE编程语言奖.祝贺!这是连续第二次.该奖项授予一年内获得 ...
2022最新Emlog新版导航源码带用户中心
正文: 2022最新Emlog新版导航源码+带用户中心,环境要求:PHP + MYSQL PHP版本7.0+ 下载方式: lanzou.com/iVJxC01kl12b
【愚公系列】2022年08月微信小程序-(rich-text)富文本和(text)文本的详解
文章目录前言一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用二.文本 1.文本属性前言富文本格式 ...
【愚公系列】回顾2022年技术博客的总结与展望
文章目录前言一.回顾2022年的活动和成就 1.2022年所做的事 2.2022年收获和成就二.分析2022年的表现 1.过去一年优缺点分析 2.过去一年表现认同度三.展望2023年的计划 1 ...
【愚公系列】（HDC.Cloud）华为开发者大会游记
文章目录前言一.(HDC.Cloud)华为开发者大会游记 1.受邀参加 2.开发者大会首页 3.第一天 4.第二天 5.第三天总结前言 HDC.Cloud华为开发者大会是由华为举办的一年一度的 ...
【愚公系列】华为产品测评官－开发者之声（CodeArts产品流程体验）
文章目录前言一.华为云CodeArts产品体验 1.软件开发生产线使用流程 1.1 配置项目 1.2 配置代码仓库 1.3 配置流水线 2.使用软件开发生产线快速搭建项目(ECS篇) 2.1 前提 ...

【愚公系列】2022年01月 Django商城项目18-用户中心-密码修改功能页面设计

文章目录

一、密码修改功能页面设计

1.HTML

2.JS

二、页面效果

【愚公系列】2022年01月 Django商城项目18-用户中心-密码修改功能页面设计相关推荐

最新文章

热门文章