JSON & Vue -2024/11/2

XYu1230發表於2024-11-03
JSONVue

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>

相關文章