网站导航
> 文档中心 > 我花了两天时间，升级了我的Markdown-Online系统

我花了两天时间，升级了我的Markdown-Online系统

网友: 文档中心 2022-05-02 07:54:37

Markdown-Online

之前写的《在线Markdown编辑系统》本来只是自己瞎搞的，没想到用起来真香~~

而且，还有很多童鞋对之前的叙利亚战损版系统非常感兴趣，正好趁着五一放假，我花了两天时间重构了之前的系统，引入了前端框架，使界面看起啦更统一，同时也增加了一些其他的功能。

不过，关于Flask搭建的文章，我写太多了，感觉有点皮了，本文就不再做过多解读，有兴趣的可以看我之前的文章《我用Python写网站》，有点粗糙，还能看吧。

如果，有人想了解更多可留言催更，最近在研究JS，精力分散了。

下面是截图加简介时间：

系统预览

预览地址：Markdown-Online

有兴趣的同学可以访问以上链接，注册个账号瞅一瞅，不要用手机打开，没有针对移动端做设计~~

以下是系统的主页，啥也没有~~
我花了两天时间，升级了我的Markdown-Online系统

界面介绍

  1. 登录界面我花了两天时间，升级了我的Markdown-Online系统
    Flask开发的标准步骤：wtf表单创建、html代码编写，最后是视图函数，当然不同的人顺序可能稍有区别.
    使用Flask-wtf的最大好处就是表单的验证，其次就是配合Bootstrap能够快速生成的简单的界面。
    首先是LoginForm的代码：

    # forms.pyclass 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 %}<div style="height: 600px; padding-top: 100px;">    <div style="width: 36rem;" class="mx-auto shadow-sm px-3 py-5 bg-body rounded"> <h2>Sign In</h2> <hr> {% for msg in get_flashed_messages() %} <p class="text-sm-start text-warning">{{msg}}</p> {% endfor %} <form method="post">     {{ form.csrf_token() }}     {{ render_field(form.email,placeholder='Your email')}}     {{render_field(form.password,placeholder='Your password')}}     {{render_field(form.submit)}}     <a class="btn btn-light" href="{{url_for('auth.register')}}"> Sign Up</a> </form>    </div></div>{% 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. 注册界面
    我花了两天时间，升级了我的Markdown-Online系统
    注册界面的代码和登录几乎没有太大的区别。

    首先是注册表单：

    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 %}<div style="height: 600px; padding-top: 100px;">   <div style="width: 36rem;" class="mx-auto shadow-sm px-3 py-5  bg-body rounded"><h2>Sign Up</h2><hr>{% for msg in get_flashed_messages() %}<p class="text-sm-start text-warning">{{msg}}</p>{% endfor %}<form method="post">    {{ 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)}}    <a class="btn btn-light" href="{{url_for('auth.login')}}"> Sign In</a></form>   </div></div>{% 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. 密码修改
    我花了两天时间，升级了我的Markdown-Online系统
    密码修改表单：

    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 %}<div style="height: 600px; padding-top: 100px;">    <div style="width: 36rem;" class="mx-auto shadow-sm px-3 py-5 bg-body rounded"> {% for msg in get_flashed_messages() %} <p class="text-sm-start text-warning">{{msg}}</p> {% endfor %} <form method="post">     {{ form.csrf_token() }}     {{ render_field(form.password) }}     {{ render_field(form.newpaswd) }}     {{ render_field(form.confpswd) }}     {{ render_field(form.submit) }}     <a class="btn btn-light" href="{{url_for('auth.register')}}"> Sign Up</a> </form>    </div></div>{% endblock %}

    密码修改后端代码：

    @login_required@bp.route("/resetpwd/", methods=['GET', 'POST'])def resetpwd(id):    print('auth/resetpwd')    resetForm = RePasswardForm()    if resetForm.validate_on_submit(): password = resetForm.password.data newpaswd = resetForm.newpaswd.data if not current_user.check_password(password):     flash('The original password is incorrect')     return render_template('reset_pwd.html', form=resetForm) current_user.password = newpaswd updateUser(current_user) return redirect(url_for('auth.logout'))    return render_template('reset_pwd.html', form=resetForm)

  4. 邮箱验证
    我花了两天时间，升级了我的Markdown-Online系统
    这也是本次更新的重点，用户在注册账号之后，系统会对注册邮箱发送一封邮件，用户在没有验证邮箱之前不能登录系统。
    前后端的处理和之前一样，本次不再重复，只贴一段flask-email的使用代码：

    @bp.route('/email_send/')def email_send(emailbox):    # 发送邮箱验证码    print('email_send')    user = User.query.filter_by(email=emailbox).first()    if not user: return '404'    if user.role >= const.DB_ROLE_BAD: flash('Sorry!') return '404'    msg = Message('Mailbox verification - Markdown-Online',    sender=current_app.config['MAIL_USERNAME'],    recipients=[emailbox])    code = random.randint(100000, 999999)    msg.body = "Your verification code is:" + str( code) + "\n Please keep it safe."    send_async_email(msg)    user.status = code    user.role += 1    updateUser(user)    return redirect(url_for('auth.email_verify'))

    以上代码会向目标邮箱发送一封带有验证码的邮件。
    使用flask-email插件，需要配置的参数：

    SECRET_KEY = b'_5#y2L"99567\n\xec]/'    # Flask需要的密钥，一个复杂的字符串即可ICP='京ICP备20210xxxxxx号'# 网站的备案号，需要备案才能获得MAIL_SERVER = 'smtp.qq.com'# 发送邮件需要的smtp服务器，这里是qq邮箱的MAIL_PORT = 465# 端口，一般都是465，如果使用163邮箱，可以百度一下MAIL_USE_SSL = True# SSL加密的传输方式MAIL_USE_TSL = False# 传统的传输方式MAIL_USERNAME = 'markdown-online@qq.com'# 这是你想用来发邮件的邮箱，可以填你自己的邮箱MAIL_PASSWORD = 'wtvcrkyjzlagbadg'# 邮箱的授权码，但是需要去申请一个HOST_NAME='www.weidawang.site'# 这是我的域名，写不写都行SMMS_AUTHORIZATION='7qV3kO1Fc8U6ixxxxxx'# sm.ms图床的授权码，上文介绍了获取方式

  5. 文章列表
    我花了两天时间，升级了我的Markdown-Online系统
    支持分页，删除文章，这里还有一个admin按钮，可以跳转管理员界面。普通用户看不到这个按钮。

  6. 文章编辑
    我花了两天时间，升级了我的Markdown-Online系统
    这里和之前没有什么两样。

  7. 编辑器主题
    我花了两天时间，升级了我的Markdown-Online系统
    在编辑器的下面，是编辑器的主题选择，可以选择工具条、编辑区、预览区的主题风格。
    尤其是编辑区，有多种可选的主题。

  8. 管理页面
    我花了两天时间，升级了我的Markdown-Online系统
    这里是简单的管理页面，虽然页面看起来非常简单，但是包括了权限管理、用户删除等多种功能。

    其中，管理员显示红色，并有特殊标记，用户、游客、封号都有不同的颜色和标记。

    管理员可以授权普通用户成为管理员，也可以删除管理员的管理权限。

总结

系统虽小，五脏俱全，肝了两天，好累~~
欢迎大家体验，我这里就不详细介绍了，睡了睡了
预览地址：Markdown-Online
代码下载：Markdown-Online

网络标签：

相关问题