JSON & Vue -2024/11/2

JSON概念: ：JavaScript Object Notation JavaScript 对象表示法.==
json和axios 完成查询和展示操作

<script src = "../js/axios-0.18.0.js"></script>
<script>
    window.onload = function(){
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllBrandServlet"
        }).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 += "<tr>\n" +
                    "        <td>"+brand.id+"</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" +
                    "        <td><a href='#'>修改</a> <a href='#'>删除</a></td>";
            }
            document.getElementById("brandTable").innerHTML = tableData;

        })
    }

</script>

添加操作,将html中数据封装为json,使用axios发送至servlet,保存至数据库
前端

<script src = "../js/axios-0.18.0.js"> </script>
<script>
    document.getElementById("btn").onclick = function () {
        var brand = {
            brandName: document.getElementById("brandName").value,
            companyName: document.getElementById("companyName").value,
            ordered: document.getElementById("ordered").value,
            description: document.getElementById("description").value,
            status: ""
        };
        let status = document.getElementsByName("status");
        brand.status = status[0].checked ? status[0].value : status[1].value;

        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet2",
            data:brand
        }).then(function (resp){
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/Study/json-demo.html";
            }
        })
    }
</script>

后端

BufferedReader br = req.getReader();
        String params = br.readLine();
        Brand brand = JSON.parseObject(params, Brand.class);
        service.addBrand(brand);
        resp.getWriter().write("success");

vue

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

<div id = "app">
    <input v-model = "username">
<!--    插值表达式-->
    {{username}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data(){
            return{
                username:""
            }
        }
    });
</script>