Flask 新增记录

# 新增文章

##前端提交

###前端提交按钮
```html
<button type="button" class="btn" id="bt_search">搜索</button>
<button type="button" class="btn" data-toggle="modal" data-target="#addshow" style="margin-left: 2px;">服务器添加
</button>
```

### 提交框
```html
    
    <div class="modal fade" id="addshow">
        <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="add_name" placeholder="server_name">
                        <input type="text" class="form-control" id="add_ip" placeholder="server_ip">
                        <input type="text" class="form-control" id="add_port" placeholder="server_port">
                        <input type="text" class="form-control" id="add_user" placeholder="server_user">
                        <button type="button" class="btn btn-primary" id="btn_add">添加</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

```

### 前端异步执行
```js
        $('#btn_add').click(function () {
            name_ = $('#add_name').val();
            ip = $('#add_ip').val();
            port = $('#add_port').val();
            user = $('#add_user').val();
            info = {name: name_, ip: ip, port: port, user: user};
            $.ajax({
                url: '/servers/insert',
                type: 'POST',
                cache: false,
                data: JSON.stringify(info),
                success: function (data) {
                    $("#addshow").modal('hide');
                    text_search = $('#text_search').val();
                    pagenow = parseInt($('#pagenow').html());
                    get_page(pagenow, 15, text_search);
                }
            });
        });
```

---

## 后端

### servers.py

```python
@servers.route('/insert', methods=['get', 'post'])
def insert():
    info = request.get_data()
    info = json.loads(info)
    sql = 'replace into servers (name,ip, port, user) VALUES(%s, %s, %s, %s);'
    params = ( info['name'], info['ip'], info['port'], info['user'])
    tool_db.updateByParameters( sql, params )
    return "Success"
```

---

## 验证

提交

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

---

结果

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

---

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

---

done