如何用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{

width: 1000px;

height: 600px;

/* border: 1px solid #333333; */

margin: 0 auto;

margin-top: 50px;

background: rgba(173, 70, 147, 0.418);

}

h1{

margin-top: 30px;

width: 100%;

height: 50px;

line-height: 50px;

text-align: center;

}

ul{

 

width: 100%;

height: 500px;

display: flex;

justify-content: space-around;

align-items: center;

overflow: hidden;

 

}

ul li{

height: 430px;

width: 22%;

background: #fff;

/* display: flex;

justify-content: center;

align-items: center; */

}

ul li div{

width: 100%;

height: 300px;

box-sizing: border-box;

padding: 10px;

margin-top: 20px;

}

ul li div img{

width: 100%;

height: 260px;

/* border: 1px solid #333333; */

}

ul li div img:hover{

width: 100%;

height: 260px;

transform: translate(0,-10px)

}

ul li h3{

width: 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;

width: 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;

}