Node.js之路径切换小案例

通过输入不同的路径信息，实现各个页面之间的切换

1、目录结构

 

 

 2、服务器端代码

 

var http = require('http');
var fs = require('fs');file:///F:/前端/Node.js学习笔记/public
http.createServer(function(req,res){
	var url = req.url;
	if(url === '/'){
		fs.readFile('./view/index.html',function(err,data){
			if(err){
				return res.end('404 Not Found.');
			}else{
				res.end(data);
			}
		});
	}else if(url === '/public/'){
		fs.readFile('./public/start.html',function(err,data){
			if(err){
				return res.end('404 Not Found.');
			}else{
				res.end(data);
			}
		});
	}else{
		fs.readFile('./public/404.html',function(err,data){
			if(err){
				return res.end('404 Not Found.');
			}else{
				res.end(data);
			}
		});
	}
}).listen(3000,function(){
	console.log("服务器启动成功")
});

　　3、各页面代码

　　　　3.1 index.html页面

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/public/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">

<hr>
 <a  href="/public/" class="btn btn-success">添加</a>
<hr>
    <ul class="list-group">
     {{each dataList}}
    <li class="list-group-item">{{$value.name}}.Say:{{$value.message}}
      <span class="pull-right">{{$value.date}}</span>
    </li>
      {{/each}}
  </ul>
  </div>
  </body>
</html>

　　3.2 start页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>这是开始页面</p>
		<a href="/">返回最初页面</a>
	</body>
	<script type="text/javascript">
		
	</script>
</html>

　　3.3 not found页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		404 不好意思，您访问的页面不存在.....
	</body>
</html>

4.结果

4.1 初始页面：

 

4.2 点击添加后

 

 4.3  点击返回最初页面后回到初始页面

 

 4.4 当数据的url路径不存在时

 

posted @ 2021-05-19 20:36  1/2的领土  阅读(597)  评论(0)    收藏  举报