修改邮箱页面布局

新建cms/cms_resetemail.html

{% extends 'cms/cms_base.html' %}

{% block title %}修改邮箱-CMS管理系统{% endblock %}

{% block page_title %}个人中心>>>修改邮箱{% endblock %}

{% block head %}
<style>
.form-container{
width: 300px;
}
</style>
{% endblock %} {% block main_content %}
<form class="form-container">
<div class="form-group">
<div class="input-group">
<input type="email" class="form-control" placeholder="新的邮箱" name="email">
<div class="input-group-addon" style="cursor: pointer" id="get_captcha">获取验证码</div>
</div>
</div> <div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="填写验证码" name="captcha">
</div>
</div> <div class="form-group">
<div class="input-group">
<button type="submit" class="btn btn-primary" id="submit">提交修改</button>
</div>
</div> </form> {% endblock %}

cms_resetemail.html

创建一个视图,编辑cms.views.py

...
class ResetEmailView(views.MethodView):
decorators = [login_required]
def get(self):
return render_template('cms/cms_resetemail.html') def post(self):
pass bp.add_url_rule('resetemail', view_func=ResetEmailView.as_view('resetemail'))

修改cms/cms_base.html中的"修改密码" 链接

 <li><a href="{{ url_for('cms.resetemail') }}">修改邮箱</a></li>

完成布局如下

获取验证码

流程:

  用户输入 新的邮箱,点击 获取验证码,可以通过get方法使用AJAX发送到后台

  后台接收到用户的新的邮箱,生成6位数的随机验证码,通过flask-mail插件发送验证码到该邮箱

  把 邮箱作为key,验证码作为value存入memcached中,生存周期为300s(5分钟)

首先来配置flask-mail

安装flask-mail

pip install flask-mail

在exts.py中带falsk-mail

...
from flask_mail import Mail mail = Mail()

在主程序bbs.py中,把mail和app绑定

...
from exts import mail mail.init_app(app)

在config.py配置邮箱的连接和发送者信息,这里我是用的QQ邮箱

#mail
MAIL_SERVER = 'smtp.qq.com'
MAIL_PORT = ''
MAIL_USE_SSL = True #使用SSL,端口号为465或587
MAIL_USERNAME = 'sellsa@qq.com'
MAIL_PASSWORD = 'xxxxxxxxx' #注意,这里的密码不是邮箱密码,而是授权码
MAIL_DEFAULT_SENDER = 'sellsa@qq.com' #默认发送者

现在来的 cms.views写个视图函数来测试发送邮件

...
from exts import mail
from flask_mail import Message @bp.route('/test_email/')
def test_email():
msg = Message('Flask项目测试邮件', #这是邮件主题
sender='sellsa@qq.com',
recipients=['heboan@qq.com'], #发送给谁,这是个列表,可以有多个接收者
body='Hello, 这是一封测试邮件,这是邮件的正文')
mail.send(msg) #发送
return 'success'

 配置memecahced

因为我们要把验证码 存到 memcached中,所以这里先配置好它。

我在192.168.88.1服务器中安装memcached并且启动它

yum install -y memcached
systemctl start memcached #查看端口进程
[root@c1 ~]# netstat -lntp|grep memcached
tcp 0 0 0.0.0.0:11211 0.0.0.0:* LISTEN 2904/memcached
tcp6 0 0 :::11211 :::* LISTEN 2904/memcached

安装python-memecahced插件

pip install python-memcached

我们工具包utils下新建个文件xcache.py对memcached 来封装下

import memcache

mc = memcache.Client(["192.168.88.1:11211"], debug=True)

def set(key, value, timeout=300):
return mc.set(key=key, val=value, time=timeout) def get(key):
return mc.get(key) def delete(key):
return mc.delete(key)

准备工作做好,我们可以写获取验证码的视图了,编辑cms.views.py

...
from exts mail
from flask_mail import Message
from utils xcache
import string, random @bp.route('/email_captcha/')
@login_required
def email_captcha():
#/cms/emai_capthcha/?email=xxxx@qq.com
email = request.args.get('email')
if not email:
return xjson.json_params_error('请传递邮件参数!') #生成6位数的随机验证码
source = list(string.ascii_letters)
source.extend(map(lambda x:str(x), range(0,10)))
captcha = ''.join(random.sample(source, 6)) #发送邮件
msg = Message('BBS论坛更换邮箱验证码',
recipients=[email],
body='您的验证码:{},5分钟内有效'.format(captcha))
try:
mail.send(msg)
except Exception as err:
print(err)
return xjson.json_server_error(message='邮件发送失败') #验证码存入memcached
xcache.set(email, captcha)
return xjson.json_success(message='邮件发送成功')

AJAX请求,创建static/cms/js/resetemail.js

$(function () {
$('#get_captcha').click(function (event) {
event.preventDefault();
var email = $('input[name=email]').val();
if(!email){
xtalert.alertInfoToast('请输入邮箱');
return;
} bbsajax.get({
'url': '/cms/email_captcha/',
'data': {
'email': email
},
'success': function (data) {
if (data['code'] === 200){
xtalert.alertSuccessToast(data['message']);
}else{
xtalert.alertInfo(data['message']);
}
},
'fail': function (error) {
xtalert.alertNetworkError();
}
})
})
});

在cms_resetemail.html中引入resetemail.js

{% block head %}
...
<script src="{{ url_for('static', filename='cms/js/resetemail.js') }}"></script>
{% endblock %}

完成修改邮箱功能

现在就剩下把验证码填上,然后把邮箱和验证码提交到服务器进行验证并做相应的处理,然后返回处理结果到前端就OK了。

需要RestEmailView的post请求,对于用户提交上来的邮箱和验证码,我们需要对它们进行form验证。所以,编辑cms/forms.py,写一个RestEmailForm

...
from wtforms.validators import ValidationError
from .models import CMSUser
from utils import xcache class RestEmailForm(BaseForm):
email = StringField(validators=[Email(message='邮箱格式错误'),InputRequired(message='请输入邮箱') ])
captcha = StringField(validators=[Length(min=6, max=6, message='验证码长度错误')]) def validate_email(self, field):
user = CMSUser.query.filter_by(email=field.data).first()
if user:
raise ValidationError('该邮箱已存在') def validate_captcha(self, field):
email = self.email.data
captcha = field.data
captcha_cache = xcache.get(email)
#判断memcached中是否有对应的邮箱及验证码,小写进行比较,这样用户可以不区分大小写
if not captcha_cache or captcha.lower() != captcha_cache.lower():
raise ValidationError('邮箱验证码错误')

编辑RestEmailView的post请求

class ResetEmailView(views.MethodView):
decorators = [login_required]
def get(self):
return render_template('cms/cms_resetemail.html') def post(self):
resetemail_form = RestEmailForm(request.form)
if resetemail_form.validate():
email = resetemail_form.email.data
g.cms_user.email = email
db.session.commit()
return xjson.json_success('邮箱修改成功')
else:
message = resetemail_form.get_error()
return xjson.json_params_error(message)

编辑resetemail.js,再写一个ajax的post请求,当点击"提交修改",就会触发

//提交修改
$(function () {
$('#submit').click(function (event) {
event.preventDefault();
var emailE = $('input[name=email]');
var captchaE = $('input[name=captcha]'); var email = emailE.val();
var captcha = captchaE.val(); bbsajax.post({
'url': '/cms/resetemail/',
'data': {
'email': email,
'captcha': captcha
},
'success': function (data) {
if (data['code'] === 200){
xtalert.alertSuccessToast(data['message']);
emailE.val('');
captchaE.val('');
}else{
xtalert.alertInfo(data['message']);
}
},
'fail': function (error) {
xtalert.alertNetworkError();
}
})
})
});

到此,修改邮箱功能完成

34、Flask实战第34天:修改邮箱的更多相关文章

  1. 30、Django实战第30天:修改邮箱和用户信息

    修改个人邮箱需要完成两个接口,一个是获取验证码,一个是新的邮箱和验证码是否匹配 1.编辑users.views.py class SendEmailCodeView(LoginRequiredMixi ...

  2. Flask实战-留言板-安装虚拟环境、使用包组织代码

    Flask实战 留言板 创建项目目录messageboard,从GreyLi的代码中把Pipfile和Pipfile.lock文件拷贝过来,这两个文件中定义了虚拟环境中需要安装的包的信息和位置,进入m ...

  3. Flask实战第67天:Flask+Celery实现邮件和短信异步发送

    之前在项目中我们发送邮件和 短信都是阻塞的,现在我们来利用Celery来优化它们 官方使用文档: http://flask.pocoo.org/docs/1.0/patterns/celery/ re ...

  4. 一百零六:CMS系统之修改邮箱功能完成

    这里采用把验证码放到memcached中,所以封装一个memcached的操作 import memcache cache = memcache.Client(['127.0.0.1:11211'], ...

  5. 36、Flask实战第36天:客户端权限验证

    编辑cms_base.html <li><a href="#">{{ g.cms_user.username }}<span>[超级管理员]&l ...

  6. DJANGO里让用户自助修改邮箱地址

    因为在部署过程中会涉及用户邮件发送,如果有的同事不愿意收到太多邮件,则可以自己定义为不存在的邮箱. 我们在注册的时候,也不会写用户邮箱地址,那么他们也可以在这里自己更改. changeemail.ht ...

  7. 31、Flask实战第31天:cms后台修改密码

    cms后台修改密码界面布局 先创建cms_resetpwd.html页面,继承cms_base.html {% extends 'cms/cms_base.html' %} {% block titl ...

  8. 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...

  9. 34、Django实战第34天:退出登录

    编辑users.view.spy ... from django.contrib.auth import authenticate, login, logout from django.http im ...

随机推荐

  1. redis linux下的环境搭建

    系统  CentOS7 Redis 官网下载   https://redis.io/download 1.下载解压 [root@TestServer-DFJR programs]# /usr/loca ...

  2. 51nod 1363 最小公倍数之和 ——欧拉函数

    给出一个n,求1-n这n个数,同n的最小公倍数的和.例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mod 1000 ...

  3. 【51NOD】独木舟

    [算法]贪心 [题解]比较经典,用l,r两个定位指针分别从左右向中间推进. #include<cstdio> #include<algorithm> #include<c ...

  4. 【洛谷 P2761】 软件补丁问题(状态压缩,最短路)

    题目链接 第四题. 初看题目很懵,网络流这么厉害的吗,毫无头绪去看题解.. 所以这和网络流有什么关系呢? 把规则用二进制保存下来,然后跑最短路救星了. 在线跑,离线连边太慢了. (以后干脆不管什么题直 ...

  5. nyoj 15 括号匹配(二) (经典dp)

    题目链接 描述 给你一个字符串,里面只包含"(",")","[","]"四种符号,请问你需要至少添加多少个括号才能使这些 ...

  6. ubuntu 玩转 nodejs

    安装nginx 首先添加nginx_signing.key(必须,否则出错) $ wget http://nginx.org/keys/nginx_signing.key $ sudo apt-key ...

  7. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  8. Linux中的vim实用命令 -- (转)

    VI 有2个模式.我自己定义的   1. 命令模式,一开始进去的模式.一些指定的键盘输入会产生不同的效果 2. 输入模式,在命令模式下输入冒号(:) 就可以进入输入模式.按Esc键即可退出命令模式. ...

  9. 【自己练习】linux常见命令——(六)

    菜鸟教程命令大全 http://www.runoob.com/linux/linux-command-manual.html 命令大全:      http://man.linuxde.net/ ta ...

  10. Git常规配置与基本用法

    Git环境配置 一. 全局配置 1. 配置文件 git全局配置文件.gitconfig默认在当前系统用户文件夹下,window可运行%USERPROFILE%查找,Mac系统在cd ~查找. 具体配置 ...