node.js表单处理-CSDN博客

本文链接：https://blog.csdn.net/qq_63532615/article/details/139008559

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- action表示服务器端处理表单数据的程序对应的路由地址 -->
    <!-- method表示单向服务器发送的是get请求 -->
    <form action="/login" method="get">
        <!-- name属性用于定义一个保存在该输入框中输入用户名信息的变量该变量可以
        被后端服务器程序访问，从而让后端程序获取前端表单中输入的用户名信息 -->
        用户名：<input type="text" name="username"><br /><br /> 
        密码：<input type="password" name="pwd">
        <input type="submit" value="提交用户名和密码">
    </form>
</body>
</html>

form_get.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- action表示服务器端处理表单数据的程序对应的路由地址 -->
    <!-- method表示单向服务器发送的是get请求 -->
    <form action="/login" method="post">
        <!-- name属性用于定义一个保存在该输入框中输入用户名信息的变量该变量可以
        被后端服务器程序访问，从而让后端程序获取前端表单中输入的用户名信息 -->
        用户名：<input type="text" name="username"><br /><br /> 
        密码：<input type="password" name="pwd">
        <input type="submit" value="提交用户名和密码">
    </form>
</body>
</html>

server_get.js

const http = require('http')
const path = require('path')
const fs = require('fs')
const url  = require('url')

const myserver = http.createServer()

myserver.listen(3000, () => {
    console.log('服务器启动成功！')
})

let filename
let un
let pwd
let pathObj
myserver.on('request', (req,res) => {
    // console.log(req.url)
    // 通过url.parse方法可以将req.url获取到的浏览器请求地址转换为对象
    pathObj = url.parse(req.url, true)
    // console.log(pathObj)
    // console.log('用户名是：' + pathObj.query.username)
    // console.log('密码是：' + pathObj.query.pwd)
    if(req.url === '/') {
        filename = path.join(__dirname,'form_get.html')
        fs.readFile(filename, 'utf-8', (err,data) => {
            if(err) {
                return console.log('网页文件读取失败！')
            }
            res.end(data)
        })
    }
    // 如果用户单击提交按钮向服务器的/login发送了get请求
    else if((pathObj.pathname === '/login') && (req.method === 'GET')) {
        un = pathObj.query.username
        pwd = pathObj.query.pwd
        res.setHeader('Content-Type','text/html;charset=utf-8')
        if((un==='admin') && (pwd==='123456')) {
            res.end('登录成功！')
        }
        else {  
            res.end('<script>alert("登录失败");window.location.href="/"</script>')
        }
    }
})

server_post.js


const http = require('http')
const path = require('path')
const fs = require('fs')
const querystring  = require('querystring')

const myserver = http.createServer()

myserver.listen(3000, () => {
    console.log('服务器启动成功！')
})

let filename
let content
let postData
let un
let pwd

myserver.on('request', (req,res) => {
    content = ''
    // 由于post请求的地址中不包含表单数据，因此可以直接用
    // req.url获取浏览器发送给服务器的请求地址
    if(req.url === '/') {
        filename = path.join(__dirname, 'form_post.html')
        fs.readFile(filename, 'utf-8', (err,data) => {
            if(err) {
                return console.log('网页文件读取失败！')
            }
            res.end(data)
        })
    }
    // 如果用户点击了表单中的提交按钮
    else if((req.url === '/login') && (req.method === 'POST')) {
        // 核心代码，获取浏览器通过POST方式提交到这台服务器上的表单数据
        // 类似于流式文件读操作，把req请求对象看做可读流
        req.on('data',(chunk) => {
            content = content + chunk
        })
        
        // 当表单数据全部被content保存后，会自动触发end事件
        req.on('end',() => {
            // console.log('用户提交的表单数据是：' + content)
            // 将content的值（字符串）转化为对象
            postData = querystring.parse(content)
            // console.log(postData)
            // 从表单数据中获取用户名和密码
            un = postData.username
            pwd = postData.pwd
            res.setHeader('Content-Type','text/html;charset=utf-8')
            if((un==='admin') && (pwd==='123456')) {
                res.end('登录成功！')
            }
            else {  
                res.end('<script>alert("用户登录失败");window.location.href="/"</script>')
            }
        })
    }
})