estoy aprendiendo NodeJs y expressJs y estoy tratando de aplicar MVC a una aplicacion TODO list, la cuestion es que cree el servidor con express y cree la vista y todo lo tengo corriendo, Al momento de crear el controlador, le hice la logica pero no encuentro como poder conectar el controlador con la vista, me encuentro usando EJs como engine view
Tengo la vista en una carpeta Views/landing.ejs.
Codigo de la vista:
Product App Product App
<div class="container">
<!--App-->
<div id="app" class="row pt-5">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4>Add a product</h4>
</div>
<form id="product-form" class="card-body" action="">
<div class="form-group">
<input
type="text"
name=""
id="name"
placeholder="Product Name"
class="form-control"
/>
</div>
<div class="form-group">
<input
type="number"
name=""
step="0.01"
id="price"
placeholder="product price"
class="form-control"
/>
</div>
<div class="form-group">
<input
type="number"
name=""
value="2019"
min="1900"
max="3000"
id="year"
placeholder="year"
class="form-control"
/>
</div>
<input
type="submit"
value="Save"
class="btn btn-primary btn-block"
/>
</form>
</div>
</div>
<div class="col-md-8" id="product-list"></div>
</div>
</div>
Codigo del controlador:
const express = require("express");
const app = express();
class Product {
constructor(name, price, year) {
this.name = name;
this.price = price;
this.year = year;
}
}
class UI {
addProduct(product) {
const productList = document.getElementById("product-form");
const element = document.createElement("div");
element.innerHTML = `
<div class="card text-center mb-4">
<div class="card-body">
<strong>Product name:</strong> ${product.name}
<strong>Product price:</strong> ${product.price}
<strong>Product year:</strong> ${product.year}
<a class="btn btn-danger text-white">Delete</a>
</div>
</div>
`;
productList.appendChild(element);
}
}
document.getElementById("product-form").addEventListener("submit", function() {
const name = document.getElementById("name");
const price = document.getElementById("price");
const year = document.getElementById("year");
const product = new Product(name, price, year);
const ui = new UI();
ui.addProduct(product);
});
app.get('/',function(req,res) { res.sendFile('index.html'); });
Puede que esto te sirva...