Python 是否有可能通过使用POST变量来分配Mako模板内图像的src?
我目前被困在这个问题上,我似乎无法解决它。。。我用CherryPy创建了一个小的Web应用程序,并用Mako作为html模板。所有内容都绑定到一个MySQL数据库,该数据库几乎包含一个汽车列表。我的问题如下:我正在使用POST表单,以便从主页导航到car部分并指定特定的汽车品牌。到达该页面后,我根据我文章中的标准从数据库中加载所有汽车。该变量包含从数据库中获取的所有行。然后,我继续遍历行列表,以显示每个汽车信息等,但我似乎找不到一种方法将每个图片与其对应的汽车联系起来。我的想法是生成img文件夹(../img/cars/)的路径,并将其与car id+文件扩展名连接起来,但这似乎不起作用。。。(我的图片保存为1.jpg、2.jpg等-每个数字代表汽车id) index.html:Python 是否有可能通过使用POST变量来分配Mako模板内图像的src?,python,html,mysql-python,cherrypy,mako,Python,Html,Mysql Python,Cherrypy,Mako,我目前被困在这个问题上,我似乎无法解决它。。。我用CherryPy创建了一个小的Web应用程序,并用Mako作为html模板。所有内容都绑定到一个MySQL数据库,该数据库几乎包含一个汽车列表。我的问题如下:我正在使用POST表单,以便从主页导航到car部分并指定特定的汽车品牌。到达该页面后,我根据我文章中的标准从数据库中加载所有汽车。该变量包含从数据库中获取的所有行。然后,我继续遍历行列表,以显示每个汽车信息等,但我似乎找不到一种方法将每个图片与其对应的汽车联系起来。我的想法是生成img文件夹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="topnav" id="myTopnav">
<a href="index" id="logolink">
<img alt="AutoRIL" src="../img/logo_transparent.png" width="75" height="75">
</a>
<a href="index" id="link" class="active">Home</a>
<a href="#news" id="link">News</a>
<a href="contact" id="link">Contact</a>
<a href="about" id="link">About</a>
</div>
<div class ="pageinfo">
<img src="../img/slides/slide1.jpg" alt="BMW">
<img src="../img/slides/slide2.jpg" alt="Audi">
</div>
<div class="pagecontent">
<h1>Show cars by Category</h1>
<div class="row">
<div class="column">
<div class="card">
<img src="../img/categories/hatchback.png" alt="Hatchback" style="width:200px; height:200px;">
<div class="container">
<h2>Hatchback</h2>
<p>Agile due its reduced size.</p>
<form action="displaybycategory" method="POST">
<p><button class="button" type="submit" name="category" value="hatchback" >Check available models</button></p>
</form>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="../img/categories/suv.png" alt="SUV" style="width:200px; height:200px;">
<div class="container">
<h2>SUV</h2>
<p>Extremely versatile due to its power and utility.</p>
<form action="displaybycategory" method="POST">
<p><button class="button" type="submit" name="category" value="suv" >Check available models</button></p>
</form>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="../img/categories/sedan.png" alt="Sedan" style="width:200px; height:200px;">
<div class="container">
<h2>Sedan</h2>
<p>Enough space to fit all needs.</p>
<form action="displaybycategory" method="POST">
<p><button class="button" type="submit" name="category" value="sedan" >Check available models</button></p>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<img src="../img/categories/convertible.png" alt="Convertible" style="width:200px; height:200px;">
<div class="container">
<h2>Convertible</h2>
<p>Gives you all the freedom you deserve.</p>
<form action="displaybycategory" method="POST">
<p><button class="button" type="submit" name="category" value="convertible" >Check available models</button></p>
</form>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="../img/categories/coupe.png" alt="Coupe" style="width:200px; height:200px;">
<div class="container">
<h2>Coupe</h2>
<p>Sporty looks, aggressive driving.</p>
<form action="displaybycategory" method="POST">
<p><button class="button" type="submit" name="category" value="coupe" >Check available models</button></p>
</form>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="../img/categories/sports.png" alt="Sports" style="width:200px; height:200px;">
<div class="container">
<h2>Sports</h2>
<p>City conqueror, track monster.</p>
<form action="displaybycategory" method="POST">
<p><button class="button" type="submit" name="category" value="sports" >Check available models</button></p>
</form>
</div>
</div>
</div>
</div>
<h1>Show cars by Make</h1>
<form action="displaybymake" method="POST">
<table style="width:100%" id="carmakes">
<tr>
<td><p><button class="button" type="submit" name="make" value="Audi" >Audi</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Fiat" >Fiat</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Hyundai" >Hyundai</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Mazda" >Mazda</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Nissan" >Nissan</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Toyota" >Toyota</button></p></td>
</tr>
<tr>
<td><p><button class="button" type="submit" name="make" value="BMW" >BMW</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Ford" >Ford</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Kia" >Kia</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Mercedes-Benz" >Mercedes-Benz</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Porsche" >Porsche</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Volkswagen" >Volkswagen</button></p></td>
</tr>
<tr>
<td><p><button class="button" type="submit" name="make" value="Chevrolet" >Chevrolet</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Honda" >Honda</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Range Rover" >Range Rover</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Mitsubishi" >Mitsubishi</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Subaru" >Subaru</button></p></td>
<td><p><button class="button" type="submit" name="make" value="Volvo" >Volvo</button></p></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
这里应该是这样的:src=“../img/cars/{a[0]}.jpg”,其中{a[0]}接受汽车id
如果我没有包括任何内容或没有澄清问题,我表示歉意。我是这方面的新手,任何帮助/建议都将不胜感激。谢谢 我找到的唯一临时解决方案是通过多个if语句对图片选择进行硬编码。。。(是的,我知道……:D)像这样:
%如果[0]==1:
%elif a[0]==2:
%elif a[0]==3:
%elif a[0]==4:
%elif a[0]==5:
%elif a[0]==6:
%elif a[0]==7:
%elif a[0]==8:
%elif a[0]==9:
%elif a[0]==10:
%elif a[0]==11:
%elif a[0]==12:
%elif a[0]==13:
%elif a[0]==14:
%elif a[0]==15:
%elif a[0]==16:
%elif a[0]==17:
%elif a[0]==18:
%elif a[0]==19:
%elif a[0]==20:
%恩迪夫
我知道这真的很糟糕,但我似乎仍然找不到一种方法来使用变量,以便将它们用作src的属性 我认为您应该尝试使用JavaScript来替代您的问题
强烈建议使用字符串连接运算符
(+,+=)
而不是其他方法来执行此操作。在HTML中使用变量的mako语法如下:
其中变量filename从包含此模板的模板接收,并将filename作为变量传递。或者在模板内动态设置,要在模板内运行python代码,请使用以下命令:
filename=“/var/www/myproject/path”+“资源”
<!DOCTYPE html>
<html>
<link href="../css/carcategory.css" rel="stylesheet">
<div class="uppercontent">
<a href="index" id="logolink">
<img alt="AutoRIL" src="../img/logo_transparent.png" width="75" height="75">
</a>
<h2>Current category: ${categ}</h2>
<hr>
</div>
<table><tr>
% for a in mydata:
% if loop.index % 3 == 0:
</tr><tr><td>
<div class="card" style="margin-left: 125px;">
<img src="../img/cars/1.jpg" alt="Car" style="width:200px; height: 200px;">
<h1>${a[1]}</h1>
<p>${a[2]}</p>
<p class="price">EUR ${a[4]}</p>
<p><button>Check it out</button></p>
</div>
</td>
% elif loop.index %3 != 0:
<td>
<div class="card">
<img src="../img/cars/1.jpg" alt="Car" style="width:200px; height: 200px;">
<h1>${a[1]}</h1>
<p>${a[2]}</p>
<p class="price">EUR ${a[4]}</p>
<p><button>Check it out</button></p>
</div>
</td>
% endif
% endfor
</html>
import cherrypy
import mysql.connector
from mysql.connector import errorcode
import os
from mako.template import Template
from mako.lookup import TemplateLookup
path = os.path.abspath(os.path.dirname(__file__))
lookup = TemplateLookup(directories=[os.path.join(path, 'html')])
mydb = mysql.connector.connect(
host="localhost",
user="root",
password="luk610",
database="siteril"
)
class MainPage(object):
@cherrypy.expose
def index(self):
template = lookup.get_template('index.html')
return template.render()
index.exposed = True
@cherrypy.expose
def displaybycategory(self, category):
template = lookup.get_template('carcategory.html')
mycursor = mydb.cursor()
payload = 'SELECT * FROM cars WHERE category=' + '"' + category + '"'
mycursor.execute(payload)
result = mycursor.fetchall()
return template.render(mydata=result, categ=category)
displaybycategory.exposed = True
@cherrypy.expose
def displaybymake(self, make):
template = lookup.get_template('carmake.html')
mycursor = mydb.cursor()
payload = 'SELECT * FROM cars WHERE make=' + '"' + make + '"'
mycursor.execute(payload)
result = mycursor.fetchall()
return template.render(mydata=result)
displaybycategory.exposed = True
@cherrypy.expose
def about(self):
template = lookup.get_template('about.html')
return template.render()
about.exposed = True
@cherrypy.expose
def contact(self):
template = lookup.get_template('contact.html')
return template.render()
contact.exposed = True
if __name__ == '__main__':
conf_path_root = os.path.dirname(os.path.abspath(__file__))
conf_path = os.path.join(conf_path_root, "config.conf")
cherrypy.config.update(conf_path)
cherrypy.tree.mount(MainPage(), '/', config=conf_path)
cherrypy.engine.start()
cherrypy.engine.block()
% if a[0] == 1:
<img src="../img/cars/1.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 2:
<img src="../img/cars/2.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 3:
<img src="../img/cars/3.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 4:
<img src="../img/cars/4.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 5:
<img src="../img/cars/5.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 6:
<img src="../img/cars/6.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 7:
<img src="../img/cars/7.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 8:
<img src="../img/cars/8.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 9:
<img src="../img/cars/9.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 10:
<img src="../img/cars/10.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 11:
<img src="../img/cars/11.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 12:
<img src="../img/cars/12.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 13:
<img src="../img/cars/13.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 14:
<img src="../img/cars/14.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 15:
<img src="../img/cars/15.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 16:
<img src="../img/cars/16.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 17:
<img src="../img/cars/17.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 18:
<img src="../img/cars/18.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 19:
<img src="../img/cars/19.jpg" alt="Car" style="width:200px; height: 200px;">
% elif a[0] == 20:
<img src="../img/cars/20.jpg" alt="Car" style="width:200px; height: 200px;">
%endif