查看“Python Flask：云主机添加控制按钮”的源代码

==实训背景==
之前，我们开发了云主机的列表页 和详情页，

现在，我们给云主机的详情页加上控制按钮，

使之能完成python基础运维部分的典型运维操作，如查看系统信息、文件操作、定时任务等。

[[文件:python2023032401.png|600px]]

==代码==
===templates/html===

 <nowiki>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>    
 
</head>
<body>
    <h1>主机详情</h1>
    <hr>
	<div><img src="../static/云主机.png"
							alt="通用的占位符缩略图"></div>
    <h3>该主机的详情为:ID {{ myid }}</h3>
	<h3><button type="button" class="btn btn-default" onclick="myfunc1()">按钮1</button>
	    <button type="button" class="btn btn-default" onclick="myfunc2()">按钮2</button>
		<button type="button" class="btn btn-default" onclick="myfunc3()">按钮3</button>
	
	
	</h3>
	<h3>信息:</h3>
	<div id="mydiv"></div>
</body>
</html>
<script type="text/javascript">

	function myfunc1(){
		//alert("哈哈哈");
		$.ajax({
			url: '/cpu', // 请求地址
			type: 'GET', // 说明请求的类型
			// 请求成功则执行success中的函数
			// data参数说明：由于一个请求会产生多个数据，如状态码，请求头等，我们这里只获取请求到的数据，也就是data
			success: function(data){
				// each函数遍历数据
				// i是索引 item是正在遍历的数据
				//alert("success!")
				//alert(data)

				$("#mydiv").html(data);
				
			},
			// 报错处理
			error: function(){
				// 写入日志
				alert("fail!")
				console.log("数据加载失败！");
			}
		});
		
	}
   function myfunc2(){
	
		
	}



</script>
</nowiki>
===python===
 <nowiki>
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('detail2.html',myid=id)

import platform
@app.route('/test')
def test():
    #获取系统信息
    system = platform.system()
    return str(system)

import psutil
@app.route('/cpu')
def cpu_info():    #----》函数名尽可能切合内容
     cpu = psutil.cpu_percent()
     return "本机CPU利用率:"+str(cpu)     

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

</nowiki>