Node.js中的jQuery方法

Question

刚刚开始在node.js中进行编码。 我做了几页（登录，注册，博客等）。

如果要在以下位置使用效果：1.将鼠标悬停在“新闻”按钮上，则会出现一个滑块，

要在ejs标记中修改图像（例如<％blog.image％>）（我认为我不能在这里使用CSS）。
如果用户单击按钮（或任何其他事件），则要执行某些操作。
现在在我的项目中，如果用户单击“登录”，它将带他进入“ /登录”页面。 我用Google搜索“弹出式登录表单”，大多数教程都是针对jQuery的。
使用jQuery时，会出现错误：“ jQuery需要一个窗口”，因此我使用了jsdom，但转向了cheerio（许多用户推荐了它）。 我浏览了该文档，但找不到“单击”事件方法。 如何完成上述任务？

注意：我不要求上述任务的特定代码。 我已经在jQuery的前端完成了这些。 我只想知道如何在node.js中使用jQuery。

Answer 1

在这里，您已将Node js用作网络服务器，它仅负责根据您的要求为您提供服务。 从页面到静态资产，包括图像，字体，css甚至js文件。

例如，当您要用户登录时，您已将索引页面配置为具有“登录”链接，从而使他进入/ login路由：

app.get('/', function(req, res){
  res.render('index', { title: 'home' });
});

index.ejs

<!DOCTYPE html>
<head>
  <title><%= title %></title>
</head>
<html>
  <body>
    <a class="btn" href="/login">LOGIN</a>
  </body>
</html>

现在，当您对http://yourdoamin.com/节点进行请求时，该索引页面将为您服务。 但是此页面是一个简单的页面，没有样式或脚本编写，但您希望使用jQuery与页面进行交互。 因此，让我们将节点配置为也通过我们的索引页面提供jQuery：

app.use(express.static(__dirname + '/public'));

并使用所需的样式和脚本制作公用文件夹：

/public
  /css
    bootstrap.css
    myStyles.css
  /js
    jQuery.js
    bootstrap.js
    myScripts.js
  /images
  /fonts

并在index.ejs中包括这种样式和脚本：

<!DOCTYPE html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/bootstap.css">
  <link rel="stylesheet" href="/css/myStyles.css">
</head>
<html>
  <body>
    <a class="btn" href="/login">LOGIN</a>
    <!-- scripts -->
    <script src="/js/jQuery.js"></script>
    <script src="/js/myScripts.js"></script>
  </body>
</html>

现在，当我向带有索引页的http://yourdoamin.com/发出请求时，node还将向客户端提供jQuery ，因为它知道如何提供静态资产。 （尽管您可以使用CDN代替jquery静态文件）

现在，您可以在clinet端代码上使用jQuery，例如，当用户单击“登录”时，默认行为是转到后端节点提供的“ / login”页面，但是现在您可以阻止它在客户端显示它们是弹出式（模态或对话框）登录表单（在这里，我使用了引导模态）：

myScripts.js

$('.btn').click(function(event) {
  event.preventDefault();
  var modalTemplate = $('#modalTemplate').html();
  $('#modal').html(modalTemplate);
  $('#modal').modal('show');
});

index.ejs

<!DOCTYPE html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/bootstap.css">
  <link rel="stylesheet" href="/css/myStyles.css">
</head>
<html>
  <body>
    <div id="#modal" class="modal fade"></div>
    <a class="btn" href="/login">LOGIN</a>

    <!-- scripts -->
    <script src="/js/jQuery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/myScripts.js"></script>

    <!-- client-side tempates -->
    <script type="text/template" id="modalTemplate">
      <div class="modal-dialog">
        .
        <!-- look into bootstrap documentation -->
        .
      </div>
    <script>
  </body>
</html>

这些是渐进增强的原则。 如您所见，当单击“登录”时，我们会将其发送到登录页面，但是如果它们具有现代的浏览器（已启用javascript），则会向他们显示模式登录表单。

在这里，我们手动完成了所有客户端编码。 您的myScripts.js文件以及您的客户端模板越来越大。 这就是为什么有Angular ， Ember以及其他客户端框架和工具（例如骨架， react ，...）

Node.js中的jQuery方法

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-01-22 13:28:20

Node.js中的jQuery方法

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-01-22 13:28:20

解决方案1
2 已采纳 2017-01-22 13:28:20