课时61 表单提交(GET请求) 使用url解析
制作一个简单的表单：
<form action="http://127.0.0.1:8085" method="get">
<p>姓名：<input type="text" name=“name”></p>
<p>年龄：<input type="text" name="age"></p>
<p>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>
<input type="submit" value="提交" id="">
</form>
发送到http://127.0.0.1:8085 上
然后就可以通过parse把url解析后 就能拿到 提交的数据
Node接受提交的数据:
let http= require('http');
let url= require('url');
let server= http.createServer((request, response)=>{
response.writeHead(200, {"Content-Type": "text/html;charset=UTF-8"});
response.end("hello world")
//拿到提交的数据
let myURl= url.parse(request.url, true);//解析url
console.log(myURl);//查看解析后的url对象
let queryObj= myURl.query;//拿到解析后的url对象里的query 他里面是提交的数据
console.log(queryObj)//查看query 发现他是个字符串
console.log(queryObj.name);//拿到znl
console.log(queryObj.age);//拿到18
console.log(queryObj.sex);//拿到男
});
server.listen(8085, '127.0.0.1')
注意：parse最后传一个true 这样它最后返回的数据都会以对象的形式展示
let myURl= url.parse(request.url, true)；
//parse最后传一个true 这样它最后返回的数据都会以对象的形式展示
console.log(myURl);查看解析后的url对象:
121541497584_.pic.jpg
console.log(queryObj) 查看query 发现他是个字符串:
141541497963_.pic.jpg
console.log(queryObj.name);//拿到znl
console.log(queryObj.age);//拿到18
console.log(queryObj.sex);//拿到男
151541498217_.pic.jpg
课时62 表单提交_POST请求上
index.html
<form action="http://127.0.0.1:8086/postmsg" method="post">
<p>姓名：<input type="text" name=’name></p>
<p>年龄：<input type="text" name="age"></p>
<p>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<span>爱好：</span>
<input type="checkbox" name="college" value="打球">打球
<input type="checkbox" name="college" value="跑步">跑步
<input type="checkbox" name="college" value="游泳">游泳
</p>
<p>
<span>照片：</span>
<input type="file" name="photo" id="">
</p>
<input type="submit" value="提交" id="">
</form>
form_post.js
let http= require('http');
let url= require('url');
let server= http.createServer((req,res)=>{
console.log(req.url);//查看请求的url
console.log(req.method)//查看请求方式
if(req.url === '/postmsg' && req.method.toLowerCase() === 'post'){
console.log('psot请求成功！ ')
}
res.end('hello world!')
});
server.listen(8086, '127.0.0.1');
课时63 表单提交_POST请求上
Node 的querystring模块：
使用querystring.parse(str); 可以把字符串转化成一个对象，
例子，查询字符串 'foo=bar&abc=xyz&abc=123'被解析成：
{
foo: 'bar',
abc: ['xyz', '123']
}
form_post.js
let http= require('http');
let url= require('url');
let querystring = require("querystring");
let server= http.createServer((req,res)=>{
console.log(req.url);//查看请求的url
console.log(req.method)//查看请求方式
if(req.url === '/postmsg' && req.method.toLowerCase() === 'post'){
//1. 定义接受变量
let allData = '';
//2. 接受小段数据
req.on('data', (buf)=>{
allData += buf;
});
//3. 所有数据接受完毕
req.once('end', ()=>{
console.log('ok');
let dataObj= querystring.parse(allData);
//使用node自带的模块 querystring 吧字符串反序列化成一个对象
console.log(dataObj);
console.log(dataObj.name);
});
}
res.end('hello world!')
});
server.listen(8086, '127.0.0.1');
返回结果：
21542616576_.pic.jpg
课时64 表单提交_图片处理上
html
<form action="http://127.0.0.1:8087/postmsg" method="post" enctype="multipart/form-data">
<p>姓名：<input type="text" name="name"></p>
<p>年龄：<input type="text" name="age"></p>
<p>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<span>爱好：</span>
<input type="checkbox" name="college" value="打球">打球
<input type="checkbox" name="college" value="跑步">跑步
<input type="checkbox" name="college" value="游泳">游泳
</p>
<p>
<span>照片：</span>
<input type="file" name="photo" id="">
</p>
<input type="submit" value="提交" id="">
</form>
js
let http= require('http');
let url= require('url');
let util = require('util');
let formidable = require('formidable');
let server= http.createServer((req, res)=>{
if (req.url == '/postmsg' && req.method.toLowerCase() == 'post') {
//1. 实例化 formidable 对象
let form = new formidable.IncomingForm();
//2. 设置上传的文件路径
form.uploadDir = "./uploads";
//3. 获取表单的内容
form.parse(req, (err, fields, files) =>{
res.writeHead(200, {'content-type': 'text/plain; charset=utf-8'});
res.write('提交的数据是：\n');
res.end(util.inspect({fields: fields, files: files}));
//把一个对象转成一个字符串 显示在页面上
});
}
});
server.listen(8087, '127.0.0.1');
返回结果：
31542623387_.pic.jpg
参考资料：node-formidable
课时65 表单提交_图片处理下
html
<form action="http://127.0.0.1:8089/postmsg" method="post" enctype="multipart/form-data">
<p>姓名：<input type="text" name="name"></p>
<p>年龄：<input type="text" name="age"></p>
<p>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<span>爱好：</span>
<input type="checkbox" name="college" value="打球">打球
<input type="checkbox" name="college" value="跑步">跑步
<input type="checkbox" name="college" value="游泳">游泳
</p>
<p>
<span>照片：</span>
<input type="file" name="photo" id="">
</p>
<input type="submit" value="提交" id="">
</form>
js
let http= require('http');
let util = require('util');
let formidable = require('formidable');
const uuidv1 = require('uuid/v1');
const path= require('path');
const fs =require('fs');
let server= http.createServer((req, res)=>{
if (req.url == '/postmsg' && req.method.toLowerCase() == 'post') {
//1. 实例化 formidable 对象
let form = new formidable.IncomingForm();
//2. 设置上传的文件路径
form.uploadDir = "./uploads";
//3. 获取表单的内容
form.parse(req, (err, fields, files) =>{
// 3.1 使用uuid生成随机名称
let imgName= uuidv1();
// 3.2 使用path截取图片后缀
let extName= path.extname(files.photo.name);
//3.3 设置路径
let oldPath= __dirname + "/" + files.photo.path;
let newPath= __dirname + "/uploads/"+ imgName + extName;
// console.log(oldPath,newPath)
//3.4 使用fs模块的改名
fs.rename(oldPath, newPath, (err) => {
if (!err) {
res.writeHead(200, {'content-type': 'text/html; charset=utf-8'});
res.write('提交成功 \n');
console.log("已完成重命名");
res.end(util.inspect({fields: fields, files: files}));
//把一个对象转成一个字符串 显示在页面上
}else{
console.log("重命名失败")
}
});
});
}
});
server.listen(8089, '127.0.0.1');
参考：
node-uuid 生成一个独一无二的名字
path-extname 获取后缀
fs-rename 修改文件名称
网友评论