axios前后端通信，前端页面展示程序

最新推荐文章于 2023-07-03 02:29:56 发布

xgysimida

最新推荐文章于 2023-07-03 02:29:56 发布

阅读量488

点赞数

本文链接：https://blog.csdn.net/xgysimida/article/details/108083767

版权

在html页面做了一个axios通信的程序，界面程序如下：

<!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>

只需在路径处添加自己项目的路径，然后修改相应的json数值，即可进获得后端的数据，页面如下：