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

工科小石头2024-08-11 19:59

目录

[HTML 超文本标记语言 Hyper Text Markup Language](#HTML 超文本标记语言 Hyper Text Markup Language)

[上机练习 9](#上机练习 9)

Flask

[显示层 UI](#显示层 UI)

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

[flask 在 html 中的语法](#flask 在 html 中的语法)

[上机练习 10](#上机练习 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 复制代码 
<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 复制代码 
<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:

python 复制代码 
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 复制代码 
<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 复制代码 
<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 复制代码 
<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:

在一个问题上琢磨了好久，结果老师说我琢磨的那个部分不在作业要求范围内。

相关推荐
GuYue.bing1 分钟前
网络下载ts流媒体
开发语言·python
筒栗子2 分钟前
复习打卡大数据篇——Hadoop HDFS 03
大数据·hadoop·hdfs
IT古董5 分钟前
【机器学习】机器学习的基本分类-半监督学习（Semi-supervised Learning）
学习·机器学习·分类·半监督学习
牛顿喜欢吃苹果13 分钟前
linux创建虚拟串口
python
-Mr_X-20 分钟前
FFmpeg在python里推流被处理过的视频流
python·ffmpeg
jbjhzstsl23 分钟前
lv_ffmpeg学习及播放rtsp
学习·ffmpeg
青い月の魔女32 分钟前
数据结构初阶---二叉树
c语言·数据结构·笔记·学习·算法
网络安全（king）33 分钟前
网络安全攻防学习平台 - 基础关
网络·学习·web安全
一个不秃头的 程序员36 分钟前
代码加入SFTP JAVA ---（小白篇3）
java·python·github
susu108301891141 分钟前
python实现根据搜索关键词爬取某宝商品信息
爬虫·python
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）