var fs = require('fs');
var express = require('express');
console.log('Router had been excuted.');
module.exports = function(app){
app.get('/',function(request,response){
fs.readFile('./database.json',function(error,data){
if(error){
return status(500).send('Server error');
}else{
response.render('index.html',{
Students: JSON.parse(data).students
});
}
});
});
app.get('/hello',function(request,response){
response.render('hello.html');
});
app.get('/xxx',function(request,response){
response.render('xxx.html');
});
}
var fs = require('fs');
var express = require('express');
var router = express.Router();
router.get('/',function(request,response){
fs.readFile('./database.json',function(error,data){
if(error){
return status(500).send('Server error');
}else{
response.render('index.html',{
Students: JSON.parse(data).students
});
}
});
});
router.get('/hello',function(request,response){
response.render('hello.html');
});
router.get('/xxx',function(request,response){
response.render('xxx.html');
});
module.exports = router ;
var express = require('express');
var fs = require('fs');
var router = require('./router');
var app = express();
app.use ('/node_modules',express.static('../node_modules/'));
app.use('/views/',express.static('./views/'));
app.engine('html',require('express-art-template'));
router(app);
app.use(router);
app.listen(5000,function(){
console.log('Running server 5000.....');
})
<--index.html!-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/views/css/index.css" >
<title>Index Page</title>
</head>
<body>
<div id="MajorBody">
<div id ="Header">
<span class="ProjectName"> Student Admini System</span>
<input type="text" value="" name ="" placeholder="Search..." class="Search" id="Search" >
<span class="direct" id="DashBoard">
<a href="javascript:void(0)">DashBoard</a>
</span>
<span class="direct" id="Settings">
<a href="javascript:void(0)">Settings</a>
</span>
<span class="direct" id="Profile">
<a href="javascript:void(0)">Profile</a>
</span>
<span class="direct" id="Help">
<a href="javascript:void(0)">Help</a>
</span>
</div>
<div id="navigator">
<ul id="Part">
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
</ul>
<ul id="Part" class="Two">
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
</ul>
<ul id="Part" class="Three">
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Overview</a>
</li>
</ul>
</div>
<div id="Board">
<div id="ProfileBoard">
<div class="ins">
<div class="image">
<img src="/views/img/猫咪投降.jpg" alt="">
</div>
<span class = "Name">Cat</span>
<span class = "introduction">Miao~Miao~</span>
</div>
<div class="ins">
<div class="image">
<img src="/views/img/小马嚎叫.jpg" alt="">
</div>
<span class = "Name">Fang</span>
<span class = "introduction">我很强,我知道</span>
</div>
<div class="ins">
<div class="image">
<img src="/views/img/李信.png" alt="">
</div>
<span class = "Name">Xin</span>
<span class = "introduction">不为不存在的天命而压低脊梁</span>
</div>
<div class="ins">
<div class="image">
<img src="/views/img/Yuyuan.jpg" alt="">
</div>
<span class = "Name">Yuyuan</span>
<span class = "introduction">今天吃啥?</span>
</div>
</div>
<div id="ControlButton">
<button id="Add">Add Student</button>
</div>
<div id="InfoBoard">
<div class="Title">
<div class="Sno">Sno</div>
<div class="SName">Name</div>
<div class="SAge">Age</div>
<div class="SGender">Gender</div>
<div class="SHobbies">Hobbies</div>
</div>
<ul id="Info">
{{ each Students}}
<li >
<div class="Sno"> {{ $value.Sno }}</div>
<div class="SName">{{ $value.Name }}</div>
<div class="SAge">{{ $value.Age }}</div>
<div class="SGender">{{ $value.Gender }} </div>
<div class="SHobbies">{{ $value.Hobbies }}</div>
</li>
{{ /each }}
</ul>
</div>
</div>
</div>
</body>
</html>
-index.css
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
#MajorBody{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 1520px;
height: 1500px;
}
#Header{
display: flex;
justify-content: flex-start;
align-items: center;
position:fixed;
width: 1520px;
height: 100px;
color: white;
background-color: rgba(10, 9, 9, 0.68);
}
.ProjectName{
padding-left: 10px;
font-size: 30px;
}
.Search{
position: relative;
width: 200px;
height: 50px;
margin-left: 450px;
padding-left: 10px;
border-radius: 15px;
border:none;
outline: none;
font-size: 25px;
color:rgba(128, 128, 128, 0.496);
}
.direct{
display:flex;
justify-content: flex-start;
align-items: center;
width: 120px;
height: 90px;
}
.direct > a{
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 110px;
height: 80px;
font-size: 20px;
text-decoration: none;
color:aliceblue;
}
.direct > a:hover{
color: aqua;
}
.direct :nth-of-type(1){
margin-left: 20px;
}
#navigator{
display: flex;
flex-direction:column;
justify-content: flex-start;
align-items: center;
width: 200px;
margin-top: 100px;
height: 1200px;
background-color: rgba(194, 218, 240, 0.938);
}
#Part{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200px;
height: 400px;
}
#Part > li{
display: flex;
justify-content: center;
align-items: center;
width:199px;
height: 70px;
margin: 3px 5px;
background-color: rgba(128, 185, 241, 0.442);
}
#Part >li > a{
display:flex;
justify-content: flex-start;
align-items: center;
width: 100px;
height: 6px;
text-decoration: none;
color: black;
}
#Part >li:hover{
cursor: pointer;
background-color: rgba(255, 166, 0, 0.585);
}
#Part > li > a:hover{
color: white;
}
.Two{
margin-top: -80px;
}
.Three{
margin-top: -80px;
}
#Board{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 1320px;
height: 1200px;
margin-top: 100px;
}
#ProfileBoard{
display: flex;
justify-content: flex-start;
align-items: center;
width: 1500px;
height: 300px;
background-color: rgba(219, 233, 233, 0.755);
}
.ins{
display:flex;
justify-content: center;
align-items:center;
flex-wrap:wrap;
width: 300px;
height: 300px;
color:rgb(81, 81, 81);
}
.ins > .image> img{
display:flex;
width: 150px;
height: 150px;
border-radius: 50%;
}
.ins .image{
display:flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 50%;
}
.ins .Name{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 30px;
margin-top: -20px;
}
.ins .introduction{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 50px;
margin-top: -50px;
}
div[class = "ins"]:nth-child(2){
margin-left: 30px;
}
div[class = "ins"]:nth-child(3){
margin-left: 30px;
}
div[class = "ins"]:nth-child(4){
margin-left: 30px;
}
#ControlButton{
display: flex;
justify-content: flex-start;
align-items: center;
width: 1520px;
height: 80px;
background-color: rgba(219, 233, 233, 0.755);
}
#Add{
display: flex;
justify-content: center;
align-items: center;
margin-left:600px;
width: 80px;
height: 60px;
border-radius: 15px;
background-color: aqua;
outline: none;
}
#Add:hover{
color:white;
cursor: pointer;
}
#InfoBoard{
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-wrap:wrap;
width: 1520px;
height: 820px;
background-color: rgba(127, 255, 212, 0.503);
}
.Title{
display:flex;
width: 1500px;
height: 60px;
justify-content: flex-start;
align-items: center;
border-bottom: 2px solid gray;
}
.Sno , .SName , .SGender , .SHobbies , .SAge{
display:flex;
justify-content: center;
align-items: center;
width: 200px;
height: 60px;
border: 1px solid gray;
}
.SHobbies{
width: 520px;
}
#Info , #Info > li{
display:flex;
width: 1500px;
height: 60px;
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
![服务端渲染页面](https://i-blog.csdnimg.cn/blog_migrate/e3b05497000f6a94897047e858c0b82f.png)