• 如何用node.js中的ejs写入页面_以6.19京东秒杀的商品为例


    用erpress搭建好基本框架后,在自己新建的express文件夹下将会生成;bin,public,routes,views,app.js,package.json,node_modules目录哟!,如果没有可以去Express官网下阅读文档下检查有没有按指示在git下安装$ npm install express --save...等命令!

    说明:

    如果要让浏览器自动刷新则可以在package.json下的star对象改成:

    "start": "supervisor ./bin/www"

    要看效果可以在浏览器输入:localhost:3000

    轮播切换九先没写了哟,如果要实现也是一样的原理,记得for嵌套时的使用!

    1.在routes的index.js下写入:

    var express = require('express');
    var router = express.Router();

    /* GET home page. */
    router.get('/', function(req, res, next) {
    res.render('index', {
    title: 'JD秒杀',
    arr:[
    {imgUrl:" <img src='img/shop1.jpg'>",imgTitle:"苹果7plus 128G大促【619主推】",price:"¥2566"},
    {imgUrl:"<img src='img/shop2.jpg'>",imgTitle:"金镶和田玉本命猪年项链丨送礼盒",price:"¥168"},
    {imgUrl:"<img src='img/shop3.jpg'>",imgTitle:"运动裤",price:"¥39.9"},
    {imgUrl:"<img src='img/shop4.jpg'>",imgTitle:" 运动鞋 128G大促",price:"¥158"}
    ]
     
    } );
    });
    module.exports = router;
    2.在views的index.ejs写入:
    <section id="main">
    <h1><%= title %></h1>
    <ul>
    <% for(var i=0;i<arr.length;i++){%>
    <li>
    <div class="image"><%- arr[i].imgUrl %></div>
    <h3><%- arr[i].imgTitle %></h3>
    <span><%- arr[i].price %></span>
    <a href="https://item.jd.com/30528118284.html">立即抢购></a>
    </li>
    <%}%>
    </ul>
    </section>
    3.在public的css的文件夹下新建shoplist.css,写入:
    #main{
    1000px;
    height: 600px;
    /* border: 1px solid #333333; */
    margin: 0 auto;
    margin-top: 50px;
    background: rgba(173, 70, 147, 0.418);
    }

    h1{
    margin-top: 30px;
    100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    }
    ul{
     
    100%;
    height: 500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
     
    }
    ul li{
    height: 430px;
    22%;
    background: #fff;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    }
    ul li div{
    100%;
    height: 300px;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 20px;
    }
    ul li div img{
    100%;
    height: 260px;
    /* border: 1px solid #333333; */
    }
    ul li div img:hover{
    100%;
    height: 260px;
    transform: translate(0,-10px)
    }
    ul li h3{
    80%;
    height: 60px;
    line-height: 30px;
    text-align: center;
    }
    ul li span{
    color: red;
    font-size: 16px;
    float: left;
    }
    ul li a{
    float: right;
    display: block;
    100px;
    height: 30px;
    background: rgba(219, 28, 3, 0.486);
    color: rgb(30, 106, 219);
    font-weight: 800;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    }
     
  • 相关阅读:

    守护线程
    下载图片
    多线程
    self的作用
    设置项目地址环境
    对象 类
    ValueError: urls must start with a leading slash
    mock挡板接口开发
    K&R——第五章 指针与数组
  • 原文地址:https://www.cnblogs.com/robot666/p/11053272.html
Copyright © 2020-2023  润新知