Markdown-Online

文末附源码

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

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

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

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

下面是截图加简介时间：

系统预览

预览地址：Markdown-Online

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

以下是系统的主页，啥也没有~~

---

界面介绍

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

   <!-- login.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. 注册界面
   
   注册界面的代码和登录几乎没有太大的区别。

   首先是注册表单：

   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')
   

   然后是对应的前端代码：

   <!-- register.html -->
   {% 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. 密码修改
   
   密码修改表单：

   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/<int:id>", 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. 邮箱验证
   
   这也是本次更新的重点，用户在注册账号之后，系统会对注册邮箱发送一封邮件，用户在没有验证邮箱之前不能登录系统。
   前后端的处理和之前一样，本次不再重复，只贴一段flask-email的使用代码：

   @bp.route('/email_send/<emailbox>')
   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. 文章列表
   
   支持分页，删除文章，这里还有一个admin按钮，可以跳转管理员界面。普通用户看不到这个按钮。

6. 文章编辑
   
   这里和之前没有什么两样。

7. 编辑器主题
   
   在编辑器的下面，是编辑器的主题选择，可以选择工具条、编辑区、预览区的主题风格。
   尤其是编辑区，有多种可选的主题。

8. 管理页面
   
   这里是简单的管理页面，虽然页面看起来非常简单，但是包括了权限管理、用户删除等多种功能。

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

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

总结

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