Все материалы по ES6
Создание REST API роутов
В корне проекта создадим папку - routes.Внутри нее создадим файл, который будет отвечать за роуты к постам - post.js
В файле сразу подключаем express -
const express = require('express')
Далее создадим переменную, которая добывается из функции экспресс -
Router()
const router = express.Router()
С этой переменной мы будем работать в этом файле и в конце экспортировать на ружу.
module.exports = router
Пока мы не пишем здесь никакого функционала. Давайте попробуем его применить для нашего сервера.
Для этого мы должны перейти в файл app.js, где мы описываем сервер и подключит данный роутер.
const postRouter = require('./routes/post.js').
const express = require('express')
const mongoose = require('mongoose')
const path = require('path')
const postRouter = require('./routes/post')
const keys = require('./keys')
const port = process.env.PORT || 5000
const clientPath = path.join(__dirname, 'client')
mongoose.connect(keys.mongoURI)
.then(() => console.log('MongoDB connected'))
.catch(err => console.error(err))
const app = express()
app.use(express.static(clientPath))
app.listen(port,()=>{
console.log(`Server run on ${port} port`)
})
Теперь, для того чтобы использовать наш роутер, мы должны, после того, как определили объект нашего приложения =>
const app = express() (ниже) написать команду
app.use('', postRouter)
Для того чтобы применить какой то роут и экспресc понимал ссылки.
Первым параметром мы можем указать url- префикс, который будет доступен для данного роута.
Вторым- тот роутер, который нам нужно использовать.
Теперь нужно подумать какой префикс нам здесь написать?
По сути, у нас будет часть сервера, которая будет отдавать клиентскую сторону - index.html и у нас будет часть сервера, которая будет отвечать за REST API. Соответственно, все что будет делаться через REST API мы можем начинать с префикса
/api/ и далее, так как у нас идет здесь идет работа именно с постами, мы можем указывать сущьности - например post
app.use('/api/post', postRouter)
Теперь давайте разберемся как это будет выглядеть. Полная ссылка получения данных поста.
Перейдем в файл post.js
По сути для нашего приложения важно реализовать три действия:
- - получит все посты, которые есть в БД
- - создать новый пост
- - реализовать удаление какого-то поста
get.
Для того, чтобы реализовать метод
get в экспрессе мы обращаемся к роутеру (router) и вызываем у него метод get.
Здесь в качестве параметра мы просто указываем слэш -
'/'.
Вторым параметром указываем callback-функцию, которая принимает два параметра (
req -request - запрос res - response - ответ.)
Таким образом мы сможем манипулировать этими двумя вещами, когда будет приходить роут.
router.get('', (req, res) => {
})
Теперь давайте посмотрим. что это будет за роут и как он будет определяться.
У нас есть некоторый префикс -
'/api/post' и это означает, что мы будем видеть запрос следующего характера:
http://localhost:5000/api/post
который будет реагировать на тип GET. И в случае, если экспресс увидит, что это запрос GET, то будет нам что-то отдавать.
Похожая ситуация у нас будет реализована еще для двух методов.
В REST API если мы хотим что-то создать, то мы используем метод POST, удалить - DELETE.
По сути, все запросы будут идти по одной и той же ссылке, но Экспресс будет понимать, что надо делать.
routes/post.js
const express = require('express')
const router = express.Router()
// http://localhost:5000/api/post GET
router.get('', (req, res) => {
})
// http://localhost:5000/api/post POST
router.post('', (req, res) => {
})
// http://localhost:5000/api/post DELETE
router.delete('', (req, res) => {
})
module.exports = router
Сейчас, давайте попробуем описать метод GET с помощью которого мы хотим что-то получить.
Для этого изначально нам нужно подключить саму модель, которую мы создавали ранее.
const Post = require('../models/Post')
Теперь с помощью этого объекта мы уже можем работать с БД.
Для того, чтобы получить все сущьности из БД, нам нужно в методе GETобратиться к
find(), передав в метод пустой объект. Это означает, что мы будем требовать все посты без каких либо условий.
router.get('', (req, res) => {
Post.find({})
})
Данная операция является асинхронной. Она нам будет возвращать некий промис мы его можем ченить с помощью метода
.then и после этого как-то обрабатывать.
router.get('', (req, res) => {
Post.find({}).then((posts)=>{
//что-то делать...
})
})
Мы пойдем более современным путем. Так как мы работает на платформе NodeJS, которая не требует понимания разных браузеров, то здесь можно использовать все новшества современного JS ES6.
Поэтому мы смело можем использовать синтаксис -
async/await.
Вместо того, чтоб так ченить промисы.
Мы можем сказать NodeJS, что данная функция будет являться асинхронной и поставить вначале нее
async
И теперь, чтобы получить список этих постов, мы можем просто создать переменную
posts и с помощью префикса await - подождать.
const posts = await Post.find({})
Эта конструкция полностью идентична
Post.find({}).then((posts)=>{
// ...
})
При этом мы написали полностью асинхронный код и у нас нет вложенных функций.
Таким образом мы получили:
const express = require('express')
const router = express.Router()
const Post = require('../models/Post')
// http://localhost:5000/api/post GET
router.get('', async(req, res) => {
const posts = await Post.find({})
})
// http://localhost:5000/api/post POST
router.post('', (req, res) => {
})
// http://localhost:5000/api/post DELETE
router.delete('', (req, res) => {
})
module.exports = router
Думаем над тем. что нам делать еще в методе GET По сути, мы должны что-то отдать клиенту (список постов). Для того, чтобы ответить клиенту мы можем воспользоваться объектом
res, затем указать статус
res.status(200) и с помощью метода json указать те данные, которые мы хотим отправить обратно - posts.
res.status(200).json(posts)
const express = require('express')
const router = express.Router()
const Post = require('../models/Post')
// http://localhost:5000/api/post GET
router.get('', async(req, res) => {
const posts = await Post.find({})
res.status(200).json(posts)
})
// http://localhost:5000/api/post POST
router.post('', (req, res) => {
})
// http://localhost:5000/api/post DELETE
router.delete('', (req, res) => {
})
module.exports = router
Коротко: мы просто ждем, что сто-то придет к нам с базы данных и после этого отправляем их клиенту.
Метод POST
Здесь мы должны сформировать новый пост в зависимости от тех данных, которые к нам придут.Создадим переменную
postData и это будет объект с полями title и text. Здесь мы будем с клиента отправлять данные в БД. Для сбора данных и нужны эти поля.
Теперь эти данные нужно обработать. Это сделать просто. У нас есть объект
req с помощью которого будет сделан запрос и сказать ему, что например, title хранится в req.body.title.
router.post('', (req, res) => {
const postData = {
title: req.body.title,
text: req.body.text,
}
})
Теперь у нас есть данные необходимые для создания нового поста в базе и мы можем создать новый пост с помощью модели
Post на основе данных postData.
const post = new Post(postData)
И после этого нам нужно сохранить это все в БД. Для этого можно просто написать:
await post.save()
И сделать функцию асинхронной:
router.post('', async (req, res) => {
const postData = {
title: req.body.title,
text: req.body.text,
}
const post = new Post(postData)
await post.save()
})
Этой строкой -
await post.save()
мы будем ждать, когда код сохранится на сервере. Далее объект post изменится, потому что придет ответ с БД и у нас будет уникальный ID, который нам выдаст MongoDB и у нас определится дата. когда был создан пост..
И теперь мы можем ответить (res)клиенту оперируя теми данными, которые мы получили с БД.
В RESTAPI если мы что-то создаем, то используем статус 201, а далее методом json мы указываем. чо будем обратно возвращать post.
res.status(201).json(post)
// http://localhost:5000/api/post POST
router.post('', async (req, res) => {
const postData = {
title: req.body.title,
text: req.body.text,
}
const post = new Post(postData)
await post.save()
res.status(201).json(post)
})
Метод DELETE
Он будет тоже асинхронным, как и предыдущие методы. (Добавимasync).
В этом методе нам нужно будет удалить пост по ID. Поэтому здесь уже не подойдет такой url - http://localhost:5000/api/post, потому что нам в нем надо передать id того поста, который мы хотим удалить. Например id =34;
http://localhost:5000/api/post/34
Эта часть будет динамическая.
Для того, чтобы указать какую-либо динамическую часть в Экспрессе, нам достаточно поставить после слэша двоеточие и написать id.
Именно так - id будет называться параметр, который мы будем получать в этом месте.
Теперь нам нужно с помощью модели Post вызвать метод remove(), который позволяет нам что-то удалять из базы. и далее мы говорим условия - какой именно пост мы хотим удалить в объекте. Мы хотим удалить пост у которого _id === id который придет в роуте. А этот параметр хронися в объекте запроса req (req.params.is)
Так как функция асинхронная, то мы ее должны подождать -
await
router.delete('/:id', async (req, res) => {
await Post.remove({_id: req.params.id})
})
Как только удалится нужный нам пост мы можем ответить клиенту статусом 200 и в json отправить мессендж -"Удалено"
router.delete('/:id', async (req, res) => {
await Post.remove({_id: req.params.id})
res.status(200).json({
message: 'Удалено'
})
})
Теперь наш роутер, который работает с сущностями поста полностью готов.
Файл post.js
const express = require('express')
const router = express.Router()
const Post = require('../models/Post')
// http://localhost:5000/api/post GET
router.get('/', async (req, res) => {
const posts = await Post.find({})
res.status(200).json(posts)
})
// http://localhost:5000/api/post POST
router.post('/', async (req, res) => {
const postData = {
title: req.body.title,
text: req.body.text,
}
const post = new Post(postData)
await post.save()
res.status(201).json(post)
})
// http://localhost:5000/api/post DELETE
router.delete('/:id', async (req, res) => {
await Post.remove({_id: req.params.id})
res.status(200).json({
message: 'Удалено'
})
})
module.exports = router
Далее перейдем к тестированию, создав некую клиентскую часть.
Тестирование серверной части.
Всё, что относится к фронтенд части хранится в папке client. Там, пока что, один файл - index.htmlНачнем с верстки. На ней я подробно останавливаться не буду. Отмечу только, что для адаптивности и простоты я использовал фреймворк Materialize.
Подключаем css, material icons и скрипт js к нашему index.html файлу через CDN (ссылки на сайте) . После скрипта материалайза подключаем наш скрипт index.js, который мы создадим в той же папке.
В нем мы будем вести разработку на нативном JS.
В файле index.html создадим div - контейнер, которому зададим стиль, чтобы он не прилипал к верху экрана и в него мы будем выводить посты.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>FS-Blog</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container center" style="padding-top: 50px;"> <div class="row"> <div class="col s12 m8 offset-m2 lg6 offset-3" id="post"> <div class="card"> <div class="card-content"> <span class="card-title">Post Title</span> <p>I am a very simple card. I am good at containing small bits of information.</p> <small>12.12.1212</small> </div> <div class="card-action"> <button class="btn btn-small red"> <i class="material-icons">Delete</i> </button> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="index.js"></script> </body> </html>
Запускаем сервер
npm run dev
Переходим на сайт localhost:5000 и видим:
Теперь перейдем к клиентскому скрипту и посмотрим как вывести список всех постов.
Первое - нам нужно сделать некий компонент, который будет генерировать html-код определенного поста. Поэтому, все что отмечено красным вырезаем и переносим в файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>FS-Blog</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container center" style="padding-top: 50px;">
<div class="row">
<div class="col s12 m8 offset-m2 lg6 offset-3" id="post">
<div class="card z-depth-4">
<div class="card-content">
<span class="card-title">Post Title</span>
<p>I am a very simple card. I am good at containing small bits of information.</p>
<small>12.12.1212</small>
</div>
<div class="card-action">
<button class="btn btn-small red">
<i class="material-icons">Delete</i>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="index.js"></script>
</body>
</html>
И так как здесь у нас нативный JS, то мы создадим подобие компонента в переменной
card
const card = post => {
return `
<div class="card z-depth-4">
<div class="card-content">
<span class="card-title">${post.title}</span>
<p>${post.text}</p>
<small>${post.date}</small>
</div>
<div class="card-action">
<button class="btn btn-small red">
<i class="material-icons">Delete</i>
</button>
</div>
</div>
`
}
Функция, которая принимает post и отдает html разметку. Данные в которой мы выводим как переменные.
Теперь нам нужно сделать запрос на backend и убедиться, что мы получаем список всех постов.
Для этого нам потребуется некоторый инструмент с помощью которого мы будем делать запросы.
Так как мы сейчас работаем с постами, то мы можем создать локальный класс, который будет отвечать за запросы к бэкенду.
Допустим, что это будет класс
PostApi. У него будет несколько методов.
Первый статический
static fetch(), в который мы не будем передавать параметры. Этим методом мы будем делать запрос на получение всех наших постов.
В JS есть нативная функция
fetch(), с помощью нее мы как раз и можем делать запросы.
Первым параметром в эту функцию нам надо передать url по которому мы хотим сделать запрос.
Для этого мы создадим новую константу - const BASE_URL='api/post' - Это та самая строчка. которая обозначена в файле app.js.
Вторым параметром мы указываем метод с помощью которого мы хотим сделать запрос. В нашем случае, когда мы хотим получить список всех потов это метод GET. (
{method: get}.
Далее, метод
fetch() возвращает промис и в методе .then мы можем привести тот формат который прилетает к нам с сервера и обрабатывается JS, привести в понятный формат объектов. Поэтому - res=>res.json() и все это вернем из метода fetch().
const BASE_URL = '/api/post'
clss PostApi {
static fetch(){
return fetch(BASE_URL, {method: get}).then(res=>res.json())
}
}
И теперь в какой момент нам необходимо сделать запрос?
При загрузке страницы.
На документ поставим обработчик события.
document.addEventListener('DOMContentLoaded', () => {
})
Как только запускаем приложение нам нужно сделать запрос к бекенду, поэтому мы обращаемся к
PostApi.fetch и вызываем метод .fetch() и так как он возвращает промис, то .then(). В этом методу мы будем получать объект backendPosts. То есть это будет уже тот массив, который прилетит от сервера. И теперь, нам нужно просто вывести все эти посты в html.
Для этого создадим наверху файла переменную
let posts = []. Именно в ней мы будем хранить все посты, которые у нас есть.
Когда мы получим наши посты то в эту переменную мы положим содержимое
backendPosts на котором вызовем метод concat, для предотвращения проблем мутаций.
Он просто сгенерирует дубликат данного массива.
const BASE_URL = '/api/post'
let posts =[]
clss PostApi {
static fetch(){
return fetch(BASE_URL, {method: 'get'}).then(res=>res.json())
}
}
document.addEventListener('DOMContentLoaded', () => {
PostApi.fetch().then(backendPosts => {
posts = backendPosts.concat()
})
})
Теперь, когда у нас есть список всех постов с бэкенда и нам остается их отрендерить.
Для этого создадим функцию
renderPosts(posts) куда и передадим эти посты.
Функцию опишем ниже. По умолчанию она будет принимать пустой массив -
_posts=[]
У нас есть id="posts" в файле index.html куда нам нужно выводить наши посты.
$ - просто обозначает, что это некоторый элемент.
function renderPosts(_posts=[]) {
const $posts = document.querySelector('#posts')
}
Далее, проверим. Если длина массива пришедшего в функция больше 0, то есть у нас есть некоторые посты, то мы будем генерировать карточки. Иначе мы просто выведем сообщение "Постов пока нет".
Если посты есть, то мы должны сгенерировать html. Нам нужно пробежаться по массиву постов и сформировать из каждого карточку с нужным html.
Мы можем обратиться к локальной переменной
_posts и далее с помощью метода .map() мы на каждой итерации будем получать определенный post (это объект) и на выходе вернуть html, то есть вызвать функцию card(post)
Преобразуем массив к строке методом
.join(' '). Через пробел.
function renderPosts(_posts=[]) {
const $posts = document.querySelector('#posts')
if(_posts.length > 0) {
$posts.innerHTML = _posts.map(post=> card(post)).join()
} else {
$posts.innerHTML = `Постов пока нет.`
}
}
Сохраняем и обновляем страницу Идем на вкладку Networkв в консоли.
Видим, что "Постов пока нет", а в запросах - url совпадает и метод GET, и получаем пустой массив post
С выводом постов мы разобрались.
Единственное что мы можем добавить, это индикатор загрузки.
Имитируем задержку сервера функцией
setTimeout пред рендерингом постов, а на это время сделаем показ индикатора загрузки.
document.addEventListener('DOMContentLoaded', () => {
PostApi.fetch().then(backendPosts => {
posts = backendPosts.concat()
setTimeout(()=>{
renderPosts(posts)
}, 2000)
})
})
Прелоудер возьмем на сайте materializecss.com
Скопируем там готовый код прелоудера и добавим его в наш див поста в файле index.html
Файл index.html полностью:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>FS-Blog</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container center" style="padding-top: 50px;"> <div class="row"> <div class="col s12 m8 offset-m2 lg6 offset-3" id="posts"> <div class="preloader-wrapper small active"> <div class="spinner-layer spinner-green-only"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="index.js"></script> </body> </html>
Файл index.js полностью:
const card = post => { return ` <div class="card z-depth-4"> <div class="card-content"> <span class="card-title">${post.title}</span> <p>${post.text}</p> <small>${post.date}</small> </div> <div class="card-action"> <button class="btn btn-small red"> <i class="material-icons">Delete</i> </button> </div> </div> ` } const BASE_URL = '/api/post' let posts =[] class PostApi { static fetch(){ return fetch(BASE_URL, {method: 'get'}).then(res=>res.json()) } } document.addEventListener('DOMContentLoaded', () => { PostApi.fetch().then(backendPosts => { posts = backendPosts.concat() setTimeout(()=>{ renderPosts(posts) }, 2000) }) }) function renderPosts(_posts=[]) { const $posts = document.querySelector('#posts') if(_posts.length > 0) { $posts.innerHTML = _posts.map(post=> card(post)).join() } else { $posts.innerHTML = `<div class="center">Постов пока нет.</div>` } }
Теперь перед загрузкой постов мы будем видеть индикатор - вращающиеся полуокружность и через 2 сек. сообщение "Постов пока нет".
