首页 >> 大全

python16(Flask-bootstrap)

2023-12-23 大全 30 作者:考证青年

1)get方法

1.获取页面信息

1)一般情况, 不会直接把html文件内容直接返回,而是将html文件保存到当前的目录中:

2)通过方法调用;

默认情况下,Flask 在程序文件夹中的 子文件夹中寻找模板。

2.可以提交数据信息,但是数据不安全

eg::5000/login/?=root&=

from flask import Flask, render_template, request, redirectapp = Flask(__name__)
@app.route('/')
def index():return  "

主页

"@app.route('/login/') def login():# 一般情况, 不会直接把html文件内容直接返回;# 而是将html文件保存到当前的templates目录中;# 1). 通过render_template方法调用;# 2). 默认情况下,Flask 在程序文件夹中的 templates 子文件夹中寻找模板。return render_template('login.html')@app.route('/login2/') def login2():# 获取用户输入的用户名username = request.args.get('username', None)password = request.args.get('password', None)# 逻辑处理, 用来判断用户和密码是否正确;if username == 'root' and password == 'redhat':# 重定向到指定路由;return redirect('/')# return "登录成功"else:return "登录失败"if __name__ == '__main__':app.run()

from flask import  Flask, request, render_template, redirect
app = Flask(__name__)@app.route('/')
def index():return  "这是主页"# 默认路由只支持get方法, 如何指定接受post方法?
@app.route('/login/', methods=['GET', 'POST'])
def login():if request.method == 'POST':# 难点: post请求提交的数据如何获取?print(request.form)username = request.form.get('username', None)password = request.form.get('password', None)# 如果用户名和密码正确, 跳转到主页;if username == 'root' and password == 'redhat':return  redirect('/')# 如果登录不正确, 则警告红色信息;还是在登录页面;else:# 可以给html传递变量return  render_template('login_post.html',errMessages="用户名或者密码错误")else:return  render_template('login_post.html')@app.errorhandler(404)
def page_not_found(e):return  render_template("404.html"), 404@app.errorhandler(500)
def internal_server_error(e):return  render_template("500.html"), 500
if __name__ == '__main__':app.run()

在目录中创建 login.html 文件:



Title

用户登录

用户:
密码:

登录成功后则不显示用户名和密码,保证了数据的安全

2)post方法并自定义错误页面

提交服务端需要的请求信息,有利于数据的安全性

from flask import  Flask, request, render_template, redirect
app = Flask(__name__)@app.route('/')
def index():return  "这是主页"# 默认路由只支持get方法, 如何指定接受post方法?
@app.route('/login/', methods=['GET', 'POST'])
def login():if request.method == 'POST':# 难点: post请求提交的数据如何获取?print(request.form)username = request.form.get('username', None)password = request.form.get('password', None)# 如果用户名和密码正确, 跳转到主页;if username == 'root' and password == 'redhat':return  redirect('/')# 如果登录不正确, 则警告红色信息;还是在登录页面;else:# 可以给html传递变量return  render_template('login_post.html',errMessages="用户名或者密码错误")else:return  render_template('login_post.html')@app.errorhandler(404)
def page_not_found(e):return  render_template("404.html"), 404@app.errorhandler(500)
def internal_server_error(e):return  render_template("500.html"), 500
if __name__ == '__main__':app.run()

在目录中创建 .html 文件:



Title

用户登录

用户:
密码:
{{ errMessages }}

登录成功,则返回主页;登录失败,则警告红色信息:

#自定义错误页面

1.为什么要自定义错误页面?

如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为 404 的错误页面。现在这个错误页面太简陋、平庸,所以你可以根据自己的喜好自定义错误页面。

2.如何自定义错误页面?

像常规路由一样,Flask 允许程序使用基于模板的自定义错误页面。

最常见的错误代码有两个:

404:客户端请求未知页面或路由时显示;

500:有未处理的异常时显示。

3.自定义错误页面



Title

404



Title

服务器正忙, 请稍后再试

2.模板引擎

1. 什么是模板引擎?

1.的Web开发中, 业务逻辑(实质就是视图函数的内容)和页面逻辑(html文件)分开的, 使得代码的可读性增强, 代码容易理解和维护;

2.模板渲染: 在html文件中,通过动态赋值 ,将重新翻译好的html文件(模板引擎生效) 返回给用户的过程。

3.其他的模板引擎: Mako, ,

2. 语法

1) 变量显示语法: {{ 变量名 }}

完整的过滤器查看位置: #-

变量内置过滤器:

如何自定义过滤器?

from flask import  Flask, render_template
app = Flask(__name__)class User(object):def __init__(self, name, age):self.name = nameself.age = agedef __str__(self):return  "" %(self.name)@app.route('/')
def index():message = " this is a Message "li = ['fentiao', 'fensi', 'fendai']info = {'name': 'fentiao','age':10}fentiao = User(name="粉条", age=5)tags = "

hello world

"return render_template('06_index.html',message=message,names = li,info=info,fentiao=fentiao,tags = tags)@app.route('/users/') def users():usersinfo = [('user%s' %(i), "password%s" %(i)) for i in range(100)]return render_template('06_users.html',usersinfo = usersinfo)@app.route("/macro/") def macro():return render_template('06_macro.html')@app.route('/extends/') def extends():return render_template('06_use_block.html') # **********************自定义过滤器****************************** # 定义一个函数 def format_data(s):return "这是一个过滤器:" + s # 将该函数添加到默认过滤器中; app.add_template_filter(format_data, 'fmt')if __name__ == '__main__':app.run()

在index.html中写过滤器:



Title

{{ message | fmt}}

{{ message | lower}}

{{ message | upper}}

{{ message | title}}

{{ message | capitalize}}

{{ names }}

{{ info }}

{{ fentiao }}

{{ tags | striptags }}

{{ tags | safe }}

这是一个过滤器: this is a Messagethis is a messageTHIS IS A MESSAGEThis Is A Messagethis is a message['fentiao', 'fensi', 'fendai']{'name': 'fentiao', 'age': 10}hello world
hello world

2)for循环:

{% for i in li%}{% endfor %}

3)if语句

{% if user == 'westos'%}{% elif user == 'hello' %}{% else %}{% endif%}

*4)宏的操作====相当于函数*


{%  macro render(id) %}

hello world {{ id }}

{% endmacro %}


{{ render(1) }}
{{ render(2) }}
{{ render(3) }}

5)包含操作

如何使用:


{% include  "06_inclued.html"%}

6)模板的继承

一般网站的导航栏和底部不会变化, 为了避免重复编写导航栏信息;

    {% block title %}  {% endblock %}
这是导航栏
{% block body %}hello{% endblock %}
这是底部

{% extends  '06_base.html'%}{% block title %}继承案例
{% endblock %}{% block body %}
这是最新填的block内容{% endblock %}

3.前端框架

1.什么是框架?

是美国公司推出的一个用于前端开发的开源工具包。它由的设计师Mark Otto和Jacob 合作基于HTML、CSS、 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。

提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

学习网站:

2.flask项目静态文件的导入

用框架写HTML之前,先了解几个知识点:

导入静态文件

两种方法:

# 通过路径导入

# 通过url_for函数导入

3.flask链接的导入

两种方法:

# 直接查找路由
注册# 根据视图函数动态的去查找路径
登录
删除 == /delete/root/

4.消息闪现

_python16(Flask-bootstrap)_python16(Flask-bootstrap)

1)如何实现闪现?

flash 闪现消息这种功能,是Flask的核心特性。用于在下一个响应中显示一个消息,让用户知道状态发生了变化。可以确认消息,警告或者错误提醒。

2)工作原理

闪现系统使得在一个请求结束的时候记录一个信息,然后在且仅仅在下一个请求中访问这个数据。

3)使用方法

flash(“闪现的消息”)

4)html代码中如何调用闪现内容?

仅调用flash()函数并不能把消息显示出来,程序使用的模板要渲染这些消息;Flask把()函数开放给模板,用来获取并渲染消息

5.用户信息的保存

:客户端浏览器的缓存

:服务端缓存

1)的作用

对象存储特定用户会话所需的属性及配置信息。

1.当用户在应用程序的 Web 页之间跳转时,存储在 对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。

2.当用户请求来自应用程序的 Web 页时,如果该用户还没有会话,则 Web 服务器将自动创建一个 对象。

3.当会话过期或被放弃后,服务器将终止该会话。 对象最常见的一个用法就是存储用户的首选项。

from flask import  Flask, session
import  random
app  = Flask(__name__)
app.config['SECRET_KEY'] =  random._urandom(24)
# 设置是24位的字符, 每次运行服务器的secret_key都是不同的,
# 服务器重启后会清除上一次存储的session信息值;

2)设置值

@app.route('/')
def index():# 如何设置session的key-value值session['name'] = 'westos'return "hello world"

3)获取

@app.route('/get/')
def get():return  session.get('name')

4)删除

@app.route('/delete/')
def delete():print(session.get('name'))session.pop('name')print(session.get('name'))return  'delete'

6.应用 —— 实现用户注册, 用户登录, 用户注销, 用户查看

1)首先创建一个Flask项目

File ----> New ----> Flask

2.在 app.py 中写需要实现基本路由和视图函数

代码:

from functools import wraps
from flask import Flask, render_template, request, redirect, flash, url_for, sessionusers = [{'username': 'root','password': 'root'}
]app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'def is_login(f):"""用来判断用户是否登录成功"""@wraps(f)def wrapper(*args, **kwargs):# 判断session对象中是否有seesion['user']:# 如果包含信息,则登录成功,可以访问主页;# 如果不包含信息,则未登录成功,跳转到登录界面;       if session.get('user', None):return f(*args, **kwargs)else:flash('用户必须登录才能访问主页%s' % (f.__name__))return redirect(url_for('login'))return wrapperdef is_admin(f):"""用来判断用户是否为管理员"""@wraps(f)def wrapper(*args, **kwargs):# 如果是管理员,则可以访问;# 如果不是管理员,则跳转到登录界面登录管理员账号;if session.get('user', None) == 'root':return f(*args, **kwargs)else:flash('只有管理员root才能访问%s' % (f.__name__))return redirect(url_for('login'))return wrapper@app.route('/')
@is_login
def index():return render_template('index.html')@app.route('/register/', methods=['GET', 'POST'])
def register():if request.method == 'POST':username = request.form.get('username', None)password = request.form.get('password', None)# 当所有的信息遍历结束,都没有发现注册的用户存在,则将注册的用户添加到服务器,并跳转登录界面for user in users:if user['username'] == username:return render_template('register.html', message='用户%s已经存在' % (username))else:users.append(dict(username=username, password=password))# 出现一个闪现信息flash('用户%s已经注册成功,请登录......' % (username))return redirect(url_for('login'))return render_template('register.html')@app.route('/login/', methods=['GET', 'POST'])
def login():if request.method == 'POST':username = request.form.get('username', None)password = request.form.get('password', None)for user in users:if user['username'] == username and user['password'] == password:# 将用户登录的信息存储到session中session['user'] = usernamereturn redirect(url_for('index'))else:flash('用户名或密码错误,请重新登录......')return redirect(url_for('login'))return render_template('login.html')@app.route('/logout')
def logout():# 将用户存储到session中的信息删除session.pop('user')flash('注销成功')return redirect(url_for('login'))@app.route('/delete//')
def delete(username):for user in users:# 用户存在,则删除if username == user['username']:users.remove(user)flash('删除用户%s成功' % (username))# 删除成功, 跳转到/list/路由中return redirect(url_for('list'))@app.route('/list/')
@is_login
@is_admin
def list():return render_template('list.html', users=users)if __name__ == '__main__':app.run()

3)在 目录下创建 xxx.html 文件实现页面

将页面导航栏、页面样式和闪现信息写在继承模板 base.html 中:



西部开源-{% block title %} {% endblock %}
{# 让每个页面都可以获取闪现信息闪现 #}
{% for item in get_flashed_messages() %}
{% endfor %}     {% block content %}{% endblock %}



4)主页页面 index.html

{% extends 'base.html' %}{% block title %} 主页 {% endblock %}{% block content %}

这是主页

{% endblock %}

5)注册页面 .html

{% extends 'base.html' %}{% block title %} 注册页面 {% endblock %}{% block content %}

注册已有帐号登录

{# action: 将表单填写的数据提交到那个URL里面进行处理 #}{# url_for('register'): 根据视图函数寻找对应的url地址 == /register/ #}{# method =['post', 'get']: 这种是错误的,提交数据只能选择一种HTTP请求方法 #}
{# name="username": 将name里面的值username作为key值,表单里面填写的内容作为value值,提交到request.form #}{# type="text": 要求填写的是一个字符串 #}
{% if message %}
{{ message }}
{% endif %}
{% endblock %}

**6)登录页面 login.html **

{% extends 'base.html' %}{% block title %} 登录页面 {% endblock %}{% block content %}

登录没有帐号?注册

{% if message %}
{{ message }}
{% endif %}
{% endblock %}

7)用户信息显示页面 list.html

{% extends 'base.html' %}{% block title %} 用户显示 {% endblock %}{% block content %}

用户信息显示




{% for user in users %}{# user是一个字典,获取字典的key值 ----> user.keyname #}{# 删除的按钮 #}{% endfor %}
用户名密码删除
{{ user.username }}{{ user.password }}删除
{% endblock %}

1.注册帐号

2.登陆帐号

登录成功后,显示主页:

想要查看用户信息时,点击导航栏的用户信息

由于用户信息包含用户的账号和密码,一般只有管理员才有权限查看,所以需要登录管理员账号

登录root用户

删除hello用户

import osfrom flask import Flask, render_template, request, redirect, url_for, flash, session
from functools import wrapsusers = [{'username': 'root','password': 'root'},{'username': 'hello','password': 'root'},]# 实现用户注册, 用户登录, 用户注销, 用户查看;
app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'def is_login(f):"""用来判断用户是否登录成功"""@wraps(f)def wrapper(*args, **kwargs):# 判断session对象中是否有seesion['user'],# 如果包含信息, 则登录成功, 可以访问主页;# 如果不包含信息, 则未登录成功, 跳转到登录界面;;if session.get('user', None):return f(*args, **kwargs)else:flash("用户必须登录才能访问%s" % (f.__name__))return redirect(url_for('login'))return wrapperdef is_admin(f):"""用来判断用户是否登录成功"""@wraps(f)def wrapper(*args, **kwargs):# 判断session对象中是否有seesion['user']等于root,# 如果包含信息, 则登录成功, 可以访问主页;# 如果不包含信息, 则未登录成功, 跳转到登录界面;;if session.get('user', None) == 'root':return f(*args, **kwargs)else:flash("只有管理员root才能访问%s" % (f.__name__))return redirect(url_for('login'))return wrapper# 面试常问: 复习: 1. 装饰器的工作原理;  2. 如果有多个装饰器, 运行流程是怎样的?
@app.route('/')
@is_login
def index():return render_template('index.html')@app.route('/register/', methods=['GET', 'POST'])
def register():if request.method == 'POST':username = request.form.get("username", None)password = request.form.get('password', None)# 当所有的信息遍历结束, 都没有发现注册的用户存在, 则将注册的用户添加到服务器, 并跳转登录界面;for user in users:if user['username'] == username:return render_template('register.html', message="用户%s已经存在" % (username))else:users.append(dict(username=username, password=password))# return redirect('/login/')# 出现一个闪现信息;flash("用户%s已经注册成功, 请登录....." % (username), category='info')return redirect(url_for('login'))return render_template('register.html')@app.route('/login/', methods=['GET', 'POST'])
def login():if request.method == 'POST':username = request.form.get("username", None)password = request.form.get('password', None)# 当所有的信息遍历结束, 都没有发的用户存在, 则将注册的用户添加到服务器, 并跳转登录界面;for user in users:if user['username'] == username and user['password'] == password:#  将用户登录的信息存储到session中;session['user'] = usernamereturn redirect(url_for('index'))else:# 出现一个闪现信息;flash("用户%s密码错误, 请重新登录....." % (username))return redirect(url_for('login'))return render_template('login.html')@app.route('/logout/')
def logout():#  将用户存储到session中的信息删除;session.pop('user')flash("注销成功........")return redirect(url_for('login'))@app.route('/delete//')
def delete(username):for user in users:# 用户存在, 则删除;if username == user['username']:users.remove(user)flash("删除用户%s成功" % (username))else:flash("用户%s不存在" % (username))# 删除成功, 跳转到/list/路由中.....return redirect(url_for('list'))@app.route('/list/')
@is_login
@is_admin
def list():return render_template('list.html',users=users)@app.route('/upload/', methods=['POST', 'GET'])
def upload():if request.method == 'POST':# 获取用户上传的文件对象f = request.files['faceImg']# 获取上传文件的文件名# print(f.filename)# 获取当前项目的目录位置;basepath = os.path.dirname(__file__)# print(__file__)       # /root/PycharmProjects/day34/app.py# print(basepath)       # /root/PycharmProjects/day34# /root/PycharmProjects/day34/static/img/face/xxx.png# 拼接路径, 保存到本地的位置;filepath = os.path.join(basepath, 'static', 'img', 'face', f.filename)# 保存文件f.save(filepath)flash("上传文件%s成功" %(f.filename))return  redirect(url_for('upload'))else:return  render_template('upload.html')if __name__ == '__main__':app.run()

4.Flask中集成

1. 什么是

()是 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。

2. Flask中如何集成

使用 pip 安装 Flask- 的 Flask 扩展,简化集成的过程。

导入模块并实例化一个对象:

from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

3. Flask-实现了什么

1.利用 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入 的元素。

# 在页面逻辑的基模板base.html中
{ % extends “bootstrap/base_other.html” % }

2.基模板中定义了可再衍生模板中重定义的块。

   		块名                    说 明doc                     整个 HTML 文档html_attribs             标签的属性html              标签中的内容head              标签中的内容title            标签中的内容metas                   一组 <meta> 标签styles                  层叠样式表定义body_attribs            <body> 标签的属性body                    <body> 标签中的内容navbar                  用户定义的导航条content                 用户定义的页面内容scripts                 文档底部的 JavaScript 声明
</code></pre></p>
<p>3.程序需要向已经有内容的块中添加新内容,必须使用  提供的 super() 函数。</p>
<p><pre><code>{% block scripts %}
{{ super() }}
<script type=“text/javascript” src=“my-script.js”>
{% endblock %}
</code></pre></p>
<p>4.实现用户注册, 用户登录, 用户注销, 用户查看</p>
<p>用集成 如何实现?</p>
<p>很简单,大部分代码都是完全一样的</p>
<p>在 app.py 文件中:</p>
<p>导入模块并实例化一个对象</p>
<p><img src='http://m.kingceram.com/zb_users/upload/2023/23/1703334879633_9.gif' alt='python16(Flask-bootstrap)_python16(Flask-bootstrap)_'/></p>
<p><pre><code>from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)
</code></pre></p>
<p>在 base.html 文件中:</p>
<p><pre><code>{% extends 'bootstrap/base.html' %}{% block styles %}{# 先继承父类的css样式导入 #}{{ super() }}<link href="{{ url_for('static',filename='css/main.css') }}" rel="stylesheet">
{% endblock %}{% block navbar %}<nav class="d657-7762-4769-c327 navbar navbar-default"><div class="7762-4769-c327-db74 container-fluid"><div class="4769-c327-db74-2f64 navbar-header"><button type="button" class="c327-db74-2f64-9d78 navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="db74-2f64-9d78-7b9e sr-only">Toggle navigation</span><span class="e6ad-8183-eb94-1f9b icon-bar"></span><span class="8183-eb94-1f9b-9161 icon-bar"></span><span class="eb94-1f9b-9161-8a5c icon-bar"></span></button><a class="1f9b-9161-8a5c-c08d navbar-brand" href="#">Todo</a></div><div class="9161-8a5c-c08d-cac0 collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="8a5c-c08d-cac0-8237 nav navbar-nav"><li class="c08d-cac0-8237-f4c5 active"><a href="#">主页 <span class="cac0-8237-f4c5-d657 sr-only">(current)</span></a></li><li><a href="#">用户信息</a></li><li><a href="#">监控</a></li><li><a href="#">新闻</a></li><li><a href="#">音乐</a></li><li><a href="#">电影</a></li></ul><ul class="8237-f4c5-d657-7762 nav navbar-nav navbar-right">{% if not session.user %}<li><a href="#">登录</a></li><li><a href="#">注册</a></li>{% else %}<li class="f4c5-d657-7762-4769 dropdown"><a href="#" class="d657-7762-4769-c327 dropdown-toggle" data-toggle="dropdown" role="button"aria-haspopup="true"aria-expanded="false">当前用户:{{ session.user }}<span class="7762-4769-c327-db74 caret"></span></a><ul class="4769-c327-db74-2f64 dropdown-menu"><li role="separator" class="c327-db74-2f64-9d78 divider"></li><li><a href="{{ url_for('logout') }}">注销</a></li></ul></li>{% endif %}</ul></div></div></nav>{% for item in get_flashed_messages() %}<div class="db74-2f64-9d78-7b9e alert alert-warning alert-dismissible" role="alert"><button type="button" class="e6ad-8183-eb94-1f9b close" data-dismiss="alert" aria-label="Close"><spanaria-hidden="true">×</span></button>{{ item }}</div>{% endfor %}{% endblock %}
</code></pre></p>
<p>4.集成的web表单处理</p>
<p>flask-wtf</p>
<p>避免重复操作,表单操作很多;</p>
<p>防止表单遭遇跨站请求伪造(csrf ==== cross-site  );</p>
<p>1)为什么使用Flask-WTF?</p>
<p> 对象公开了所有客户端发送的请求信息。特别是 .form 可以访问POST 请求提交的表单数据。尽管 Flask 的  对象提供的支持足以处理 web表单,但依然有许多任务会变得单调且重复。表单的 HTML 代码生成和验证提交的表单数据就是两个很好的例子。</p>
<p>优势: Flask-WTF 扩展使得处理 web 表单能获得更愉快的体验。该扩展是一个封装了与框架无关的  包的 Flask 集成。</p>
<p>2)什么是表单处理?</p>
<p>在网页中,为了和用户进行信息交互总是不得不出现一些表单。flask 设计了 表单库来使flask可以更加简便地管理操作表单数据。</p>
<p>中最重要的几个概念如下:</p>
<p>另外,flask为了防范csfr(cross-site  )攻击, 默认在使用flask-wtf之前要求app一定要设置过。</p>
<p>最简单地可以通过 app.[‘’] = ‘xxxx’ 来配置。</p>
<p>3)常见的Field类</p>
<p><pre><code>Field类 	说明
PasswordField 	密码字段,自动将输入转化为小黑点
DateField 	文本字段,格式要求为 datetime.date 一样
IntergerField 	文本字段,格式要求是整数
DecimalField 	文本字段,格式要求和 decimal.Decimal 一样
FloatField 	文本字段,值是浮点数
BooleanField 	复选框,值为 True 或者 False
RadioField 	一组单选框
SelectField 	下拉列表,需要注意一下的是 choices 参数确定了下拉选项,但是和 HTML 中的 <select> 标签一样,其是一个 tuple 组成的列表,可以认为每个 tuple 的第一项是选项的真正的值,而第二项是 alias
MultipleSelectField 	可选多个值的下拉列表
</code></pre></p>
<p>4)flask-wtf的使用流程</p>
<p>表现逻辑文件 wtf.html 中:</p>
<p>5)wtf实现注册页面</p>
<p>在 forms.py 文件中定义一个关于表单的类:</p>
<p><pre><code>from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectField, SelectMultipleField
from wtforms.validators import DataRequired, Length, EqualTo, Email, Regexpclass RegisterForm(FlaskForm):name = StringField(label='用户名',# 验证用户名:用户名不能为空validators=[DataRequired()])password = PasswordField(label='密码',validators=[DataRequired(),# 验证密码长度是否为6~8之间,如果不是,报错Length(8, 16, message='密码格式错误!')])repassword = PasswordField(label='确认密码',validators=[DataRequired(),# 验证当前表单输入的内容和password这个表单输入的内容是否一致,如果不一致,报错EqualTo('password', message='密码不一致!')])email = StringField(label='邮箱',validators=[DataRequired(),# 验证当前表单输入的内容是否为一个邮箱地址,如果不是,报错Email(message='邮箱格式错误!')])phone = StringField(label='手机号码',validators=[DataRequired(),                  # 验证当前表单输入的电话号码是否符合首位为1,由11位数字组成的正则表达式,如果不是,报错Regexp(r'1\d{10}', message='手机号码格式错误!')])# RadioField也可以实现单选按钮,但是不美观,推荐用 SelectFieldgender = SelectField(label='性别',coerce=int,choices=[(1, '男'), (2, '女')])# 多选按钮tech = SelectMultipleField(label='擅长领域',coerce=int,choices=[(1, 'python'), (2, 'linux'), (3, 'java'), (4, 'php'), (5, 'ruby'), (6, 'c++')])submit = SubmitField(label='注册')
</code></pre></p>
<p>在业务逻辑文件 app.py 中写视图函数:</p>
<p><pre><code>from flask_bootstrap import Bootstrap
from flask import Flask, render_template, request, redirect, flash, url_for
from forms import RegisterFormusers = [{'username': 'root','password': 'root'}
]app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
bootstrap = Bootstrap(app)@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():# 实例化表单,将来传递到前端,进行生成对应的htmlform = RegisterForm()# 判断提交的数据是否符合form表单定义的验证# 如果通过验证,则将注册的用户添加到服务器,否则重新注册if form.validate_on_submit():username = request.form['name']password = request.form['password']gender = request.form['gender']tech = request.form['tech']# 打印表单信息print(request.form)print('********************************')# 打印单选框数据信息print(gender)print('********************************')# 打印多选框的数据信息print(form.tech.data)for user in users:if user['username'] == username:flash(message='用户%s已存在' % (username))return redirect(url_for('wtf'))else:users.append(dict(username=username, password=password))flash('用户%s注册成功,请登录......' % (username))return redirect(url_for('login'))return render_template('wtf.html', form=form)if __name__ == '__main__':app.run()
</code></pre></p>
<p>在下写表现逻辑文件 wtf.html:</p>
<p><pre><code>{% extends 'base.html' %}
{# 导入模块,并重命名为wtf #}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %} wtf测试-注册页面 {% endblock %}
{% block content %}<div class="8183-eb94-1f9b-9161 container"><div class="eb94-1f9b-9161-8a5c col-lg-4 col-lg-offset-4"><h1>wtf测试-注册页面</h1>{# 根据后台传递过来的form对象生成对应的html代码 #}{{ wtf.quick_form(form) }}</div></div>{% endblock %}
</code></pre></p>
<p>6)集成邮件发送</p>
<p>发送邮件的时候需要设置什么?</p>
<p>发件人账户</p>
<p>密码</p>
<p>收件人</p>
<p>邮件标题</p>
<p>邮件正文</p>
<p>QQ邮件服务器的域名或者IP</p>
<p>发送邮件过程(给qq邮箱发送邮件):</p>
<p>在 forms.py 文件中定义一个关于表单的类:</p>
<p><pre><code>from flask_wtf import FlaskForm
from wtforms import SubmitField, SelectField,  TextAreaField
from wtforms.validators import DataRequiredclass MailForm(FlaskForm):# 接收邮件的地址toEmails = TextAreaField(label='接收的邮箱地址',validators=[DataRequired()],# 表单的详细描述,一般不写description='每个邮箱地址之间用逗号隔开')toFilename = SelectField(label='邮箱内容的类型',# "company"是传递给后台的,"公司简介"是在前端显示的choices=[('company', '公司简介'), ('course', '课程简介')])submit = SubmitField(label='发送'
</code></pre></p>
<p>在业务逻辑文件 app.py 中写视图函数:</p>
<p>在设置SMTP服务器的配置信息时,需要注意几点:</p>
<p>(1) 邮件服务器的域名(IP)、端口、启用协议如何获取?(以qq邮箱为例)</p>
<p>进入qq邮箱首页 ----> 设置 ----> 账户 ----> 如何设置</p>
<p>(2) 获取密码</p>
<p>首先在账户中设置POP3/IMAP/SMTP///服务,开启POP3/SMTP服务 和 IMAP/SMTP服务</p>
<p>当你开启服务时,需要你用手机验证,随后会显示一串密码,记住这个密码。开启两个服务,有两个密码</p>
<p> 就是任意一个密码</p>
<p><pre><code>from flask_bootstrap import Bootstrap
from flask import Flask, render_template,redirect, flash, url_for
from flask_mail import Mail, Messagefrom forms import MailFormapp = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
bootstrap = Bootstrap(app)
# 配置发送邮件的相关信息# 指定邮件服务器的域名或者IP
app.config['MAIL_SERVER'] = 'smtp.qq.com'
# 指定端口,默认25,但qq邮箱默认端口号为465或587
app.config['MAIL_PORT'] = 465
app.config['MAIL_USE_SSL'] = True
# 接收邮件的账户和密码
app.config['MAIL_USERNAME'] = '2511137976'
app.config['MAIL_PASSWORD'] = 'nyfwgbvdndcodjcd'def send_mail(to, subject, template, **kwargs):mail = Mail(app)# app.app_context(): 将之前Flask创建的app作为参数传入AppContext类中,用于存储当前app的相关信息with app.app_context():        	msg = Message(subject=subject,sender='2511137976@qq.com',recipients=to,# 发送的邮件形式有两种:文本形式和HTML形式# body=render_template(template + '.txt', **kwargs),html=render_template(template + '.html', **kwargs))mail.send(msg)@app.route('/mail/', methods=['GET', 'POST'])
def mail():# 实例化表单form = MailForm()if form.validate_on_submit():# 获取用户提交的数据toEmails = form.toEmails.data.split(',')toFilename = form.toFilename.datatry:send_mail(toEmails, '西部开源邮件测试', toFilename)except Exception as e:flash('邮件发送失败,失败原因:%s' % (e))else:flash('邮件发送成功!')return redirect(url_for('mail'))return render_template('send_mail.html',form=form)if __name__ == '__main__':app.run()
</code></pre></p>
<p>在下写表现逻辑文件 .html:</p>
<p><pre><code>{% extends 'base.html' %}{% import 'bootstrap/wtf.html' as wtf %}{% block title %} 发送邮件 {% endblock %}{% block content %}<div class="1f9b-9161-8a5c-c08d container"><div class="9161-8a5c-c08d-cac0 col-lg-8 col-lg-offset-2"><h1>发送邮件设置</h1><hr/>{{ wtf.quick_form(form) }}</div></div>{% endblock %}
</code></pre></p>
<p>写一个简单的邮件(内容为html格式):</p>
<p>公司简介:.html</p>
<p><pre><code><h1 style="color: red">公司简介</h1>
</code></pre></p>
<p>课程简介:.html</p>
<p><pre><code><h1 style="color: red">课程详情</h1>
</code></pre></p>
<p>实现发送邮件的页面,发送邮件(为方便观察实验结果,发送邮件给自己即可):</p>
<p>7)flask-登录注册时发送邮件</p>
<p>业务逻辑:</p>
<p>定义发送邮件函数:</p>
<p><pre><code>def send_mail(send_to,filename,**kwargs):mail=Mail(app)with app.app_context():msg=Message(subject='测试',recipients=send_to,sender='1602923758@qq.com',html=render_template(filename+'.html',info=kwargs))mail.send(msg)</code></pre></p>
<p>注册:</p>
<p><pre><code>@app.route('/register/',methods=['GET','POST'])
def register():if request.method=='POST':username = request.form.get('username')password=request.form.get('password')for user in users:if user['username'] == username:flash('用户已存在,请重试!')return redirect(url_for('register'))else:users.append({'username':username,'password':password})send_mail(send_to=['1602923758@qq.com'], filename='reg_msg', user=username)flash('注册成功,请登录!')return redirect(url_for('login'))else:return render_template('register.html')
</code></pre></p>
<p>登录:</p>
<p><pre><code>@app.route('/login/',methods=['GET','POST'])
def login():if request.method=='POST':username=request.form.get('username')password=request.form.get('password')for user in users:if user['username']==username and user['password']==password:session['user']=username# 获取客户端的主机名hostname=request.host# 获取客户端的ip地址user_addr = request.remote_addr# 获取当前时间login_time = datetime.strftime(datetime.now(),'%Y-%m-%d,%H:%M:%S')send_mail(send_to=['1602923758@qq.com'],filename='log_msg',user=username,addr=user_addr,log_time=login_time,host=hostname)flash('用户登录成功')return redirect(url_for('index'))else:flash('用户或密码错误,登录失败,请重试!')return redirect(url_for('login'))else:return render_template('login.html')
</code></pre></p>
<p>页面逻辑:</p>
<p>基模板:</p>
<p><pre><code>{% extends 'bootstrap/base.html' %}{% block style %}
{{ super()  }}<link href="{{ url_for('static',filename='css/main.css') }}" rel="stylesheet">{% endblock %}{% block navbar %}
<nav class="8a5c-c08d-cac0-8237 navbar navbar-default"><div class="c08d-cac0-8237-f4c5 container-fluid"><div class="cac0-8237-f4c5-d657 navbar-header"><button type="button" class="8237-f4c5-d657-7762 navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="f4c5-d657-7762-4769 sr-only">Toggle navigation</span><span class="d657-7762-4769-c327 icon-bar"></span><span class="7762-4769-c327-db74 icon-bar"></span><span class="4769-c327-db74-2f64 icon-bar"></span></button><a class="c327-db74-2f64-9d78 navbar-brand" href="#">Brand</a></div><div class="db74-2f64-9d78-7b9e collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="e6ad-8183-eb94-1f9b nav navbar-nav"><li class="8183-eb94-1f9b-9161 active"><a href="{{ url_for('index') }}">主页 <span class="eb94-1f9b-9161-8a5c sr-only">(current)</span></a></li><li><a href="{{ url_for('list') }}">用户信息</a></li><li><a href="#">音乐</a></li><li><a href="#">书城</a></li></ul></div><ul class="1f9b-9161-8a5c-c08d nav navbar-nav navbar-right">{% if session.get('user',None) %}<li class="9161-8a5c-c08d-cac0 dropdown"><a href="#" class="8a5c-c08d-cac0-8237 dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">当前用户:{{ session['user'] }} <span class="c08d-cac0-8237-f4c5 caret"></span></a><ul class="cac0-8237-f4c5-d657 dropdown-menu"><li role="separator" class="8237-f4c5-d657-7762 divider"></li><li><a href="{{ url_for('upload') }}">上传头像</a></li><li><a href="{{ url_for('logout') }}">注销</a></li></ul></li>{% else %}<li><a href="{{ url_for('login') }}">登录</a></li><li><a href="{{ url_for('register') }}">注册</a></li>{% endif %}</ul></div>
</nav>{% for item in get_flashed_messages() %}<div class="f4c5-d657-7762-4769 alert alert-warning alert-dismissible" role="alert"><button type="button" class="d657-7762-4769-c327 close" data-dismiss="alert" aria-label="Close"><spanaria-hidden="true">×</span></button>{{ item }}</div>
{% endfor %}
{% endblock %}</code></pre></p>
<p>注册页面:</p>
<p><pre><code>{% extends 'base.html' %}
{% block title %}注册{% endblock %}{% block content %}<div class="7762-4769-c327-db74 container"><div class="4769-c327-db74-2f64 col-lg-8 col-lg-offset-2"><h1>注册<small>已有帐号<a href="{{ url_for('login') }}">登录</a></small></h1></div></div><form action="{{ url_for('register') }}" method="post"><div class="c327-db74-2f64-9d78 form-group"><label for="exampleInputEmail1">用户名</label><input name="username" type="text" class="db74-2f64-9d78-7b9e form-control" id="exampleInputEmail1"></div><div class="e6ad-8183-eb94-1f9b form-group"><label for="exampleInputPassword1">密码</label><input name="password" type="password" class="8183-eb94-1f9b-9161 form-control" id="exampleInputPassword1"></div><button type="submit" class="eb94-1f9b-9161-8a5c btn btn-default">注册</button></form>
{% endblock %}
</code></pre></p>
<p>登录页面:</p>
<p><pre><code>{% extends 'base.html' %}{% block title %}
登录页面
{% endblock %}{% block content %}
<div class="1f9b-9161-8a5c-c08d container">
<div class="9161-8a5c-c08d-cac0 col-lg-8 col-lg-offset-2"><h1>登录<small>没有帐号?<a href="{{ url_for('register') }}">注册</a></small></h1></div>
</div><form action="{{ url_for('login') }}" method="post"><div class="8a5c-c08d-cac0-8237 form-group"><label for="exampleInputEmail1">用户名</label><input name="username" type="text" class="c08d-cac0-8237-f4c5 form-control" id="exampleInputEmail1" ></div><div class="cac0-8237-f4c5-d657 form-group"><label for="exampleInputPassword1">密码</label><input name="password" type="password" class="8237-f4c5-d657-7762 form-control" id="exampleInputPassword1" ></div><div class="f4c5-d657-7762-4769 checkbox"><label><input type="checkbox"> 记住密码</label></div><button type="submit" class="d657-7762-4769-c327 btn btn-default">登录</button>
</form>{% endblock %}</code></pre></p>
<p>邮件页面:</p>
<p>注册:</p>
<p><pre><code><h1>{{ info.user }}注册成功</h1>
</code></pre></p>
<p>登录:</p>
<p><pre><code><h1>主机名:{{ info.host }},IP:{{ info.addr }}在{{ info.log_time }}时间登录{{ info.user }}用户</h1>
</code></pre></p>                </div>
                
                <div class="7762-4769-c327-db74 singleTags mdt20">
                    tags:
                                            <a href="http://m.kingceram.com/tags-76993.html" class="4769-c327-db74-2f64 mr10"> flask </a>
                                            <a href="http://m.kingceram.com/tags-77569.html" class="c327-db74-2f64-9d78 mr10"> 表单验证 </a>
                                    </div>
                
            </article>
                        <section class="db74-2f64-9d78-7b9e moreArticles mdt20">
                <div class="e6ad-8183-eb94-1f9b moreArticlesTit"><strong>其他相关</strong></div>
                                
                
<div class="8183-eb94-1f9b-9161 articleList">
            <div class="eb94-1f9b-9161-8a5c articleItemBox i3">
            <div class="1f9b-9161-8a5c-c08d bg-white overflow-hidden border articleItem animale">
                <a href="http://m.kingceram.com/post/253676.html" target="_blank" title="JS(决定了网页中标签的功能及动态效果)">
                    <div class="9161-8a5c-c08d-cac0 imgBox overflow-hidden">
                        <img class="8a5c-c08d-cac0-8237 animale" src="imgs/img1.jpg" >
                    </div>
                    <div class="c08d-cac0-8237-f4c5 articleContent">
                        <div class="cac0-8237-f4c5-d657 author">
                            <span class="8237-f4c5-d657-7762 colorf5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="f4c5-d657-7762-4769 bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                </svg>
                            </span>
                            考证青年                        </div>
                        <h3 class="d657-7762-4769-c327 oneLine">JS(决定了网页中标签的功能及动态效果)</h3>
                        <div>
                            <span class="7762-4769-c327-db74 mr10">
                                <span class="4769-c327-db74-2f64 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="c327-db74-2f64-9d78 bi bi-clock" viewBox="0 0 16 16">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                    </svg>
                                </span>
                                12-21                            </span>
                            <span>
                                <span class="db74-2f64-9d78-7b9e colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="e6ad-8183-eb94-1f9b bi bi-eye" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                </span>
                                44                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
            <div class="8183-eb94-1f9b-9161 articleItemBox i3">
            <div class="eb94-1f9b-9161-8a5c bg-white overflow-hidden border articleItem animale">
                <a href="http://m.kingceram.com/post/252674.html" target="_blank" title="Python+Flask搭建一个电影下载网站">
                    <div class="1f9b-9161-8a5c-c08d imgBox overflow-hidden">
                        <img class="9161-8a5c-c08d-cac0 animale" src="http://m.kingceram.com/zb_users/upload/2023/12/1702378221145_2.png" >
                    </div>
                    <div class="8a5c-c08d-cac0-8237 articleContent">
                        <div class="c08d-cac0-8237-f4c5 author">
                            <span class="cac0-8237-f4c5-d657 colorf5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="8237-f4c5-d657-7762 bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                </svg>
                            </span>
                            考证青年                        </div>
                        <h3 class="f4c5-d657-7762-4769 oneLine">Python+Flask搭建一个电影下载网站</h3>
                        <div>
                            <span class="d657-7762-4769-c327 mr10">
                                <span class="7762-4769-c327-db74 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="4769-c327-db74-2f64 bi bi-clock" viewBox="0 0 16 16">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                    </svg>
                                </span>
                                12-12                            </span>
                            <span>
                                <span class="c327-db74-2f64-9d78 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="db74-2f64-9d78-7b9e bi bi-eye" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                </span>
                                23                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
            <div class="e6ad-8183-eb94-1f9b articleItemBox i3">
            <div class="8183-eb94-1f9b-9161 bg-white overflow-hidden border articleItem animale">
                <a href="http://m.kingceram.com/post/246591.html" target="_blank" title="表单自动生成器form">
                    <div class="eb94-1f9b-9161-8a5c imgBox overflow-hidden">
                        <img class="1f9b-9161-8a5c-c08d animale" src="http://m.kingceram.com/zb_users/upload/2023/21/1697899470109_1.webp" >
                    </div>
                    <div class="9161-8a5c-c08d-cac0 articleContent">
                        <div class="8a5c-c08d-cac0-8237 author">
                            <span class="c08d-cac0-8237-f4c5 colorf5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="cac0-8237-f4c5-d657 bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                </svg>
                            </span>
                            考证青年                        </div>
                        <h3 class="8237-f4c5-d657-7762 oneLine">表单自动生成器form</h3>
                        <div>
                            <span class="f4c5-d657-7762-4769 mr10">
                                <span class="d657-7762-4769-c327 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="7762-4769-c327-db74 bi bi-clock" viewBox="0 0 16 16">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                    </svg>
                                </span>
                                10-21                            </span>
                            <span>
                                <span class="4769-c327-db74-2f64 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="c327-db74-2f64-9d78 bi bi-eye" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                </span>
                                29                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
            <div class="db74-2f64-9d78-7b9e articleItemBox i3">
            <div class="e6ad-8183-eb94-1f9b bg-white overflow-hidden border articleItem animale">
                <a href="http://m.kingceram.com/post/241762.html" target="_blank" title="表单验证插件Validate.js的使用">
                    <div class="8183-eb94-1f9b-9161 imgBox overflow-hidden">
                        <img class="eb94-1f9b-9161-8a5c animale" src="http://m.kingceram.com/zb_users/upload/2023/04/1693820127833_0.jpg" >
                    </div>
                    <div class="1f9b-9161-8a5c-c08d articleContent">
                        <div class="9161-8a5c-c08d-cac0 author">
                            <span class="8a5c-c08d-cac0-8237 colorf5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="c08d-cac0-8237-f4c5 bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                </svg>
                            </span>
                            考证青年                        </div>
                        <h3 class="cac0-8237-f4c5-d657 oneLine">表单验证插件Validate.js的使用</h3>
                        <div>
                            <span class="8237-f4c5-d657-7762 mr10">
                                <span class="f4c5-d657-7762-4769 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="d657-7762-4769-c327 bi bi-clock" viewBox="0 0 16 16">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                    </svg>
                                </span>
                                09-04                            </span>
                            <span>
                                <span class="7762-4769-c327-db74 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="4769-c327-db74-2f64 bi bi-eye" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                </span>
                                33                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
            <div class="c327-db74-2f64-9d78 articleItemBox i3">
            <div class="db74-2f64-9d78-7b9e bg-white overflow-hidden border articleItem animale">
                <a href="http://m.kingceram.com/post/241644.html" target="_blank" title="jQuery-Validate验证插件的使用步骤详解">
                    <div class="e6ad-8183-eb94-1f9b imgBox overflow-hidden">
                        <img class="8183-eb94-1f9b-9161 animale" src="http://m.kingceram.com/zb_users/upload/2023/03/1693735872226_0.png" >
                    </div>
                    <div class="eb94-1f9b-9161-8a5c articleContent">
                        <div class="1f9b-9161-8a5c-c08d author">
                            <span class="9161-8a5c-c08d-cac0 colorf5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="8a5c-c08d-cac0-8237 bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                </svg>
                            </span>
                            考证青年                        </div>
                        <h3 class="c08d-cac0-8237-f4c5 oneLine">jQuery-Validate验证插件的使用步骤详解</h3>
                        <div>
                            <span class="cac0-8237-f4c5-d657 mr10">
                                <span class="8237-f4c5-d657-7762 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="f4c5-d657-7762-4769 bi bi-clock" viewBox="0 0 16 16">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                    </svg>
                                </span>
                                09-03                            </span>
                            <span>
                                <span class="d657-7762-4769-c327 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="7762-4769-c327-db74 bi bi-eye" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                </span>
                                33                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
            <div class="4769-c327-db74-2f64 articleItemBox i3">
            <div class="c327-db74-2f64-9d78 bg-white overflow-hidden border articleItem animale">
                <a href="http://m.kingceram.com/post/241636.html" target="_blank" title="element UI 组件中表单自定义校验规则如何传递参数?">
                    <div class="db74-2f64-9d78-7b9e imgBox overflow-hidden">
                        <img class="e6ad-8183-eb94-1f9b animale" src="http://m.kingceram.com/zb_users/upload/2023/03/1693731060656_0.png" >
                    </div>
                    <div class="8183-eb94-1f9b-9161 articleContent">
                        <div class="eb94-1f9b-9161-8a5c author">
                            <span class="1f9b-9161-8a5c-c08d colorf5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="9161-8a5c-c08d-cac0 bi bi-person-circle" viewBox="0 0 16 16">
                                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                </svg>
                            </span>
                            考证青年                        </div>
                        <h3 class="8a5c-c08d-cac0-8237 oneLine">element UI 组件中表单自定义校验规则如何传递参数?</h3>
                        <div>
                            <span class="c08d-cac0-8237-f4c5 mr10">
                                <span class="cac0-8237-f4c5-d657 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="8237-f4c5-d657-7762 bi bi-clock" viewBox="0 0 16 16">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                    </svg>
                                </span>
                                09-03                            </span>
                            <span>
                                <span class="f4c5-d657-7762-4769 colorf5">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="d657-7762-4769-c327 bi bi-eye" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                </span>
                                26                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

<div class="7762-4769-c327-db74 clearfix">
    <div class="4769-c327-db74-2f64 posts_nav_link">
        

    </div>
</div>
            </section>
            
        </div>
        
        <div class="c327-db74-2f64-9d78 col-4">
                        
<div class="db74-2f64-9d78-7b9e sideArticleList">
    <div class="e6ad-8183-eb94-1f9b pb20 sideArticleListTit">
        <strong> 最新文章 </strong>
    </div>
            <div class="8183-eb94-1f9b-9161 sideArticleItemBox">
            <div class="eb94-1f9b-9161-8a5c imgBox overflow-hidden">
                <img src="http://m.kingceram.com/zb_users/upload/2024/11/1704956361301_1.jpg" />
            </div>
            <div class="1f9b-9161-8a5c-c08d content">
                <h3 class="9161-8a5c-c08d-cac0 twoLine"><a href="http://m.kingceram.com/post/256174.html">利用区块链等技术,加强对交通运输信用信息的归集共享和分析应用</a></h3>
                <div>
                    <span class="8a5c-c08d-cac0-8237 mr10">
                        <span class="c08d-cac0-8237-f4c5 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="cac0-8237-f4c5-d657 bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>
                        </span>
                        01-11                    </span>
                    <span>
                        <span class="8237-f4c5-d657-7762 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="f4c5-d657-7762-4769 bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </span>
                        328                    </span>
                </div>
            </div>
        </div>
            <div class="d657-7762-4769-c327 sideArticleItemBox">
            <div class="7762-4769-c327-db74 imgBox overflow-hidden">
                <img src="http://m.kingceram.com/zb_users/upload/2024/11/1704955864187_0.jpg" />
            </div>
            <div class="4769-c327-db74-2f64 content">
                <h3 class="c327-db74-2f64-9d78 twoLine"><a href="http://m.kingceram.com/post/256173.html">印尼西爪哇梳邦县发生山体滑坡 已经导致2人死亡</a></h3>
                <div>
                    <span class="db74-2f64-9d78-7b9e mr10">
                        <span class="e6ad-8183-eb94-1f9b colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="8183-eb94-1f9b-9161 bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>
                        </span>
                        01-11                    </span>
                    <span>
                        <span class="eb94-1f9b-9161-8a5c colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="1f9b-9161-8a5c-c08d bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </span>
                        417                    </span>
                </div>
            </div>
        </div>
            <div class="9161-8a5c-c08d-cac0 sideArticleItemBox">
            <div class="8a5c-c08d-cac0-8237 imgBox overflow-hidden">
                <img src="http://m.kingceram.com/zb_users/upload/2024/11/1704954426158_0.png" />
            </div>
            <div class="c08d-cac0-8237-f4c5 content">
                <h3 class="cac0-8237-f4c5-d657 twoLine"><a href="http://m.kingceram.com/post/256172.html">【SpringBoot笔记10】Spring中Bean的6种作用域</a></h3>
                <div>
                    <span class="8237-f4c5-d657-7762 mr10">
                        <span class="f4c5-d657-7762-4769 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="d657-7762-4769-c327 bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>
                        </span>
                        01-11                    </span>
                    <span>
                        <span class="7762-4769-c327-db74 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="4769-c327-db74-2f64 bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </span>
                        309                    </span>
                </div>
            </div>
        </div>
            <div class="c327-db74-2f64-9d78 sideArticleItemBox">
            <div class="db74-2f64-9d78-7b9e imgBox overflow-hidden">
                <img src="http://m.kingceram.com/zb_users/upload/2024/11/1704953724725_1.jpg" />
            </div>
            <div class="e6ad-8183-eb94-1f9b content">
                <h3 class="8183-eb94-1f9b-9161 twoLine"><a href="http://m.kingceram.com/post/256171.html">ARS548 ARS549RDI 80GHZ毫米波雷达达学习笔记(一)</a></h3>
                <div>
                    <span class="eb94-1f9b-9161-8a5c mr10">
                        <span class="1f9b-9161-8a5c-c08d colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="9161-8a5c-c08d-cac0 bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>
                        </span>
                        01-11                    </span>
                    <span>
                        <span class="8a5c-c08d-cac0-8237 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="c08d-cac0-8237-f4c5 bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </span>
                        339                    </span>
                </div>
            </div>
        </div>
            <div class="cac0-8237-f4c5-d657 sideArticleItemBox">
            <div class="8237-f4c5-d657-7762 imgBox overflow-hidden">
                <img src="http://m.kingceram.com/zb_users/upload/2024/11/1704952470216_2.jpg" />
            </div>
            <div class="f4c5-d657-7762-4769 content">
                <h3 class="d657-7762-4769-c327 twoLine"><a href="http://m.kingceram.com/post/256170.html">叠氮PEG修饰二硒化钨 (N3-WSe2;azide</a></h3>
                <div>
                    <span class="7762-4769-c327-db74 mr10">
                        <span class="4769-c327-db74-2f64 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="c327-db74-2f64-9d78 bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>
                        </span>
                        01-11                    </span>
                    <span>
                        <span class="db74-2f64-9d78-7b9e colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="e6ad-8183-eb94-1f9b bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </span>
                        377                    </span>
                </div>
            </div>
        </div>
            <div class="8183-eb94-1f9b-9161 sideArticleItemBox">
            <div class="eb94-1f9b-9161-8a5c imgBox overflow-hidden">
                <img src="http://m.kingceram.com/zb_users/upload/2024/11/1704951860536_1.jpg" />
            </div>
            <div class="1f9b-9161-8a5c-c08d content">
                <h3 class="9161-8a5c-c08d-cac0 twoLine"><a href="http://m.kingceram.com/post/256169.html">ATFX:黑海运粮遭俄暂停,小麦期货开盘跳涨</a></h3>
                <div>
                    <span class="8a5c-c08d-cac0-8237 mr10">
                        <span class="c08d-cac0-8237-f4c5 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="cac0-8237-f4c5-d657 bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>
                        </span>
                        01-11                    </span>
                    <span>
                        <span class="8237-f4c5-d657-7762 colorf5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="f4c5-d657-7762-4769 bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </span>
                        286                    </span>
                </div>
            </div>
        </div>
    </div>
        </div>
        
    </div>
    
</section>        

        
    

    


            
        

<div class="d657-7762-4769-c327 container-fluid footerBox">
    <div class="7762-4769-c327-db74 container">
        
        <div class="4769-c327-db74-2f64 moreInfo row">
            <div class="c327-db74-2f64-9d78 col-4">
                <h3>关于我们</h3>
                <p>  </p>
            </div>
            <div class="db74-2f64-9d78-7b9e col-3">
                <h3>最火推荐</h3>
                                
            </div>
            <div class="e6ad-8183-eb94-1f9b col-3">
                <h3>小编推荐</h3>
                                
            </div>
             <div class="8183-eb94-1f9b-9161 col-2">
                <h3>联系我们</h3>
                <div class="eb94-1f9b-9161-8a5c contact">
                    <img src="http://m.kingceram.com/zb_users/theme/zb_c005/custom_file/contactImg.png" />
                </div>
            </div>
        </div>
        
        
        <hr />
        
                
        
        
        <div class="1f9b-9161-8a5c-c08d cppyRight">
            <div> 版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:<a href="https://beian.miit.gov.cn/">桂ICP备2021009421号</a><script>var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  hm.src = "https://hm.baidu.com/hm.js?71d4f2c3efbde8a19e8d1946fdc7dd52";  var s = document.getElementsByTagName("script")[0];   s.parentNode.insertBefore(hm, s);})();</script><meta name="360-site-verification" content="4422b7dd2543fda24da965cc63c09afd" /> </div>
            <div>
                Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.1 Build 172985" target="_blank">Z-BlogPHP</a>.
            </div>
        </div>
    </div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?b67002d931454fc3a61dc2e18918fe7f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


<div class="9161-8a5c-c08d-cac0 goTop" id="js-go_top" style="transform: translate(80px, 0px); transition: transform 0.5s ease-in-out 0s;color:#007d65;">
	<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="8a5c-c08d-cac0-8237 bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
    </svg>
</div>

    
    







<div class="c08d-cac0-8237-f4c5 erx-weixin-open erx-weixin-copy"><div class="cac0-8237-f4c5-d657 erx-wx-box"><i class="8237-f4c5-d657-7762 iconfont erx-wx-icon-success"></i><h5>复制成功</h5><div class="f4c5-d657-7762-4769 erx-wx-ow"><div class="d657-7762-4769-c327 erx-wx-ts">微信号: <em></em><br></div><a href="weixin://" class="7762-4769-c327-db74 erx-wx-close erx-wx-btn">我知道了</a><img src="http://m.kingceram.com/zb_users/plugin/erx_Weixin/img/add_demo.gif" class="4769-c327-db74-2f64 add-ez"></div><span class="c327-db74-2f64-9d78 erx-wx-close iconfont erx-wx-icon-close"></span></div></div><script src="http://m.kingceram.com/zb_users/plugin/erx_Weixin/js/act.js?v=1.7"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?b67002d931454fc3a61dc2e18918fe7f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>


<!--4,508.68 ms , 13 query , 4424kb memory , 0 error-->