From acc08250be9546a3598c3afaeb7269eb833fc7c5 Mon Sep 17 00:00:00 2001 From: mattwood4 Date: Sun, 22 Jul 2018 14:18:53 +0100 Subject: [PATCH 1/2] add server with 2 routes, modified the client js to work with the data server, added form to index html --- data/posts.json | 4 +-- package.json | 24 ++++++++++++++++ public/index.html | 5 +++- public/script.js | 73 ++++++++++++++++++++++------------------------- server.js | 37 ++++++++++++++++++++++++ 5 files changed, 100 insertions(+), 43 deletions(-) create mode 100644 package.json create mode 100644 server.js diff --git a/data/posts.json b/data/posts.json index b4d8361..7ba55fb 100644 --- a/data/posts.json +++ b/data/posts.json @@ -1,3 +1 @@ -{ - "1467390356291": "This is my very first blog post!" -} +[{"blogpost":"This is my very first blog post!"},{"blogpost":"Blog post number 2!"}] \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..67d5991 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "express_week_1", + "version": "1.0.0", + "description": "This is the exercise that accompanies the first Node class. Based on the Node Girls Workshop https://github.com/node-girls/express-workshop", + "main": "server.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/CodeYourFuture/express-workshop.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/CodeYourFuture/express-workshop/issues" + }, + "homepage": "https://github.com/CodeYourFuture/express-workshop#readme", + "dependencies": { + "express": "^4.16.3", + "express-formidable": "^1.0.0", + "hbs": "^4.0.1" + } +} diff --git a/public/index.html b/public/index.html index 859031c..aa0ffa1 100644 --- a/public/index.html +++ b/public/index.html @@ -14,7 +14,10 @@

Node Girls

- +
+ + +

diff --git a/public/script.js b/public/script.js index b677186..e34dde5 100644 --- a/public/script.js +++ b/public/script.js @@ -5,74 +5,69 @@ if (document.readyState !== 'loading') { } function ready () { - getBlogposts('/get-posts'); - + getBlogposts("/posts"); // send posts to server var form = document.querySelector('form'); form.addEventListener('submit', function (event) { - event.preventDefault(); // prevents the form from contacting our server automatically (we want to do it ourselves) var formActionUrl = form.action; // 'form.action' is the url '/create-post' var formData = new FormData(form); - postBlogposts(formActionUrl, formData); }); + } /**** * Function definitions ***/ -function postBlogposts (url, data) { - fetch(url, { - method: 'POST', - body: data - }) - .then(function (res) { - res.json() - .then(function (json) { - console.log(json); - addBlogpostsToPage(json); - document.querySelector('form').reset(); - }) +function postBlogposts(url, data) { + fetch(url, { + method: "POST", + body: data + }) + .then(function(res) { + res.json().then(function(json) { + addBlogpostsToPage(json); + document.querySelector("form").reset(); + window.location.href = "http://localhost:3000/" + }); }) - .catch(function (err) { - console.error(err) + .catch(function(err) { + console.error(err); }); } -function getBlogposts (url) { +function getBlogposts(url) { fetch(url, { method: 'GET' }) - .then(function (res) { - res.json() - .then(function (json) { - console.log(json); - addBlogpostsToPage(json); + .then(function (res) { + res.json() + .then(function (json) { + addBlogpostsToPage(json); + }); + }) + .catch(function (err) { + console.error(err) }); - }) - .catch(function (err) { - console.error(err) - }); } function addBlogpostsToPage (data) { - for (var blogpost in data) { - if (data.hasOwnProperty(blogpost)) { - - var postDiv = document.createElement('div'); - var postText = document.createElement('p'); - var thumbnail = document.createElement('img'); - var postContainer = document.querySelector('.post-container'); + JSON.parse(data).map(post => { + if (post.hasOwnProperty("blogpost")) { + var postDiv = document.createElement("div"); + var postText = document.createElement("p"); + var thumbnail = document.createElement("img"); + var postContainer = document.querySelector(".post-container"); thumbnail.src = "./img/logo2.png"; thumbnail.className = "thumbnail"; - postText.innerHTML = data[blogpost]; + postText.innerHTML = post.blogpost; postDiv.className = "post"; postDiv.appendChild(thumbnail); postDiv.appendChild(postText); postContainer.appendChild(postDiv); - } - } -} + } + }) +} \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 0000000..9a698da --- /dev/null +++ b/server.js @@ -0,0 +1,37 @@ +//core modules +const fs = require('fs') + +//3rd party modules +const express = require('express') +const formidable = require("express-formidable"); +const hbs = require('hbs') +//variables +const port = 3000 + +//create app +const app = express() + +//serving public assets middleware +app.use(express.static('public', {'extensions': ['html']})) +hbs.registerPartials(__dirname + '/views/partials') +app.set('view engine', 'hbs') +hbs.registerHelper("getCurrentYear", () => new Date().getFullYear()); +hbs.registerHelper("setUpper", text => text.toUpperCase()); +app.use(formidable()); + +// router +app.get('/posts', (req, res) => { + res.json(fs.readFileSync(__dirname + "/data/posts.json", "utf8")); +}) +app.post('/post', (req, res) => { + const pathPostsFile = __dirname + "/data/posts.json"; + const allposts = JSON.parse(fs.readFileSync(pathPostsFile).toString()); + + const post = req.fields; + allposts.push(post) + fs.writeFileSync(pathPostsFile, JSON.stringify(allposts)); + res.json(fs.readFileSync(pathPostsFile, "utf8")); +}) +app.listen(port, (req, res) => { + console.log("Server is runnig on port:", port); +}) \ No newline at end of file From e1eea3cc0b8821013801082e88b7b2e70d6a17bf Mon Sep 17 00:00:00 2001 From: mattwood4 Date: Sun, 22 Jul 2018 14:31:15 +0100 Subject: [PATCH 2/2] change vars to consts and normalise the indentations --- public/script.js | 30 +++++++++++++++--------------- server.js | 1 + 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/public/script.js b/public/script.js index e34dde5..dc0f88f 100644 --- a/public/script.js +++ b/public/script.js @@ -7,11 +7,11 @@ if (document.readyState !== 'loading') { function ready () { getBlogposts("/posts"); // send posts to server - var form = document.querySelector('form'); + const form = document.querySelector('form'); form.addEventListener('submit', function (event) { event.preventDefault(); // prevents the form from contacting our server automatically (we want to do it ourselves) - var formActionUrl = form.action; // 'form.action' is the url '/create-post' - var formData = new FormData(form); + const formActionUrl = form.action; // 'form.action' is the url '/post' + const formData = new FormData(form); postBlogposts(formActionUrl, formData); }); @@ -41,24 +41,24 @@ function getBlogposts(url) { fetch(url, { method: 'GET' }) - .then(function (res) { - res.json() - .then(function (json) { - addBlogpostsToPage(json); - }); - }) - .catch(function (err) { - console.error(err) + .then(function (res) { + res.json() + .then(function (json) { + addBlogpostsToPage(json); }); + }) + .catch(function (err) { + console.error(err) + }); } function addBlogpostsToPage (data) { JSON.parse(data).map(post => { if (post.hasOwnProperty("blogpost")) { - var postDiv = document.createElement("div"); - var postText = document.createElement("p"); - var thumbnail = document.createElement("img"); - var postContainer = document.querySelector(".post-container"); + const postDiv = document.createElement("div"); + const postText = document.createElement("p"); + const thumbnail = document.createElement("img"); + const postContainer = document.querySelector(".post-container"); thumbnail.src = "./img/logo2.png"; thumbnail.className = "thumbnail"; diff --git a/server.js b/server.js index 9a698da..ee5763a 100644 --- a/server.js +++ b/server.js @@ -32,6 +32,7 @@ app.post('/post', (req, res) => { fs.writeFileSync(pathPostsFile, JSON.stringify(allposts)); res.json(fs.readFileSync(pathPostsFile, "utf8")); }) + app.listen(port, (req, res) => { console.log("Server is runnig on port:", port); }) \ No newline at end of file