一、背景
点击服务器信息右侧的编辑按钮,弹出表单，表单自动填充当前服务器信息的值，修改后提交到后端
二、效果
将负责人改成李四后点击下方的立即提交按钮
修改成功
三、前端代码
点击编辑页面的js,关键点在于content的值要带上ip的值
else if(obj.event === 'edit'){
layer.open({
type: 2,
content: "{% url 'modify_vm' %}?ip=" + data.ip,
area: ['40%','80%'],
title: ['修改服务器信息', 'font-size:28px;'],
});
}
修改服务器信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>运维管理系统</title>
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">IP地址</label>
<div class="layui-input-block">
<input type="text" id='ip' name="ip" value="" autocomplete="off" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">CPU核心数</label>
<div class="layui-input-block">
<input type="text" id="cpu" name="cpu" value="" required lay-verify="required|number" placeholder="请输入CPU核心数" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">内存大小(G)</label>
<div class="layui-input-block">
<input type="text" id="memory" name="memory" value="" required lay-verify="required|number" placeholder="请输入内存大小" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">磁盘大小(G)</label>
<div class="layui-input-block">
<input type="text" id="disk" name="disk" value="" required lay-verify="required|number" placeholder="请输入磁盘大小" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">操作系统</label>
<div class="layui-input-block">
<input type="text" id="os" name="os" value="" required lay-verify="required" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属部门</label>
<div class="layui-input-block">
<input type="text" id="department" name="department" value="" required lay-verify="required" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">负责人</label>
<div class="layui-input-block">
<input type="text" id="manager" name="manager" value="" required lay-verify="required" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">服务器状态</label>
<div class="layui-input-block">
<input type="radio" id="status" name="status" value="运行" title="运行" checked>
<input type="radio" id="status" name="status" value="故障" title="故障">
<input type="radio" id="status" name="status" value="停机" title="停机">
<input type="radio" id="status" name="status" value="回收" title="回收">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号信息</label>
<div class="layui-input-block">
<input type="text" id="account" name="account" value="" required lay-verify="required" placeholder="请输入账号信息" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用途</label>
<div class="layui-input-block">
<input type="text" id="label" name="label" value="" required lay-verify="required" placeholder="请输入用途" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">详细信息</label>
<div class="layui-input-block">
<textarea id="info" name="info" value="" placeholder="请输入详细信息" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
layui.use(['form','layer'], function(){ //导入模块
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
//从后端获取数据填充到表单
var vmInfo = {{ result.data | safe }}
document.getElementById('ip').value=vmInfo.ip; //修改默认值
document.getElementById('cpu').value=vmInfo.cpu;
document.getElementById('memory').value=vmInfo.memory;
document.getElementById('disk').value=vmInfo.disk;
document.getElementById('os').value=vmInfo.os;
document.getElementById('department').value=vmInfo.department;
document.getElementById('manager').value=vmInfo.manager;
//document.getElementById('status').value=vmInfo.status;
document.getElementById('account').value=vmInfo.account;
document.getElementById('label').value=vmInfo.label;
document.getElementById('info').value=vmInfo.info;
form.render();
//监听提交
form.on('submit(formDemo)', function(data){
$.ajax({
type: "PUT",
url: "{% url 'vmApi' %}",
data: data.field,
success: function (result) {
if (result.code == "0") {
layer.msg(result.msg, {
icon: 6,
time: 1000, //等待1秒
}, function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //关闭弹出层
window.parent.location.reload(); //刷新父页面
}
);
} else {
layer.msg(result.msg, {icon: 5})
}
}
})
});
});
</script>
</body>
</html>
四、后端代码
def modify_vm(request):
if request.method == "GET":
vm_dt = {} # 单台服务器字典
try:
ip = request.GET.get('ip', None)
vm_info = Vm_Info.objects.get(ip='%s' % ip)
vm_dt['ip'] = vm_info.ip
vm_dt['cpu'] = vm_info.cpu
vm_dt['memory'] = vm_info.memory
vm_dt['disk'] = vm_info.disk
vm_dt['os'] = vm_info.os
vm_dt['department'] = vm_info.department
vm_dt['manager'] = vm_info.manager
vm_dt['status'] = vm_info.status
vm_dt['account'] = vm_info.account
vm_dt['label'] = vm_info.label
vm_dt['info'] = vm_info.info
code = 0
msg = "获取数据成功"
except Exception as e:
print(e)
code = 1
msg = "获取数据失败"
result = {'code': code, 'data': vm_dt, 'msg': msg}
return render(request,'ops_center/vm_info/modify_vm.html',{'result': result})
def vmApi(request):
elif request.method == "PUT":
try:
request_data = QueryDict(request.body)
ip = request_data.get('ip', None)
cpu = request_data.get("cpu", None)
memory = request_data.get("memory", None)
disk = request_data.get("disk", None)
os = request_data.get("os", None)
department = request_data.get("department", None)
manager = request_data.get("manager", None)
status = request_data.get("status", None)
account = request_data.get("account", None)
label = request_data.get("label", None)
info = request_data.get("info", None)
data = {**{'cpu': cpu, 'memory': memory, 'disk': disk, 'os': os, 'department': department, 'manager': manager,
'status': status, 'account': account, 'label': label, 'info': info}}
_t = Vm_Info.objects.get(ip='%s' % ip)
_t.__dict__.update(**data)
_t.save()
code = 0
msg = "修改成功"
result = {"code": code, "msg": msg}
print(status)
return JsonResponse(result)
except Exception as e:
print(e)
code = 1
msg = "修改失败"
result = {"code": code, "msg": msg}
return JsonResponse(result)
五、问题
从后端获取的状态不知道怎么通过document写进去，并添加checked属性
