如何在Node.js中使用Use Cheerio更改CSS属性?

时间:2018-08-23 19:02:05

标签: javascript node.js jsdom

我在节点应用程序中有以下以ejs格式显示的页面,我想在事件完成时显示此处给出的模式,而在同一位置,我想使用cheerio的jsdom显示模式,这是我正在谈论的页面在另存为home.ejs:-

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css" >
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="/css/style2.css">


    <title>Datadock</title>
  </head>
  <body>
     <nav class="navbar my-navbar navbar-expand-lg navbar-light bg-light fixed-top">
 <!-- <a class="navbar-brand" href="#">Company Logo</a>-->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">HOME </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">ABOUT US</a>
      </li>

      <li class="nav-item">
        <a class="nav-link " href="#services">OUR SERVICES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="/careers">CAREERS</a>
      </li>

     <!-- <li class="nav-item">
      <a class="nav-link" href="/contact">CONTACT US</a>
      </li>-->
    </ul>
 </div>
</nav>

<div id="main">
<div id="carouselExampleControls" class="carousel carousel-fade my-carousel slide " data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active ">
      <img class="d-block w-100" src="/images/coverpic.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block animated zoomIn">
       <h1 class=""><a href="#services">Data warehousing</a></h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/images/coverpic2.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block animated zoomIn">
        <h1 class=""><a href="#services">Cloud computing</a></h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/images/coverpic3.jpg" alt="Third slide">
      <div class="carousel-caption d-none animated zoomIn ">
        <h1 class=" "><a href="#services">Expert Database services</a></h1>
      </div>
    </div>
    <div class="carousel-item">
     <img class="d-block w-100" src="/images/coverpic5.jpg" alt="Fourth Slide">
      <div class="carousel-caption d-none animated zoomIn ">
        <h1 class=" "><a href="#services">Data Analytics</a></h1>
      </div>
      </div>
      <div class="carousel-item">
     <img class="d-block w-100" src="/images/coverpic6.jpg" alt="Fifth Slide">
      <div class="carousel-caption d-none animated zoomIn ">
        <h1 class=" "><a href="#services">Data Engineering</a></h1>
      </div>
    </div>
    <div class="carousel-item">
     <img class="d-block w-100" src="/images/coverpic7.jpg" alt="Fifth Slide">
      <div class="carousel-caption d-none animated zoomIn ">
        <h1 class=" "><a href="#services">Consulting</a></h1>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

<section id="about">
 <h1><u>About us</u></h1>
   <div class="container">
  <p class="lead">Datadock is an upcoming firm which partners with industries ,helping them in data realted services (from database storage to analysis) helping them to increase revenue and productivity .Datadock is focused on quality,speed of execution,value and above all customer satisfaction.<br> We have designed , implemented and managed critical business applications,databases adn systems for small scale as well as large scale industries .Our clients have varied from media,entertainment,technology,farming,etc.<br> Our Solutions will help you to take the first step to create first matured process environment and get you on process-driven implement path. </p>
   </div>
  </section>
<Section id="services">
 <h1><u>Our Services</u></h1>
 <div class="container">
   <div class="row">
     <div class="col-md-4 col-sm-12 col-xs-12">
       <section id="service">
        <img src="images/dataana.jpg" class="img-thumbnail">
         <h3>Data Engineering</h3>
         <p>Data is almost useless if not put to the best use. With the ongoing operations to make your business flourish, our team of Data Engineers</p>
        <a href="/dataeng" ><button type="button" class="btn btn-danger mx-auto d-block" >Read More</button></a>
        </section>    
      </div>

       <div class="col-md-4 col-sm-12 col-xs-12">
          <section id="service">
         <img src="images/database.jpg" class="img-thumbnail">
        <h3>Database modernization</h3>
        <p>Super charge your performance by upgrading your databases. Are your databases missing the latest features
and performance benefits?</p>
      <a href="/databasemod">  <button type="button" class="btn btn-danger mx-auto d-block" >Read More</button></a>
        </section>
       </div>
       <div class="col-md-4 col-sm-12 col-xs-12">
         <section id="service">
        <img src="images/cloud.jpg" class="img-thumbnail">
        <h3>Data Warehousing</h3>
        <p>With the amount of data coming in from heterogeneous sources that support analytical reporting, structured and/or ad hoc queries,</p>
        <a href="/datawar">  <button type="button" class="btn btn-danger mx-auto d-block" >Read More</button></a>
        </section>
       </div>

   </div>

   <div class="row">
     <div class="col-md-4 col-sm-12 col-xs-12">
      <section id="service">
    <img src=" images/dataeng.jpg" class="img-thumbnail">
     <h3>Database Support</h3>
     <p>Get the support you need for your business so your valuable resoures could be left with the needed focus on primarily 
revenue generation efforts</p>
       <a href="/databasesup"> <button type="button" class="btn btn-danger mx-auto d-block">Read More</button></a>
      </section>
     </div>

     <div class="col-md-4 col-sm-12 col-xs-12">
      <section id="service">
     <img src=" images/cloudconsulting.jpg" class="img-thumbnail">
      <h3>Cloud/AWS implementation</h3>
      <p>Are you a medium to medium large sized organization? Save costs while choosing cloud technologies that match your
infrastructure</p>
       <a href="/cloudser"><button type="button" class="btn btn-danger mx-auto d-block">Read More</button></a>  
      </section>
    </div>
     <div class="col-md-4 col-sm-12 col-xs-12">
      <section id="service">    
    <img src="images/consulting.jpg" class="img-thumbnail">
      <h3>Consulting</h3>
      <p>The ever changing dynamics of business requires a constant vigil in keeping your company policy as a priority .</p>
       <a href="/consulting"> <button type="button" class="btn btn-danger mx-auto d-block">Read More</button></a>
      </section>
    </div>
     </div>
   </div>
 </div>
</section>
 <section id="contact">
  <h1><u>Contact Us</u></h1>
  <div class="container" style="padding-top:20px">
    <div class="row">
     <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="card" style="margin-top:60px">
         <div class="card-header">
          <h3><u> Reach out us</u></h3>
          <hr>
          <div class="card-body">
           Phone:-+91-123456789
           <br>
           Email:-contact@johndoe.com
         </div>
         </div>
        </div>
     </div>
     <div class="col-md-6 col-sm-12 col-xs-12">
         <h3 style="color:white"><u>Send Us An Enquiry</u></h3>
       <form action="/sendemail" method="POST">
        <div class="form-group">
          <input type="email" class="form-control" aria-describedby="email Help" placeholder="Email Id *" name="email">
        </div>
        <div class="form-group">
          <input type="name" class="form-control"  aria-describedby="name Help" placeholder="Name *" name="name">
        </div>
        <div class="form-group">
         <input type="phone" class="form-control"  aria-describedby="Phone Help" placeholder="Contact no. *" name="phone">
        </div>
        <div class="form-group">
         <textarea type="message"  class="form-control" rows="3" placeholder="Write your enquiry *" name="message"></textarea>
        </div>
        <div class="form-group text-center">
         <button type="sumbit" class="btn btn-primary">Send</button>
        </div>
       </form>
     </div>
    </div>
  </div>

</section>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!--modal-ends-->
<footer id="footer">
 <div class="container">
  <div class="row">
  <div class="col-md-6 col-xs-12 col-sm-12">
     <p class="lead"> © Datadock llp</p>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
   <h3>  <u>Follow us</u></h3>
       <div class="row">
         <a href=""> <img src="images/facebook.png" alt="" class="img-thumbnail"></a>
         <a href=""> <img src="images/instagram.png" alt="" class="img-thumbnail"></a>
          <a href=""> <img src="images/linkedin.png" alt="" class="img-thumbnail"></a>
         <a href="">  <img src="images/twitter.png" alt="" class="img-thumbnail"></a>

       </div>
  </div>

  </div>

 </div>
  </footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script>
    $('.carousel').carousel({
  interval: 2000
})
    </script>
  </body>
  </html>

这是我的代码,我想在其中使用模态重新加载页面,以显示使用jsdom读取并执行模态的模态中错误消息的成功:-

app.post('/sendemail',(req, res) => {
  const output = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>  ;
      <li>Name: ${req.body.name}</li>
      <li>Email: ${req.body.email}</li>
      <li>Phone: ${req.body.phone}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
  `;

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({service: 'gmail ',

auth: {
user: 'atul.11192@gmail.com',
pass: 'xxxxxxxxx'
},
    tls:{
      rejectUnauthorized:false
}
  });

  // setup email data with unicode symbols
  let mailOptions = {
      from: '"Enquiry from datadock" <atul.11192@gmail.com>', // sender address
      to: 'atul.11192@gmail.com', // list of receivers
      subject: 'Datadock Enquiry ', // Subject line
      text: 'Hello world?', // plain text body
      html: output // html body
  };

  // send mail with defined transport object
  transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
          return console.log(error);
         //code to be inserted to show error
      }
     //code to be inserted to show success
  });
});

有人可以告诉我如何使用cheerio或jsdom创建此类功能吗?

0 个答案:

没有答案