用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;
}
 
05-17 05:21