Vue-案例-查询所有

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<!--使用div设置id把整个html页面包裹住-->
<div id="app">
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <!--
               使用v-for遍历tr
        -->

        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>

        <!--<tr align="center">
            <td>2</td>
            <td>优衣库</td>
            <td>优衣库</td>
            <td>10</td>
            <td>优衣库，服适人生</td>
            <td>禁用</td>

            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>

        <tr align="center">
            <td>3</td>
            <td>小米</td>
            <td>小米科技有限公司</td>
            <td>1000</td>
            <td>为发烧而生</td>
            <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>-->
    </table>
</div>
    <!--导入js-->
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    //把数据变成一个模型返回就可以使用
                    brands:[]
                }
            },
            mounted(){
                //设置this为Vue中的
                var _this = this;
                //页面加载完成后，发送异步请求，查询数据
                axios({
                    method:"get",
                    url:"http://localhost:8080/brand-demo/selectAllServlet"
                }).then(function (resp) {
                    //给data中的brands赋值
                    _this.brands = resp.data;//注意如果直接this那么this则是整个windows中的需要设置
                })
            }
        })
    </script>


    <!--<script>
        //1. 当页面加载完成后，发送ajax请求
        window.onload = function () {
            //2. 发送ajax请求
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                //获取数组数据，并赋值给brands
                let brands = resp.data;
                //设置一个表格字符串tableDate
                let tableDate = "<tr>\n" +
                    "        <th>序号</th>\n" +
                    "        <th>品牌名称</th>\n" +
                    "        <th>企业名称</th>\n" +
                    "        <th>排序</th>\n" +
                    "        <th>品牌介绍</th>\n" +
                    "        <th>状态</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
                //遍历数组数据
                for (let i = 0; i < brands.length; i++) {
                    let brand = brands[i];

                    //调用tableDate的表格格式字符串
                    tableDate += "<tr align=\"center\">\n" +
                        "        <td>"+(i+1)+"</td>\n" +
                        "        <td>"+brand.brandName+"</td>\n" +
                        "        <td>"+brand.companyName+"</td>\n" +
                        "        <td>"+brand.ordered+"</td>\n" +
                        "        <td>"+brand.description+"</td>\n" +
                        "        <td>"+brand.status+"</td>\n" +
                        "\n" +
                        "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                        "    </tr>"
                }
                //设置tableDate表格的格式数据，调用brandTable的格式数据
                document.getElementById("brandTable").innerHTML = tableDate;
            })
        }
    </script>-->
</body>
</html>

 

posted @ 2023-07-03 21:37  Karlshell  阅读(33)  评论(0)    收藏  举报