两天时间，用Python重写了我的Markdown-Online系统，主要使用了Flask技术栈的基础知识，这不比游戏有意思？

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

界面介绍

---

1. 登录界面

Flask开发的标准步骤：wtf表单创建、html代码编写，最后是视图函数，当然不同的人顺序可能稍有区别.

使用Flask-wtf的最大好处就是表单的验证，其次就是配合Bootstrap能够快速生成的简单的界面。

首先是LoginForm的代码：

forms.py

class LoginForm(FlaskForm):

email = EmailField(‘Email’, validators=[DataRequired(), Email()])

password = PasswordField(‘Password’, validators=[DataRequired()])

submit = SubmitField(‘Sign In’)

然后是对应的html

{% extends ‘base.html’ %}

{% from ‘bootstrap5/form.html’ import render_field %}

{% block content %}

Sign In

---

{% for msg in get_flashed_messages() %}

{{msg}}

{% endfor %}

{{ form.csrf_token() }}

{{ render_field(form.email,placeholder=‘Your email’)}}

{{render_field(form.password,placeholder=‘Your password’)}}

{{render_field(form.submit)}}

Sign Up

{% endblock %}

最后是对应的后端view代码：

@bp.route(‘/login’, methods=[‘POST’, ‘GET’])

def login():

print(‘auth/login’)

loginForm = LoginForm()

if loginForm.validate_on_submit(): #登录

print(‘validated’)

email = loginForm.email.data

password = loginForm.password.data

user = User.query.filter_by(email=email).first()

if not user:

flash(‘User does not exist’)

return render_template(‘login.html’, form=loginForm)

if user.role >= const.DB_ROLE_VISITOR:

flash(‘Please verify the mailbox first’)

return redirect(url_for(‘auth.email_verify’))

if not user.check_password(password):

flash(‘Incorrect password’)

return render_template(‘login.html’, form=loginForm)

login_user(user)

return redirect(url_for(‘post.list’))

return render_template(‘login.html’, form=loginForm)

2. 注册界面

注册界面的代码和登录几乎没有太大的区别。

首先是注册表单：

class RegisterForm(FlaskForm):

email = EmailField(‘Email’, validators=[DataRequired(), Email()])

username = StringField(‘Username’, validators=[DataRequired(), Length(min=3, max=16)])

password = PasswordField(‘Password’, validators=[DataRequired(), Length(min=6, max=12)])

submit = SubmitField(‘Sign Up’)

然后是对应的前端代码：

{% extends ‘base.html’ %}

{% from ‘bootstrap5/form.html’ import render_field,render_form_row %}

{% block content %}

Sign Up

---

{% for msg in get_flashed_messages() %}

{{msg}}

{% endfor %}

{{ form.csrf_token() }}

{{ render_field(form.email,placeholder=‘Enter your email address’)}}

{{ render_field(form.username,placeholder=‘Make a name you like’)}}

{{render_field(form.password,placeholder=‘Create a strong password’)}}

{{render_field(form.submit)}}

Sign In

{% endblock %}

最后是视图代码：

@bp.route(‘/register’, methods=[‘POST’, ‘GET’])

def register():

print(‘auth/register’)

registerForm = RegisterForm()

if registerForm.validate_on_submit():

print(‘validated’)

email = registerForm.email.data

username = registerForm.email.data

password = registerForm.password.data

user = User.query.filter_by(email=email).first()

if user:

flash(‘Mailbox registered’)

return render_template(‘register.html’, form=registerForm)

user = User(email=email, password=password, username=username)

addUser(user)

newPost(user) # 为当前用户添加一个文章

return redirect(url_for(‘auth.email_send’, emailbox=email))

return render_template(‘register.html’, form=registerForm)

3. 密码修改

密码修改表单：

class RePasswardForm(FlaskForm):

password = PasswordField(‘Original Password’, validators=[DataRequired()])

newpaswd = PasswordField(‘New Password’, validators=[DataRequired(), Length(min=6, max=12)])

confpswd = PasswordField( ‘Confirm Password’, validators=[DataRequired(), Length(min=6, max=12)])

submit = SubmitField(‘Confirm’)

密码修改界面：

{% extends ‘base.html’ %}

{% from ‘bootstrap5/form.html’ import render_field %}

{% block content %}

{% for msg in get_flashed_messages() %}

{{msg}}

{% endfor %}

{{ form.csrf_token() }}

{{ render_field(form.password) }}

{{ render_field(form.newpaswd) }}

{{ render_field(form.confpswd) }}

{{ render_field(form.submit) }}

Sign Up

{% endblock %}

密码修改后端代码：

最后

🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。
🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。
🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！