Node.js tutorial part 2; building a proper website
Your first fully functional Node.js application
In the first part of this tutorial we set up a development environment. As you have noticed there, the core of a Node.js application is a server side Javascript file. You will be editing this file a lot and along the while it will grow accordingly.
I think the first step you will take, is change your code so that node.js serves a proper website. This can be an entirely new site, but without much effort an existing one too.
First things first. npm is the tool we used for creating a first application. When installing packages with npm, you have different options for installing them. With npm -g <packagename> you install global (system-wide) packages, without the -g packages are installed into the current directory/project.
When we’ re on it , install MongoDB on your system. We’re going to use it in our application as a database. Installation is pretty straightforward on most systems, this site is an excellent starting point.
There are a number of npm packages that are of huge value when creating node.js applications, but the choice is enormous. The following list (in no particular order) of packages is especially invaluable:
- path
- express
- mongoose
- body-parser
Let’s see how we use this in a simple but functional Node.js application. Create a new directory for your project and run:
npm init
The wizard is pretty self-explanatory. Now we install the necessary npm packages. Install them using these commands:
npm install express --save
npm install express-session --save
npm install body-parser --save
npm install mongoose --save
To make things easy for you, here’s a code snippet you can paste into the index.js at the root of your project:
// initiate express middleware
const express = require('express');
const app = express();
// assign the directory 'public' for storing static
// files (e.g. HTML and CSS)
app.use(express.static('public
// enable the parsing of request bodies and
// simplified handling of JSON content
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));
// initiatie Mongoose for MongoDB connectivity
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/rodeo', {
keepAlive: true,
reconnectTries: 10
});
// define a schema for a mongoDB collection
const Schema = mongoose.Schema;
var transactieSchema = new Schema({
userName: {type: String},
transactieDatum: {type: Date},
code: {type: String},
aantal: {type: Number},
bedrag: {type: Number}
// _id: false
},
{collection: 'transacties'});
mongoose.model('transactiesransactieSchema);
// Do some neat forwarding of the root of your site
// to a default file
app.get('/', (req, res) => res.sendfile('index.html'));
// a function for handling a post request
postTransacties = function (req, res, next) {
console.log(req.body);
var transacties = mongoose.model('transacties var transactie = new transacties(req.body);
transactie.save(function (err) {
if (err) {
console.log(err);
}
return res.json({value: 'hello'});
});
};
// a function for handling a get request
getTransacties = function (req, res, next) {
var transacties = mongoose.model('transacties transacties.find({}, function (err, data) {
return res.json(data);
});
};
// routing for post and get on the /transacties url
app.route('/transacties .post(postTransacties)
.get(getTransacties);
// finally, let's fire up a webserver at port 3500
app.listen(3500, function () {
console.log('listening*:3500');
module.exports = app;
});
This is not the best practice in terms of maintainability (it’s better to keep your database, router and controller-middleware in different files), but it will demonstrate everything you need for a full-fledged Node.js application including posting and retrieving data.
Final thing you need is a new directory “public”. Create an index.hml there with this contents:
<html><head>
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
$(document).ready(function () {
$('body').on('click', '.addone', function () {
var res = {
userName: $('.naam').val(),
transactieDatum: new Date(),
code: $('.code').val(),
aantal: $('.aantal').val(),
bedrag: $('.bedrag').val()
};
console.log(res);
$.ajax({
type: "POST",
url: "/transacties",
data: res,
success: function (result) {
console.log('succes },
error: function (jqXHR, textStatus) {
console.log(textStatus);
}
});
});
});
</head>
<body>
Naam
<label for="code" class="col-sm-3 col-form-label">Code</label>
<input id="code" name="code" class="form-control code">
</div>
Aantal
<label for="bedrag" class="col-sm-3 col-form-label">Bedrag</label>
<input id="bedrag" type="number" name="bedrag" step="0.01" class="form-control bedrag">
</div>
Save
</body>
</html>
Now, go to the root of your project and type:
node index.js
And when you point your browser to http://localhost:3500 a simple input form will be presented.
If you want to check if everything works as expected, fill in the form, press Save and go to http://localhost:3500/transacties . A JSON document will be displayed with all the records you saved.
That’s all. Now you have a fully working skeleton from where you can start building your enterprise website in Node.js!
Geen reacties
Geef jouw mening
Reactie plaatsenReactie toevoegen