代码拉取完成，页面将自动刷新
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仓库管理页面</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>>
</head>
<body>
<div id="app" >
<div class="container mt-3">
<tr>
<td>
<span>搜索类型</span>
<select style="width:100px">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span style="padding-left:30px">搜索内容</span>
<input type="text" id="cforId" placeholder="单行输入" value="" style="margin-right:50px">
<button class="btn btn-info" type="button" @click='chaByid'>搜索</button>
</td>
<td>
<button class="btn btn-primary" style="margin-left: 10px;" type="primary" data-toggle="modal" data-target="#myModal" onclick="f()">添加</button>
</td>
<td>
<button class="btn btn-primary" style="margin-left: 10px;" type="primary" @click='chaXun'>查询所有</button>
</td>
</tr>
<table class="table" id="forTable" align="left" border="1" width="90%" cellspacing="0" cellpadding="0" >
<thead >
<tr>
<th>选择</th>
<th>id</th>
<th>仓库编号</th>
<th>仓库名称</th>
<th>地址Id</th>
<th>仓库地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableData3">
<td> <input type="checkbox"></td>
<td> {{ item.id }}</td>
<td> {{ item.storeId }}</td>
<td> {{ item.storeName }}</td>
<td> {{item.storeAddr}}</td>
<td> {{item.storeAddrC}}</td>
<td>
<button class="btn btn-danger" @click='DeleteId(item.storeId)' id="del">删除商品</button>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<div> </div>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<!--增加-->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header my-header" style="margin: 0px;padding: 0px">
<h4 class="modal-title myModal-header-font my-title" id="myModalLabel">添加仓库</h4>
<button type="button" class="close myModal-header-close my-btn" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form id="form_data">
<div class="modal-body table">
<div class="form_group">
<label > 仓库编号:</label>
<input class="form-control" type="text" id="storeId">
</div>
<div class="form_group">
<label >仓库名称:</label>
<input class="form-control" type="text" id="storeName">
</div>
<div class="form_group">
<label>地址Id</label>
：<input class="form-control" type="text" id="storeAddr">
</div>
<div class="form_group">
<label>仓库地址</label>
<input class="form-control" type="text" id="storeAddr_c">
</div>
<input type="hidden" id="act" value="add" name="act"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" @click="handleAdd" class="btn btn-primary">
添加
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="lib/layui/layui.js">
<link href="lib/layui/css/layui.css">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="js/x-admin.js">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
tableData3: [],
id:0,
},
created: function(){
this.init();
},
mounted:function (){
this.chaXun();
},
methods: {
init () {
console.log(this.tableData);
var that = this;
},
chaXun() {
this.tableData3.splice(0,this.tableData3.length);
var that = this;
fetch('http://124.221.251.6:9000/stores/findAll', {
headers: {
'User-Agent': 'Apipost client Runtime/+https://www.apipost.cn/',
},
}).then((msg) => {
msg.json().then((result) => {
console.log(result.msg);
if (result.msg == "success") {
//console.log(result);
for (let i = 0; i < result.data.length; i++) {
//console.log(result.data[i]);
this.tableData3.push(result.data[i]);
}
console.log(this.tableData3);
//alert("查询成功");
} else {
alert("表中为空")
}
})
})
},
handleAdd(){
var that=this;
var si=document.getElementById("storeId").value;
var sn = document.getElementById("storeName").value;
var sa = document.getElementById("storeAddr").value;
var sac = document.getElementById("storeAddrC").value;
if (si!=""&&sn!= "" && sa!= "" && sac!= "") {
var base = {
'storeId':si,
'storeName': sn,
'storeAddr': sa,
'storeAddrC': sac
}
console.log(JSON.stringify(base));
fetch('http://124.221.251.6:9000/stores/add', {
method: 'POST',
headers: {
'User-Agent': 'Apipost client Runtime/+https://www.apipost.cn/',
'Content-Type': 'application/json'
},
body: JSON.stringify(base)
}).then((msg)=>{
msg.json().then((result)=>{
console.log(result.msg);
if(result.msg=="success"){
console.log(result);
alert("添加成功");
} else if(result.msg=="该仓库已存在"){
alert("仓库已存在");
}else {
alert("信息不完整");
}
})
})
}
},
chaByid() {
this.tableData3.splice(0,this.tableData3.length);
var t=document.getElementById('cforId').value;
fetch('http://124.221.251.6:9000/stores/findById'+'?'+'storeId'+'='+t, {
method: 'GET',
headers: {
'User-Agent': 'Apipost client Runtime/+https://www.apipost.cn/'
},
}).then((msg)=>{
msg.json().then((result)=>{
// console.log(result.msg);
if(result.msg=="success"){
//console.log(result);
alert("查询成功");
this.tableData3.push(result.data);
//console.log(result.data);
}else {
alert("查询失败");
}
})
});
},
DeleteId(stId) {
//console.log(gooId);
var r=confirm("请确认您是否要删除一个仓库");
if(r==true){
fetch('http://124.221.251.6:9000/stores/delete', {
method: 'POST',
headers: {
'User-Agent': 'Apipost client Runtime/+https://www.apipost.cn/',
'Content-Type': 'application/json'
},
body: JSON.stringify({"storeId": stId})
}).then((msg) => {
msg.json().then((result) => {
console.log(result.msg);
if (result.msg == "success") {
console.log(result);
alert("删除成功");
} else {
alert("商品不存在");
}
})
});
}
window.location.reload();
},
}
});
function f(){
$('#myModal').modal('toggle');
}
</script>
</body>
<style>
#app {
margin-top : 20px;
}
#forTable{
margin-top: 20px;
}
#cforId{
}
</style>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手