node实战开发

作者: 张Boy | 来源:发表于2016-11-22 16:48 被阅读116次

node实战开发
3月阅读书单
nodejs学习收藏
Node创建子线程监听文件修改
构建 Node Web ToDoList 程序
《Node.js 开发实战》总结
vue+node移动商城实战项目，功能迭代，增加产品搜索功能
Node全栈技术开发介绍
前端Node.js 基础
Node学习路径

如果你真想用node做服务器来开发项目，我的建议是你在看完启航文档后就可以去搞express或者它的下一版本KOA了，因为用原生的来开发实在太晦涩（慢）了，这不是noder的风格。

如果你还是想深入的了解，可以往下看，我给诸位准备了个小DEMO，希望对你有帮助。

项目名称：用户登录系统
项目简述：项目包含首页和登录页面，用户点击首页的登录按钮跳转到登录页面，填写用户名和密码，点击确认按钮，如果正确则提示登录成功，并跳转到首页，如果失败则提示登录失败。
项目架构原生nodejs

首先创建俩页面index.html 和 login.html(放在template文件夹下),如下(好裸，但说的是原理，相看好看的可以看HTML/CSS文集，里面会持续跟新很多漂亮的布局和页面效果)

<!--index.html-->
<!DOCTYPE>
<html>  
  <meta charset='utf-8'><!--否则中文乱码-->
  <body>
    <button onclick = 'javascript:location.href="/login"'></button>
  </body>
</html>

<!--login.html-->
<!DOCTYPE>
<html>
  <meta charset='utf-8'>
  <body>
    <form>
        <input type='text'  id='name'/>
        <input type='password'  id='pwd'/>
        <input type='button' value='提交' id='submit'/> 
     </form>
     <script type='text/javascript'>
            //使用原生ajax提交表单。项目很小，就不用框架了（IE5-6会有问题）
            var _submit = document.getElementById('submit');
            _submit.onclick = function(){
                  var _name = document.getElementById('name').value;
                  var _pwd = document.getElementById('pwd').value;
                  var _req = new XMLHttpRequset();
                  _req.open('POST','/checkLogin');
                  _req.send('name='+_name+'&pwd='+_pwd);
                  _req.onreadystatechange = function(){
                        if(_req.readyState == 4 && _req.status === 200){
                            if(_req.responseText == '0'){
                                   alert('登录成功！');
                                   location.href='/'; 
                            }else if(_req.responseText == '1'){
                                   alert('帐号或密码错误，请重试');
                            }
                        }
                  }
            }
     </script>
  </body>
</html>

修改我们写过的file.js文件

'use strict'  //这一行是ES6下为防止不兼容加的
var fs = require('fs'); 
function resHtml=function(htmls){
  return fs.readFileSync(htmls); //注意这里用阻塞方式读取页面文件，不然会报错。
}
module.exports = resHtml;

为了防止中途会出现什么bug，我们先修改下index.js来看下效果

'use strict'
var resHtml = require('./file'); //引入我们自己的模块
var http = require('http');  
http.createServer(function(req,res){  
      res.writeHead(200,{'Content-Type':'text/html'});   //注意这里将text/plain 改成了text/html 这是定义输出的文本格式  
      res.write(resHtml('template/index.html')); //通过模块接口拿到数据
      res.writeEnd(); //回执结束
}).listen(3000)  //监听3000的端口

运行服务器并在浏览器中查看，看是否输出页面，如果到这里没有问题请继续往下走，如果有看报错然后修改。
创建路由文件route.js

function route(path){
    console.log('path:'+path);
}
//这里我们什么也没有做，只是为了让大家看得更清除
exports.route = route;

修改index.js文件

'use strict'
var resHtml = require('./file'); 
var http = require('http');  
var route = require('./route');
var url = require('url');
http.createServer(function(req,res){
      var path =  url.parse(req.url).pathname; //获取访问路径并格式化;
      route.route(path); 
      res.writeHead(200,{'Content-Type':'text/html'});
      res.write(resHtml('template/index.html'));
      res.writeEnd(); 
}).listen(3000);

运行服务器并在浏览器中查看，在地址栏中输入不同的路由，然后看控制台上的输出。有的会有两个（比如根目录会是 / 和 /favicon.ico，这无关紧要，我们取数组的第一个元素）

现在开始加速开发了

更改index.js

'use strict'
var resHtml = require('./file'); 
var http = require('http');  
var route = require('./route');
var url = require('url');
http.createServer(function(req,res){      
      route.route(req,res);     
}).listen(3000);

更改route.js

var Controller = require('./controller');
var controller = new Controller;
function route(req,res){
     var path =  url.parse(req.url).pathname; //获取访问路径并格式化;
     switch(path){
        case '/':
            controller.home(res);
            break;
        case '/login':
            controller.login(res);
            break;
         case '/checkLogin':
             constroller.checkLogin(req,res);
             break;
         default:
             break;
    }
}
exports.route = route;

创建 controller.js文件，并修改如下

//这个东西不赘述，不懂的看js的进阶文集，里面有讲
var resHtml = require('./file')
function controller(){
      this.home = function(res){
            res.writeHead(200,{'Content-Type':'text/html'});
            res.write(resHtml('template/index.html'));
            res.writeEnd(); 
      }
      this.login = function(res){
            res.writeHead(200,{'Content-Type':'text/html'});
            res.write(resHtml('template/index.html'));
            res.writeEnd(); 
      }
      this.checkLogin(req,res){
             //TODO;
      }
}
module.controller = controller;

至此，你运行服务器在浏览器中可以操作了，从 / 跳转到 /login;同时基本的框架分层也清晰了。当然，如果真正用它来搞，还需要很多工作要做，比如里面好多writeHead的重复啊，路由书写的不美观等。如果你是个技术发烧友，可以自己去搞了。
下面我们针对controller中的checkLogin来搞

var qs = require('querystring');   //字符串序列化模块
// ... ... 
  this.checkLogin(req,res){
       var postString = '';
       req.on('data',function(chunk){   //node不会自动解析请求体，需要手动搞;
          postString+=chunk;
      })
      req.on('end',function(){
           var postJson = qs.parse(postString); //序列化为post请求格式
            if(postJson.name == 'bob' && postJson.pwd == 'lisa'){
                  res.writeHead(200,{'Content-Type':'text/plain'});
                  res.write('0');
                  res.writeEnd(); 
            }
            else{
                  res.writeHead(200,{'Content-Type':'text/plain'});
                  res.write('1');
                  res.writeEnd(); 
            }
      })
  }

运行你的项目吧～

至此，这个简单的demo就完成了！