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 })