├── .gitignore
├── keys.js
├── models
    └── Post.js
├── package.json
├── app.js
├── routes
    └── post.js
└── client
    ├── index.html
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea


--------------------------------------------------------------------------------
/keys.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   mongoURI: 'mongodb://vladilen:123456@ds245228.mlab.com:45228/fullstack-blog'
3 | }


--------------------------------------------------------------------------------
/models/Post.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | const Schema = mongoose.Schema
 3 | 
 4 | const postSchema = new Schema({
 5 |   title: {
 6 |     type: String,
 7 |     required: true
 8 |   },
 9 |   text: {
10 |     type: String,
11 |     required: true
12 |   },
13 |   date: {
14 |     type: Date,
15 |     default: Date.now
16 |   }
17 | })
18 | 
19 | module.exports = mongoose.model('posts', postSchema)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fullstack-blog",
 3 |   "version": "1.0.0",
 4 |   "description": "simple blog",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "start": "node app.js",
 8 |     "dev": "nodemon app.js"
 9 |   },
10 |   "keywords": [
11 |     "blog",
12 |     "nodejs",
13 |     "fullstack"
14 |   ],
15 |   "author": "Vladilen Minin",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "body-parser": "^1.18.3",
19 |     "express": "^4.16.3",
20 |     "mongoose": "^5.1.2"
21 |   },
22 |   "devDependencies": {
23 |     "nodemon": "^1.17.5"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const mongoose = require('mongoose')
 3 | const bodyParser = require('body-parser')
 4 | const path = require('path')
 5 | const postRouter = require('./routes/post')
 6 | const keys = require('./keys')
 7 | 
 8 | const port = process.env.PORT || 5000
 9 | const clientPath = path.join(__dirname, 'client')
10 | 
11 | mongoose.connect(keys.mongoURI)
12 |   .then(() => console.log('MongoDB connected.'))
13 |   .catch(err => console.error(err))
14 | 
15 | const app = express()
16 | app.use(bodyParser.json())
17 | app.use('/api/post', postRouter)
18 | app.use(express.static(clientPath))
19 | 
20 | app.listen(port, () => {
21 |   console.log(`Server has been started on port ${port}`)
22 | })
23 | 
24 | 


--------------------------------------------------------------------------------
/routes/post.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const router = express.Router()
 3 | const Post = require('../models/Post')
 4 | 
 5 | // http://localhost:5000/api/post (GET)
 6 | router.get('/', async (req, res) => {
 7 |   const posts = await Post.find({})
 8 |   res.status(200).json(posts)
 9 | })
10 | 
11 | // http://localhost:5000/api/post (POST)
12 | router.post('/', async (req, res) => {
13 |   const postData = {
14 |     title: req.body.title,
15 |     text: req.body.text
16 |   }
17 | 
18 |   const post = new Post(postData)
19 | 
20 |   await post.save()
21 |   res.status(201).json(post)
22 | })
23 | 
24 | // http://localhost:5000/api/post/23 (DELETE)
25 | router.delete('/:postId', async (req, res) => {
26 |   await Post.remove({_id: req.params.postId})
27 |   res.status(200).json({
28 |     message: 'Удалено'
29 |   })
30 | })
31 | 
32 | 
33 | module.exports = router


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport"
 6 |           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
 9 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
10 |     <title>Fullstack blog</title>
11 | </head>
12 | <body>
13 | 
14 | <div class="container" style="padding-top: 50px;">
15 |     <div class="row">
16 |         <div class="col s12 m8 offset-m2 l6 offset-l3" id="posts">
17 |             <div class="center">
18 |                 <div class="preloader-wrapper small active">
19 |                     <div class="spinner-layer spinner-green-only">
20 |                         <div class="circle-clipper left">
21 |                             <div class="circle"></div>
22 |                         </div>
23 |                         <div class="gap-patch">
24 |                             <div class="circle"></div>
25 |                         </div>
26 |                         <div class="circle-clipper right">
27 |                             <div class="circle"></div>
28 |                         </div>
29 |                     </div>
30 |                 </div>
31 |             </div>
32 |         </div>
33 |     </div>
34 | </div>
35 | 
36 | 
37 | <div class="fixed-action-btn">
38 |     <a class="btn-floating btn-large red modal-trigger" data-target="createForm">
39 |         <i class="large material-icons">add</i>
40 |     </a>
41 | </div>
42 | 
43 | <div id="createForm" class="modal">
44 |     <div class="modal-content">
45 |         <h4>Создать новый пост</h4>
46 | 
47 |         <div class="input-field">
48 |             <input id="title" type="text" class="validate" required>
49 |             <label for="title">Название</label>
50 |         </div>
51 | 
52 |         <div class="input-field">
53 |             <textarea id="text" class="materialize-textarea"></textarea>
54 |             <label for="text">Текст</label>
55 |         </div>
56 |     </div>
57 |     <div class="modal-footer">
58 |         <a class="waves-effect waves-light btn" id="createPost">Создать пост</a>
59 |     </div>
60 | </div>
61 | 
62 | <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
63 | <script src="index.js"></script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
  1 | const card = post => {
  2 |   return `
  3 |   <div class="card z-depth-4">
  4 |       <div class="card-content">
  5 |           <span class="card-title">${post.title}</span>
  6 |           <p style="white-space: pre-line;">${post.text}</p>
  7 |           <small>${new Date(post.date).toLocaleDateString()}</small>
  8 |       </div>
  9 |       <div class="card-action">
 10 |           <button class="btn btn-small red js-remove" data-id="${post._id}">
 11 |               <i class="material-icons">delete</i>
 12 |           </button>
 13 |       </div>
 14 |   </div>
 15 |   `
 16 | }
 17 | 
 18 | let posts = []
 19 | let modal
 20 | const BASE_URL = '/api/post'
 21 | 
 22 | class PostApi {
 23 |   static fetch() {
 24 |     return fetch(BASE_URL, {method: 'get'}).then(res => res.json())
 25 |   }
 26 | 
 27 |   static create(post) {
 28 |     return fetch(BASE_URL, {
 29 |       method: 'post',
 30 |       body: JSON.stringify(post),
 31 |       headers: {
 32 |         'Accept': 'application/json',
 33 |         'Content-Type': 'application/json'
 34 |       }
 35 |     }).then(res => res.json())
 36 |   }
 37 | 
 38 |   static remove(id) {
 39 |     return fetch(`${BASE_URL}/${id}`, {
 40 |       method: 'delete'
 41 |     }).then(res => res.json())
 42 |   }
 43 | }
 44 | 
 45 | document.addEventListener('DOMContentLoaded', () => {
 46 |   PostApi.fetch().then(backendPosts => {
 47 |     posts = backendPosts.concat()
 48 |     renderPosts(posts)
 49 |   })
 50 | 
 51 |   modal = M.Modal.init(document.querySelector('.modal'))
 52 |   document.querySelector('#createPost').addEventListener('click', onCreatePost)
 53 |   document.querySelector('#posts').addEventListener('click', onDeletePost)
 54 | })
 55 | 
 56 | function renderPosts(_posts = []) {
 57 |   const $posts = document.querySelector('#posts')
 58 | 
 59 |   if (_posts.length > 0) {
 60 |     $posts.innerHTML = _posts.map(post => card(post)).join(' ')
 61 |   } else {
 62 |     $posts.innerHTML = `<div class="center">Постов пока нет</div>`
 63 |   }
 64 | }
 65 | 
 66 | 
 67 | function onCreatePost() {
 68 |   const $title = document.querySelector('#title')
 69 |   const $text = document.querySelector('#text')
 70 | 
 71 |   if ($title.value && $text.value) {
 72 |     const newPost = {
 73 |       title: $title.value,
 74 |       text: $text.value
 75 |     }
 76 |     PostApi.create(newPost).then(post => {
 77 |       posts.push(post)
 78 |       renderPosts(posts)
 79 |     })
 80 |     modal.close()
 81 |     $title.value = ''
 82 |     $text.value = ''
 83 |     M.updateTextFields()
 84 |   }
 85 | }
 86 | 
 87 | function onDeletePost(event) {
 88 |   if (event.target.classList.contains('js-remove')) {
 89 |     const decision = confirm('Вы уверены, что хотите удалить пост?')
 90 | 
 91 |     if (decision) {
 92 |       const id = event.target.getAttribute('data-id')
 93 | 
 94 |        PostApi.remove(id).then(() => {
 95 |          const postIndex = posts.findIndex(post => post._id === id)
 96 |          posts.splice(postIndex, 1)
 97 |          renderPosts(posts)
 98 |        })
 99 |     }
100 |   }
101 | }


--------------------------------------------------------------------------------