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

news/2024/10/11 0:20:15/
htmledit_views">

目录

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

上机练习 9

Flask

显示层 UI

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

flask%20%E5%9C%A8%20html%20%E4%B8%AD%E7%9A%84%E8%AF%AD%E6%B3%95-toc" style="margin-left:80px;">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"><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%20%E5%9C%A8%20html%20%E4%B8%AD%E7%9A%84%E8%AF%AD%E6%B3%95">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:
在一个问题上琢磨了好久，结果老师说我琢磨的那个部分不在作业要求范围内。

http://www.ppmy.cn/news/1506791.html

相关文章

[C#]基于C# winform结合llamasharp部署llama3中文的gguf模型

[C#]基于C# winform结合llamasharp部署llama3中文的gguf模型

【llmasharp源码】 https://github.com/SciSharp/LLamaSharp 【测试模型】 https://www.modelscope.cn/pooka74/LLaMA3-8B-Chat-Chinese-GGUF.git 【测试通过环境】 vs2019 netframework4.7.2 llamasharp0.15.0 cuda11.7.1cudnn8.8.0 注意测试发现使用cpu推理非常卡&a…
阅读更多...
el-input输入数字，带有千分位

el-input输入数字，带有千分位

封装组件 <template><el-inputchange"changenum"blur"blurInput"v-model"inputnum1"placeholder"请输入数字"clearable:disabled"disablednum":class" inputcolor ? input_num_dis : "></el-in…
阅读更多...
[MRCTF2020]Ezpop

[MRCTF2020]Ezpop

[MRCTF2020]Ezpop 题目是pop&#xff0c;考的其实就是pop链&#xff0c;可以自己先学学&#xff0c;啥也不会QAQ php反序列化之pop链_pop3.phpwelcome-CSDN博客 POP 面向属性编程(Property-Oriented Programing) 常用于上层语言构造特定调用链的方法&#xff0c;与二进制利用…
阅读更多...
【JVM基础14】——垃圾回收-强引用、软引用、弱引用、虚引用的区别

【JVM基础14】——垃圾回收-强引用、软引用、弱引用、虚引用的区别

目录 1- 引言&#xff1a;为什么分多种引用类型2- ⭐核心&#xff1a;2-1 强引用2-2 软引用2-3 弱引用2-4 虚引用 3- 小结&#xff1a;3-1 强引用、软引用、弱引用、虚引用的区别&#xff1f; 1- 引言&#xff1a;为什么分多种引用类型 在 Java 中&#xff0c;引用类型被分为强…
阅读更多...
240810-Gradio通过HTML组件打开本地文件+防止网页跳转到about:blank

240810-Gradio通过HTML组件打开本地文件+防止网页跳转到about:blank

A. 最终效果 B. 可通过鼠标点击打开文件&#xff0c;但会跳转到about:blank import gradio as gr import subprocessdef open_pptx():pptx_path /Users/liuguokai/Downloads/240528-工业大模型1.pptxtry:subprocess.Popen([open, pptx_path])return "PPTX file opened s…
阅读更多...
LVS（Linux virual server）详解

LVS（Linux virual server）详解

目录 一、LVS&#xff08;Linux virual server&#xff09;是什么&#xff1f; 二、集群和分布式简介 2.1、集群Cluster 2.2、分布式 2.3、集群和分布式 三、LVS运行原理 3.1、LVS基本概念 3.2、LVS集群的类型 3.2.1 nat模式 3.2.2 DR模式 3.2.3、LVS工作模式总结 …
阅读更多...
Vue引入使用iconfont字体图标

Vue引入使用iconfont字体图标

由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，不止是vue使用，不限于vue2、vue3，html或是其他框架也是同样的道理，只要引入都是同样可以使用的。 1. 首先进入阿里巴巴矢量图标库官网 官网：https://…
阅读更多...
源码编译安装LAMP（HTTP服务，MYSQL ,PHP，以及bbs论坛）

源码编译安装LAMP（HTTP服务，MYSQL ,PHP，以及bbs论坛）

前言&#xff1a;资源 下载在https://download.csdn.net/download/YCyjs/89618650下载&#xff0c;可在生产环境使。 一、安装Apache 下面两个插件是httpd2.4以后的版本所需要 tar xf apr-1.6.2.tar.gz tar xf apr-util-1.6.0.tar.gz 虽然xf通常足够&#xff0c;但使用与压缩…
阅读更多...
最新文章

Copyright @ 2022~2023