个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在学习 express JS，我的问题是:我想使用 NodeJS 创建两个页面，使用 Handlebars 作为模板引擎，但我希望第一页应该使用 res.render('home') 发送。 , 第二个页面应该由 jQuery 调用，使用 ajax 调用来表达并从 express 服务器获取呈现的 HTML 响应，然后加载一个关于页面而不刷新。我尝试使用 this StackOverflow question 中所示的方法但我并不满意。请指导我如何实现它。
最佳答案
所以伙计们，我终于找到了我问题的答案，希望对你们也有帮助。按照以下步骤一步一步创建一个使用jquery、express和handlebars的无刷新网站。只是一个关于多种事物组合的教程。
1. 创建文件夹名称 mywebsite
2.运行npm init并安装以下依赖项
"express-handlebars": "^5.3.4",
"handlebars": "^4.7.7",
"hbs": "^4.1.2"
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")
})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');
}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>node.js并单击 About Us按钮并查看魔法
关于javascript - 如何使用 jquery、express 和 handlebars 创建无刷新页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69314067/
24
4
0
是否可以将 Handlebars 预编译代码反编译为 Handlebars 模板？ 可能转换成这样: function program2(depth0, data) { var buffer = ''
我知道它被问过很多次，我已经看过答案但不确定我哪里错了。 我查看了 Handlebarsjs 上的文档并遵循了教程，但两次我都遇到了同样的错误。
我有一个普通的 Handlebars 模板，我正在通过 puppeteer 生成 pdf。我能够正常地通过正文访问数据，但似乎无法在 JS 脚本标记中这样做。我的数据看起来像这样。 const con
我有一个问题，有时我想遍历的对象只是一个普通对象，但有时它是一个数组，因为我使用的是 {{#each}} Handlebars built-在助手中。 当对象是一个数组时，它工作得很好，但当它是一个普
我只是对 Handlebars 作为模板解决方案有了更好的了解，并且遇到了一个我不知道如何解决的问题。 我在我的布局中添加了部分，一个用于页眉，一个用于页脚，用于从我的 View 中动态插入脚本。但是
在我的 Handlebars 模板中，我检查变量是否存在，如果存在则呈现一些文本: {{#if foo}} some text {{/if}} 如果 foo 是文本或者 foo 是数字但不是零，这
所以我已经阅读了关于 Handlebars partials 的官方文档. 它指出: In order to use a partial, it must be registered via Hand
我有一个“国家/地区”对象，我将其作为 Handlebars 上下文的一部分传递: { 'hk': {'name': 'Hong Kong', 'someotherprop': 'someother
我有一个广泛的新闻源 (JSON)，但我只需要在主页上向用户显示前三个新闻。有没有办法从第四个开始丢弃？比如: {{#each news}} {{ if index {{title}} - {{d
使用动态部分时有没有办法进行部分故障转移？ Handlebars partials documentation 显示动态部分，并且只显示带有硬编码部分名称的故障转移。 最佳答案 这里有一个 githu
我有一个像这样的文件夹结构: - components/ - foo/ - index.js - foo.handlebars - foo.scss - bar/
我采用了一个带有 Handlebars 的项目，但遇到了让 handlebars 在客户端呈现模板的问题。 基本上，目前的设置方式是模板在服务器端呈现。我现在正处于需要能够使用以下方法在 AJAX 响
如何手动使用预编译的 handlebars.js 模板？ 假设，我们有 source = "Hello, my name is {{name}}" data = { name: "Joe" } 目前，
我正在使用 Handlebars 的运行时构建并尝试使用已注册的部分。我愿意: Handlebars.registerPartial("path/partialname", Handlebars.te
我正在使用 Handlebars 在服务器端渲染代码(无角度/ Ember ) 我还能以某种方式拥有一些东西吗:{{{content}}} 我只想在bolean为true的情况下才拥有CSS类 类似于
在 Handlebars 2+ 中，如何在这样的循环中动态读取属性？ objects是一个对象数组。 keys是一个字符串数组。我想为每个对象循环每个键并放置它的 .foo span 中的值. {{#
我正在尝试创建一个表，该表使用来自JSON文件的对象填充每个表单元格。我的 Handlebars 模板只为每个对象添加了数据。我想完成的是为第5个项目创建一个新行，然后继续填充表格单元格，直到第10个
例如，您可以看到 {{{body}}} 并且在模板中，您可以执行类似 {{data.page.hero.text}} 的操作 有什么我们应该注意的显着差异吗？ 最佳答案 Handlebars HTML
我有两个使用的 Handlebars helper 。 首先是 timeboundset ，它接受一个数组和一个日期字段，并且仅选择和应用落在该日期字段之后的那些元素。 第二个是 sortedset
是否可以在 Handlebars 条件中使用全局变量？我正在编写一个列出很多对象的应用程序，我希望用户能够控制列出哪些详细信息。例如，在人员列表中仅显示名字，如下所示: {{#each people
我是一名优秀的程序员,十分优秀！