Node.js中的jQuery方法

Question

Just started coding in node.js . 刚刚开始在node.js中进行编码。 I made a few pages (login,signup,blog etc). 我做了几页（登录，注册，博客等）。

If I want an effect where : 1. I hover over the "News" button, a slider appears down, 如果要在以下位置使用效果：1.将鼠标悬停在“新闻”按钮上，则会出现一个滑块，

To modify image in an ejs tag ( eg. <% blog.image %>) (I don't think I'll be able to use css here). 要在ejs标记中修改图像（例如<％blog.image％>）（我认为我不能在这里使用CSS）。
To do something if the user clicks a button (or any other event). 如果用户单击按钮（或任何其他事件），则要执行某些操作。
Right now in my project, if user clicks on "Login", it takes him to the "/login" page. 现在在我的项目中，如果用户单击“登录”，它将带他进入“ /登录”页面。 I googled "popup login form", most tutorials are for jQuery. 我用Google搜索“弹出式登录表单”，大多数教程都是针对jQuery的。
While using jQuery, it gives an error : "jQuery requires a window", so I used jsdom, but shifted to cheerio (many users recommended it). 使用jQuery时，会出现错误：“ jQuery需要一个窗口”，因此我使用了jsdom，但转向了cheerio（许多用户推荐了它）。 I browsed the doc, but couldn't find a "click" event method. 我浏览了该文档，但找不到“单击”事件方法。 How can I accomplish the above mentioned tasks? 如何完成上述任务？

Note : I'm not asking for specific code for the above tasks. 注意：我不要求上述任务的特定代码。 I've done these in front-end with jQuery. 我已经在jQuery的前端完成了这些。 I just want to know how to get started with jQuery in node.js . 我只想知道如何在node.js中使用jQuery。

Answer 1

Here you have used Node js as a webserver and it is only responsible for serving you with what you are asking. 在这里，您已将Node js用作网络服务器，它仅负责根据您的要求为您提供服务。 from pages to static assets includes images, fonts, css and even js files. 从页面到静态资产，包括图像，字体，css甚至js文件。

When you want a user to login for example you have configured your index page to have a "login" link which brings him to a /login route: 例如，当您要用户登录时，您已将索引页面配置为具有“登录”链接，从而使他进入/ login路由：

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

index.ejs index.ejs

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

Now when you do a request to http://yourdoamin.com/ node will serve you with this index page. 现在，当您对http://yourdoamin.com/节点进行请求时，该索引页面将为您服务。 But this page is a simple page no styling nor scripting but you want to interact with your page using jQuery. 但是此页面是一个简单的页面，没有样式或脚本编写，但您希望使用jQuery与页面进行交互。 so lets configure node to also serve jQuery with our index page: 因此，让我们将节点配置为也通过我们的索引页面提供jQuery：

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

and make public folder with stylings and scripts that you want: 并使用所需的样式和脚本制作公用文件夹：

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

And include this styles and scripts with your index.ejs : 并在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>

Now when i do a request to http://yourdoamin.com/ with index page, node will also serve jQuery to client-side because it knows how to serve static assets. 现在，当我向带有索引页的http://yourdoamin.com/发出请求时，node还将向客户端提供jQuery ，因为它知道如何提供静态资产。 ( although you could use a cdn in place of jquery static file ) （尽管您可以使用CDN代替jquery静态文件）

Now you could use jQuery on your clinet-side code, for example when a user clicks "login" the Default behaviour is to go to "/login" page which serves by backend node but now you could prevent it from client-side and show them a popup (modal or dialog) login form ( here i've used bootstrap modals ): 现在，您可以在clinet端代码上使用jQuery，例如，当用户单击“登录”时，默认行为是转到后端节点提供的“ / login”页面，但是现在您可以阻止它在客户端显示它们是弹出式（模态或对话框）登录表单（在这里，我使用了引导模态）：

myScripts.js myScripts.js

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

index.ejs 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>

These are the priciples of Progressive enhancement . 这些是渐进增强的原则。 as you could see when one clicks "login" we send them to login page but if they have a modern browser (enabled javascript) we show them a modal login form. 如您所见，当单击“登录”时，我们会将其发送到登录页面，但是如果它们具有现代的浏览器（已启用javascript），则会向他们显示模式登录表单。

Here we done all our client-side coding manually. 在这里，我们手动完成了所有客户端编码。 your myScripts.js file gets bigger and bigger and also your client side templates. 您的myScripts.js文件以及您的客户端模板越来越大。 thats why out there is Angular , Ember and other client-side frameworks and tools like backbone , react , ... 这就是为什么有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