web端作業控制系統簡易實現

菩提樹下的煮茶小童子發表於2018-03-12

[toc] 如上圖所示，這篇文章基於此圖進行實現。其功能就是，可以在WEB端對後臺的一些服務進行控制。最初的想法來自於近期將要做的畢設專案。

因為是爬蟲程式，所以有可能會長期跑一些指令碼，又不能隨時帶著電腦（阿里雲APP上倒是有一個ssh工具，很方便），所以做成一個web服務，這樣直接用瀏覽器就可以簡單的完成一些操作了。

`專案結構`

因為類似的服務，有點繞。所以簡單的分下層，理解起來會更容易點。其實說白了，就是一個帶有了WEB服務的IPC實現。具體的流程為： 客戶端通過web請求，呼叫到服務指令碼執行對應的訊號處理，完成對目標指令碼的控制。

下面展示下目錄結構，方便理解：

developer@aliyun:~/control$ tree
.
├── api.py  # flask 服務相關
├── control.sh  # 訊號處理相關 
├── father.log  # 日誌檔案
├── get-process-status.sh # 指令碼執行狀態相關
├── jobs.list    # 可操作的服務列表
├── log          # 日誌檔案，測試用
├── py.log       # 日誌檔案，測試用
├── scripts      # 存放服務指令碼的目錄
│   ├── testforbash.sh  # 測試bash指令碼
│   ├── testforphp.php  # 測試PHP指令碼
│   └── testforpy.py    # 測試Python指令碼
├── start-program.py     # 被control.sh呼叫，根據擴充名找到對應直譯器並開啟服務
├── static  # flask 預設靜態檔案目錄
│   ├── css
│   │   ├── detail.css
│   │   └── index.css
│   ├── imgs
│   │   ├── background.jpg
│   │   ├── favicon.ico
│   │   └── header.jpg
│   └── js
│       ├── detail.js
│       ├── index.js
│       └── jquery-2.2.4.min.js
└── templates  # flask 預設模板目錄
    └── index.html

複製程式碼

`程式碼段`

下面按照上述目錄結構，貼一下程式碼。程式碼都很簡單，瞭解了流程之後也就不難理解了。這裡不再做過多的贅述。

`api.py`

developer@aliyun:~/control$ cat api.py
#!/usr/bin python
# coding: utf8
import sys
reload(sys)
sys.setdefaultencoding("utf8")
import os
import commands
import json
from flask import Flask,request,render_template
# for easy usage, just all in. begin
# 獲取可以控制的指令碼列表
def get_programs():
    with open("./jobs.list", "r") as file:
        programs = file.readlines()
        file.close()
    return [line.strip("\n") for line in programs]
# 根據指令碼名稱獲取當前指令碼的執行狀態
def get_status_by_name(program=""):
    cmd = "bash get-process-status.sh {}".format(program)
    status, output = commands.getstatusoutput(cmd)
    return status, output

# 控制指令碼執行，暫停，或者殺死
def control_program(program="", command=""):
    cmd = "bash control.sh {} {} &".format(program, command)
    return os.system(cmd)

# end
app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/program")
def program():
    res = {"data":[], "code":-1}
    try:
        programs = get_programs()
        res = {"data": programs, "code":0}
    except exception as e:
        res = {"data": e, "code":-1}
    return json.dumps(res)
@app.route("/status", methods=["POST", "GET"])
def status():
    params = {}
    if request.method == "POST":
        params = request.form.to_dict()
    elif request.method == "GET":
        params = request.args.to_dict()
    else:
        params = {}
    program = params.get("program", "")
    status = get_status_by_name(program)
    return json.dumps({"data":status})

@app.route("/control", methods=["POST", "GET"])
def control():
    params = {}
    if request.method == "POST":
        params = request.form.to_dict()
    elif request.method == "GET":
        params = request.args.to_dict()
    else:
        pass
    program = params.get("program")
    command = params.get("command")
    print program, "==", command
    res = control_program(program, command)
    return render_template("index.html")

if __name__ == "__main__":
    #print get_programs()
    #program = "/home/developer/control/scripts/testforphp.php"
    #print get_status_by_name(program)
    #print control_program(program, "start")
    #print get_status_by_name(program)
    app.run(host="0.0.0.0", port=9999, debug=True)
複製程式碼

`control.sh`

developer@aliyun:~/control$ cat control.sh 
#!/usr/bin bash
# 獲取$1 內容對應的程式id
echo "命令為" $1
PID=$(ps aux | grep -v grep | grep $1 | awk '{print $2}'| head -1)
echo "捕獲的程式號為" $PID "具體的命令為" $2
# 根據$2引數來控制程式
if [[ $2 == "stop" ]];then
    echo "暫停" $1
    kill -SIGSTOP $PID
elif [[ $2 == "resume" ]];then
    echo "繼續" $1
    kill -SIGCONT $PID
elif [[ $2 == "kill" ]];then
    echo "終止" $PID
    kill -9 $PID
elif [[ $2 == "start" ]];then
    #echo "可以交給python指令碼根據對應的擴充名來開啟對應的服務"
    echo "正在開啟指令碼..."
    /usr/bin/python /home/developer/control/start-program.py $1 > /home/developer/control/father.log
else
    echo "暫不支援的操作~"
fi
echo "OVER!"

複製程式碼

`get-process-status.sh`

developer@aliyun:~/control$ cat get-process-status.sh 
#!/usr/bin bash

PROGRAM=$1
STATUS=$(ps aux | grep -v grep| grep $PROGRAM | head -1 | awk '{print $8}')
echo $STATUS
exit
if [[ $STATUS == "T"  ]];then
    echo $PROGRAM is Stopping...
elif [[ $STATUS == "S"  ]];then
    echo $PROGRAM is S
elif [[ $STATUS == "R" ]];then
    echo $PROGRAM is Running.
else
    echo $PROGRAM is $STATUS
fi

複製程式碼

`jobs.list`

developer@aliyun:~/control$ cat jobs.list 
/home/developer/control/scripts/testforpy.py
/home/developer/control/script/testforbash.sh
/home/developer/control/scripts/testforphp.php
複製程式碼

`scripts`

這個目錄用於擴充服務的列表，需要新增新的可控指令碼的話，只需要在這個資料夾和jobs.list下進行新增即可。

`testforbash.sh`

developer@aliyun:~/control$ cat scripts/testforbash.sh 
#!/usr/bin bash
for ((i=1; i<10;i++))
do
    echo $i "carried."
    sleep 3
done
複製程式碼

`testforphp.php`

developer@aliyun:~/control$ cat scripts/testforphp.php 
<?php

while(true) {
    $date = date("Y-m-d H:i:s");
    echo "PHP 當前時間是[{$date}].\n";
    sleep(10);
}
複製程式碼

`testforpy.py`

developer@aliyun:~/control$ cat scripts/testforpy.py 
#!/usr/bin python
#coding: utf8
import sys
import time
reload(sys)
sys.setdefaultencoding("utf8")
index = 0
while True:
    with open("/home/developer/control/py.log", "a") as file:
        content = str("current time is: "+str(time.ctime())+"!\n")
        file.write(content)
        time.sleep(10)
        index+=1
        if index==10:
            break
        file.close()

複製程式碼

`start-program.py`

developer@aliyun:~/control$ cat start-program.py 
#!/usr/bin python
#coding: utf8
import sys
reload(sys)
sys.setdefaultencoding("utf8")
import os
# 也可以使用subprocess庫，這樣效果貌似會更好
path = str(sys.argv[1])
print(path)
# 預設使用最後一個擴充名
extension = path.split(".")[-1]
# 根據擴充名找到對應的處理器
mapping = {
        "php": "php",
        "py": "python",
        "sh": "bash"
        }
exts = ['php', 'py', 'sh']
print("extension is: " + extension)
print("commander is:" + mapping.get(extension))
if extension in exts:
    cmd = "{} {}  >> log &".format(mapping.get(extension), path)
    print(cmd)
    os.system(cmd)
else:
    print("不支援的控制指令碼")


複製程式碼

`index.js`

developer@aliyun:~/control$ cat static/js/index.js 
$(document).ready(function(){
    loading_data_for_selector($("#programs"));
    get_program_status($("#programs"), $("#previewer"));
    //commit_command($("#btn_click"), $("#programs"), $("#command"))
});


function commit_command(btn, programs, commander) {
    btn.click(function(){
        var program = "";
        var command = "";
        programs.change(function(){
            program = $(this).children("option:selected").val();
        });
        commander.change(function(){
            command = $(this).children("option:selected").val();
        });
        console.log(program+"<>"+command)
        $.ajax({
            url: "/control",
            method: "POST",
            dataType: "JSON",
            data: {program: program, command: command},
            success: function(res) {
                console.log(res);
            },
            error: function(err) {
                console.log(err);
            }
        });
    });
}

function loading_data_for_selector(obj){
    $.ajax({
        url: "/program",
        method: "GET",
        dataType: "JSON",
        success: function(res) {
            console.log(res);
            var data = res.data;
            for(var index=0; index<data.length; index++) {
                var child = "<option value='"+data[index]+"'>"+data[index]+"</value>";
                obj.append(child);
            }
        },
        error: function(err) {
            console.log(err);
        }
    });
}

/**
 * 當selector的選中值發生變化的時候，就會觸發對應的請求，用於及時將
 * 指令碼的執行狀態顯示到頁面上。
 */
function get_program_status(obj, previewer) {
    obj.change(function(){
        previewer.children().remove();
        var value = $(this).children("option:selected").val();
        $.ajax({
            url: "/status",
            method: "POST",
            dataType: "JSON",
            data: {program: value},
            success: function(res) {
                console.log(res);
                var data = res.data[1];
                var child = "<p><code>"+value+"</code>的執行狀態為"+data+"</p>";
                previewer.append(child);
            },
            error: function(err){
                console.log(err);
            }
        });
    });

複製程式碼

`index.html`

developer@aliyun:~/control$ cat templates/index.html 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>web端作業控制系統</title>
	<script type="text/javascript" src="/static/js/jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="/static/js/index.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/css/index.css">
</head>
<body>
<div class="container">
	<div class="operator">
		<form action="/control" method="POST">
		<fieldset>
			<legend>填寫相關操作</legend>
			<select id="programs" name="program"></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<select id="command" name="command">
				<option value="start">開啟</option>
				<option value="stop">暫停</option>
				<option value="resume">繼續</option>
				<option value="kill">殺死</option>
			</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" id="btn_click" name="" value="提交">
		</fieldset>
	</form>
	</div>
	<div id="previewer" ="preview">
		
	</div>
</div>
</body>
</html>
複製程式碼

到此，核心的檔案都已經羅列完畢了。雖然功能上沒什麼問題了，但是原生的頁面看起來確實不能讓人有賞心悅目的感覺。有興趣的話可以在此基礎上進行優化，寫一個更好看的頁面。

`最終效果`

`開啟web服務`

`檢視可控指令碼以及可用操作`

`在web頁面開啟一個測試的服務指令碼`

`在web頁面暫停一個測試服務指令碼`

確認指令碼真的是暫停了。

`繼續之前暫停了的服務`

`終止一個服務`

`下拉框選中後會出現當前指令碼的服務狀態`

`總結`

到此，這個在web頁面控制服務行為的需求，馬馬虎虎算是做完了。但是不得不說，介面有點難看。在完成這個小工具的過程中，也算是遇到了各種各樣的坑。比如：

python檔案寫操作鎖沒釋放的
Bash和sh某些命令不相容的
flask請求引數一致性保證的問題

等等吧。

雖然看起來這個小工具，用到的語言特別亂，也特別雜,但大部分程式碼都是很簡單的。從最上面的那張圖入手，相信理解起來會更容易一點吧。

作業系統實驗5 簡易檔案管理系統
2017-12-13
作業系統
作業系統實驗——程式控制
2020-10-30
作業系統
作業系統能實現國產替代嗎？智慧終端作業系統大調查
2022-11-23
作業系統
go實現簡易分散式系統
2018-04-05
Go分散式
作業系統實驗2 程式控制和系統呼叫
2017-12-13
作業系統
作業系統: Unix作業系統演進簡史
2019-05-27
作業系統
作業系統概念-程式控制實驗報告
2020-11-17
作業系統
作業系統簡介
2017-01-18
作業系統
寫作業系統之實現程式
2021-10-17
作業系統
作業系統（3）程式及其實現
2014-03-02
作業系統
實現一個簡易的響應式系統
2019-01-26
Go 實現簡易的 Redis 客戶端
2019-04-05
GoRedis客戶端
jQuery實現簡易商城系統專案實操詳解
2022-07-17
jQuery
1.3作業系統簡介
2018-02-27
作業系統
作業系統核心簡介
2017-01-21
作業系統
作業系統--怎麼實現中斷
2021-03-02
作業系統
第17章-golang實現簡易的分散式系統
2018-10-07
Golang分散式
作業系統中程式簡介
2015-01-05
作業系統
作業系統（4）執行緒及其實現
2014-03-02
作業系統執行緒
web前端技術分享：使用react實現簡易路由
2021-05-06
Web前端React路由
如何判斷作業系統大小端
2024-03-17
作業系統
namedtuple簡易實現
2019-02-24
作業系統3——程式的描述與控制
2018-12-11
作業系統
python實現douban.fm簡易客戶端
2013-01-15
Python客戶端
埃思特電子作業票系統：實現作業管理線上化
2023-03-15
作業系統（1）——作業系統概述
2018-10-09
作業系統
作業系統(一)：作業系統概述
2020-09-06
作業系統
智慧手機作業系統簡介
2012-03-01
作業系統
基於long pull實現簡易的訊息系統參考
2022-03-24
Cobbler實現自動化安裝作業系統
2016-03-09
作業系統
VMware 實現自己設計的最小作業系統
2013-03-26
作業系統
簡要分析Hacking Team 遠端控制系統
2020-08-19
現代作業系統-原理與實現【讀書筆記】
2020-11-22
作業系統筆記
作業系統-第一章-系統簡介
2020-05-03
作業系統
作業系統（二）——程式的描述與控制（1）
2018-10-10
作業系統
簡易版 vue實現
2022-05-15
Vue
作業系統(二)：作業系統結構
2020-09-12
作業系統
【作業系統】作業系統綜述（一）
2016-04-11
作業系統

web端作業控制系統簡易實現

專案結構

程式碼段

api.py

control.sh

get-process-status.sh

jobs.list

scripts

testforbash.sh

testforphp.php

testforpy.py

start-program.py

index.js

index.html

最終效果

開啟web服務

檢視可控指令碼以及可用操作

在web頁面開啟一個測試的服務指令碼

在web頁面暫停一個測試服務指令碼

繼續之前暫停了的服務

終止一個服務

下拉框選中後會出現當前指令碼的服務狀態

總結

相關文章