I've been stuck on this functionality for awhile. I've tried the frontend ways and backend as well. things I've tried doing are sending limited data from backend as response https://youtu.be/vP9fOEAlo74 this video was very close to solving my problem but i couldn't figure it out. I want a path or way to do this in best way possible.
frontend ejs file code:
<%- include("partials/header"); -%>
<% posts.forEach(function(post){ %>
<h2><%=post.title%></h2>
<p>
<%=post.content.substring(0, 440) + " ..."%>
<a class="styleAnchor" href="/posts/<%=post._id%>">Read More</a>
</p>
<% }) %>
<%- include("partials/footer"); -%>
backend code:
app.get("/blogs", function(req,res){
Post.find({}, function(err, posts){
res.render("blogs", {posts: posts});
});
});
the website is currently live on heroku app and data comes from mongodb atlas
feel free to visit to understand.
thank you for your time!
Related
I am loading my website with no errors in the console.
I have taken a static website (that used a little vanilla js for navigation), and tried ejs, templating out the menu page, header, footer, and a reused image path for promos that repeated throughout the website. I had success with this and wanted to repeat the process with the bulky blog section.
Ultimately, I had planned to refactor my blog partials into one template that could call blogs using node's 'fs' module, but my jam up has me at a loss.
Q:Why is my page not completing its render, or rendering blank on two isolated areas of my code?
Using NODEjs Express and EJS. Everything works as would be expected, except, the final blog and the contact form render blank.
I am only using to isolate blogs in their own ejs partial file:
<%- include("../partials/blog0.ejs")%>
The page will stop rendering at "blog3.ejs" and "contact" My vanilla js still operates by using the dom to id.style.display="none" effectively
I have deconstructed and un-nested my partials out of my index.ejs almost back to its original index.html. Everything Renders except for blog3 and contact.
index.js
const express =require('express');
const ejs = require('ejs');
const app = express();
var http = require('http');
var nodemailer = require("nodemailer");
var sass =require('sass');
app.use(express.static('public'));
app.use(express.static('views'));
app.use(express.static('css'));
app.use(express.static('jsFiles'));
app.use(express.static('partials'));
//routes
app.get('/', function(req, res){
res.render('pages/index');
console.log('pages/index hit')
});
app.get('/', function(req, res){
res.render('partial/header');
console.log('partial hit')
})
app.set('view engine','ejs');
console.log('static site!! listening on:3005 started at: '+Date())
console.log('find app on: localhost:3005 ')
app.listen(3005);
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/plain'});
res.end('future api dev here');
}).listen(8080);
index.ejs
<body onload="loader()">
<%- include('../partials/burgerButton.ejs') %>
<%- include('../partials/menu.ejs') %>
<%- include('../partials/header.ejs') %>
<div id="mainContent" class="content">
<!--each blog article. I had them in their own ejs file, but reversed that sonce experiencing my issue-->
<div id="blogIntro" class="blogBody">
<h1>Welcome to
<span class="logoFont"> ValRick Travel's</span>
featured Blogs</h1>
<div class="card">
*blog article*
</div>
</div>
Turns out my old method using vanilla JavaScript was interfering with a display property = "none".
I removed id handlers in my scss and found EJS had been working exactly as I had programmed it.....to hide the until the user called for it.
The error was in my jsFiles during migration from a static vanilla website over to express and ejs.
I need to use Captcha in MEAN js login. I need the simplest possible way to make it work. I saw Visual Captcha but I'm not able to understand where should I use it in the MEAN js application.
I need an offline captcha solution on MEAN js app. I plan to deploy it on a raspberry pi.
You can use google recaptcha with external script file in mean stack page. There is a js code.
https://developers.google.com/recaptcha/docs/display#js_api
Just follow this.
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script> </head> <body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script> </body> ```
I am building simple web app that if the user press button, it will make sound(mp3 file in the server side).
//html file
<script>
function playSound () {
document.getElementById('play').play();
}
</script>
<body>
<audio id='play', src='http://127.0.0.1:1337/', type='audio/mpeg'
<button onclick='playSound()' class='btn btn-danger btn-circle btn-lg'>
<i class='fa fa-5x fa-fire'>
</body>
//app.js
app.get('/music.mp3', function(req, res){
ms.pipe(req, res, "/music.mp3");
});
It works if I insert online source in audio attribute, but it does not serve my local server file. How can I fix this?
Thanks in advance!
To serve static files such as images, CSS files, and JavaScript files, audio, use the express.static built-in middleware function in Express.
app.use(express.static('public'));
I've already answered such type of question. See this answer
This code is supposed to show the uploaded images in the uploads folder which is in the root directory, where the app.js and package.json are. The image path names are saved on upload in a MySQL table. This code doesn't work. Only shows a broken image file and a 500 internal error in Chrome. Firefox doesn't tell me anything in the console but also shows a broken image file. I believe the problem lies in the view because the server side script works perfectly and all the image paths are sent.
router.get('/board', function(req, res){
connection.query('SELECT * FROM posts', function(err, result){
if(err){
throw err
}else{
res.render('board', {print: result});
}
});
});
And here is the view which I believe is the problem.
<% print.forEach(function(posts){ %>
<div class="post-container">
<h2> <%= posts.Title %> </h2>
<hr>
<img class="post-img" src=<%= posts.Img_path %> >
</div>
<% }); %>
Chrome shows me a broken image file and tells me 500 (Internal Server Error) while firefox doesn't tell me anything in the console but also shows a broken image file.
I guess you need to setup the router to be able to find the images folder. Take a look at: http://expressjs.com/starter/static-files.html
I'm using a Node.js Server with Express-Framework installed and have a problem combining two different html-files.
I have a basic template.html file with a <div id="content"> in it. Now I want to include content.html within this div before sending the data to the client.
How can this be done?
I like to use EJS because it's the most straight-forward templating language, but the same idea applies for jade or whatever you might use. To enable this in express after running npm install ejs:
app.engine('.ejs', require('ejs').__express);
When you send your response, run:
res.render('content.html.ejs');
Spit your template.html into views/header.html.ejs and views/footer.html.ejs, and include them in views/content.html.ejs like this:
<% include header.ejs %>
Content Here
<% include footer.ejs %>