如何使用 jquery、express 和 handlebars 创建无刷新页面?
How to create a no refresh page using jquery, express and handlebars?
我正在学习 express JS,我的问题是:我想使用 NodeJS 创建两个页面,它使用 handlebars 作为模板引擎,但我希望第一页应该使用 res.render('home')
发送,然后第二个页面应该由 jQuery 使用 ajax 调用来调用,以表达并从表达服务器获得 HTML 呈现的响应,然后加载关于页面而不刷新。我尝试使用 this Whosebug question 中显示的方法,但我不满意。请指导我如何实现它。
伙计们,我终于找到了我的问题的答案,我希望它也能帮助到你。按照这些步骤一步一步地使用 jquery、express 和 handlebars 创建一个不刷新的网站。只是一个关于多个事物组合的教程。
1.创建文件夹名称 mywebsite
2。 运行 npm init
并安装以下依赖项
"express-handlebars": "^5.3.4",
"handlebars": "^4.7.7",
"hbs": "^4.1.2"
3。现在使用以下代码创建一个 main.js
文件
const express = require('express')
const app = express();
const static_path = __dirname + "/static"
const hbs = require("hbs");
app.set('view engine', 'hbs');
app.set("views", __dirname + "/pages");
app.use(express.static(static_path));
var exhb = require('express-handlebars').create();
app.get("/", (req, res) => {
res.render('index', { title: "Home Test", pagename: "This is my Home page" });
});
app.get('/getabout', (req, res) => {
exhb.render("pages/about.hbs", { title: "About US page", body: "Body" }).then((html) => {
res.send({ data: html });
}).catch((err) => {
console.log(err);
})
});
app.listen(8080, 'localhost', () => {
console.log("listening at http://localhost:8080")
})
4.现在创建一个带有文件index.js
的静态文件夹并写入以下代码
async function callAbout() {
let data = await fetch('http://localhost:8080/getabout');
let response = await data.json();
console.log(response);
$("html").html(response['data']);
window.history.pushState(
'about us',
'About us',
'/aboutus');
}
5.现在创建一个包含两个文件的页面文件夹 index.hbs
和 about.hbs
index.hbs 将包含以下代码
<!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>
<h1>{{pagename}}</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint assumenda aliquam dolor consectetur recusandae possimus illo praesentium atque nihil exercitationem!
<button onclick="callAbout()">About us</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
about.hbs
将包含以下代码
<!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>
<h1>This is my about us page created using NODE</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo accusamus autem accusantium suscipit, minima blanditiis ducimus quisquam fugiat, eligendi repellendus provident quasi dolores nesciunt laboriosam commodi illum repellat error eos.
{{body}}
</body>
</html>
6.现在 运行 node.js
然后点击 About Us
按钮,看看魔法
希望本教程可以帮助任何尝试完成新事物的人
我正在学习 express JS,我的问题是:我想使用 NodeJS 创建两个页面,它使用 handlebars 作为模板引擎,但我希望第一页应该使用 res.render('home')
发送,然后第二个页面应该由 jQuery 使用 ajax 调用来调用,以表达并从表达服务器获得 HTML 呈现的响应,然后加载关于页面而不刷新。我尝试使用 this Whosebug question 中显示的方法,但我不满意。请指导我如何实现它。
伙计们,我终于找到了我的问题的答案,我希望它也能帮助到你。按照这些步骤一步一步地使用 jquery、express 和 handlebars 创建一个不刷新的网站。只是一个关于多个事物组合的教程。
1.创建文件夹名称 mywebsite
2。 运行 npm init
并安装以下依赖项
"express-handlebars": "^5.3.4",
"handlebars": "^4.7.7",
"hbs": "^4.1.2"
3。现在使用以下代码创建一个 main.js
文件
const express = require('express')
const app = express();
const static_path = __dirname + "/static"
const hbs = require("hbs");
app.set('view engine', 'hbs');
app.set("views", __dirname + "/pages");
app.use(express.static(static_path));
var exhb = require('express-handlebars').create();
app.get("/", (req, res) => {
res.render('index', { title: "Home Test", pagename: "This is my Home page" });
});
app.get('/getabout', (req, res) => {
exhb.render("pages/about.hbs", { title: "About US page", body: "Body" }).then((html) => {
res.send({ data: html });
}).catch((err) => {
console.log(err);
})
});
app.listen(8080, 'localhost', () => {
console.log("listening at http://localhost:8080")
})
4.现在创建一个带有文件index.js
的静态文件夹并写入以下代码
async function callAbout() {
let data = await fetch('http://localhost:8080/getabout');
let response = await data.json();
console.log(response);
$("html").html(response['data']);
window.history.pushState(
'about us',
'About us',
'/aboutus');
}
5.现在创建一个包含两个文件的页面文件夹 index.hbs
和 about.hbs
index.hbs 将包含以下代码
<!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>
<h1>{{pagename}}</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint assumenda aliquam dolor consectetur recusandae possimus illo praesentium atque nihil exercitationem!
<button onclick="callAbout()">About us</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
about.hbs
将包含以下代码
<!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>
<h1>This is my about us page created using NODE</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo accusamus autem accusantium suscipit, minima blanditiis ducimus quisquam fugiat, eligendi repellendus provident quasi dolores nesciunt laboriosam commodi illum repellat error eos.
{{body}}
</body>
</html>
6.现在 运行 node.js
然后点击 About Us
按钮,看看魔法
希望本教程可以帮助任何尝试完成新事物的人