Flask——原生表单+flask-moment+富文本编辑器

目录

1. 原生表单
2. flflask-moment
3. 富文本编辑器

---

 

1. 原生表单

   ---

   # 准备模板文件 login.html ：
   # 添加视图函数，并渲染模板⽂件：
   # 添加检验视图函数：
   # 1个路由接收两种请求：
   # 1、flask-wtf
   # 说明：表单处理的扩展库，提供了CSRF、字段校验等功能，使⽤⾮常⽅便
   # <form method="post" action="/check/">
   #  用户名：<input name="username" /><br />
   #  <input type="submit" />
   # </form>
   @app.route('/login/')
   
   
   def login():
   
   
       return render_template('login.html')
   
   
   @app.route('/check/', methods=['POST'])
   
   
   def check():
   
   
       return '登录成功'
   
   
   @app.route('/login/', methods=['GET', 'POST'])
   
   
   def login():
       if request.method == 'GET':
           return render_template('login.html')
       else:
           # request.form存放了所有的POST请求数据
           # return request.form.get('username')
           # request.values存放了所有GET/POST请求数据
           return request.values.get('username')

    

2. flflask-moment

   ---

   # 说明：专门负责时间本地化显示的扩展库
   # 安装： pip install flask-moment
   # 官网：https://momentjs.com/docs/#/displaying/format/
   # 使用：
   # python代码
   from wtforms.validators import ValidationError
   
   
   class NameForm(FlaskForm):
   
       def validate_name(self, field):
   
           if len(field.data) < 6:
           raise ValidationError('用户名不能少于6个字符')
   
   
   from flask_moment import Moment
   
   moment = Moment(app)
   
   
   @app.route('/mom/')
   def mom():
       from datetime import datetime, timedelta
       current_time = datetime.utcnow() + timedelta(seconds=-60)
       return render_template('mom.html', current_time=current_time)

   {# 模板文件 #}
   {% block scripts %}
   {{ moment.include_jquery() }}
   {{ moment.include_moment() }}
   {% endblock %}
   {# 加载jQuery #}
   {# 设置语言 #}
   {{ moment.locale('zh-CN') }}
   {# 简单的格式化时间显示 #}
   <div>时间：{{ moment(current_time).format('LLLL') }}</div> <div>时间：{{ moment(current_time).format('LLL') }}</div> <div>时间：{{ moment(current_time).format('LL') }}</div> <div>时间：{{ moment(current_time).format('L') }}</div>
   {# ⾃定义格式化显示 #}
   <div>⾃定义：{{ moment(current_time).format('YYYY-MM-DD HH:mm:ss')
   }}</div>
   {# 显示时间差 #}
   <div>发表于：{{ moment(current_time).fromNow() }}</div>

    

3. 富文本编辑器

   ---

   <!--下载(https://ueditor.baidu.com/website/download.html#ueditor)
   解压后,把ueditor放到static目录下 #}
   编辑模板文件
   在head标签中：-->
   <script type="text/javascript" charset="utf-8" src="{{
   url_for('static', filename='ueditor/ueditor.config.js') }}">
   </script>
   <script type="text/javascript" charset="utf-8" src="{{
   url_for('static', filename='ueditor/ueditor.all.min.js') }}">
   </script>
   <!--建议手动加，避免在ie下有时因为加载失败导致编辑器加载失败-
   ->
   <script type="text/javascript" charset="utf-8" src="{{
   url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}">
   </script>
   在body中加:
   <script id="editor" type="text/plain"></script>
   <script type="text/javascript">
    //实例化编辑器
    //直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor', {
    serverUrl: "/upload/"
    });
   </script>