为完成“饮食记录”界面,初步构想就是将文字和对应的图片展现在html上,暂时不考虑美工排版,仅致力于内容展现和跳转按钮的实现。基于此,本文主要记录简单html内容的堆放。
<head>字段只是为网页取名以及规定展现格式,格式默认UTF-8不做改动。
剩下的编辑主要是<body>字段,这里展示仅简单用到了部分控制手段:
<h数字>包裹的控制文本和字相对大小;
<img src="路径+图片命"/>展现图片;
<p>换行;
<input.../>包含submit类型按键,附加点击跳转地址写法,对应点击跳转功能。
show.html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户食谱</title>
</head>
<body>
<h1>我的菜谱</h1>
<h2>菜名:{{fname}}</h2> # 双大括号,可以由外部flask传递值
<h3>配料:{{fmaterial}}</h3>
<img src="../static/user_pic/yv.jpg"/>
<p>
<input type="submit" value="上传菜单" id="Button1"
onclick="window.location.href='/upload'"/>
</body>
</html>
py文件内,route对应的函数下,返回值如下设置,就可以实现对html的传参数,并且打开该html:
return render_template('show.html', fname='字符串1', fmaterial='字符串2')
当然,这两个传入的字符串可以直接在html内指定,但这样传递的好处是,便于后期在flask代码内读取数据库的数据,再传入html。