学习大数据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:

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

相关推荐
Open-AI2 分钟前
Python如何判断一个数是几位数
python
极客代码5 分钟前
【Python TensorFlow】入门到精通
开发语言·人工智能·python·深度学习·tensorflow
义小深8 分钟前
TensorFlow|咖啡豆识别
人工智能·python·tensorflow
疯一样的码农12 分钟前
Python 正则表达式（RegEx）
开发语言·python·正则表达式
光影少年14 分钟前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_15 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
susu108301891117 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi18 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Ocean☾19 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking19 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play