Vue.js CRUD 코드 조각

2022-02-23_22-26-04.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js CRUD</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"></script>
    <script type="importmap">
        {
            "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
            }
        }
    </script>
    <div id="appCabinetTypesVue" class="container">
        <h1>{{title}}</h1>

        <div class="input-group mb-3">
            <input type="text" class="form-control" v-model="identification" />
            <button class="btn btn-outline-secondary" 
                v-on:click="btnAdd_Click">Add</button>
        </div>

        <table class="table table-bordered table-hover">
            <colgroup>
                <col style="width: 50%;">
                <col style="width: 25%;">
                <col style="width: auto;">
                <col style="width: 250px;">
            </colgroup>
            <thead class="thead-light">
                <tr>
                    <th>Name</th>
                    <th>Active</th>
                    <th>&nbsp;</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="vm in models" v-bind:key="vm.id">
                    <td>
                        <span v-if="vm.show == true">
                            {{vm.identification}}
                        </span>
                        <span v-else style="text-decoration: line-through;">
                            {{vm.identification}}
                        </span>
                    </td>
                    <td>
                        <input type="checkbox" v-model="vm.show">                        
                    </td>
                    <td></td>
                    <td>
                        <a href="#" v-on:click="btnToggle_Click(vm)">Toggle</a> | 
                        <a href="#" v-on:click="btnDelete_Click(`${vm.id}`)">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="module">
        import { createApp } from 'vue';

        createApp({
            data() {
                return {
                    title: "Vue.js CRUD 연습",
                    modelstest: [
                        { "id": 1, "identification": "이름 1", "show": true },
                        { "id": 2, "identification": "이름 2", "show": false },
                        { "id": 3, "identification": "이름 3", "show": true }
                    ],
                    models: [],
                    identification: "",
                    show: true,
                    adjusted: false 
                };
            },
            methods: {
                async btnAdd_Click() {
                    // Crud: 데이터 저장
                    await axios.post("/api/CabinetTypes", {
                        identification: this.identification,
                        show: this.show,
                        adjusted: this.adjusted 
                    });

                    this.identification = "";

                    // 다시 읽어오기
                    this.displayData();
                },
                async btnToggle_Click(vm) {
                    // crUd: 데이터 수정
                    await axios.put(`/api/CabinetTypes/${vm.id}`, {
                        id: vm.id,
                        identification: vm.identification,
                        show: !vm.show,
                        adjusted: vm.adjusted 
                    });

                    // 다시 읽어오기
                    this.displayData();
                },
                async btnDelete_Click(id) {
                    if (!window.confirm("정말로 삭제하시겠습니까?")) {
                        return false; 
                    }

                    //cruD: 데이터 삭제
                    await axios.delete(`/api/CabinetTypes/${id}`);

                    // 다시 읽어오기
                    this.displayData(); 
                },
                async displayData() {
                    // cRud: 데이터 출력
                    const result = await axios.get("/api/CabinetTypes");
                    const models = result.data;
                    this.models = models;
                }
            },
            async created() {
                // cRud: 데이터 출력
                const result = await axios.get("/api/CabinetTypes");
                const models = result.data;
                this.models = models;
            }
        }).mount("#appCabinetTypesVue");
    </script>
</body>
</html>

 

@page
@model Acts.Pages.ActionCategories.IndexModel

@{
    ViewData["Title"] = "ActionCategories";
}

<h1>ActionCategories List</h1>

@*<p>
    <a asp-page="Create">Create New</a>
    </p>*@

@*ASP.NET Core 소스*@
@*
    <table class="table">
    <thead>
    <tr>
    <th>
    @Html.DisplayNameFor(model => model.ActionCategory[0].Category)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.ActionCategory[0].Active)
    </th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.ActionCategory)
    {
    <tr>
    <td>
    @Html.DisplayFor(modelItem => item.Category)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.Active)
    </td>
    <td>
    <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
    <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
    <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
    </td>
    </tr>
    }
    </tbody>
    </table>
    <hr />
*@

<script type="importmap">
    {
        "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
        }
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"></script>


<div id="appActionCategoriesVue">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Category" 
            aria-label="Category" aria-describedby="btnAdd" v-model="category">
        <button class="btn btn-outline-secondary" type="button" 
            id="btnAdd" v-on:click="btnAdd_Click"> Add </button>
    </div>
    <table class="table table-bordered table-hover">
        <colgroup>
            <col style="width: 50%;" />
            <col style="width: 25%;" />
            <col style="width: auto;" />
            <col style="width: 250px;" />
        </colgroup>
        <thead class="thead-light">
            <tr>
                <th>Category</th>
                <th>Active</th>
                <th>&nbsp;</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="vm in models" v-bind:key="vm.id">
                <td>
                    {{vm.category}}
                </td>
                <td>
                    <input type="checkbox" v-model="vm.active" disabled />
                    @*{{vm.active}}*@
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    <a v-bind:href="`/ActionCategories/Edit?id=${vm.id}`">Edit</a> |
                    <a v-bind:href="`/ActionCategories/Details?id=${vm.id}`">Details</a> |
                    <a href="#" v-on:click="btnDelete_Click(`${vm.id}`)">Delete</a>
                </td>
            </tr>
        </tbody>
    </table>

</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                title: '게시판 리스트 with Vue.js',
                models: [],
                category: '',
                active: true
            }
        },
        methods: {
            async btnAdd_Click() {
                // 데이터 저장
                await axios.post("/api/ActionCategories", {
                    gbAdjusted: false,
                    category: this.category,
                    active: this.active
                });

                this.category = "";

                // 다시 읽어오기
                this.displayData();
            },
            async btnDelete_Click(id) {
                if (!window.confirm('정말로 삭제?')) {
                    return false;
                }

                // 데이터 삭제
                await axios.delete(`/api/ActionCategories/${id}`);

                // 다시 읽어오기
                this.displayData();
            },
            async displayData() {
                const result = await axios.get("/api/ActionCategories");
                const models = result.data;
                this.models = models;
            }
        },
        async created() {
            const result = await axios.get("/api/ActionCategories");
            const models = result.data;
            this.models = models;
        }
    }).mount('#appActionCategoriesVue')
</script>

 

2022-02-20_17-17-26_vue_crud.png

 

Comments


Comments are closed