Is there any way using express + swig template for nodeJS to pass variables from the server side to client side javascript? I know it can be done in Jade but I'd rather stick with a template engine that more closely resembles HTML. Thanks for the help guys!
OK I will assume that you could configure your express with consolidate.swig if not please read this link (http://tinyurl.com/kcs8kvy).
Well I didn't find the direct way to pass variable values to client javascript but I have found a workaround.
for instance you're sending an object, in your route at express:
app.get("/", function(req, res){
var myUser = { name: "Obama" };
res.render("index", {user: myUser});
});
then in your index.html file you can create a script tag:
<html>
<body>
<script>
var username = "{{user.name}}";
</script>
<script src="whatever.js"></script>
</body>
</html>
and then in your whatever.js file the username variable will be available with its correct value. I hope that this help you.
To pass json objects from backend server to the template you can do:
var data = {{jsonData|raw|json}}
Related
There is a site that has a page with a form that by submitting the form with the POST method, an HTML page is received and this received page has a LOADING and a few seconds later the LOADING is completed and the data is received. How can I do this in nodejs and get the data?
https://tracking.post.ir/?id=221670002100060770073113
To get you started, you'll need a few things: express, socket.io and some HTML code.
First, you'll need to install 2 essential node packages
npm install express socket.io --save
Secondly, you'll need to create a web server. Below is a very basic example:
const express = require('express'); // Define express
const app = express(); // Define the web app
const server = require('http').createServer(app); // Define the HTTP server
const io = require('socket.io')(server); // Define socket.io
app.get('/my/route', function(req, res) { // Listen for an incoming request
res.sendFile('/path/to/your/loading-page.html'); // Render your HTML loading file
// Load some data
io.emit('data-loaded', 'your-data'); // Emit your data to the client
});
server.listen(3000, () => console.log('Server is online'); // Allow your server to listen for incoming traffic
Now, you need to setup the receiving end (the client). In this example case this is the loading file
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Some HTML code -->
</body>
<script src="/socket.io/socket.io.js"></script> <!-- Don't change this -->
<script>
let socket = io.connect(); // Connect to the server
socket.on('data-loaded', function() { // When the data has been loaded
// Do something with the HTML page
});
</script>
</html>
References:
- express docs
- socket.io docs
Hei, node.js is a JavaScript framework that works in the server-side of web applications. Like PHP.
You'd need to firstly create a node project setting up a node server.
getting started on node
to get POST parameters on node.js, you use request.body.name
where 'name'' stands for the name in the input field you have in the HTML form, just like the example below
<form action="yourAction">
<input type="text" name='yourName'>
<input type="submit" value='form'>
</form>
and in the node.js part, you type something like this
app.get('/yourAction', function(request, response){
console.log(request.body.yourName)
})
I have created a simple page that you login with a service and it gets the accounts username using nodejs. I then give the user a file that look like this:
<html>
<body>
<p>Hello <span id="user">user-placeholder</span></p>
</body>
</html>
Index.js: (assume user is logged in as they are)
app.get('/authorized', functiong(req,res){
console.log(accountInfo.username);
res.sendFile(file);
});
I just want to update the span that has id user with accountInfo.username.
I'm not sure how exactly to update this value.
You should use a template engine like pug by running:
npm install pug --save
Then you index.pug in the views directory
html
body
span Hello
span= user
Then modify your route little bit to look like this:
app.get('/authorized', function (req, res) {
res.render('index', { user: accountInfo.username });
})
For more details https://expressjs.com/en/guide/using-template-engines.html
I've recently switched from XAMPP/LAMP stack to MEAN stack and oh dear, these new things are amazing but I can't wrap my head around this.
In a LAMP stack, if you want to display some variable (like your username from a Database or some dynamic variable like that) you'd do something like this:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<?php echo $some_var; ?>
</body>
</html>
and that's it. At the start of the file, you can pass the data from a Database to the variable and that would be it.
I don't understand how you achieve this in a MEAN stack.
Do I have to use a Template engine like EJS/Pug? If I understand it, I'd do back-end in the same file that Express is (like for example, selecting data from databases) and then I'd do something like this:
app.js
app.set("views", "./views");
app.set("view engine", "pug");
app.get("/", (req, res) => {
res.render("index", {message:"Hi"});
});
Is that how you send data from server→client in a production/deploy environment? Is there a more practical solution to it? Given that pug code is way too different from HTML (for example). Thanks and sorry for my english.
In a MEAN stack, you would use Express as the backend API and pass JSON data to the frontend, which could be Angular, React, Vue, etc.
For templating with Express, this should get you started. Let us know if this helps :)
Sorry guys I am new to node.js and was wondering whether we are allowed to use vue.js within an ejs file.
Yes, we can. Here is a scenario. Let's say you want to render a data Object to ejs file, and you want this data Object be accessible from VueJS.
First, in your controller, you have to render it as a JSON string
res.render("index", { data: JSON.stringify(data) }); in order to access it in your javascript code.
Then, in your VueJS code inside ejs file, you simply access it this way:
var app = new Vue({
el: '#app',
data: {
myData: JSON.parse('<%- data %>')
}
})
Note about <%- tag in your VueJS code, it is necessary in order to output your data properly.
As VueJS can be implemented into existing systems, you should be able to do so yes.
I'm trying to understand how jade template engine works. I would like to open one of my .jade file from the route in my node.js + express.js server passing some variable (for example if a user logs in, I would like to greet him). I know it's possible because I've been pointed to jade for that, but I can't find a good example on jade's github about that.
Does anyone of you already solved this and can help me? Thanks.
route:
app.get('/login', function(req, res){
var usr = new User({username: 'myname'})
res.render('login/success', {
title: 'Welcome',
user: usr
});
});
login/success.jade:
h2 Welcome #{user.username}
or any number of other options. see https://github.com/visionmedia/jade for more help with the templating language.