Настройка приложения может быть похожа на создание холста. Вы очень увлечены рисованием, но вам нужно натянуть холст на рамку и скрепить его скобами, когда вы действительно хотите просто приступить к рисованию. Этот краткий справочник должен помочь вам быстро заложить основу, чтобы вы могли делать то, что вы действительно хотите делать, создавая потрясающие приложения.
В первой части этой серии блогов вы найдете все шаги по созданию приложения. Части 2 и 3 помогут вам настроить приложение CRUD в React и Ruby on Rails соответственно.
Начните с создания каталога, в котором будет выполняться загрузка вашего экспресс-приложения. Я назову свой app-template. CD в нужный каталог с вашего терминала и запустите:
mkdir app-template/
компакт-диск в app-template/ и установите все следующее с вашего терминала. Это даст вам все необходимое для запуска экспресс-приложения.
express -e npm install npm install connect npm install mongoose npm install method-override
Затем запустите нодмон.
nodemon
В браузере перейдите на localhost:3000. Если nodemon запущен, в вашем браузере есть это:
У нас есть работающее экспресс-приложение, но на данный момент оно не очень интересное. Прежде чем продолжить, давайте создадим базу данных. Перейдите на сайт mlab.com и создайте учетную запись. После входа в систему создайте новую базу данных.
Если вы не хотите раскошелиться, выберите «один узел» в следующем меню, затем выберите опцию «песочница» для вашей бесплатной базы данных.
Дайте ему имя. Я называю свою «смертную битву», потому что я люблю Mortal Kombat, и вы ничего не можете с этим поделать. Затем нажмите «Новое развертывание Mongo» и вуаля! У вас есть база данных.
Перед подключением к нашей базе данных мы хотим добавить пользователя в нашу базу данных. Нажмите «Добавить пользователя базы данных» и создайте тестовое фиктивное имя пользователя и пароль. Не используйте свое личное имя пользователя и пароль! Это поддельный пользователь, которого мы создаем для нашего приложения. Убедитесь, что флажок "Только для чтения" не установлен.
Теперь, когда у нас есть пользователь, давайте подключим нашу базу данных к нашему приложению. В терминале введите следующее, чтобы открыть ваш .bash_profile (используя Sublime Text Editor):
subl ~/.bash_profile
В MLab скопируйте указанный uri-адрес подключения и вставьте его в свой профиль bash, заменив ‹dbuser›:‹dbpassword› информацией о пользователе, которую вы создали для своей базы данных. Введите следующее в свой профиль bash:
export DB_MORTAL_KOMBAT=""
и вставьте следующую ссылку из MLab в кавычки.
Выполните следующую команду, чтобы перезагрузить профиль bash:
source ~/.bash_profile
Далее нам потребуются все наши модули в нашем файле app.js нашего экспресс-приложения. Вставьте следующий код в файл app.js. Функция переопределения метода предотвратит обновление страницы при нажатии кнопки, чтобы мы могли успешно удалять элементы в нашем приложении. Вы можете вставить после существующих строк app.use в ваш файл app.js.
// Require Modules
var connect = require(‘connect’)
var methodOverride = require(‘method-override’)
app.use(methodOverride(function(req, res){
if (req.body && typeof req.body === ‘object’ && ‘_method’ in req.body) {
// look in urlencoded POST bodies and delete it
var method = req.body._method
delete req.body._method
return method
}
}));
// Mongoose connection
var mongoose = require(‘mongoose’);
mongoose.connect(process.env.DB_MORTAL_KOMBAT);
Теперь мы создадим модель для работы. Придерживаясь темы Mortal Kombat, я хочу создать список персонажей, используя персонажей Mortal Kombat. Пользователь должен иметь возможность увидеть полный список персонажей, просмотреть одного персонажа и увидеть его/ее имя, мировоззрение и, возможно, описание их особого приема вместе с фотографией. Пользователи также могут удалять или добавлять других персонажей.
Итак, помня об этой пользовательской истории, создайте каталог «models». Создайте файл «character.js» в каталоге моделей. В этом коде нам нужно будет потребовать mongoose и экспортировать наш объект персонажа. Вставьте следующий код в файл character.js:
var mongoose = require(‘mongoose’);
var characterSchema = new mongoose.Schema({
name: { type: String, required: true},
alignment: { type: String, required: true},
special_move: {type: String }
image_url: { type: String }
});
var Character = mongoose.model(‘Character’, characterSchema);
module.exports = Character;
Теперь в нашем файле маршрутов мы настроим маршруты RESTful, чтобы пользователи могли создавать, читать, обновлять и удалять элементы в нашем приложении. Вам нужно будет потребовать модель в ваших маршрутах. Используйте следующий код в index.js в вашем каталоге маршрутов (вы можете заменить любой существующий код) для шаблона 7 маршрутов RESTful.
var express = require(‘express’);
var router = express.Router();
var Recipe = require(‘../models/character’);
//GET
router.get(‘/’, function(req, res, next) {
//get index view — list of all characters
res.render('index', { title: 'Mortal Kombat Karacters' })
});
//NEW
router.get(‘/new’, function(req, res, next) {
//create new character form
});
//SHOW
router.get(‘/’, function(req, res, next) {
//show specific character
});
//EDIT
router.get(‘/:id/edit’, function(req, res, next) {
//get edit character form
});
//CREATE
router.post(‘/’, function(req, res, next){
// redirect to index
});
//UPDATE
router.patch(‘/:id’, function(req, res, next){
// redirect to show view
});
//DELETE
router.delete(‘/:id’, function(req, res, next){
// delete specific character and redirect back to index
});
module.exports = router;
Вы можете увидеть в комментариях, что мы собираемся делать с каждым из этих маршрутов. Ответ рендеринга в нашем первом маршруте get изменит нашу домашнюю страницу, чтобы она выглядела следующим образом. Запустите сервер nodemon еще раз, чтобы увидеть результаты:
Ладно, теперь будем готовить! Все еще мало что можно сделать с тем, что у нас есть, поэтому давайте теперь настроим наше приложение так, чтобы оно отображало список символов и давало нам возможность добавлять новые.
Мы начнем с настройки нашего маршрута get, чтобы найти список всех символов:
router.get(‘/’, function(req, res, next) {
Character.find({}, function(err, characters){
if (err) console.log(err);
res.render(‘index’, { title: ‘Mortal Kombat Karacters’, characters: characters });
})
});
Но мы еще не создали никаких персонажей, поэтому теперь давайте создадим новое представление с формой для создания персонажа.
В каталоге «views» создайте новый файл .ejs. Вставьте следующий код.
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel=’stylesheet’ href=’/stylesheets/style.css’ /> </head> <body> <h1>Kreate a Karacter</h1> <form method=”post” action=”/”> <input type=”text” name=”name” placeholder=”Karacter Name”> <input type=”text” name=”alignment” placeholder=”Alignment”> <input type=”text” name=”special_move” placeholder=”Special Move”> <input type=”text” name=”image_url” placeholder=”Image URL”> <input type=”submit” value=”submit”> </form> </body> </html>
посетите http://localhost:3000/new и проверьте свое приложение, у вас должна быть такая форма:
Прежде чем мы сможем добавить персонажа, нам нужно настроить наш почтовый маршрут, чтобы он принимал информацию формы. Настройте свой почтовый маршрут следующим образом:
router.post(‘/’, function(req, res, next){
// create a character then redirect to index
var newCharacter = new Character({
name: req.body.name,
alignment: req.body.alignment,
special_move: req.body.special_move,
image_url: req.body.image_url
});
newCharacter.save(function(err, character){
if (err) console.log(err);
res.redirect(‘/’);
});
});
Это возьмет информацию из формы и сохранит ее в базе данных, но нам все еще нужно настроить наше представление index.ejs, чтобы мы могли видеть наш новый персонаж на экране. Добавьте в тело index.ejs следующий код:
<h2>Karacters:</h2>
<% characters.forEach(function(character) { %>
<a href=”/<%= character._id %>”><h3><%= character.name %></h3></a>
<img src= “<%= character.image_url %>” alt=”<%= character.name %>”>
<% }) %>
Теперь наше представление умеет просматривать всех персонажей в базе данных и отображать их изображение и имя на главной странице. Перейдите на http://localhost:3000/new, чтобы создать нового персонажа, используя нашу форму. После отправки их фото и имя должны появиться на главной странице. Вы также можете проверить MLab и увидеть каждый объект персонажа, появляющийся в ваших коллекциях. Их имя будет ссылаться на соответствующие страницы, но мы еще не настроили это.
Сладкий! У нас есть наш первый символ и буква «C» в нашем приложении CRUD. Попробуйте добавить еще несколько для удовольствия! Уличного бойца здесь нет!
Пока что на нашей домашней странице перечислены все наши персонажи, и мы можем добавлять новых, но теперь давайте сделаем так, чтобы мы могли просматривать отдельные символы и заботиться о «R» в нашем приложении CRUD.
Настройте маршрут показа следующим образом:
router.get(‘/:id’, function(req, res, next) {
var id = req.params.id;
Character.findOne({_id: id }, function(err, character){
if (err) console.log(err);
res.render(‘show’, {title: 'Mortal Kombat Karacters', character: character})
})
});
Это ищет вашего персонажа по его идентификатору, который удобно назначается каждому персонажу в MLab. Однако представления у нас пока нет, поэтому в каталоге представлений создайте файл show.ejs и дайте ему следующий код.
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel=’stylesheet’ href=’/stylesheets/style.css’ /> </head> <body> <h1><%= title %></h1> <h2><%= character.name %></h2> <img src= “<%= character.image_url %>” alt=”<%= character.name %>”> <p><%= character.alignment %></p> <p><%= character.special_move %></p> </body> </html>
Бум! Теперь мы можем просматривать информацию об отдельных персонажах. Но что, если вы облажались и сказали, что случайно поставили персонажа Street Fighter вместо персонажа Mortal Kombat. Что ж, лучше бы у нас был способ отредактировать вашу ошибку, поэтому начните с настройки маршрута редактирования следующим образом, чтобы просмотреть страницу редактирования для отдельного персонажа:
router.get(‘/:id/edit’, function(req, res, next) {
var id = req.params.id;
Character.findOne({_id: id }, function(err, character){
if (err) console.log(err);
res.render(‘edit’, {title: ‘Mortal Kombat Karacters’, character: character})
})
});
Затем настройте маршрут обновления таким образом, чтобы ваша база данных и приложение обновлялись с учетом всех внесенных нами изменений.
router.patch(‘/:id’, function(req, res, next) {
Character.findByIdAndUpdate(req.params.id, req.body, function(err, character){
if (err) console.log(err);
res.redirect(‘/’ + req.params.id);
})
});
Теперь создайте файл edit.ejs в папке представлений и используйте следующий код:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel=’stylesheet’ href=’/stylesheets/style.css’ /> </head> <body> <h1><%= title %></h1> <h2><%= character.name %></h2> <img src= “<%= character.image_url %>” alt=”<%= character.name %>”> <p><%= character.alignment %></p> <p><%= character.special_move %></p> <form method=”post” action=”/<%= character._id %>”> <input type=”hidden” name=”_method” value=”patch”> <input type=”text” name=”name” placeholder=”<%= character.name %>”> <input type=”text” name=”alignment” placeholder=”<%= character.alignment %>”> <input type=”text” name=”special_move” placeholder=”<%= character.special_move %>”> <input type=”text” name=”image_url” placeholder=”<%= character.image_url %>”> <input type=”submit” value=”Update”> </form> </body> </html>
Сладко, теперь вы можете редактировать персонажей и менять этого дурацкого персонажа из Street Fighter, которого вы туда случайно вставили, обратно в персонажа Mortal Kombat. Итак, теперь у нас есть «CRU» и хлам. Наконец, кнопка удаления.
Мы можем просто добавить эту часть в наше представление show.ejs, добавив эту форму внизу:
<form action=’/<% character._id %>” method=”post”> <input type=”hidden” name=”_method” value=”delete”> <input type=”submit name=”Delete me” value="Delete Karacter"> </form>
затем настройте наш маршрут удаления следующим образом:
router.delete(‘/:id’, function(req, res, next){
// delete specific character and redirect back to index
Character.findByIdAndUpdate(req.params.id, req.body, function(err, character){
if (err) console.log(err);
res.redirect(‘/’ + req.params.id);
})
});
Теперь просмотрите отдельного персонажа и нажмите кнопку удаления, чтобы удалить его из базы данных и приложения.
Безупречная победа! У вас есть полностью RESTful CRUD-приложение в экспресс-версии! Вы определенно захотите стилизовать это приложение и рассмотреть возможность объединения некоторых ваших представлений для лучшего взаимодействия с пользователем, но это должно дать вам все необходимое для начала работы! А теперь попробуйте выполнить кодовое задание и сохраните свои навыки JavaScript на высоте, как шляпа Кунг Лао.
ПРОВЕРЬТЕ СВОЮ МОЩНОСТЬ: Kombat Kase
Mortal Kombat — супер крутая видеоигра, известная своим огромным количеством жестокой графики. C не так круты, как K в Mortal Kombat, поэтому напишите какой-нибудь код, чтобы заменить все c в строке с K, поддерживающим верхнюю и нижнюю kase. Если вы хотите быть менее сумасшедшим, сделайте свой код более надежным, чтобы он заменял C только в том случае, если это первая буква слова.
Следите за обновлениями во второй и третьей частях этой серии блогов, в которых мы создаем CRUD-приложение, используя интерфейсный фреймворк REACT, а другое — с Ruby on Rails.
