Vue案例

news2024/9/25 23:22:03

1. 查询所有

在这里插入图片描述

1.1 采用dom方式，拼字符串操作写ajax请求

这种方法书写麻烦，采用Vue的方式书写

<script>
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData = " <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];

                tableData += "\n" +
                    "    <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>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }
    
</script>

1.2 Vue方式书写

<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <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>

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

<script>

    new Vue({
        el: "#app", //设置Vue的作用范围
        // 为了方便给v-for使用，所以要将brands变成模型，在data中被声明
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            // 页面加载完成后，发送异步请求，来查询数据
            // 所以在外边把this作用范围改一下
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp){
                //this.brands = resp.data; // 在axios中的this，指定的是window对象，不是Vue对象
                // 从服务器响应回来的集合
                _this.brands = resp.data;
            })
        }
    })
</script>

</body>

问题一：如果表格数据显示不出来，尝试在pom文件中修改MySQL的版本，我这里是5.1.46
问题二：修改status视图，在实体类brand中加上

    //逻辑视图
    public String getStatusStr() {

        if(this.status == 1){
            return "启用";
        }

        return "禁用";
    }

问题三：在核心配置文件中记得修改数据库密码

2. 新增品牌

在这里插入图片描述

主要就是优化发送表单JSON数据

<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>

<script>

    new Vue({
        el:"#app",
        data(){
            return{
                brand: {}
            }
        },
        methods:{
            submitForm(){
                // 发送Ajax请求
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    data:this.brand
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if(resp.data == "success"){
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })
            }
        }
    })

</script>
</body>

在这里插入图片描述