http(二)

1.将表格中的数据动态加入表格中,js脚本中拼接了css,html,script,练习

 1 const http = require("http");
 2 const urlTool = require("url");
  //1,浏览器向node服务发送了一个请求,返回了一个表格的html
  //2.然后在想浏览器发送一个css.java的请求,返回css,
  //3.浏览器对不标准的html也会解析
3 4 5 const server = http.createServer((request, response)=>{ 6 //获取参数 7 let method = request.method.toUpperCase(); 8 let pathname = urlTool.parse(request.url).pathname; 9 //检测路径 10 if(method === 'GET' && pathname === '/users'){ //如果报文路径和文件路径没关联,可以自定义url 11 //1. 乱码问题 12 response.setHeader("content-type",'text/html;charset=utf-8'); 13 const arr = [ 14 {name: 'knight', age: 18}, 15 {name: 'xiaoming', age: 20}, 16 {name: 'xiaoning', age: 28}, 17 {name: 'xiaotian', age: 18}, 18 {name: 'xiaohigh', age: 20}, 19 ]; 20 //返回一个表格 21 let str = ` 22 <link rel="stylesheet" href="/css.java"> 23 <script src="/app.js"></script> 24 <table border="1"><tr><td>姓名</td> <td>年龄</td></tr>`; 25 for(let i=0;i<arr.length;i++){ 26 str += `<tr><td>${arr[i].name}</td><td>${arr[i].age}</td></tr>`; 27 } 28 str += `</table>`; 29 30 response.end(str); 31 }else if(method === 'GET' && pathname === '/css.java'){ 32 response.end(` 33 body{ 34 background:pink; 35 } 36 `); 37 }else{ 38 response.end("OK"); 39 } 40 }); 41 42 server.listen(8000, ()=>{ 43 console.log('server is running.. 8000 端口监听......'); 44 })

 

二,登录表单,服务响应练习

表单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>登录</title>
 8     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 9 </head>
10 
11 <body>
12     <div class="container">
13         <div class="col-xs-4 col-xs-offset-4">
14             <h2 class="page-header">用户登录</h2>
15             <form method="POST" action="/login">
16                 <div class="form-group">
17                     <label for="exampleInputEmail1">用户名</label>
18                     <input type="text" class="form-control" name="username">
19                 </div>
20                 <div class="form-group">
21                     <label for="exampleInputPassword1">密码</label>
22                     <input type="password" class="form-control" name="password">
23                 </div>
24                 <hr>
25                 <button type="submit" class="btn btn-primary btn-block">登录</button>
26             </form>
27         </div>
28     </div>
29 </body>
30 
31 </html>

 

js脚本

 1 const http = require('http');
 2 const urlTool = require("url");
 3 const fs = require('fs');
 4 const qs = require('querystring');
 5 //1.浏览器想发送一个get,/login的请求,然后node服务器返回一个login.html(一个表单)给浏览器
 6 // 2.然后浏览器将表单内容填写了,发送了post,/login的请求,服务器返回了请求体的数据
 7 
 8 
 9 // function getClientIp(req) {
10 //     return req.headers['x-forwarded-for'] || // 判断是否有反向代理 IP
11 //         req.connection.remoteAddress || // 判断 connection 的远程 IP
12 //         req.socket.remoteAddress || // 判断后端的 socket 的 IP
13 //         req.connection.socket.remoteAddress;
14 // }
15 
16 
17 const server = http.createServer((request, response) => {
18     //获取 方法和路径
19     let method = request.method.toUpperCase();
20     let pathname = urlTool.parse(request.url).pathname;
21     //如果 GET /login 则返回一个表单页面
22     if (method === 'GET' && pathname === '/login') {
23         fs.readFile(__dirname + '/login.html', (err, data) => {
24             response.end(data);
25         });
26         // POST /login 处理表单的数据
27     } else if (method === 'POST' && pathname === '/login') {
28         //请求体数据提取
29         //1. 声明变量
30         let body = '';
31         //2. 绑定 data 事件
32         request.on('data', chunk => {
33             body += chunk;
34         })
35         //3. 绑定 end 事件
36         request.on('end', () => {
37             console.log(body);
38             //将请求体的字符串形式 转为对象形式
39             let data = qs.parse(body);
40             // fs.writeFile("./access.log", body + '--ip:'+ getClientIp(request)+'\r\n', (err) => {
41             //     console.log(data);
42             //     response.end(body);
43             // })
44 
45             console.log(data);
46             response.end(body);
47 
48         })
49     }else {
50         response.end("404");
51     }
52 });
53 
54 server.listen(80, () => {
55     console.log("服务已经启动, 80 端口监听中....");
56 })

 

posted @ 2020-06-11 20:31  全情海洋  阅读(228)  评论(0编辑  收藏  举报