I'm trying to make a webpage that interacts with JavaScript and sends JSON data to Rust functions, then renders the www files. The structure of my project is:
/..
/src
/www
|___index.html
|___/css
| |__style.css
|
|___/javascript
| |__javascript-supp.js
|___/images
|__myImg.png
main.rs
use nickel::{Nickel, HttpRouter, StaticFilesHandler, NickelError, Request, Response,
MiddlewareResult};
use std::collections::HashMap;
fn tmpl_handler<'a>(_: &mut Request, res: Response<'a>) -> MiddlewareResult<'a> {
let mut data = HashMap::<&str, &str>::new();
// add data for render
// name = {{ name }} in template
data.insert("name", "Nickel");
res.render("www/", &data)
}
fn main() {
let mut server = Nickel::new();
server.utilize(StaticFilesHandler::new("www/"));
server.get("/login/*", tmpl_handler);
server.listen("127.0.0.1:6767");
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src=javascript/javascript.js></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Encryptor Test</title>
</head>
<body>
<div class=header>
<h1>
Hello {{ name }}!
</h1>
</div>
<div class=main-row>
<div class="col-3 menu">
<ul>
<li>Login</li>
<li>Download File</li>
<li>Upload File</li>
<li>Exit</li>
</ul>
</div>
<div class="col-9 context-area">
</div>
</div>
<div class=footer></div>
</body>
</html>
This code is working until:
server.utilize(StaticFilesHandler::new("www/"));
I want to send the data $name = "Nickel" and render the index.html.
How do I render the whole www/ directory so that after visiting 127.0.0.1:6767/login the whole page will be there (JS, CSS and images) and not just plaintext?
I can provide the CSS file on request.
You have to re-utilize the www directory after the GET request:
server.get("/login", tmpl_handler);
server.utilize(StaticFilesHandler::new("www/"));
is working... even if it doesn't seem really good.
Related
I am just learning Rust's Rocket however when I compile the code, I get errors mentioned below. I am just trying to pass values to my templates variable from my rust file.
I have a src/main.rs file with following code:
#[macro_use] extern crate rocket;
use rocket_dyn_templates::{Template, context};
#[get("/")]
fn home() -> Template{
Template::render("index",context!{
title : "Hello, World",
logged_in : true,
user_name: "test"
})
}
#[launch]
fn rocket() -> _ {
rocket::build()
.mount("/", routes![home])
.attach(Template::fairing())
}
Inside templates/index.html.tera I following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<header>
<nav>
<div>
<h1>Test</h1>
</div>
<!-- Add navigation bar here !-->
<ul>
<li>
About
</li>
<li>
Edit Page
</li>
<li>
{% if logged_in %}
{{user_name}}
{% else %}
Login
</li>
</ul>
</nav>
</header>
<main>
<!-- Provide Title for your page here !-->
<h1>{{title}}</h1>
</main>
however when i compile the code i am greeted with following errors:
41 | </html>
| ^---
|
= expected tag or some content
Template initialization failed. Aborting launch.
Error: Rocket failed to launch due to failing fairings:
Templating
thread 'main' panicked at 'aborting due to fairing failure(s)',
I think you are forgetting to close some tags in the html/Tera code and that is why you are getting this error.
You are forgetting to close body, html, and the {% endif %} for the structure control
I modified the html code to something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<header>
<nav>
<div>
<h1>Test</h1>
</div>
<!-- Add navigation bar here !-->
<ul>
<li>
About
</li>
<li>
Edit Page
</li>
<li>
{% if logged_in %}
{{user_name}}
{% else %}
Login
{% endif %}
</li>
</ul>
</nav>
</header>
<main>
<!-- Provide Title for your page here !-->
<h1>{{title}}</h1>
</main>
</body>
</html>
and it works now
I am using thymeleaf for my front end design ,I create a nav bar and
I want this nav bar work for all pages, my Requirement is make one nav
bar and use this nav bar in every page ,with out define another nav
bar in separate page .
I create a nav bar inside my fragments folder that situated inside
template folder
When i call my nav bar in my index page it is not working
Here is my code of index page
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Coursel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid">
here my register form codes
</div>
</body>
</html>
nav.html
<nav class="nav">
<a class="nav-link active" th:href="#{/templates/index.html}">Active</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Register</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Login</a>
<a class="nav-link active" th:href="#{/templates/index.html}">AboutUs</a>
</nav>
Here is my project structure
I use IntelliJ IDEA as code editor.
It is possible, look into Thymeleaf Layout Dialect.
In short:
you create some layout.html in your templates folder. In it:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- all common head tags - meta etc. -->
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
<nav>
<!-- your nav here -->
</nav>
<section layout:fragment="content">
<!-- don't put anything here, it will be replaced by the page contents -->
</section>
</body>
</html>
And in you page templates:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/path/to/layout.html}">
<head>
<title>Page name</title>
</head>
<body>
<section layout:fragment="content">
<p>This will be added into your layout!</p>
</section>
</body>
</html>
In order to make it work, you will need to add it to your templateEngine() bean definition:
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
templateEngine.addDialect( new LayoutDialect() );
return templateEngine;
}
See mvnrepository to import this dialect using maven.
I am trying to read my index.html file from my server.js in order to add a new that links to a new html file I generate. I am using the POST method to do this and can successfully generate the new HTML file, however I am not sure how I can add a new inside the index.HTML.
Here is my server.js:
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
element = elementObj.elementName;
elementSymbol = elementObj.elementSymbol;
elementAtomic = elementObj.elementAtomicNumber;
elementDescription = elementObj.elementDescription;
let newElement = fs.createWriteStream(`./public/${element}.html`);
newElement.write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements - ${element}</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>${element}</h1>
<h2>${elementSymbol}</h2>
<h3>Atomic number ${elementAtomic}</h3>
<p>${elementDescription}</p>
<p>back</p>
</body>
</html>`);
let indexElements = document.querySelector('#elements');
let li = document.createElement('li');
let a = document.createElement('a');
a.setAttribute('href', `/${element}.html`);
let elem = document.querySelector(`a[href = "/${element}.html"]`);
elem.innerHTML = `${element}`;
indexElements.appendChild(li);
li.appendChild(a);
res.end(data);
});
}
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
The result I want in my newly, modified index.html (new 'Boron' <li> added):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
<li>
Boron
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
Your question doesn't make it clear exactly what you're trying to do, but if these are your requirements:
You want to have an HTML template on disk.
That you can insert some content into based on some dynamic data.
You can't use anything other than plain node.js http server (so no existing template engines).
Then, you essentially have to build your own little template engine. You can do that by reading the file into memory and then doing some sort of search/replace on some markers in the file to insert your content and then send that newly formed content. Here's a general idea for how to do that:
Contents of template.html file on disk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id='elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
<!-- new elements -->
</ol>
<script src="../../server.js"></script>
</body>
</html>
Server code for handling the POST
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
let element = elementObj.elementName;
let elementSymbol = elementObj.elementSymbol;
let elementAtomic = elementObj.elementAtomicNumber;
let elementDescription = elementObj.elementDescription;
fs.readFile("template.html", function(err, data) {
if (err) return res.status(500).end();
// build new content
let newContent = "<li><a href=${element}.html>${element}</a></li>";
data = data.replace(/<!-- new elements -->/, newContent);
res.send(data);
});
});
});
I have just attempted to make a SPA but i am not able to resolve index.html dependencies (like including associated css, js files). All the js and css file are not able to load into browser and show 404 error in dev console.
/root
|
|__public
| └── spa
| ├── controllers
| ├── css
| ├── html
| ├── js-self
| ├── js-vendor
| └── services
|_____________ index.html
Route declaration
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : 'public',
index: false
}
}
}
}
Order of all routes
info: ================Registered routes=============
info: Route: GET /employee
info: Route: POST /employee
info: Route: PUT /employee
info: Route: DELETE /employee
info: Route: POST /signin
info: Route: POST /signup
info: Route: POST /signout
info: Route: GET /{param*}
info: Route: GET /
info: =============================================
Html file
<!DOCTYPE html>
<!-- saved from url=(0058)http://getbootstrap.com/examples/starter-template/#contact -->
<html lang="en" ng-app="ibs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<script src="./public/spa/js-vendor/jquery-2.1.3.min.js"></script>
<script src="./public/spa/js-vendor/angular-1.3.14.js"></script>
<script src="./public/spa/js-vendor/angular-route.js"></script>
<script src="./public/spa/app.js"></script>
<link href="./public/spa/css/signin.css" rel="stylesheet">
<link href="./public/spa/css/bootstrap.min.css" rel="stylesheet">
<link href="./public/spa/css/starter-template.css" rel="stylesheet">
<style type="text/css" media="screen">
.appbkg {
background: #303F9F
}
</style>
</head>
<body class="appbkg">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://getbootstrap.com/examples/starter-template/#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" ng-view>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./public/spa/js-vendor/bootstrap.js"></script>
</body></html>
I made it work with this little edit:
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : './',
index: false
}
}
}
}
the ./ path is actually relative to where you are when you run node app.js.
So make sure you are in the root folder when you run it. As node ../app.js doesn't work !!
Since that's not very clean, avoid using paths that way and stick to using path.join(__dirname, 'path/to/folder') with __dirname as a reference.
Here is a cleaner solution for you
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : path.join(__dirname, '../..'),
index: false
}
}
}
}
Note from node's docs
__dirname is :
The name of the directory that the currently executing script resides in.
I am using angular along with node.
I am using routes to redirect page.
Onto my html page i have defined 2 links as:
<!DOCTYPE html>
<html >
<head>
<title>My Angular App!</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="../public/javascript/angular-route.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="/webstorm1/app.js"></script>
<script src="../controllers/registration.js"></script>
</head>
<body>
<div ng-app="test">
<a ng-href="#/login">Login</a>
<a ng-href="#/register">Register</a>
</div>
<div ng-view></div>
</body>
</html>
and onto the app.js file i have defined the route as:
var test = angular.module('test', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
console.log('test');
$routeProvider.when('/register',
{
templateUrl: '/webstorm1/partials/register.html',
controller: 'registration'
});
$routeProvider.when('/login',
{
templateUrl: '../partials/login.html',
controller: 'login'
});
});
when i run the html file and click on register link, it prints the 'test', but doesnot show the page on browser.
Your <div ng-view></div> is outside of <div ng-app="test"> scope.
<div ng-app="test"> <!-- ng-app starts -->
<a ng-href="#/login">Login</a>
<a ng-href="#/register">Register</a>
</div> <!-- ng-app ends -->
<div ng-view></div> <!-- outside from ng-app -->
Simply put that ng-app="test" to some parent element like body or html to make all elements inside their scope.