64 lines
1.6 KiB
HTML
64 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
<ul>
|
|
<li></li>
|
|
</ul>
|
|
|
|
|
|
<input name="title" type="text" placeholder="tên danh mục">
|
|
<button onclick="addCategorie()">thêm</button>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.18.1/axios.min.js" integrity="sha512-l1tCs7ua0mpVzhqYBRTbxh05c4bT7cu1Ma5vSpcwT9yP75wEkbGhwIe1kxmowZRVXxwjTMCbogc3A7y4SUfT7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script>
|
|
|
|
async function getCategories() {
|
|
return await axios.get("http://127.0.0.1:3000/categories")
|
|
.then(res => {
|
|
return res.data
|
|
})
|
|
}
|
|
|
|
function renderUi(categories) {
|
|
let htmlResult = ``
|
|
for(cate of categories) {
|
|
htmlResult += `
|
|
<li>${cate.title}</li>
|
|
`
|
|
}
|
|
|
|
document.querySelector("ul").innerHTML = htmlResult;
|
|
}
|
|
|
|
|
|
async function loadDataAndRender() {
|
|
let data = await getCategories();
|
|
console.log("data", data)
|
|
|
|
renderUi(data)
|
|
}
|
|
|
|
function addCategorie() {
|
|
let newCategory = {
|
|
title: document.querySelector("input").value
|
|
}
|
|
|
|
axios.post("http://127.0.0.1:3000/categories", newCategory)
|
|
.then(res => {
|
|
console.log("res", res)
|
|
loadDataAndRender()
|
|
})
|
|
}
|
|
|
|
loadDataAndRender()
|
|
|
|
</script>
|
|
</body>
|
|
</html> |