Flask 更新信息

# 更新页面内容

## servers.py

## 前端显示

### 添加一个 TR/TD 标签显示
```html
<th class="text-center">操作更新删除</th>
```

### 在HTML 添加 MODEL 框

```html
    <div class="modal fade" id="updateshow">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">服务器信息更新</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="text" class="form-control" id="id" readonly="readonly">
                        <input type="text" class="form-control" id="name">
                        <input type="text" class="form-control" id="ip">
                        <input type="text" class="form-control" id="port">
                        <input type="text" class="form-control" id="user">
                        <button type="button" class="btn text-center" id="btn_update">更新</button>
                    </form>
                </div>

<div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
```

---

### 前端JS加入一个更新按钮
```html
 tmpone = tmpone + '<td>'
                        tmpone = tmpone + '<button class="btn btn-sm text-center" onClick="update_show(' + allresult[i]['id'] + ')">更新</button>'
tmpone = tmpone + '</td>'
```
---

![](/media/202112/2021-12-21_081530_282298.png)

---

### MODEL JS 显示更改数据
```js
        function update_show(id) {
            $.ajax({
                url: '/servers/get_by_id',
                type: 'get',
                cache: false,
                data: {
                    id: id,
                },
                success: function (data) {
                    tmpone = JSON.parse(data)[0];
                    $("#id").val(id);
                    $("#name").val(tmpone['name']);
                    $("#ip").val(tmpone['ip']);
                    $("#port").val(tmpone['port']);
                    $("#user").val(tmpone['user']);
                    $("#updateshow").modal('show');
                }
            });
        };
```

---

## 后台的实现

### 通过ID获取服务器信息
```python

@servers.route('/get_by_id')
def get_by_id():
    id = int( request.args.get('id'))
    sql = "select * from servers where id = %s"
    result = tool_db.selectByParameters( sql, params=(id, ) )
    return json.dumps( result )
```

### 把数据传输给后台，后台真正实现更新
```js
        $('#btn_update').click(function () {
            id = $('#id').val();
            name_ = $('#name').val();
            ip = $('#ip').val();
            port = $('#port').val();
            user = $('#user').val();
            info = {id: id, name: name_, ip: ip, port: port, user: user}
            $.ajax({
                url: '/servers/update',
                type: 'POST',
                cache: false,
                data: JSON.stringify(info),
                success: function (data) {
                    $("#updateshow").modal('hide');
                    text_search = $('#text_search').val();
                    //get_page(1, 10, text_search);
                    pagenow = parseInt( $('#pagenow').html() );
                    get_page(pagenow, 10, text_search);
                }
            });
        });
```

### 后端更新的实现
```python
@servers.route('/update', methods=['get', 'post'])
def update():
    info = request.get_data()
    info = json.loads(info)
    sql = 'replace into servers (id,name,ip, port, user) VALUES(%s, %s, %s, %s, %s);'
    params = (info['id'], info['name'], info['ip'], info['port'], info['user'])
    tool_db.updateByParameters( sql, params )
    return "Success"

```

### 排错

> 更新完服务器信息后取当前页

```js
//#btn_update
pagenow = parseInt( $('#pagenow').html() );
get_page(pagenow, 10, text_search);
```

---

## 验证

![](/media/202112/2021-12-21_081605_040384.png)
---

![](/media/202112/2021-12-21_081615_316227.png)

---

Done