“Python Flask：云主机添加控制按钮”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“==实训背景== 之前，我们开发了云主机的列表页 和详情页， 现在，我们给云主机的详情页加上控制按钮， 使之能完成python…”）
 
第7行： 第7行：
  
 
[[文件:python2023032401.png|600px]]
 
[[文件: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>
 +
 +
===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>

2023年3月24日 (五) 14:19的版本

实训背景

之前，我们开发了云主机的列表页 和详情页，

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

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

Python2023032401.png

代码

templates/html

<!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>

===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")
取自“http://www.openbrains.net/mediawiki/index.php?title=Python_Flask：云主机添加控制按钮&oldid=32697”