node实现记事留言本服务器案例

最新推荐文章于 2020-06-02 11:54:51 发布

何迟

最新推荐文章于 2020-06-02 11:54:51 发布

阅读量275

点赞数

分类专栏： Node.js 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/84719588

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Node.js

4 篇文章 0 订阅

订阅专栏

要点：

1. 直接使用url判断路径时，判断的部分一定是最后一位，如127.0.0.1：3000浏览器默认在3000后添加一个'/'，下面判断的就是这个127.0.0.1：3000/yous就是判断的/yous，也就是url的路径，当后面有查询（?后面的），不可以直接判断url，需要使用url核心模块了。

2.注意node中地址是网页的地址，通过服务端的处理将一些静态资源集中到public文件夹下实现统一处理，实现将网络地址转换成文件地址，但是也要注意不是传统的相对路径的文件地址。通过url判断，在服务器端的public公共文件夹下处理。

3.注意重定向的状态码，临时重定向是302，重定向的地址会在响应头文件中的Location中寻找。

4..注意引入js模板时，在当前工作空间下进行npm安装，这样发送项目给别人时才能更好的使用，目的跟css等使用相对路径处理文件地址的目的是一样的。

node文件

var http = require('http')
var fs = require('fs')
var url = require('url')
// 引入相关的核心模块

var template = require('art-template')
// 引入js模板引擎包，在项目中也添加为了发给别人能用

var events = [
  {
  	name:'RNG',
  	date:'2018-3',
  	event:'2018LPL春季赛冠军'
  },
  {
    name:'RNG',
  	date:'2018-8',
  	event:'2018LPL夏季赛冠军'
  },
  {
    name:'RNG',
  	date:'2018-9',
  	event:'2018LSM季中赛冠军'
  },
  {
    name:'IG',
  	date:'2018-11',
  	event:'S8世界总决赛冠军！'
  }
]

// 直接使用url判断路径时，判断的部分一定是最后一位，如127.0.0.1：3000浏览器默认在3000后添加一个'/'，下面判断的就是这个
// 127.0.0.1：3000/yous就是判断的/yous，也就是url的路径，当后面有查询（?后面的），不可以直接判断url，需要使用url核心模块了

http 
    .createServer(function(req,res){

    	var parseObj = url.parse(req.url,true)
    	// 通过url核心模块的API，将url包装成一个对象，true表示将查询字符串转换成一个对象（query）
    
    	var pathname = parseObj.pathname
    	// 获取查询字符串之前的路径
    	if(pathname === '/'){
    		fs.readFile('./views/index.html',function(err,data){
    			if(err){
    				return res.end('404')
    			}
                
                data = template.render(data.toString(),{
                    events:events
                })

    			res.end(data)
    		})
    	}
    	else if(pathname === '/jilu'){
    		//?之后的路径全部被封装到query中，所以可以直接使用
    		var event = parseObj.query
    		// event中的战队名字和荣誉
    		event.date = '2018-12'
    		events.push(event)
    		// 将最近的事件添加到events数组中

    		res.statusCode = 302
    		// 设置状态码
    		res.setHeader('Location','/')
    		// 设置头文件中的Location属性，指向重定向的地址
    		res.end()

    	}
    	else if(pathname.indexOf('/public/') === 0){
    		// 将请求的静态资源全部放入public文件夹中，可以统一地进行处理
    		// 有'/public/'开头的网页地址请求，改为文件路径请求
    		fs.readFile('.' + pathname,function(err,data){
    			if(err){
    				return res.end('404')
    			}
    			res.end(data)
    			// 前面一定不能忘记'.'因为'./'表示当前路径，而'/'表示磁盘根目录
    		})
    	}
    	else if(pathname === '/yous'){
    			// 没有文件后缀名是为了简化url，也更美观
                fs.readFile('./views/yous.html',function(err,data){
                	if(err){
                		return res.end('404')
                	}
                	res.end(data)
                })
        }
    	else{
    		fs.readFile('./views/404.html',function(err,data){
    			if(err){
    				return res.end('404')
    			}
    			res.end(data)
    		})
    		// 如果url地址不在上述可能下，将界面显示为404界面，为了更好的交互和中止请求
    	}		
    })
    .listen(3000,function(){
    	console.log('success');
    })
    // 直接这样写，简洁代码，不用再接收.createServer()的返回值了

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>冠军历程</title>

  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
  <!-- 在服务器端请求的静态网站的地址，都是网站地址，区别于之前学习的专门写的文件地址 -->
</head>

<body>  
  <div class="header container">
    <div class="page-header">
      <h1>老哥们的年度总结 <small>一起看看吧</small></h1>
      <a class="btn btn-success" href="/yous">续写总结</a>
    </div>
  </div>
  <div class="comments container">
    <ul class="list-group">
      {{each events}}
      <li class="list-group-item">
         <span class="pull-left text-primary">{{ $value.name }}在：</span>
         <span class="col-md-offset-4 text-danger">{{ $value.date }}获得了</span> 
         <span class="pull-right text-success">{{ $value.event }}</span>
      </li>
      {{/each}}
    </ul>
  </div>
</body>

</html>

yous.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1><a href="/">记录</a><small>冠军之路</small></h1>
    </div>
  </div>
  <div class="comments container">

    <form action="/jilu" method="get">
      <!-- action属性就是请求网站的url地址 -->

      <div class="form-group">
        <label for="input_name">老哥，你的名字</label>
        <input type="text" class="form-control" required minlength="2" maxlength="6" id="input_name" name="name" placeholder="请写入你的姓名">
      </div>
      <div class="form-group">
        <label for="textarea_message">冠军记录</label>
        <textarea class="form-control" name="event" id="textarea_message" cols="30" rows="5" required minlength="5" maxlength="20"></textarea>
      </div>
      <button type="submit" class="btn btn-default">确认</button>
    </form>
  </div>
</body>

</html>

404.html(简陋)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>老哥，你网址输错了，好好检查下</h1>
</body>
</html>

效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node实现记事留言本服务器案例

要点：1. 直接使用url判断路径时，判断的部分一定是最后一位，如127.0.0.1：3000浏览器默认在3000后添加一个'/'，下面判断的就是这个127.0.0.1：3000/yous就是判断的/yous，也就是url的路径，当后面有查询（?后面的），不可以直接判断url，需要使用url核心模块了。2.注意node中地址是网页的地址，通过服务端的处理将一些静态资源集中到public文件...
复制链接

扫一扫

专栏目录