NodeJS. Как создать "список дел". Часть 1.
Всем привет! Мы закончили изучать основы NodeJS, и теперь в новой серии мы создадим свое собственное приложение – ToDo App(список дел) на NodeJS.
Для создания нашего приложения нам потребуются некоторые файлы, которые уже заготовлены. Создайте какую-нибудь папку, где будет находиться наш проект. В ней создайте папку public, а в ней – assets. Содержимое этой директории будет следующим:
- logo.png
- 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: 0 auto;
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:
$(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();
}
});
return false;
});
$('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.
Теперь установим express, ejs и body-parser:
npm install express -save
npm install ejs -save
npm install body-parser -save
Итак, на этом сегодня мы закончим. В следующей статье мы уже начнем создавать наше приложение и писать файл app.js.
Спасибо за внимание!
-
Создано 31.05.2017 07:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.