Vue.js CRUD 코드 조각
Vue.js CRUD 코드 조각
<!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> </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> </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>
</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>
Comments
Comments are closed