An axios communication program is made on the html page, and the interface program is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前后端通信</title>
<!-- 引入相应的js文件-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.button{
width: 60px;
line-height: 25px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="app">
<div>
<h1>用户信息表</h1>
<table class="gridtable">
<tr>
<th>ID</th><th>名称</th><th>电话</th>
</tr>
<tr v-for="item in shu">
<td>{
{item.id}}</td><td>{
{item.name}}</td><td>{
{item.phone}}</td>
</tr>
</table>
</div>
<div>
<label>第</label>
<select name="page" id="pid">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<label>页</label>
<label >每页显示</label>
<select name="pagesize" id="psd">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<label >条数</label>
<br>
<button @click="btnclidk" class="button">提交</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
shu:"",
},
methods:{
btnclidk:function (ev) {
var pag =$("#pid").val();//第几页
var pagesiz=$("#psd").val();//每页显示条数
axios.post("请求路径",{"pageSize":pagesiz,"page":pag}).then(res=>{
this.shu=res.data.listData;
}).catch(err=>{
console.log(err);
})
}
}
})
</script>
</body>
</html>
Just add the path of your own project in the path, and then modify the corresponding json value to get the back-end data, the page is as follows:
