Skip to content

Commit 9c0a70a

Browse files
author
fazt
committed
get, post request
0 parents  commit 9c0a70a

File tree

11 files changed

+2932
-0
lines changed

11 files changed

+2932
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.index.html.swp‎

12 KB
Binary file not shown.

‎README.md‎

Whitespace-only changes.

‎docs‎

Whitespace-only changes.

‎package-lock.json‎

Lines changed: 2735 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "node-api-tutorial",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"babel-loader": "^7.1.1",
14+
"babel-preset-es2015": "^6.24.1",
15+
"body-parser": "^1.17.2",
16+
"express": "^4.15.3",
17+
"morgan": "^1.8.2",
18+
"webpack-dev-middleware": "^1.11.0"
19+
},
20+
"devDependencies": {
21+
"babel-core": "^6.25.0",
22+
"jquery": "^3.2.1",
23+
"webpack": "^3.3.0"
24+
}
25+
}

‎src/app/index.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import $ from 'jquery';
2+
3+
$(function () {
4+
$('#get-request').on('click', function(){
5+
$.ajax({
6+
method: 'GET',
7+
url: '/products',
8+
contentType: 'application/json',
9+
success: function (res) {
10+
let tbodyElement = $('tbody');
11+
12+
tbodyElement.html('');
13+
14+
res.products.forEach(function(product){
15+
console.log(product);
16+
tbodyElement.append(`
17+
<tr>
18+
<td class="id">
19+
${product.id}
20+
</td>
21+
<td>
22+
<input
23+
type="text"
24+
class="name"
25+
value="${product.name}"
26+
/>
27+
</td>
28+
<td>
29+
<button class="update-button">
30+
UPDATE/PUT
31+
</button>
32+
<button class="delete-button">
33+
DELETE
34+
</button>
35+
</td>
36+
</tr>
37+
`);
38+
});
39+
}
40+
});
41+
});
42+
});
43+
44+
$('#create-form').on('submit', function() {
45+
event.preventDefault();
46+
47+
let createInput = $('#create-input');
48+
49+
$.ajax({
50+
url:'/products',
51+
method: 'POST',
52+
contentType: 'application/json',
53+
data: JSON.stringify({
54+
name: createInput.val()
55+
}),
56+
success: function(res) {
57+
console.log(res);
58+
createInput.val('');
59+
$('#get-request').click();
60+
}
61+
});
62+
63+
});

‎src/db.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"products": [
3+
{
4+
"id": 1,
5+
"name": "laptop"
6+
},
7+
{
8+
"id": 2,
9+
"name": "laptop"
10+
}
11+
],
12+
"currentId": 2
13+
}

‎src/public/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Restfull API TUTORIAL</title>
6+
</head>
7+
<body>
8+
<h1>REST API TUTORIAL</h1>
9+
10+
<!-- GET REQUEST -->
11+
<button id="get-request">
12+
READ / GET Products
13+
</button>
14+
15+
<!-- POST REQUEST-->
16+
<form id="create-form" action="">
17+
<input id="create-input" type="text">
18+
<button>CREATE / PORT</button>
19+
</form>
20+
21+
<hr>
22+
<!-- PRODUCTS TABLE -->
23+
<table>
24+
<thead>
25+
<tr>
26+
<th>ID</th>
27+
<th>Name</th>
28+
<th>Actions</th>
29+
</tr>
30+
</thead>
31+
<tbody></tbody>
32+
</table>
33+
<script src="/bundle.js"></script>
34+
</body>
35+
</html>

‎src/server.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const express = require('express');
2+
const bodyParser = require('body-parser');
3+
const app = express();
4+
5+
// webpack
6+
const webpack = require('webpack');
7+
const webpackDevMiddleware = require('webpack-dev-middleware');
8+
const webpackConfig = require('../webpack.config');
9+
10+
const PORT = process.env.PORT || 3000;
11+
12+
let { products, currentId } = require('./db.json');
13+
14+
app.set('port', PORT);
15+
16+
app.use(webpackDevMiddleware(webpack(webpackConfig)));
17+
app.use(bodyParser.json());
18+
app.use(bodyParser.urlencoded({extended:false}));
19+
app.use(express.static(__dirname + '/public'));
20+
21+
app.get('/products', (req, res) => {
22+
res.send({products});
23+
});
24+
25+
app.post('/products', (req, res) => {
26+
27+
var { name } = req.body;
28+
currentId++;
29+
30+
products.push({
31+
id: currentId,
32+
name
33+
});
34+
35+
res.send('Successfully created product');
36+
});
37+
38+
app.listen(app.get('port'), () => {
39+
console.log(`server on port ${app.get('port')}`);
40+
});
41+

0 commit comments

Comments
 (0)