Python Flask:搭建云主机列表页

来自CloudWiki
跳转至： 导航， 搜索

python


from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
@app.route('/hello')
def hello_world():
    #return '你好'
    #return render_template('index.html')
    thelist =[{"id":1,"name":"cloud1","url":"/detail/1"},
              {"id":2,"name":"cloud2","url":"/detail/2"},
              {"id":3,"name":"cloud3","url":"/detail/3"}
              ]
              
    return render_template('index.html',mylist=thelist)

@app.route('/list')
def show_list():
      
    #return "全部主机列表"
    #thelist = [1,2,3,4,5]
    thelist =[{"id":1,"name":"cloud1","url":"/detail/1"},
              {"id":2,"name":"cloud2","url":"/detail/2"},
              {"id":3,"name":"cloud3","url":"/detail/3"}
              ]
              
    return render_template('list.html',mylist=thelist)

@app.route('/detail/<int:id>')
def instance_detail(id):
    #return "主机详情:"+str(id)
    return render_template('detail.html',myid=id)


if __name__ == '__main__':
    #app.debug = True
    app.run( host='0.0.0.0',port="5001",debug="true")

html

基本版

图片存储在 static ,static 文件夹要和python文件平行。

模板hmtl存储在templates文件夹下，templates文件夹和python文件平行 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1> 主机列表<h>
    
    {% for i in mylist %}
         <div>
		     <a href="{{i.url}}">ID:{{i.id}},name：{{i.name}}</a>
		</div>
    {% endfor %}
</body>
</html>

Bootstrap版

<!DOCTYPE html>  
<html>  
<head>  
   <title>Bootstrap 实例 - 手机,平板，台式机区分</title>  
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">      
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>    
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
</head>  
<body>  
<div class="container">   
    <div class="row">
       <h2>我的云主机</h2>
    </div>
  

     <div class="row">
            {% for i in mylist %}
			    <div class="col-sm-6 col-md-3">
					<a href="#" class="thumbnail">
						<img src="static/云主机.png"
							alt="通用的占位符缩略图">
					</a>
					<h3 class="text-center"> <a href="{{i.url}}">ID:{{i.id}},name：{{i.name}}</h3>
			    </div>
          {% endfor %}
	</div>
  
   
</div>  
  
</body>  
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Python_Flask:搭建云主机列表页&oldid=32731”