一.表单
1.基础
1.1 下载
格式:pip install flask-wtf
1.2 安全配置
格式:app.config['SECRET_KEY'] = 'passwd you want'
解释:为了防止表单中出现CSRF跨站脚本攻击,故加密一个参数,来验证是否真是用户所提交的表单
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()]) #validators里面添加需要的验证器
submit = SubmitField('提交')
写入
<form method="post">
{{ form.csrf_token }} # 防止CSRF的地方的验证处
{{ 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.标签
3.验证器
解释:验证器只能在后端验证数据
用法: 实例化后的类名.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的'<a name="'+e+'" class="reference-link"></a>'
改为'<a class="reference-link"></a>'
目得:是在加’#‘的前提下显示带颜色字体
路由设置:
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>
#title{
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] }}<br>
</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/<int:id>')
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') }}");
}
#my-content{
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>