代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flask项目管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> -->
<link rel="stylesheet" href="../static/layui/css/layui.css">
<!-- 依 赖 样 式 -->
<link rel="stylesheet" href="../static/component/pear/css/pear.css" />
<!-- 加 载 样 式 -->
<link rel="stylesheet" href="../static/admin/css/loader.css" />
<!-- 布 局 样 式 -->
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/admin/css/admin.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<link href="http://lyear.itshubao.com/css/bootstrap.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3766254_cmmobm4opu.css">
<script src=//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js></script>
</head>
<!-- 你的 HTML 代码 -->
<p></p>
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-col-md12">
<!-- 面板 -->
<div class="layui-panel">
<div style="padding: 30px;">
<h4>flask项目部署说明</h4><br>
1.flask项目部署说明<br>
1.flask项目部署说明<br>
1.flask项目部署说明<br>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<!-- 表格开始 -->
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-panel">
<div style="padding: 30px;">
<button class="btn btn-success" id="layerBtn">添加</button>
<div style="display: none" id="biaodan">
<form class="layui-form" action="" onsubmit="return false">
<p></p>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block" style="width: 150px;">
<input type="text" name="pjname" id="pjname" 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" style="width: 150px;">
<input type="text" name="prfile" id="rfile" required lay-verify="required" placeholder="启动文件,例如app.py" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">端口</label>
<div class="layui-input-block" style="width: 150px;">
<input type="text" name="port" id="port" required lay-verify="required" placeholder="端口" autocomplete="off" class="layui-input">
</div>
</div>
<button style="display: none" id="submit" class="layui-btn" lay-submit lay-filter="submit">提交</button>
</form>
</div>
<table class="layui-table">
<thead>
<tr>
<th>项目名称</th>
<th>python版本</th>
<th>端口</th>
<th>启动方式</th>
<th>状态</th>
<th>添加时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>贤心</td>
<td>贤心</td>
<td>贤心</td>
<td>贤心</td>
<td>2016-11-29</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 表格结束 -->
<script src="https://cdn.jsdelivr.net/npm/@ajiho/bootstrap-notify@1.0.1/dist/js/bootstrap-notify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../static/layui/layui.js"></script>
<script>
// 挂载layui，添加jquery和form 一会我们会用到
layui.use(['layer', 'jquery', 'form'], function () {
// 这个时候将挂载到layui中的layer放置到一个变量上面，有助于我们调用
var layer = layui.layer
var $ = layui.jquery
var form = layui.form
var isSubOk = false
var mengIndex = 0
form.render(null, 'form')
// 首先第一种调用方法就是(采用的是jquery的点击事件)
$('#layerBtn').on('click', function (e) {
// 调用的layer弹窗
layer.open({
type: 1,
title: '添加项目',
area: ['350px', '500px'],
content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板，可以将其理解为指定一个组件，当然也是可以自己去写的,像'<div>我是一个内容</div>'
btn: ['确认', '取消'],
yes: function (index, layero) {
// 获取当前蒙版层的索引
mengIndex = index
$('#submit').click()
},
btn2: function (index, layero) {
layer.close(index)
},
// 打开弹窗的回调函数，用于回显页面数据
success: function () {
// 清除上一次的数据
isSubOk = false
$('#pjname').val('')
$('#rfile').val('')
$('#port').val('')
console.log('我打开了弹窗')
},
})
})
// 表单提交事件
form.on('submit(submit)', function (data) {
isSubOk = true
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
// 我们可以再次发起请求
// $.ajax 我在这里使用settimeout进行伪造一个异步请求
$.ajax({
url:"/flask_api",
type:"POST",
data: data.field,
success:(data)=>{
console.log(data);
lightyear.notify(data, 'success', 5000, 'top', 'center');
location.reload();
}
});
return false //阻止表单跳转。如果需要表单跳转，去掉这段即可。
})
})
</script>
</body>
</html>© 版权声明
THE END
暂无评论内容