node - web 服务器 、server 服务器

node 作为服务端 - 基本使用

1. web 服务器

web.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    div{
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <h1>我的第一个标题</h1>
  <p>我的第一个段落。</p>
  <div>content</div>
  <img src="https://www.baidu.com/img/bd_logo1.png">
  <iframe src="https://www.baidu.com/"></iframe>
</body>

</html>
View Code

 

http.js

var http = require('http');
var fs = require('fs');
var url = require('url');

http.createServer(function (request, response) {
  var pathname = url.parse(request.url).pathname;
  console.log("Request for " + pathname + " received.");
  fs.readFile(pathname.substr(1), function (err, data) {
    if (err) {
      console.log(err);
      response.writeHead(404, {
        'Content-Type': 'text/html'
      });
    } else {
      response.writeHead(200, {
        'Content-Type': 'text/html'
      });
      response.write(data.toString());
    }
    response.end();
  });
}).listen(5555);
console.log('Server running at http://127.0.0.1:5555/');
View Code

访问：  http://127.0.0.1:5555/web.html

细节点：

如果是 cmd 后，这个运行方式， C:\Users\admin>node e:\nodeTest\nodeFile\http   ，会错误提示：  Error: ENOENT: no such file or directory, open 'C:\Users\admin\web.html'

切换到 server 端 js 根目录运行即可 ：   cd...     ，最后这样子：    e:\nodeTest\nodeFile>node http 

 

如果设置返回结果字符串允许带script之类的标签，则容易形成 xss攻击 ，如   '<script>alert("hello")</script>'

 

2. server 服务端

web.html

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

<head>
  <meta charset="UTF-8" />
  <title>add human</title>
</head>

<body>
  <div class="radio">
    <label>
      <input type="radio" name="human" id="man" value="男" checked>男
    </label>
    <label>
      <input type="radio" name="human" id="woman" value="女" checked>女
    </label>
  </div>
  <button id="btn" type="button" >点击保存</button>
  <div style="border:1px solid red" id="wrap"></div>

  <script src="jquery-1.9.1.min.js"></script>
  <script>
    $('#btn').on('click', function () {
      $.ajax({
        url: 'http://localhost:3000/addMan',
        type: 'get',
        dataType: 'json',
        data: {
          name: $('#man').val()
        },
        success: function (data) {
          console.log(data);
          $('#wrap').html(data);
        }
      });
    });
  </script>
</body>

</html>
View Code

 

server.js

var http = require('http');
var querystring = require('querystring');
var app = http.createServer();
app.on('request', function (req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  //res.setHeader('Access-Control-Allow-Origin', 'http://localhost');
  if (req.url === '/addMan' && req.method === 'POST') {
    var data = '';
    req.on('data', function (chunk) {
      data += chunk;
    });
    req.on('end', function () {
      data = decodeURI(data);
      var dataObject = querystring.parse(data);
      console.log(dataObject);      
    });
  }
  res.end(JSON.stringify('wasd'+Math.random()));
});
app.listen(3000, function () {
  console.log('add man');
});
View Code

 

暂时不考虑数据库，同时启动 server.js 和 http.js 、web.html  即形成常见表单提交应用

 

参考网址

 

posted @ 2018-11-27 18:15  justSmile2  阅读(166)  评论(0)  编辑  收藏  举报
喵