express + mongodb 搭建一个简易网站 （三）
express + mongodb 搭建一个简易网站 （三）
前面已经实现了基本的网站功能，现在我们就开始开搞一个完整的网站，现在整个网站的UI就是下面的这个样子。
我们网站的样子就照着这个来吧。
1.为了便于维护，还是在views里面再建一个文件夹吧，就叫components吧，这个文件夹中维护的就是我们要用的公共组件。那好，我们就先在
components中新建两个文件header.ejs和footer.ejs。
在header.ejs中添加如下代码：
<div class="header">
<ul class="nav">
<li><a href="/all">所有宝贝</a></li>
<li><a href="/jacket">上衣</a></li>
<li><a href="/pants">下装</a></li>
<li><a href="/discount">清仓区</a></li>
<li><a href="/admin">登录</a></li>
</ul>
</div>
在footer.ejs中添加如下代码：
<div class="footer">
<ul>
<li><a>联系我们</a></li>
<li><a>广告合作</a></li>
<li><a>品牌招商</a></li>
</ul>
</div>
为了保持语义化，在views文件夹下新建all.ejs、discount.ejs、jacket.ejs、pants.ejs四个文件，里面的内容就空着吧，以前的几个文件可以删除了。
all.ejs模板文件对应的是导航中的“所有宝贝”，discount.ejs对应的是导航中的“清仓区”，jacket.ejs对应的是导航中的“上衣”，pants.ejs对应的是导航的“下装”，至于登录页，我们放到后面做。在四个文件中里添加如下代码（四个文件一样）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>website</title>
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" type="text/css" href="/css/public.css">
</head>
<body>
<div class="wrap">
<%include ./components/header.ejs %>
<div class="all_goods">
<ul class="goods">
<% goods.forEach(function(item) {%>
<li>
<img src="<%= item.url %>">
<span class="title"><%= item.title %></span>
<span class="price"><%= item.price %></span>
</li>
<%}) %>
</ul>
</div>
<%include ./components/footer.ejs %>
</div>
</body>
</html>
2.由于模板文件已经改名了，所以路由也需要相应的修改，由于现在还没有连接到数据库，所以先用使用假数据测试，
在routes文件中找到app.js，代码修改如下：
module.exports = function (app) {
app.use('/', require('./all'));
app.use('/all', require('./all'));
app.use('/discount', require('./discount'));
app.use('/jacket', require('./jacket'));
app.use('/pants', require('./pants'));
};
在all.js中代码修改如下：
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('all', {goods: [
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'},
{url: 'https://img.alicdn.com/imgextra/i3/1020250042/TB2qHT5pypnpuFjSZFkXXc4ZpXa_!!1020250042-0-beehive-scenes.jpg_180x180q70', title: '女生裙子', price: '49元'}
]})
})
module.exports = router;
在discount.js文件中添加如下代码：
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('discount', {goods: [
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'},
{url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3663715146,1860018343&fm=80&w=179&h=119&img.JPEG', title: '米格-31', price: '特价49元'}
]})
})
module.exports = router;
在jacket.js中添加如下代码：
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('jacket', {goods: [
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'},
{url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3365611160,2639098405&fm=117&gp=0.jpg', title: '美美的上衣', price: '49元'}
]})
})
module.exports = router;
在pants.js文件中添加如下代码：
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('jacket', {goods: [
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'},
{url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2035613461,1411584253&fm=26&gp=0.jpg', title: '短裤女', price: '49元'}
]})
})
module.exports = router;
3.在根目录下新建一个public文件夹，里面存放的是项目使用到的静态文件，在public下新建三个文件夹，分别是js，css，img，在css下新建public.css和
reset.css，reset.css初始化浏览器样式文件，
在reset.css中添加如下代码：
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html, body {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
在public.css中添加入选代码：
body,html{
height: 100%;
}
.wrap{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: url(/img/bg.png) repeat;
overflow: auto;
}
.header{
width: 100%;
height: 120px;
line-height: 160px;
background-image: url(/img/bird.png),url(/img/word.png);
background-repeat: no-repeat no-repeat;
background-position: left center, right center;
background-size: auto 100%;
text-align: center;
}
.header li{
display: inline-block;
margin:0 12px;
}
.header li:last-clild{
margin-left: 30px;
}
.footer{
width: 100%;
height: 80px;
line-height: 80px;
background: #ccc;
text-align: center;
}
.footer li{
display: inline-block;
}
.all_goods{
width: 100%;
flex: 1;
}
.all_goods .goods{
width: 80%;
min-width: 960px;
margin: 0 auto;
}
.goods li{
display: inline-block;
position: relative;
width: 22%;
min-height: 60px;
margin: 6px 1%;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
}
.goods img{
height: 100%;
width: 100%;
}
.goods .title,.goods .price{
position: absolute;
color: #fff;
}
.goods .title{
left: 6px;
bottom:4px;
}
.goods .price{
right: 6px;
bottom: 4px;
}
在img文件夹中添加三张图片，分别是bg.png，bird.png，word.png，图片就贴在下面，可以拷贝下来放在自己的img文件夹中。
bg.png:
bird.png
word.png
4.最后还需要修改项目的入口app.js，app.js代码最终修改为：
var express = require('express'); // 引入express框架
var path = require('path'); // 引入path模块
var routes = require('./routes/app');// 引入路由模块
var port = process.env.PORT || 8000; // 设置端口号：3000
var app = express(); //实例化express
var serveStatic = require('serve-static'); // 静态文件处理
app.use(serveStatic('public')); // 路径：public
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.listen(port); // 启动web服务。
routes(app);
console.log('server listening at ' + port);
其实就多了
var serveStatic = require('serve-static'); // 静态文件处理
app.use(serveStatic('public')); // 路径：public
现在就可以在控制台输入node app运行项目试试效果，是不是已经有常见的网站模样了。
