1.前言
因为系统不同 Mac和 windows路径不同， 因为路径报错的话，自己看下报错，转换成自己的路径就行了
__dirname 当前文件的路径 模块级的全局对象 ***
2.get
客户端html
<form action="http://127.0.0.1:7888" method="get"> <input type="text" placeholder="用户名" name="username"> <input type="text" placeholder="密码" name="password"> <input type="submit" value="登录"> </form>
服务端 js
const http = require('http'); const url = require('url'); const fs = require('fs'); let server = http.createServer(function (req,res) { res.writeHead(200, { "content-type":"text/html;charset=utf-8"}) // 解析请求地址 得到地址对象 let urlObj = url.parse(req.url, true) // 获取对象的pathname属性 路由 let pathname = urlObj.pathname if (pathname === "/") { // 表单 // 获取前端传过来的参数 let un = urlObj.query.username; let pw = urlObj.query.password; // console.log(un ,pw) res.write("用户名:" + un); res.write("密码:" + pw); res.end(); } else if (pathname === "/favicon.ico") { // 图标 // res.end() // 返回静态资源 需要借助fs模块 // 小文件 原理 一口气读完 参数有个回调读完才会调用 // fs.readFile() // ***1. 读取静态资源 // 大文件 读入流 读一部分存一部分内存里 let readS = fs.createReadStream("favicon.ico") //****2. 通过管道方法将数据传递给res对象 readS.pipe(res); // 不需要写end 分段读取的不知道啥时候读完 自己内部肯定写了 } else { res.end() // 其他请求 } }); server.listen(7888,function(){ console.log("7888 服务启动"); })
3.post
客户端html
<form action="http://127.0.0.1:8989" method="post"> <input type="text" placeholder="用户名" name="username"> <input type="text" placeholder="密码" name="password"> <input type="submit" value="登录"> </form>
服务端js
如何通过req对象获取post请求的数据:
node在获取post过来的数据时是分次分段获取
主要是数据监听
const http = require("http"); const fs = require('fs'); const qs = require("querystring"); let server = http.createServer(function (req, res) { res.writeHead(200, {"content-type": "text/html;charset=utf8" }) if (req.method == "GET") { // 图标 let readS = fs.createReadStream('favicon.ico') readS.pipe(res) } else if (req.method == "POST") { // 表单 let allData = ""; // 监听数据传递事件 ,并拼接数据 //注意这里的 data 和end事件是固定的 req.on("data", function (chunk) { // 拼接数据 allData +=chunk; }); // 监听数据处理完毕.并处理数据 req.on("end", function () { let qsObj = qs.parse(allData); res.write("用户名是:" + qsObj.username); res.write("密码是:" +qsObj.password); console.log( qsObj); res.end(); }) } else { res.end() } }); server.listen(8989,function(){ console.log("8989 服务启动"); })
4 附送个综合练习吧 提升下对 css JS的理解
link script img标签 href src属性赋值的时候也会发起请求
客户端html
<fieldset> <legend>表单1-get</legend> <form action="http://127.0.0.1:7788/form1" method="GET"> <input type="text" placeholder="名字" name="username"> <input type="text" placeholder="密码" name="password"> <input type="submit"> </form> </fieldset> <fieldset> <legend>表单2-get 模拟 css标签</legend> <form action="http://127.0.0.1:7788/form2" method="GET"> <input type="submit"> </form> </fieldset> <fieldset> <legend>表单3-post</legend> <form action="http://127.0.0.1:7788/form3" method="POST "> <input type="text" placeholder="名字" name="username"> <input type="text" placeholder="密码" name="password"> <input type="submit"> </form> </fieldset> <fieldset> <legend>表单4-请求图片 img</legend> <form action="http://127.0.0.1:7788/form4" method="GET"> <input type="submit"> </form> </fieldset>
服务端js
const http = require('http') const fs = require('fs') const url = require('url') http .createServer(function (req, res) { res.writeHead(200, { 'content-type': 'text/html;charset=utf-8' }) let urlObj = url.parse(req.url,true) // console.log("-----",urlObj.query) let pathname = urlObj.pathname // 类型区分 if (req.method === 'GET') { // get // 通过路由区分 switch (pathname) { case '/form1': { res.write('名字是:' + urlObj.query.username) res.write('密码是:' + urlObj.query.password) res.end() break } case '/form2': { res.write("<link rel='stylesheet' href='http://127.0.0.1:7788/css' />"); res.end() break } case '/form4': { res.write("<img src='http://127.0.0.1:7788/img' /><img src='http://127.0.0.1:7788/img' />"); res.end(); break; } case '/favicon.ico': { let readS = fs.createReadStream('favicon.ico') // 2. 通过管道方法将数据传递给res对象 readS.pipe(res) break } case '/css': { let readS = fs.createReadStream('style.css'); readS.pipe(res) break } case '/img': { let readS = fs.createReadStream('yzs.jpg'); readS.pipe(res) break } default: res.end() break } } else { //post } }) .listen(7788)
