В этом посте я собираюсь научить вас, как легко создать приложение CRUD, используя только JavaScript. Но, прежде чем двигаться дальше, проверьте JavaScript Массив объектов. Таким образом, вы можете легко понять функции и то, как работает приложение CRUD.
Начнем!😍
Я разделил это CRUD-приложение на 2 части.
- Создание и отображение логики — Часть 1
- Обновление и удаление логики — часть 2
В первой части я сосредоточусь только на стороне javascript, а в последней части я полностью интегрирую его с интерфейсом.
Я использую массив для хранения данных, как я упоминал ранее, проверьте массив объектов javascript, если вам не совсем понятно, как массивы и объекты работают сложным образом.
Структура папок
Надеюсь, вы поняли структуру папок.
- Создайте 2 папки CSS и JS и файл index.html внутри основной папки.
- Внутри папки CSS создайте файл style.css для стилей.
- и внутри папки JS создайте файл myScript.js.
Теперь откройте файл index.html и добавьте файл сценария:
<script src="JS/myScript.js"></script> <!-- add it in the bottom of the html file after body tag-->
Добавьте файл стиля следующим образом:
<link rel="stylesheet" href="CSS/style.css"> <!-- add it inside the head tag of html file-->
Часть 1. Написание логики для добавления/создания и отображения/отображения
Внутри файла myScript.js создайте три массива объектов.
- массив категорий
- массив компаний
- массив продуктов
let categories = [
{ id: 1, name: "Apparel"},
{ id: 2, name: "Machinery"},
{ id: 3, name: "Accessories"}
]
let companies = [
{ id: 1, companyName: 'Amazon'},
{ id: 2, companyName: 'Alibaba'},
{ id: 3, companyName: 'eBay'},
{ id: 4, companyName: 'GlobalSources'}
]
let products = [
{ id: 1, name: 'Shirt', price: 529, categoryID: 1,companyID: 1},
{ id: 2, name: 'Pencils', price: 29, categoryID: 3, companyID: 2},
{ id: 3, name: 'CleaningEquipment', price: 5092, categoryID: 2, companyID: 2},
{ id: 4, name: 'Hardware', price: 1092, categoryID: 2, companyID: 3},
{ id: 5, name: 'Jeans', price: 1300, categoryID: 1, companyID: 4}
]
Я создал 3 массива, и теперь я собираюсь связать эти массивы, чтобы отобразить все данные о продукте с названием компании и названием категории.
Во-первых, давайте напишем 2 функции, которые дают нам данные из массивов категорий и компаний, передавая индекс.
let categoryInfo = (id) => {
for (let i = 0; i < categories.length; i++) {
if (categories[i].id == id) {
return categories[i].name}
}
}
Когда я передаю функции «categoryInfo» «id» в качестве аргумента, функция дает мне имя категории. Вы поняли,👌 передав «categoryId» из массива продуктов, я могу легко отобразить название категории с продуктом. 😍
console.log(categoryInfo(categories[1].id))
Напишем такую же функцию для компании.
let companyInfo = (id) => {
for (let i = 0; i < companies.length; i++) {
if (companies[i].id == id) {
return companies[i].companyName}
}
}
Когда я передаю этой функции «companyInfo» «id» в качестве аргумента, функция дает мне название компании.
Я перебрал массив компаний, сравнил аргумент «id» с идентификатором компании и получил название компании.
console.log(companyInfo(companies[0].id))
Теперь, используя эти две вышеупомянутые функции «categoryInfo & companyInfo» внутри основной функции, мы можем отобразить все данные о продукте с названием категории и названием компании.
Итак, в основном я буду вызывать эти функции внутри основной функции, где я передаю categoryId и «companyId». как аргумент.
let displayProduct = () =>{
for(let i = 0; i < products.length; i++){
console.log(`Product name: ${products[i].name}`)
console.log(`Product Price: ${products[i].price}`)
console.log(`Product Category: ${categoryInfo(products[i].categoryID)}`)
console.log(`Product Bought from: ${companyInfo(products[i].companyID)}`)
console.log('')
}
}
displayProduct()
Я создал функцию «displayProduct», которая отображает все данные о товарах. Как видите, когда я хочу получить название категории товаров, я вызываю функцию «categoryInfo» и передаю в качестве аргумента идентификатор категории. Таким образом, когда 'categoryId' совпадает с 'id' в объектах категорий, это даст нам желаемое название категории. Та же процедура применяется для функции «companyInfo».
Проверяем результат:
Браво! мы успешно реализовали логику Display/Show. Я создам для него пользовательский интерфейс в последней части, так что на данный момент мы закончили.
Теперь давайте перейдем к функции «Создать/Добавить».
Как вы знаете, чтобы добавить продукты в массив, мы должны сначала получить данные из какой-либо HTML-формы, а затем применить какое-либо событие при отправке. Итак, сначала создайте HTML-форму.
Добавьте ссылку начальной загрузки CDN в тег заголовка index.html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
Добавьте приведенный ниже код в файл index.html.
<body> <b><h1 align="center" class="p-4">JavaScript CRUD Application</h1></b> <div class="p-5 m-1 con" style="width:400px; color:black;"> <h3>Add Product</h3> <form> <div class="form-row"> <div class="form-group col-md-12"> <label>Product Id</label> <input type="Number" class="form-control" id="id" placeholder="5"> </div> <div class="form-group col-md-12"> <label>Product Name</label> <input type="text" class="form-control" id="name" placeholder="T-Shirt"> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <label for="inputAddress">Product Price</label> <input type="text" class="form-control" id="price" placeholder="4000"> </div> <div class="form-group col-md-12"> <label>Product Category</label> <select id="cat" class="form-control"> <option selected>Choose...</option> <option value="1">Apparel</option> <option value="2">Machinery</option> <option value="3">Accessories</option> </select> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <label>Choose where to buy the product</label> <select id="com" class="form-control"> <option selected>Choose...</option> <option value="1">Amazon</option> <option value="2">eBay</option> <option value="3">Alibaba</option> <option value="4">GlobalSources</option> </select> </div> </div> <button type="button" class="btn btn-primary btn-block" onclick="addProduct()">Submit</button> </form> </div> </body>
Пользовательский интерфейс HTML-формы выглядит следующим образом:
Я обновлю пользовательский интерфейс для отображения, редактирования и удаления позже.
Теперь пришло время написать логику для добавления продукта, функцию javascript, которая берет значения из этой формы и помещает их в массив продуктов.
let addProduct = () =>{
let prod = {
id: Number(document.getElementById('id').value),
name: document.getElementById('name').value,
price: Number(document.getElementById('price').value),
categoryID: Number(document.getElementById('cat').value),
companyID: Number(document.getElementById('com').value)
}
products.push(prod);
}
На этом этапе, если вы хотите проверить результат в консоли, вы увидите, что после нажатия кнопки отправки данные добавляются в массив продуктов. Я вызвал функцию «addProduct» через событие «onclick» в HTML.
Поздравляю! Ты сделал это. Первая часть завершена.
Скоро увидимся в последней части.
