树莓派网关配置页面增加EnableDetailLog/EnableBase64

 2022-01-07 

说明: 本文旨在通过配置网页 修改 网关的配置文件

最后效果是

1---打开网页 可以显示文件JS中的数值 1--打对勾 0--不打对勾

2---点击红色按键 可以保存上面的打勾情况到本地文件 也就是修改JS文件

第一步修改html --直接展示UI

最后追加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</div>
<hr>
<div>
    <h2>Run Mode</h2>
    <div class="form-control">
        <input type="checkbox" value="" id="Log"/>Enable Detail Log<br />
        <input type="checkbox" value="" id="Base64"/>Enable Base64<br />
    </div>
    <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="rmSave">Save Run Mode</button></div>
</div>
</div>



</div>
</div>
<script src="js/index.js"></script>
</body>

第二步修改config.json–准备展示默认情况

1
2
3
4
5
6
7
8
9
{
"ble_max_conn":8,
"ble_name":"M_IZAR_TEST",
"gw_version":"v0.2D",
"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJtQ3ViZSIsInN1YiI6Im1DdWJlIiwiYXVkIjoicmFzcDQiLCJpYXQiOjE2MjkzNTQ3Mzl9.hcw7sgukAXkmb8bLAp0gMntcgjfM-5voXkvQpRAwuC4",
"ws_addr":"ws://test.izar.animalmonitor.online:23456/",
"EnableDetailLog":1,
"EnableBase64":1
}

第三步修改index.js—展示默认情况 读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener("load", function (event) {
    let oReq = new XMLHttpRequest();
    oReq.open('GET', '/config');
    function reqListener () {
        let config = JSON.parse(this.responseText);
       
        let EnableDetailLog = document.getElementById("Log");
        if(EnableDetailLog && config.EnableDetailLog && config.EnableDetailLog==1)
            document.getElementById("Log").checked=true
       
        let EnableBase64 = document.getElementById("Base64");
        if(EnableBase64 && config.EnableBase64 && config.EnableBase64==1)
            document.getElementById("Base64").checked=true
       
        console.log(config);

此时读-显示的部分已经完成 继续做写-保存的部分

第四步 继续修改JS文件 放一个函数 它是处理 按钮rmSave触发的动作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//rm setting
document.getElementById('rmSave').addEventListener("click", function() {
    let EnableDetailLog = 0;
    let EnableBase64    = 0;
    if(document.getElementById("Log").checked) EnableDetailLog=1;
    if(document.getElementById("Base64").checked) EnableBase64=1;
    let param = '&EnableDetailLog=' + EnableDetailLog + '&EnableBase64=' + EnableBase64;
    console.log(param);
    let oReq = new XMLHttpRequest();
    oReq.open('GET', '/rm_setting?'+param);//AAAAAAAAAAAAAAAAAAAAAAAAAAA
    function reqListener () {
       alert(this.responseText);
    }
    oReq.addEventListener("load", reqListener);
    oReq.send();
});

第五步 修改.go文件 响应第四步发出的消息 真正写文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
func http_rmSave(w http.ResponseWriter, r *http.Request) {//AAAAAAAAAAAAAAAAAAAAAAAAAAA
    if r.Method == "GET" {
        go_Log, err    := strconv.Atoi(r.FormValue("EnableDetailLog"))
        go_Base64, err := strconv.Atoi(r.FormValue("EnableBase64"))
        if err != nil {
            io.WriteString(w, "http_rmSave fail fail\n")
            log.Printf("[Config] http_rmSave fail \r\n")
            return
        }




        WriteToConfig("EnableDetailLog", go_Log)
        WriteToConfig("EnableBase64",    go_Base64)

        io.WriteString(w, fmt.Sprintf("http_rmSave setting successful\n EnableDetailLog:%d EnableBase64:%d", go_Log,  go_Base64))
        log.Printf("[Config][http_rmSave] BLE setting successful, EnableDetailLog:%d EnableBase64:%d", go_Log,  go_Base64)
    }
}

第六步:建立第四步 第五步的关联 主要是前面标记的//AAAAAAAAAAAAAAAAAAAAAAAAAAA 连接起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
func Start() {
    user := []byte("izar")
    passwd := []byte("53029625")



    mux := http.NewServeMux()
    mux.Handle("/js/", http.StripPrefix("/js/", http.FileServer(http.Dir("./config/js"))))
    mux.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./config/css"))))
    mux.HandleFunc("/", http_index)
    mux.HandleFunc("/admin", basicAuth(http_admin, user, passwd))
    mux.HandleFunc("/wifi", http_wifi)
    mux.HandleFunc("/ws", http_ws)
    mux.HandleFunc("/token", http_token)
    mux.HandleFunc("/ble_setting", http_ble_setting)
    mux.HandleFunc("/rm_setting", http_rmSave)//AAAAAAAAAAAAAAAAAAAAAAAAAAA
    mux.HandleFunc("/config", http_get_config)
    http.ListenAndServe(":8079", mux)
}



完成

错误笔记:

1
2
3
4
5
6
7
    let EnableDetailLog = document.getElementById("Log").checked;
    let EnableBase64    = document.getElementById("Base64").checked;
直接这样写不行 它是true不是1 需要区分的!
    let EnableDetailLog = 0;
    let EnableBase64    = 0;
    if(document.getElementById("Log").checked) EnableDetailLog=1;
    if(document.getElementById("Base64").checked) EnableBase64=1;