学习大数据DAY32 HTML基础语法和Flask库的使用

于 2024-08-06 20:09:41 发布
阅读量441 收藏 21
点赞数 19
分类专栏： 大数据培训 文章标签： 学习 大数据 html python flask 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shh2000424/article/details/140964799
版权

目录

HTML 超文本标记语言 Hyper Text Markup Language

上机练习 9

Flask

显示层 UI

前后端结合动态加载列表数据

flask 在 html 中的语法

上机练习 10

HTML 超文本标记语言 Hyper Text Markup Language

1.<html></html>: 根标签
2.<head></head>: 头标签
3.<title></title>: 头标题标签，在 <head> 标签里设置。
4.<meta charset="utf-8"/>: 常用于指定页面编码，在 <head> 标签内 .
5.<body></body>: 页面的内容基本上写在此标签内。
6. 标题标签： <h1></h1> h1 ... h6
7. 段落标签： <p></p>
8. 超级链接标签： <a href="https://www.baidu.com" target="_blank">
百度 </a>
9. 表格标签： <table><tr><td> 学号 </td><td> 姓名 </td></tr></table>
10. 表单标签： <form action="" method="post"> 表单元素控件 </form>
11. 表单元素控件： <input />
文 本 显 示 ： <input type="text" name="tname" value=" 动 漫 "
readonly="readonly"/>
加密显示： <input type="password" name="tname" />
提示功能： <input type="text" placeholder=" 请输入电影名称 "/>
12. 下拉框标签： <select></select>
<select name="typeid">
<option value="1"> 喜剧 </option>
<option value="2" selected="selected"> 动画 </option>
</select>
13. 图 片 标 签 ： <img
src="static/p1.png"
width="300px"
height="400px"/>
14. 样式标签 style
<style>
body{ margin: 0 auto; width: 800px;
background-image:url("static/bg.jpg");
background-repeat:no-repeat;
background-size: cover;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;
border-radius: 5px;
/* 半透明 */
/*background-color:rgba(55,55,55,0.5)*/
}
table,tr,td{ border: 2px solid black; border-collapse: collapse;}
table{ width: 100% }
td{ text-align: center; padding: 10px;}
.tou{
background-color: #258dcd;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>

上机练习 9

1. 制作列表页： list.html
2. 制作添加页： add.html list.html:

UI.html: 
<html>
<head>
<title>欢迎使用豆瓣网</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<table>
<tr><td>编号</td><td>名称</td><td>内容</td><td>创建日
期</td><td>操作</td></tr>
<tr><td>1</td><td>喜剧</td><td>这是一个搞笑电影
</td><td>2023 年 12 月 27 日</td><td><a href="">修改</a><a href="">
删除</a><a href="">查看</a></td></tr>
<tr><td>2</td><td>动画</td><td>这是小孩子喜欢的电影
</td><td>2023 年 12 月 27 日</td><td><a href="">修改</a><a href="">
删除</a><a href="">查看</a></td></tr>
<tr><td>3</td><td>动作</td><td>这打斗的电影
</td><td>2023 年 12 月 28 日</td><td><a href="">修改</a><a href="">
删除</a><a href="">查看</a></td></tr>
</table>
</body>
<style>body{ margin: 0 auto; width: 800px;
/* background-image:url("static/bg.jpg"); */
/* background-repeat:no-repeat;
background-size: cover; */
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 12px;
text-decoration: 12px;
border-radius: 12px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
table,tr,td{ border: 2px solid black; border-collapse:
collapse;}
table{ width: 100% ;}
td{ text-align: center; padding: 10px;}
.tou{
background-color: #258dcd;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</html>
add.html: 
<html>
<head>
<title>添加电影</title>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<form method="post">编号:<input type="text" name="tname" value=""
readonly="readonly"/>
</form>
<form method="post">
名称:<input type="text" name="tname" value=""
readonly="readonly"/>
</form>
<form method="post">
内容:<input type="text" name="tname" value=""
readonly="readonly"/>
</form>
<b href="">添加</b>
</body>
<style>
body{ margin: 0 auto; width: 800px;
/* background-image:url("static/bg.jpg");
background-repeat:no-repeat;
background-size: cover; */
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;
border-radius: 5px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
b{
background-color: darkgray;
color:black;
padding: 5px 8px;
text-decoration: none;
}
</style>
</html>

Flask

Flask 是目前十分流行的 web 框架，采用 Python 编程语言来实现相关功能。它
被称为微框 架 (microframework) ，代理业务逻辑层 BLL
安装： pip3 install Flask

显示层 UI

在 webDouban 项目文件夹下新建文件夹 templates ，上传 html 文件
注：如果有图片在需要在 webDouban 项目文件夹下创建文件夹 static 上传图
片到 static 文
件夹下， html 中的路径也要修改为 <img src="/static/p1.png" />

前后端结合动态加载列表数据

app.py
from flask import Flask, render_template
from DAL import MovieTypeDAL
mtdal=MovieTypeDAL()
app = Flask(__name__)
@app.route("/")
def index():
return "<a href='/list'><img src='/static/py11.png'/></a>"
@app.route("/list")
def list():
tlist = mtdal.select()
# 注：数据库 sql 语句也可以转换： date_format(tdate,'%Y 年 %m 月 %d 日 ')
return render_template('list.html', info=tlist)
if __name__=="__main__":
app.run(host="127.0.0.1",port=5000,debug=True)

flask 在 html 中的语法

# 循环结构
{% for i in info %}
{{i}}
{% endfor %}
# 选择结构
{% if tid==1 %}
1
{% else %}
2
{% endif %}
list.html 文件
<html>
<!-- {{ info }} -->
{% for i in info %}
<tr><td>{{ i[0] }}</td><td>{{ i[1] }}</td><td>{{ i[2] }}</td><td>{
{ i[3] }}</td> <td><a href="/update/{{ i[0] }}"> 修改 </a> <a
href="/delete/{{ i[0] }}"> 删除 </a></td></tr>
{% endfor %}
</html>
add.html 文件
<html>
<form method="post" action="/addSubmit">
<p> 编号： <input type="text" name="tid" /></p>
<p> 名称： <input type="text" name="tname" /></p>
<p> 内容： <input type="text" name="tcontent" /></p>
<p><input type="submit" value=" 添加 " /></p>
</form>
</html>
@app.route("/addSubmit", methods=["POST"])
def addSubmit():
tid = request.form.get("tid")
tname = request.form.get("tname")
tcontent=request.form.get("tcontent")
leixing=MovieType(tid,tname,tcontent)
result=mtdal.insert(leixing)
if result==1:
return " 插入成功 <a href='/list'> 刷新 </a>"
# return "<script> alert(' 插入成功 '); window.open('/list');
</script>"
else:
return " 插入失败 <a href='/list'> 刷新 </a>"
@app.route("/update/<tid>")
def update(tid):
leixing = mtdal.selectOne(tid)
return render_template("update.html", info=leixing)
@app.route("/delete/<tid>")
def delete(tid):
result=mtdal.delete(tid)
if result==1:
return " 删除成功 <a href='/list'> 刷新 </a>"
else:
return " 删除失败 <a href='/list'> 刷新 </a>"

上机练习 10

使用 python+flask+mysql+html 三层架构开发豆瓣网 （假的）
电影类型的增删改查操作 昨天代码的基础上新增部分（ app.py 代替原先的业务逻辑层）：
app.py: 
from flask import Flask,render_template,request
from DAL import MovieTypeDAL
from Model import MovieType
app=Flask(__name__)
mtdal=MovieTypeDAL()
tid_old=0
# 主页
@app.route("/")
def index():
return "<a href='/UI'><img src='/static/html 封面
图.png'/></a>"
# 伪地址
@app.route("/UI")
def list():
result=mtdal.select()
# print(result)
return render_template("UI.html",info=result)
# 进入添加电影页面
@app.route("/add")
def add():
return render_template("add.html")
# 添加提交
@app.route("/addSubmit", methods=["POST"])
def addSubmit():
tname=request.form.get("tname")
tcontent=request.form.get("tcontent")
mt=MovieType(tname,tcontent)
result=mtdal.insert(mt)
if result>0:
return "添加成功 <a href='/UI'>刷新</a>"
else:
return "添加失败 <a href='/UI'>刷新</a>"
# 删除
@app.route("/delete/<tid>")
def delete(tid):
result=mtdal.delete(tid)
if result>0:
return "删除成功 <a href='/UI'>刷新</a>"
else:return "删除失败 <a href='/UI'>刷新</a>"
# 修改
@app.route("/update/<tid>")
def update(tid):
result=mtdal.selectByTid(tid)
return render_template("update.html",info=result)
# 修改提交
@app.route("/updateSubmit/", methods=["POST"])
def updateSubmit():
# 先获取旧数据
tid_old=request.form.get("tid_old")
# 修改数据
tid=request.form.get("tid")
tname=request.form.get("tname")
tcontent=request.form.get("tcontent")
tdate=request.form.get("tdate")
result=mtdal.update(tid_old,"tid",tid)
result1=mtdal.update(tid_old,"tname",tname)
result2=mtdal.update(tid_old,"tcontent",tcontent)
result3=mtdal.update(tid_old,"tdate",tdate)
if result or result1 or result2 or result3:
return "修改成功 <a href='/UI'>刷新</a>"
else:
return "修改失败 <a href='/UI'>刷新</a>"
if __name__=="__main__":
app.run(host="127.0.0.1",port=5000,debug=True)
update.html:( 修改数据的界面 ) 
<html>
<head>
<title>添加电影</title>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="/UI">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="/add">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<form method="post" action="/updateSubmit"><!-- 文本模式输入，传入参数为 tid -->
<p>编号：<input type="text" name="tid"
value="{{ info[0] }}" /><input type="hidden" name="tid_old"
value="{{ info[0] }}" /></p>
<!-- 文本模式输入，传入参数为 tname -->
<p>名称：<input type="text" name="tname"
value="{{ info[1] }}" /></p>
<!-- 文本模式输入，传入参数为 tcontent -->
<p>内容：<input type="text" name="tcontent"
value="{{ info[2] }}" /></p>
<!-- 文本模式输入，传入参数为 tdate -->
<p>创建日期 <input type="datetime" name="tdate"
value="{{ info[3] }}" /></p>
<!-- 添加按键 -->
<p><input type="submit" value="修改" /></p>
</form>
</body>
<style>
body{ margin: 0 auto; width: 800px;
background-image:url('/static/html 封面图.png');
background-repeat:no-repeat;
background-size: cover;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;
border-radius: 5px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
</style>
</html>
UI.html:( 主页 ): 
<html>
<head>
<title>欢迎使用豆瓣网</title>
<meta charset="utf-8"/>
</head><body>
<h1>欢迎使用豆瓣网</h1>
<a href="/UI">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="/add">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<table>
<tr><td>编号</td><td>名称</td><td>内容</td><td>创建日
期</td><td>操作</td></tr>
{% for i in info %}
<tr><td>{{ i[0] }}</td><td>{{ i[1] }}</td><td>{{ i[2]
}}</td><td>{{ i[3] }}</td>
<td><a href="/update/{{ i[0] }}">修改</a> <a
href="/delete/{{ i[0] }}">删除</a></td></tr>
{% endfor %}
</table>
</body>
<style>
body{ margin: 0 auto; width: 800px;
background-image:url('/static/html 封面图.png');
background-repeat:no-repeat;
background-size: cover;
background-position: center;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 12px;
text-decoration: 12px;
border-radius: 12px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
table,tr,td{ border: 2px solid black; border-collapse:
collapse;}
table{ width: 100% ;}
td{ text-align: center; padding: 10px;}
.tou{
background-color: #258dcd;color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</html>
add.html: 
<html>
<head>
<title>添加电影</title>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="/UI">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="/add">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<form method="post" action="/addSubmit">
<!-- <p>编号：<input type="text" name="tid" /></p> -->
<!-- 文本模式输入，传入参数为 tname -->
<p>名称：<input type="text" name="tname" /></p>
<!-- 文本模式输入，传入参数为 tcontent -->
<p>内容：<input type="text" name="tcontent" /></p>
<!-- 添加按键 -->
<p><input type="submit" value="添加" /></p>
</form>
</body>
<style>
body{ margin: 0 auto; width: 800px;
background-image:url('/static/html 封面图.png');
background-repeat:no-repeat;
background-size: cover;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;border-radius: 5px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
</style>
</html>
显示界面：
UI.html:
update.html
add.html:
在一个问题上琢磨了好久，结果老师说我琢磨的那个部分不在作业要求范围内。
工科小石头
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Python和HTML的my_flask学习项目设计源码
04-17
本项目是基于Python和HTML开发的my_flask学习项目设计源码，主要使用Python进行开发。项目共包含68个文件，其中Python源代码文件py 24个，HTML页面文件html 11个，XML配置文件xml 9个，编译后的Python字节码文件pyc ...
flaskweb大数据Web应用平台开发虎扑论坛前期学习基础
04-04
通过本篇文章的学习，我们了解了Flask的基本概念和使用方法，包括路由、视图函数、页面重定向、模块渲染以及表单处理等核心功能。Flask的灵活性和易用性使其成为进行大数据Web应用平台开发的理想选择之一。随着实践...
内部大数据k匿名处理数据平台框架：flask+ html + css + jquery + python
07-25
项目名称:大数据k匿名处理数据平台 框架：flask+ html + css + jquery + python + k-anonymity算法 +mysql MySQL数据量重置id truncate table tablename python 3.10 k-anonymity算法资料 泛化技术： K-Anonymity...
使用pycharm+flask创建一个html网页
03-25
通过这个简单的实例，我们学习了如何使用PyCharm和Flask创建一个基本的HTML网页。Flask的强大之处在于它的扩展性，你可以添加更多的路由、模板、静态文件，甚至连接数据库，实现更复杂的功能。继续深入学习Flask和...
sqlalchemy-flask-example:使用我们钟爱SQLAlchemy和Flask库的示例
05-04
这是一个示例库，显示了SQLAlchemy和Flask的用法。 所有代码都在“演示”文件夹中。 怎么跑 只需遵循以下脚本： python3 -m venv .venv source .venv/bin/activate pip3 install -r ./requirements/requirements....
【OpenCV C++20 学习笔记】给图片加边框-copyMakeBorder
TeamLee的博客
08-06 202
简单介绍在OpenCV中如何用copyMakeBorder的方法给图片添加边框
【GCC】结合GPT4 延迟梯度学习2：延迟梯度的计算及阈值更新
最新发布
突围
08-06 25
拥塞控制
HTML5新增元素属性学习
weixin_68441705的博客
08-06 99
placeholder：提示性语句，在文本输入框 上提示用户输入内容，当用户填充内容消失，删除内容又出现（用于提示用户输入用户名，密码，适合短的提示语句）2.datalist 表单新元素 配合input使用，有下拉菜单也可以输入内容（通常用于搜素引擎）autofocus：自动聚焦，进入注册界面，光标自动聚焦在输入框上，用于提升用户体验。min和max ：最大值 最小值 可以配合其他属性使用，用于数值型。required：必填项，用户如果不填，表单无法提交。autocomplete：自动填充，通常用于登录。
学习STM32（4）--STM32单片机定时器的应用
weixin_73690807的博客
08-06 534
学习stm32第五篇
嵌入式学习之路 12 （C语言基础学习 —— 一维、二维数组做函数参数）
weixin_63556308的博客
08-03 723
二维字符型数组用来存储多个字符串，操作时往往都是要操作多个字符串，而多个字符串没有所谓的结束标志，看的是数组行数。一位字符串数组主要用来存放字符串数据，而字符串数据有结束标志，所以传参时不需要传长度。因为处理的是字符串数据，字符串操作的依据是看结束标志'\0'，所以不需要传数组长度。练习：对一维字符型数组做函数参数的操作。练习：对一维整型数组做函数参数的操作。练习：对二维整型数组做函数参数的操作。练习：对二维字符型数组做函数参数的操作。做形参要写数组形式+行数；做实参要写数组名+行数；
接口测试学习笔记1
weixin_53666393的博客
08-03 897
同时也像白盒测试那样，检查程序的代码，但这种检查不像白盒测试那样详细、完整，一般只对程序模块之间的调用、核心代码进行检查，在集成测试时经常采用，一般也是程序员大量采用。现在企业说的接口测试，一般指的是Web接口测试或Http接口测试，主要指的是基于B/S架构的接口测试（B/S架构主要基于HTTP 超文本传输协议，所以也叫HTTP接口测试）对请求对象（网页、文件、图片...）进行的操作，就是一些命令，程序员在编程的时候使用，在接口文档中会指明，测试人员测试接口的时候，按照说明选择正确的方法。
IROS2024 | DarkGS：学习神经照明和3D高斯重新照明，用于黑暗中机器人探索
08-06 537
论文标题：DarkGS: Learning Neural Illumination and 3D Gaussians Relighting for Robotic Exploration in the Dark论文地址：https://arxiv.org/abs/2403.10814。
编程的魅力、发展历程、核心要素、学习路径以及它对个人成长和社会进步的深远影响
z86666610的博客
08-02 524
进入21世纪，随着互联网的普及和移动设备的兴起，编程语言更加多样化，如Python、JavaScript等，它们以其简洁易学的特点吸引了大量初学者。同时，人工智能、大数据、云计算等新兴技术的快速发展，更是将编程推向了新的高度，使得编程成为推动社会进步的重要力量。编程的魅力，在于它让我们能够将自己的想法直接转化为现实，体验到从无到有的创造过程。本文将深入探讨编程的魅力、发展历程、核心要素、学习路径以及它对个人成长和社会进步的深远影响，旨在为读者勾勒出一幅全面而生动的编程世界图景。
重生之我 学习【数据结构之顺序表（SeqList）】
xupy019的博客
08-06 775
全新的开始，为大家带来数据结构的内容（C语言实现）将以顺序表、链表、栈区、队列、二叉树、常见排序算法为主要内容展开学习
SpringBoot快速学习
qq_46091002的博客
08-06 213
目录SpringBoot配置文件多环境配置SpringBoot整合junitSpringBoot整合mybatis1.在创建时勾选需要的模块2.定义实体类3.定义dao接口4.编写数据库配置5.使用Druid数据源 是对 开发进行简化的。那我们先来看看SpringMVC开发中的一些必须流程。从上面的 程序开发可以看到，前三步都是在搭建环境，而且这三步基本都是固定的。 就是对这三步进行简化了。对比一下 程序和 程序。使用SpringBoot后我们只需要定义Controller和Application
C语言零基础学习笔记11——分支和循环（五）
Lbs_gemini0603的博客
08-02 1247
C语言零基础学习笔记11——分支和循环（五）
【Datawhale AI夏令营】从小白开始 - 逻辑推理学习Task2
随心所欲的便笺
08-05 604
大语言模型的概念就是通过数据集进行训练，经过不断调整指令参数来解决推理问题。
昇思基础课程打卡（SPONGE课前学习）9.使用静态图加速
cftang9999的专栏
08-06 324
AI编译框架分为两种运行模式，分别是动态图模式以及静态图模式。MindSpore默认情况下是以动态图模式运行，但也支持手工切换为静态图模式。
File文件类学习总结
c1tenj2的博客
08-02 160
【代码】File文件类学习总结。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值