Send data back to node.js server from front-end - javascript

I am new to Node.js and I'm trying to figure out for few days how to make a simple login-register feature for a website using Express.js with EJS template engine and MySql.
I have installed Node on my PC and I've used the Express-Generator to make a basic folder structure (views, routes, public folders).
I understand how I can pass variables from node to the front end using ejs but I don't know how to pass it back. I've tried watching some tutorials on the internet but nothing seems to make me see the logic. Where do I put the MySql code? How can I pass back the input values once the user clicks "SUBMIT"?

How says Jake, I suggest to use Sequelize for MySQL.
I will try to make a small steps for your start, and after you can study more about each process and tool.
1) Front-end (EJS);
<form id="login" action="/login" method="post">
<input name="username" type="text">
<input name="password" type="password">
<input type="submit">Ok</input>
</form>
Here, the form will request the route login. The route:
2) Route
module.exports = function (app){
var login = app.controllers.login;
app.get('/', login.index);
app.post('/login', login.login)
};
The route will call the login method in the controller called login.js.
3) Controller
module.exports = function(app) {
var sequelize = require('./../libs/pg_db_connect'); // resquest lib of connection to mysql/postgres
var LoginController = {
index: function(req, res) {
res.render('login/index');
},
login: function(req, res) {
var query = "SELECT * FROM users"; // query for valid login
sequelize.query(query, { type: sequelize.QueryTypes.SELECT}).then(function(user){
if (req.body.username == user[0].username && req.body.password === user[0].password ){
res.redirect("/home");
} else {
res.render("login/invalid_access");
}
});
}
};
return LoginController;
};
In this point, is exec the query for to valid the login and verify if user can be log in. Request method is the main point.
For response and send information to view, it used res.SOME_METHOD:
res.send();
res.end();
res.download();
res.json();
Plus: Sequelize MySQL connection.
In the express structure, it's localized in lib/my_db_connection.js:
var Sequelize = require('sequelize');
module.exports = new Sequelize('database_name', 'user', 'pass', {
host: 'localhost',
dialect: 'mysql',
pool: {
max: 10,
min: 0,
idle: 10000
},
});
I suggest before you code, read the necessary docs.

You're going to have to use some sort of AJAX library (or vanilla js ajax) to send the information to a http endpoint you set up in express. For simple stuff the jquery ajax methods will do just fine. You will likely are looking to make a POST request.
As for the MySql code, checkout Sequelize. Its a cool library for interacting with sql databases from express. Its similar to how mongoose works for mongo.

Related

Share Oracle database connection in NodeJS for MVC architecture

I'm quite new with the implementation of Oracle database with Node.js, currently I'm using oracledb library to connect my Node.js app to my Oracle database as follows
connection = await oracledb.getConnection({
user: "SYS",
password: password,
connectString: "localhost:1522/userdb",
privilege: oracledb.SYSDBA
});
I set everything up as a monolithic app(It's a simple user review app) to start, but I want to split the code in User and Review Controller, the same for the service, model for both objects.
The only problem I have now (That I know of), is that I am not able to make each model (User and Review) to take that connection and simply send a query depending on what the controller needs. I tried to create a separate db.js file and set the connection there and then use
class DBConnection {
constructor() {
this._connect();
}
async _connect() {
try {
connection = await oracledb.getConnection({
user: "SYS",
password: password,
connectString:process.env.DATABASE,
privilege: oracledb.SYSDBA
});
} catch (err) {
console.log(err.message);
}
}
}
module.exports = new DBConnection();
Then I would try to import it and use something like:
connection= DBConnection();
connection.execute(query);
But it has not worked, is there any way to do this?

Nodejs controller is being messy

I'm new to javascript, node.js (or backend at all). I am trying to create a controller for the login page requests and I am confused about getting data from the MYSQL table and User Authentication and working with JWT package !
In my Controller, I first check if the user input is available in the user table (with a simple stored procedure), then I compare the database password and the user input, after this I want to create a token and with limited time. (I have watched some tutorial videos about JWT and there is no problem with it), my main problem is to figure out how to write a proper controller with this functions?
I have 2 other questions:
1.Is it the right and secure way to get data from MySQL table inside the route? Or should I create a JS class for my controller? (I'm a bit confused and doubtful here)
2.Assuming that comparePassword() returns true, how can I continue coding outside of the db.query callback function scope? Because I have to execute comparePasssword() inside db.query callback
loginController.js :
const { validationResult } = require('express-validator');
const bcrypt = require('bcrypt');
const db = require('../../sqlConnection')
let comparePassword = (dbPass, inputPass) => {
bcrypt.compare(inputPass, dbPass, function(err, result) {
console.log(result)
});
}
// for get request
exports.getController = (req, res) => {
res.send('login')
}
// for post request
exports.postController = (req, res) => {
let errors = validationResult(req)
if(!errors.isEmpty()) {
res.status(422).json({ errors: errors.array() })
}
// find data from MYSQL table
let sql = `CALL findUser(?)`
db.query(sql, [req.body.username], (err, res) => {
if(err) console.log(err)
//console.log(Object.values(JSON.parse(JSON.stringify(res[0]))))
var data = JSON.stringify(res[0])
data = JSON.parse(data).find(x => x)
data ? comparePassword(data.password, req.body.password) : res.status(400).send('cannot find
user')
})
res.send('post login')
}
login.js :
const express = require('express')
const router = express.Router()
const { check } = require('express-validator');
const loginCont = require('../api/controllers/loginController')
router.route('/')
.get(
loginCont.getController
)
.post(
[
check('username').isLength({min: 3}).notEmpty(),
check('password').isLength({min: 4}).notEmpty()
],
loginCont.postController
)
module.exports = router
In my point of view, looks like there is no easy answer for your question so I will try to give you some directions so you can figure out which are the gaps in your code.
First question: MySQL and business logic on controller
In a design pattern like MVC or ADR (please take a look in the links for the flow details) The Controllers(MVC) Or Actions(ADR) are the entry point for the call, and a good practice is to use these entry points to basically:
Instantiate a service/class/domain-class that supports the request;
Call the necessary method/function to resolve what you want;
Send out the response;
This sample project can help you on how to structure your project following a design pattern: https://riptutorial.com/node-js/example/30554/a-simple-nodejs-application-with-mvc-and-api
Second question: db and continue the process
For authentication, I strongly suggest you to take a look on the OAuth or OAuth2 authentication flow. The OAuth(2) has a process where you generate a token and with that token you can always check in your Controllers, making the service a lot easier.
Also consider that you may need to create some external resources/services to solve if the token is right and valid, but it would facilitate your job.
This sample project should give you an example about how to scope your functions in files: https://github.com/cbroberg/node-mvc-api
Summary
You may have to think in splitting your functions into scoped domains so you can work with them in separate instead of having all the logic inside the controllers, then you will get closer to classes/services like: authenticantion, user, product, etc, that could be used and reused amount your controllers.
I hope that this answer could guide you closer to your achievements.

How to render page with a response data from node js to React js?

I am new to React with node
Now I want to send data from node js(backend) to React js with response data. Actually, my situation is after signup from Google authentication I want to send that data to a React js (frontend).
router.get(
'/auth/google/callback',
passportGoogle.authenticate('google', {
failureRedirect: '/',
}),
(req, res) => {
const nameFirst = req.user.profile._json.displayName;
const picture = req.user.profile._json.image.url;
const email = req.user.profile.emails[0].value;
const id = req.user.profile.id;
const user = new User({
user_token: id,
name: nameFirst,
email: email,
picture: picture,
provider: 'Google',
dateSent: Date.now(),
});
User.findOne({ email: email }, (err, docs) => {
if (docs != null) {
// already exist
} else {
// send data `user` with routing [routing to /signupnext,]
}
});
What you are describing composes an issue between computer systems: how to communicate.
Using JSON and REST, you can develop a REST endpoint as a node service.
All a REST endpoint is, is an HTTP Service Adress that behaves in a specific way.
What you need to do, is develop a REST Endpoint within your Node application and call that endpoint using your React application.
You cannot just "Send" the data to a client application, the application has to request it.
If you re-write your call so that your React.JS calls an endpoint, Node.JS authenticates and returns the result back to React, that should work for you.
More information on Node rest endpoints: https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

pass the credentials of user to all views node.js

I'm trying to build an android application using node.js web services,the first interface allow the user to connect to a host using ip address,login and password, so he can get all the databases,i want to save the object credentials to use in all other routes,i tried express-session but it didnt worked.
Any solution?
app.post('/connect',function(req,res){
sess=req.session;
sess.user=req.body.user;
sess.password=req.body.password;
sess.server=req.body.server;
sess.database=req.body.database;
console.log(sess)
user = req.body.user;
password = req.body.password;
server = req.body.server;
database = req.body.database;
var config = {
user: user,
password: password,
server: server,
database: database
};
// connect to your database
sql.connect(config, function (err) {
if (err) {res.json({success: false, message: "error connexion to SQL Server"});
sql.close()}
else{
res.json({success: true, message: "connexion established to SQL Server"});
sql.close();
}
});
});
In your case the request make by http lib of android (or another) which is not a browse then express-session will not work. Your server must be like a API server, client(android) request login server response a token (api key or the same), in next request client push data embeded token and server side can credentials the request. I suggest read about JWT (Json Web Token) to do this.
This is easy if you are using express module in node application.
You basically create routes using express and can pass the required data to the appropriate routes and views as follows
router.get('/', function(req, res, next) {
res.render('category',
{
videodata: vd
});
});
Here while rendering the response, the data that is to be passed is also included. It's name is videodata and value is vd

Sending data to Database in React.js web application

I'm creating a web application and I'm curious how to send data to MySQL database in it. I have a function that is invoked when user presses button, I want this function somehow to send data to the MySQL server. Does anyone know how to approach this problem? I tried npm MySQL module but it seems the connection doesn't work as it is client side. Is there any other way of doing it? I need an idea to get me started.
Regards
You will need a server that handles requests from your React app and updates the database accordingly. One way would be to use NodeJS, Express and node-mysql as a server:
var mysql = require('mysql');
var express = require('express');
var app = express();
// Set up connection to database.
var connection = mysql.createConnection({
host: 'localhost',
user: 'me',
password: 'secret',
database: 'my_db',
});
// Connect to database.
// connection.connect();
// Listen to POST requests to /users.
app.post('/users', function(req, res) {
// Get sent data.
var user = req.body;
// Do a MySQL query.
var query = connection.query('INSERT INTO users SET ?', user, function(err, result) {
// Neat!
});
res.end('Success');
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});
Then you can use fetch within a React component to do a POST request to the server, somewhat like this:
class Example extends React.Component {
constructor() {
super();
this.state = { user: {} };
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('/users', {
method: 'POST',
data: {
name: self.refs.name,
job: self.refs.job
}
})
.then(function(response) {
return response.json()
}).then(function(body) {
console.log(body);
});
}
render() {
return (
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="Name" ref="name"/>
<input type="text" placeholder="Job" ref="job"/>
<input type="submit" />
</form>
);
}
}
Keep in mind that this is only one of infinite ways to achieve this.
It depends on how your application is organized, I will guess that you have a server that provides your React application code.
I would advise you to send the necessary information to your server (if there is any) using a module based on your preferences:
fetch built-in XHR api (https://developer.mozilla.org/en/docs/Web/API/Fetch_API)
request callback-based npm module (https://www.npmjs.com/package/request)
axios promise-based npm module (https://www.npmjs.com/package/axios)
If you are looking for a module/plugin doing all the work from client to database I don't know any and not sure there is because it is usually advised to use a proxy (a server to redirect but also to format or block requests between your client and the database).
Then, in your server you format the necessary information (if any) to be usable by your MySQL database, and then contact your MySQL database with the module of your choice, the first most popular module seems to be:
https://www.npmjs.com/package/mysql, but if you know another one or have other preferences go on. (For example with MongoDB we can use Mongoose to make requests easier)

Categories

Resources