Nodejs. Як створити "список справ". Частина 1.

Відео: Вчимо jаvascript 32. LocalStorage

Всім привіт! Ми закінчили вивчати основи NodeJS, і тепер в новій серії ми створимо свою власну програму - ToDo App (список справ) на NodeJS.

Для створення нашого застосування нам будуть потрібні деякі файли, які вже заготовлені. Створіть якусь папку, де буде знаходитися наш проект. У ній створіть папку public, а в ній - assets. Вміст цієї директорії буде наступним:

Відео: Стань справжнім junior - Google Developer Tools

logo.jpg
styles.css
todo-list.js

Логотип може бути будь-яким png зображенням з дозволом 70x36px. вміст файлу styles.css:

body{ 
 background:# 0d1521- 
 font-family: tahoma- 
 color:# 989898- 
} 
 
# Todo-table { 
 position: relative- 
 width:95% - 
 background:# 090d13- 
 margin:0auto- 
 padding:20px- 
 box-sizing: border-box- 
} 
 
# Todo-table form: after { 
 margin:0- 
 content:``- 
 display: block- 
 clear: both- 
} 
 
input[type="Text"] { 
 width:70% - 
 padding:20px- 
 background:# 181c22- 
 border:0- 
float: left- 
 font-size:20px- 
 color:# 989898- 
} 
 
button{ 
 padding:20px- 
 width:30% - 
float: left- 
 background:# 23282e- 
 border:0- 
 box-sizing: border-box- 
 color:# fff- 
 cursor: pointer- 
 font-size:20px- 
} 
 
ul{ 
 list-style-type: none- 
 padding:0- 
 margin:0- 
} 
 
li{ 
 width:100% - 
 padding:20px- 
 box-sizing: border-box- 
 font-family: arial- 
 font-size:20px- 
 cursor: pointer- 
 letter-spacing:1px- 
} 
 
li:hover{ 
 text-decoration: line-through- 
 background: rgba(0,0,0,0.2) - 
} 
 
h1{ 
 background: url(/logo.png)no-repeat center- 
 margin-bottom:0- 
 text-indent:-10000px- 
}

вміст файлу todo-list.js:

Відео: Вчимо jаvascript 7. Оператор умовного вибору

$(document).ready(function() { 
 
 $(`Form`).on(`Submit`,function() { 
 
var item = $(`Form input`) - 
var todo ={item: item.val()} - 
 
 $.ajax({ 
type:`POST`, 
url:`/ Todo`, 
data: todo, 
success:function(data) { 
 // do something with the data via front-end framework 
 location.reload() - 
} 
}) - 
 
returnfalse- 
 
}) - 
 
 $(`Li`).on(`Click`,function() { 
var item = $(this).text().replace(/ /g,";") - 
 $.ajax({ 
type:`DELETE`, 
url:`/ Todo /`+ item, 
success:function(data) { 
 // do something with the data via front-end framework 
 location.reload() - 
} 
}) - 
}) - 
 
}) -

Це буде нашою основою. Стилі ми розбирати не будемо, там ви можете розібратися самі, а про код в js-файлі поговоримо пізніше.

тепер створимо package.json файл і встановимо залежності. У терміналі введіть наступне:

npm init

Дайте відповідь на питання, як хочете, але в питанні entry point вкажіть відповідь app.js.

Відео: Вчимо jаvascript 20. Функції та робота з ними

тепер встановимо express, ejs і body-parser:

npm install express -save 
npm install ejs -save 
npm install body-parser -save

Отже, на цьому сьогодні ми закінчимо. У наступній статті ми вже почнемо створювати наш додаток і писати файл app.js.

Дякую за увагу!

Поділися в соціальних мережах:

Схожі