前端开发学python可以做什么（Django web开发(一) – 前端）
导读：前端开发 说明: 本人的实验环境在云服务器(CentOS7操作系统 上,在VSCode软件上SSH远程连接云服务器进行代码编写 因为文章所有内容和代码是纯手敲的缘故,所以演示的代码可能跟武沛齐(据说是小猪佩奇的远房表哥 老师视频中的有所不同,但原理相同...
前端开发
说明:
本人的实验环境在云服务器(CentOS7操作系统)上,在VSCode软件上SSH远程连接云服务器进行代码编写 因为文章所有内容和代码是纯手敲的缘故,所以演示的代码可能跟武沛齐(据说是小猪佩奇的远房表哥)老师视频中的有所不同,但原理相同 目的: 开发一个平台 - 前端开发: HTML CSS JavaScript - 接收请求并处理 - Mysql数据库: 存储数据 快速上手: 基于Flask Web框架快速搭建一个网站 深入学习: 基于Django框架1.快速开发网站
python 安装 Flask web 框架
pip install flask创建Flask的python目录
[root@hecs-33592 ~]# mkdir -p /root/python/FlaskWeb [root@hecs-33592 ~]# cd /root/python/FlaskWeb [root@hecs-33592 FlaskWeb]# pwd /root/python/FlaskWeb创建一个名为web.py的python文件
from flask import Flask app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): return "中国联通" if __name__ == __main__: app.run(host=0.0.0.0, port=5100, debug=False)运行
[root@hecs-33592 ~]# /usr/bin/python3 /root/python/FlaskWeb/web.py浏览器进行访问: http://[你的ip]:5100/show/info
这种 return 方式返回 HTML 内容的方式不方便进行管理,因此我们会引入templates模板
from flask import Flask, render_template app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): # 默认去当前目录的 templates 文件夹中找 return render_template("index.html") if __name__ == __main__: app.run(host=0.0.0.0, port=5100, debug=False)创建templates目录
mkdir /root/python/FlaskWeb/templates/编写index.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> </head> <body> <h1>中国联通</h1> </body> </html>重新运行Flask,浏览器刷新访问
当然这个templates目录也可以自定义名称
# 例如目录名称为"xxx" app = Flask(__name__, template_folder="xxx")2.标签
2.1 编码
<meta charset="UTF-8">2.2 title
<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> </head>2.3 标题
<body> <h1>一级标题</h1> <h2>二级标题</h1> <h3>三级标题</h1> <h4>四级标题</h1> <h5>五级标题</h1> </body>2.4 div和span
<div>内容</div> <span>asd</span> div: 占一整行(块级标签) span: 用多少占多少(行内标签/内联标签) 两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔 两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着2.5 超链接
这里就很有意思了,你可以选择跳转自己网站的地址,或者跳转外部的网站
<!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>我的联通</title> </head> <body> <a href="/get/news">点击跳转自己的网站</a></br> <a href="http://www.baidu.com">点击跳转别人的网站百度</a> </body> </html>然后需要修改web.py文件
from flask import Flask, render_template app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): # 默认去当前目录的 templates 文件夹中找 return render_template("index.html") # 新添加如下配置 @app.route("/get/news") def get_news(): # 默认去当前目录的 templates 文件夹中找 return render_template("get_news.html") if __name__ == __main__: app.run(host=0.0.0.0, port=5100, debug=False)在templates目录下新添加一个 get_news.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> </head> <body> <h1>我是内部链接</h1> </body> </html>重新运行Flask,刷新页面
点击第一行后,跳转到如下页面
点击点击第二行后,跳转到百度自行脑补百度页面哈
在新的 Tab 标签页打开链接
添加 target=“_blank ”
<body> <a href="https://www.mi.com/shop/buy/detail?product_id=16642" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/> </a> </body>2.6 图片
<body> <h1>我是内部链接</h1> <img src="https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"/> </body>刷新浏览器
尝试访问服务器本地图片
在/root/python/FlaskWeb/下新建目录static
放入一张图片dog.jpg
修改get_news.html <body> <h1>我是内部链接</h1> <img src="/static/dog.jpg"/> </body>刷新浏览器
跟刚才一样
然后可以调整一下图片的高度与宽度
<body> <h1>我是内部链接</h1> <img style="height: 100px; width: 200px;" src="/static/dog.jpg"/> </body>小结
- 块级标签 - <h1></h1> - <div></div> - 行内标签 - <span></span> - <a></a> - <img />标签的嵌套
实现: 点击图片,跳转至指定页面
修改web.py,增加get_product
from flask import Flask, render_template app = Flask(__name__) # 创建了网址 /show/info 和 函数index 的对应关系 # 以后用户在浏览器上访问 /show/info, 网站自动执行 @app.route("/show/info") def index(): # 默认去当前目录的 templates 文件夹中找 return render_template("index.html") @app.route("/get/news") def get_news(): return render_template("get_news.html") @app.route("/get/product") def get_product(): return render_template("get_product.html") if __name__ == __main__: app.run(host=0.0.0.0, port=5100, debug=False)在templates下新增一个get_product.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> </head> <body> <a href="https://www.mi.com/shop/buy/detail?product_id=16642"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/> </a> </body> </html>访问页面
点击图片进行url跳转
2.7 列表
无序列表
<ul> <li>中国移动</li> <li>中国联通</li> <li>中国电信</li> </ul>有序列表
<ol> <li>中国移动</li> <li>中国联通</li> <li>中国电信</li> </ol>2.8 表格
修改web.py新增一个访问路径
@app.route("/get/table") def get_table(): return render_template("get_table.html")在templates页面下新建get_table.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> </head> <body> <table> <thead> <tr><th>ID</th><th>姓名</th><th>年龄</th></tr> </thead> <tbody> <tr><td>10</td><td>张三</td><td>20</td></tr> <tr><td>11</td><td>李四</td><td>20</td></tr> <tr><td>12</td><td>王五</td><td>20</td></tr> <tr><td>13</td><td>赵六</td><td>20</td></tr> </tbody> </table> </body> </html>重新运行并访问页面
为表格增加边框
<table border="1">2.9 input系列
<!-- 文本与密码 --> <input type="text" /> <input type="password" /> <!-- 选择文件 --> <input type="file" /> <!-- 单选框 --> <input type="radio" name="n1" />男 <input type="radio" name="n1" />女 <!-- 复选框 --> <input type="checkbox" />唱 <input type="checkbox" />跳 <input type="checkbox" />Rap <input type="checkbox" />篮球 <!-- 按钮 --> <input type="button" value="提交"/> 普通按钮 <input type="submit" value="提交"/> 提交表单2.10 下拉框
<select> <option>北京</option> <option>上海</option> <option>深圳</option> </select>2.11 多行文本
<textarea></textarea>用户注册
修改web.py
@app.route("/register") def register(): return render_template("register.html")在templates下新建register.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> </head> <body> <h1>用户注册</h1> <div> 用户名: <input type="text" /> </div> <div> 密码: <input type="password" /> </div> <div> 性别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </div> <div> 爱好: <input type="checkbox">唱 <input type="checkbox">跳 <input type="checkbox">Rap <input type="checkbox">篮球 </div> <div> 城市: <select> <option>北京</option> <option>上海</option> <option>深圳</option> </select> </div> <div> 备注: <textarea cols="30" rows="10"></textarea> </div> <div> <input type="button" value="button提交"> <input type="submit" value="submit提交"> </div> </body> </html>顺便说一下 GET 方法与 POST 方法的区别
GET: 可通过URL/表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中案例: 用户注册
新建项目
在/root/python下新建目录: account template在account下新建app.py文件
from flask import Flask, render_template app = Flask(__name__) @app.route(/register) def register(): return render_template(register.html) if __name__ == __main__: app.run(host=0.0.0.0, port=5200, debug=False)在templates下新建register.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> </head> <body> <h1>用户注册</h1> </body> </html>运行,浏览器进行访问
表单可以提交的前提条件:
提交方式: method=“get ” 提交地址: action=“/xxx/xxx/xxx ” 在form标签里面必须有一个submit标签 每个标签有name属性接下来尝试接收用户提交的表单数据
GET 方式修改app.py,导入request方法,使用/do/register接收用户数据并展示
from flask import Flask, render_template, request app = Flask(__name__) @app.route(/register, methods=[GET]) def register(): return render_template(register.html) @app.route("/do/register", methods=[GET]) def do_register(): get_info = request.args return get_info if __name__ == __main__: app.run(host=0.0.0.0, port=5200, debug=True)修改templates下的register.html
点击注册后跳转至路由/do/register
<!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> </head> <body> <h1>用户注册</h1> <form action="/do/register" method="get"> <div> 用户名: <input type="text" name="username"> </div> <div> 密码: <input type="password" name="passwd"> </div> <input type="submit" value="提交"> </form> </body> </html> POST 方式修改app.py
@app.route("/post/register", methods=[POST]) def post_register(): get_info = request.form return get_info修改register.html
<form action="/post/register" method="post">
<body> <h1>用户注册</h1> <form action="/post/register" method="post"> <div> 用户名: <input type="text" name="username"> </div> <div> 密码: <input type="password" name="passwd"> </div> <input type="submit" value="提交"> </form> </body>浏览器访问
可以发现,跟上面的GET方法不同的是, 提交后跳转的页面的URL后并没有我们提交的参数,而是提交到了后台 表单数据提交优化修改register.html
添加 name 与 value 属性
在控制台输出数据
修改app.py
@app.route("/post/register", methods=[POST]) def post_register(): get_info = request.form username = request.form.get("username") passwd = request.form.get("passwd") sex = request.form.get("sex") hobby_list = request.form.getlist("hobby") city = request.form.get("city") more = request.form.getlist("textarea") print(username, passwd, sex, hobby_list, city, more) return get_info整合GET与POST方法
将上面图片中的内容整合
@app.route(/register, methods=[GET, POST]) def register(): if request.method == "GET": return render_template(register.html) else: username = request.form.get("username") passwd = request.form.get("passwd") sex = request.form.get("sex") hobby_list = request.form.getlist("hobby") city = request.form.get("city") more = request.form.getlist("textarea") print(username, passwd, sex, hobby_list, city, more) get_info = request.args return get_info3.CSS样式
3.1 快速上手
<img src="..." stype="height: 100px">3.2 CSS应用方式
1. 在标签上 <img src="..." stype="height: 100px"> 2. 在 head 标签的 style 上 ... <head> <meta charset="UTF-8"> <title>Document</title> <style> .c1 { color: red; } </style> </head> <body> <h1 class="c1">用户注册</h1> ... 3. 写到文件中 common.css .c1 { color: red; }调用common.css
... <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="common.css" /> </head> <body> <h1 class="c1">用户注册</h1> ...3.3 选择器
1. ID选择器
#c1 { color: red; } <div id=c1></div>2. 类选择器
.c1 { color: red; } <div class=c1></div>3. 标签选择器
div{ color: red; } <div>xxx</div>4. 属性选择器
下面的例子中,所有的text类型的input都会生效
<head> <title>Document</title> <link rel="stylesheet" href="/static/commons.css"> <style> input[type="text"]{ border: 1px solid red; } </style> </head>还有另一种方式,看下面的例子
<style> .v1[xx="456"]{ color: gold; <!-- 橙色 --> } </style> ... <body> ... <div class="v1" xx="123">a</div> <div class="v1" xx="456">b</div> <div class="v1" xx="789">c</div> ... </body>5. 后代选择器
这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效,具体看例子
<style> .zz h2{ color:chartreuse; } </style> </head> <body> <div class="zz" > <div> <h2>我是div里面的h2</h2> </div> <h2>我是div外面的h2</h2> ...如果只想让第一层的h1生效,可以添加>号
<style> .zz > h2{ color:chartreuse; } </style>关于样式的覆盖问题
当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题
<style> .c2 { color: darkgoldenrod; } .c3 { color:hotpink; } </style> <body> <div class="c2 c3">我是天才</div> </body>观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉
如果不想让上面的被覆盖掉怎么办呢?
可以在对应的属性后面添加!important <style> .c2 { color: darkgoldenrod !important; } .c3 { color:hotpink; } </style>3.4 样式
1. 高度和宽度
.c4 { height: 300px; width: 500px; }注意事项:
支持百分比 行内标签: 默认无效 块级标签: 默认有效(右边的剩余空白区域也会被占用)2. 块级和行内标签
display:inline-block 使行内标签对 height 和 width 生效
<style> .c4 { display: inline-block; height: 300px; width: 500px; border: 1px solid red; } </style> ... <body> <span class="c4">联通</span> </body>块级与行内标签的转换
<div style="display: inline;">移动</div> <span style="display: block;">联通</span>注意:
块级标签 + 块级&行内标签3. 字体和对齐方式
设置字体颜色/大小/粗细/字体样式
<head> <meta charset="UTF-8"> <title>Document</title> <style> .c1 { color: #00FF7F; /* 字体颜色 */ font-size: 20px; /* 字体大小 */ font-weight: 600; /* 字体粗细 */ font-family: Microsoft Yahei; /* 字体样式 */ text-align: center; /* 水平方向居中 */ line-height: 50px; /* 垂直方向居中 */ border: 1px solid red; /* 边框 */ } </style> </head>4. 浮动
如果在块级标签中 ，加入了float属性 ，那么这个块级标签奖不会再占用一整行 ，而是自己有多大就占用多大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .item { float: left; width: 280px; height: 170px; border: 1px solid red; } </style> </head> <body> <div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>如果你让标签浮动起来之后 ，就会脱离文档流 。
例如下面的例子中 ，我们给div的父标签赋予了一个蓝色的背景 ，但是你不会看到蓝色背景 。因为他被浮动的div字标签挡住了 。 <body> <div style="background-color: blue;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body>解决办法: 在同级子标签的最下面添加 style="clear: both;"
<body> <div style="background-color: blue;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div style="clear: both;"></div> </div> </body>5. 内边距
padding-top | padding-left | padding-right | padding-botton
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outer { border: 1px solid red; height: 200px; width: 200px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } </style> </head> <body> <div class="outer"> <div>hello</div> <div>world</div> </div> </body> </html>其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)
6. 外边距
margin
<body> <div style="height: 200px; background-color: aquamarine;"></div> <div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div> </body>7. hover
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .c1 { color:brown; } .c1:hover { color: green; font-size: 20px; } .c2 { width: 300px; height: 300px; border: 3px solid red; } .c2:hover { border: 3px solid green; } .download { display: none; } .app:hover .download { display: block; } </style> </head> <body> <div class="c1">字体碰到鼠标变成绿色</div> <div class="c2">边框碰到鼠标变成绿色</div> <div class="app"> <div>鼠标放我这里触发显示二维码</div> <div class="download"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682046469-6d28bd184887b9f.png" alt=""> </div> </div> </body> </html>8. after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .c1:after { content: "大帅比" } </style> </head> <body> <div class="c1">张三</div> </body> </html>after一般像下面这样用,不用每次都写stype="clear: both;"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { content: ""; display: block; clear: both; } .item { float: left; } </style> </head> <body> <div class="clearfix"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>9. position
fixed relative absolute 9.1 fixed返回顶部
.back { position: fixed; width: 60px; height: 60px; border: 1px solid red; right: 50px; bottom: 50px; }对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } .dialog { position: fixed; height: 300px; width: 500px; background-color: white; left: 0; right: 0; margin: 0 auto; top: 200px; z-index: 1000; /* 防止对话框被mask遮住 */ } .mask { background-color: black; position: fixed; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.7; z-index: 999; /* 防止对话框被mask遮住 */ } </style> </head> <body> <div style="height: 1000px;"></div> <!-- 如果css中不加 z-index 设置优先级的话 --> <!-- 那么下面的 dialog 如果在 mask 的上面,对话框就显示不出来了 --> <!-- 设置优先级可以解决此问题 --> <div class="dialog"></div> <div class="mask"></div> </body> </html> 9.2 relative和absolute在小米商城案例的基础上进行测试
... .app{ position: relative; } .app .download { position: absolute; display: none; height: 100px; width: 100px; } .app:hover .download { display: block; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com">小米商城</a> <a href="https://www.mi.com">MIUI</a> <a href="https://www.mi.com">云平台</a> <a href="https://www.mi.com">有品</a> <a href="https://www.mi.com">小爱开放平台</a> <a href="https://www.mi.com" class="app">app下载 <div class="download"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682046469-6d28bd184887b9f.png" alt=""> </div> </a> </div> <div class="account"> <a href="https://www.mi.com">登录</a> <a href="https://www.mi.com">注册</a> <a href="https://www.mi.com">消息通知</a> </div> <div style="clear: both;"></div> </div> </div> ...10. border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .left { float: left; } .c1 { height: 200px; width: 300px; border: 3px dotted red; margin: 50px; } .c2 { height: 200px; width: 300px; border: 3px solid red; border-left: 3px solid green; margin: 50px; } .c3 { height: 200px; width: 300px; margin: 50px; background-color: bisque; border-left: 2px solid transparent; /* 透明色 */ } .c3:hover { border-left: 2px solid rgb(35, 211, 19); } </style> </head> <body> <div class="c1 left">我是虚线~</div> <div class="c2 left">我是实线~左边框是绿色,上下右边框是红色</div> <div class="c3 left">我是透明色,鼠标碰到我边框会变色哦~</div> <div style="clear: both;"></div> </body> </html>11. 背景色
background-color: bisque;
无需多言☺注意: 以上不是所有的CSS样式,这些是最常用的标签
4.案例: 小米商城
4.1 小米顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <style> /* 去掉body的边距 */ body { margin: 0; } .header { background-color: #333; } /* 让中间内容居中 */ .container { width: 1226px; margin: 0 auto; /* 上下为0, 左右为auto */ } /* header class 下的标签 a 自动应用这个样式 */ .header a { color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; } .header .menu { float: left; color: white; } .header .account { float: right; color: white; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a>小米商城</a> <a>MIUI</a> <a>云平台</a> <a>有品</a> <a>小爱开放平台</a> </div> <div class="account"> <a>登录</a> <a>注册</a> <a>消息通知</a> </div> <div style="clear: both;"></div> </div> </div> </body> </html>4.2 二级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <style> /* 去掉body的边距 */ body { margin: 0; } .header { background-color: #333; } /* 让中间内容居中 */ .container { width: 1226px; margin: 0 auto; /* 上下为0, 左右为auto */ } /* header class 下的标签 a 自动应用这个样式 */ .header a { color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; } .header .menu { float: left; color: white; } .header a { text-decoration: none; } .header a:hover { color: white; } .header .account { float: right; color: white; } .sub-header { height: 100px; } .sub-header .hw { width: 234px; height: 100px; } .sub-header .logo { float: left; } /* a标签是行内标签,默认不支持设置高度与边距 因此设置padding是不起作用的,因此可以加上 inline-block */ .sub-header .logo a { padding-top: 22px; padding-bottom: 22px; display: inline-block; } /* 设置logo的图片像素大小 */ .sub-header .logo img { height: 56px; width: 56px; } .sub-header .menu { width: 400px; float:left; line-height: 100px; /* 与行高度保持一致 */ } %创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！