一.表单
1.基础
1.1 下载
格式： pip install flask-wtf
1.2 安全配置
格式： app.config['SECRET_KEY'] = 'passwd you want'
解释：为了防止表单中出现 CSRF跨站脚本攻击，故加密一个参数，来验证是否真是用户所提交的表单
![三.Flask 表单[flask-wtf][editor.md][prism.js]]](https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230809/dfd0565082374eaea119ca48159c1e65.png)
; 1.3 开始
导入
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired
解释：
from flask_wtf import FlaskForm是为了继承from wtforms import StringField,SubmitField是表单里面的例如input，submit，button等标签from wtforms.validators import DataRequired是提供验证的工具
继承
class Form(FlaskForm):
name = StringField('nei',validators=[DataRequired()])
submit = SubmitField('提交')
写入
<form method="post">
{{ form.csrf_token }}
{{ form.name() }}
{{ form.submit() }}
</form>
路由
@app.route('/bd',methods=['GET','POST'])
def show_bd():
form = Form()
if form.validate_on_submit():
print(form.name.data)
form.name.data=''
else:
print(form.errors)
return render_template('11.html',form=form)
2.标签
![三.Flask 表单[flask-wtf][editor.md][prism.js]]](https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230809/e8333be7be7b47ac9b9d13d938b17ca6.png)
; 3.验证器
![三.Flask 表单[flask-wtf][editor.md][prism.js]]](https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230809/d5decc90ef264059b93fb5d1556e0f73.png)
解释：验证器只能在后端验证数据
用法: 实例化后的类名.validate_on_submit()在验证成功时返回ture； 实例化后的类名.errors设置好if语句后在验证失败返回自己设定的message(没有自己定义就是默认)
格式： name = StringField('nei',validators=[DataRequired()])
4.改善用户体验
前要：如何提交过一次表单再次提交就会由 浏览器自己弹出窗口，这是因为刷新前 最后一次状态是POST，只要使刷新前 最后一次状态是GET，问题就能解决，用重定向来解决
@app.route('/bd',methods=['GET','POST'])
def show_bd():
form = Form()
if request.method == 'POST':
if form.validate_on_submit():
flash('yes')
return redirect(url_for('show_bd'))
else:
flash(form.errors['name'][0])
return redirect(url_for('show_bd'))
return render_template('11.html',form=form)
5 editor.md
解释：该软件能够在网页中嵌入markdown编辑器
配置：复制整个文件到 static目录下,下载上的文件很多也特别乱，不是全部都需要
文件改变：我把\editormd\editormd.min.js的 ''改为 ''目得：是在加’#’的前提下显示带颜色字体
路由设置：
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField,TextAreaField
from wtforms.validators import DataRequired
class Fromopen(FlaskForm):
title = StringField(validators=[DataRequired()])
submit = SubmitField('提交')
text = TextAreaField(validators=[DataRequired()])
@app.route('/md',methods=['GET','POST'])
def show_md():
return render_template('md.html')
写入html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>自定义</title>
<style>
display: flex;
justify-content: center;
align-items: center;
}
</style>
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.preview.css') }}"/>
<script src="{{ url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
</head>
<body>
<form name="mdEditorForm" action='/save' method='post'>
{{ form.csrf_token }}
<div id="title">
标题：{{ form.title }} {{ form.submit }}{{ get_flashed_messages()[0] }}
</div>
<div id="test-editormd">
{{ form.text(style="display:none;") }}
</div>
</form>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "80%",
height : 640,
syncScrolling : "single",
path : "{{ url_for('static',filename='editormd/lib/') }}",
saveHTMLToTextarea : true, /*开启才能传递保单把md文件转为html*/
autoLoadModules: true,
htmlDecode : "font|on*"
});
});
</script>
</body>
</html>
写入数据库：
class Databases(db.Model):
__tablename__ = 'wenzhang'
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(64))
text = db.Column(db.Text)
@app.route('/save', methods=['POST'])
def do_md():
try:
a = request.form['title']
b = request.form['test-editormd-html-code']
content = Databases(title=a, text=b)
db.session.add(content)
db.session.commit()
flash('提交成功')
return redirect(url_for('show_md'))
except:
flash('提交失败')
return redirect(url_for('show_md'))
标题和链接展示：
py
@app.route('/')
def show_content():
a = Databases.query.all()
return render_template('index.html',a=a)
html
文章展示区域：
{% for i in a %}
<a href="{{ url_for('show_article',id=i.id) }}">{{i.title}}</a>
{% endfor %}
6 prism.js
解释：使用这个js主要是想展示 代码块，使用该js需要在class类里添加名字，下面js代码就有写到
官网：prism.js
注意：注入导入文件的先后顺序，因为后导入的覆盖前面的，十分有必要注意
内容展示
py
@app.route('/article/')
def show_article(id):
a = Databases.query.filter(Databases.id == id).first()
return render_template('article.html', a=a)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="{{ url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/marked.min.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/lib/prism.css') }}" />
<script src="{{ url_for('static',filename='editormd/lib/prism.js') }}"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow-x: hidden;
}
.box{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.box_top{
position: relative;
height: 20vh;
width: 100vw;
background-image: url("{{ url_for('static',filename='article_top.png') }}");
}
position: relative;
width: 60vw;
}
</style>
</head>
<body>
<div class="box_top">
</div>
<div class="box">
<div id="my-content">
{{ a.text | safe }}
</div>
</div>
<script>
for(const i of document.getElementsByTagName('code')){
i.className += ' language-python';
i.className +=' line-numbers';
}
console.log(document.getElementsByTagName('code'))
$(function () {
editormd.markdownToHTML("my-content");
})
</script>
</body>
</html>
Original: https://blog.csdn.net/weixin_46765649/article/details/122540667
Author: 黑日里不灭的light
Title: 三.Flask 表单[flask-wtf][editor.md][prism.js]]
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/748014/
转载文章受原作者版权保护。转载请注明原作者出处！