node模拟get post路由传值

Bertha 。 2023-07-03 10:52 96阅读 0赞

### get传值 ###

> 模拟的路径为：http://localhost:8080/register?id=3&name=zmt
> 
> 1.  引入url模块
> 2.  路径上的信息在`req.url`的`query`上，经过`url.parse`模块解析后解析为字符串，加`true`后解析为对象
> 3.  将值通过`renderFile`渲染到注册组件中

let url = require('url');
    let data = require('./data.json')
    let ejs=require('ejs')
    
    module.exports = (req, res) => { 
        let path = url.parse(req.url).pathname;
        if (path != "/favicon.ico") { 
            // console.log(pathname); 
            res.writeHead(200, {  'Content-Type': "text/html;charset=utf-8" });
            if (path == '/') { 
                ejs.renderFile("view/index.ejs", { student:data},(err, str) => { 
                    if (err) { 
                        throw err;
                    }                
                    res.end(str);
                });
            }
            else if (path == '/login') { 
                ejs.renderFile("view/login.ejs", { student:data},(err, str) => { 
                    if (err) { 
                        throw err;
                    }                
                    res.end(str);
                });
            }
            //get路由传值
            else if (path == '/register') { 
                let pathn=url.parse(req.url,true);
                let getdata=pathn.query;
                ejs.renderFile("view/register.ejs", { 
                    student:data,
                    urldata:getdata
                },(err, str) => { 
                    if (err) { 
                        throw err;
                    }                
                    res.end(str);
                });
            }
            else { 
                //"404.html"
                res.end();
            }
    
        }
    }

在注册组件中，将值渲染到页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        注册
        <%= urldata.id %>---<%= urldata.name %>
    </body>
    </html>

### post传值 ###

> 1.  一般表单提交使用`post`传值
> 2.  直接使用`url`模块`query`中拿不到值，所以使用req.on绑定事件监听（有数据传输`data`，数据传输结束`end`）
> 3.  在取得的值前加`？`（仿照`get`格式），值才会在`query`中
> 4.  本例是从注册界面成功后到达首页

creatserver.js:

let url = require('url');
    let data = require('./data.json')
    let ejs = require('ejs')
    
    module.exports = (req, res) => { 
        let path = url.parse(req.url).pathname;
        if (path != "/favicon.ico") { 
            // console.log(pathname); 
            res.writeHead(200, {  'Content-Type': "text/html;charset=utf-8" });        
            //登录界面Post传值
            if (path == '/') { 
                let info="?";
                req.on("data", (res) => { 
                    info+=res.toString();
                    console.log(info);
                })
                req.on("end", () => { 
                    let postinfo=url.parse(info,true).query;
                    ejs.renderFile("view/index.ejs", { 
                        student: data,
                        postinfo: postinfo
                    }, (err, str) => { 
                        if (err) { 
                            throw err;
                        }
                        res.end(str);
                    });
                })
            }
             //get路由传值
            else if (path == '/register') { 
                var pathn = url.parse(req.url, true);
                // console.log(pathn.query);
                var getdata = pathn.query;
                ejs.renderFile("view/register.ejs", { 
                    student: data,
                    urldata: getdata
                }, (err, str) => { 
                    if (err) { 
                        throw err;
                    }
                    res.end(str);
                });
            }
            else { 
                //"404.html"
                res.end();
            }
        }
    }

注册界面：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        注册界面
        <%= urldata.id %>---<%= urldata.name %>
        <form action="/" method="POST">
            <ul>
                <li>用户名：<input type="text" name="username"/></li>
                <li>密码：<input type="text" name="userpwd"/></li>
                <li><input type="submit" value="登陆"/></li>
            </ul>
        </form>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
首页绑定数据测试：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        ejs首页 test
        <%- include("./Component/menu.ejs",student) %>    
        <%= postinfo.username %>-----<%= postinfo.userpwd %>//绑定数据
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020020621082097.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200206210835847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js框架--动态路由Get传值（十七）

主要操作技能：官网 https://router.vuejs.org/ 中文网 https://router.vuejs.org/zh/guide/ 一、不同路

绝地灬酷狼/ 2024年02月18日 23:44/ 0 赞/ 46 阅读

相关 node模拟get post路由传值

get传值 > 模拟的路径为：http://localhost:8080/register?id=3&name=zmt > > 1. 引入url模块 > 2. 路径

Bertha 。/ 2023年07月03日 10:52/ 0 赞/ 97 阅读

相关 node —— get/post传值 + 路由封装

一、`get/post`传值 1. `get`传值 > 直接通过路径传值取值：引入`url`模块：`let url = require("url"

痛定思痛。/ 2023年06月17日 14:56/ 0 赞/ 239 阅读

相关模拟express封装node路由

express.js var url = require('url'); //封装方法res.send() function resSend(res)

r囧r小猫/ 2022年05月08日 14:38/ 0 赞/ 193 阅读

相关模拟express封装node路由

express.js var url = require('url'); //封装方法res.send() function resSend(res)

绝地灬酷狼/ 2022年05月07日 08:14/ 0 赞/ 201 阅读

相关 curl(POST，GET)传值 laravel框架

如果想用get方式要把curlPost改成 curlGet 还有最后的传值方式改成GET <?php function curlPost($

布满荆棘的人生/ 2022年04月16日 00:07/ 0 赞/ 251 阅读

相关 Vue路由传值的两种方法：动态路由与get传值

1.动态路由传值在我这个项目里要实现的是从 News.vue 跳转到Content.vue News.vue <template> <!-- 所有

迈不过友情╰/ 2022年03月17日 11:48/ 0 赞/ 392 阅读

相关 koa2的动态路由及get传值取值

浏览器调用 [http://localhost:3000/?aid=00][http_localhost_3000_aid_00] 运行项目控制台查看 /

朴灿烈づ我的快乐病毒、/ 2021年12月01日 13:18/ 0 赞/ 496 阅读

相关 vue路由传值

1）通过动态路由方式 //路由配置文件中配置动态路由 { path: '/detail/:id',

╰半橙微兮°/ 2021年10月19日 11:52/ 0 赞/ 342 阅读

相关 node express路由传参

app.get(/xx/:xxx,function(req,res){...}) 获取参数: res.params.xxx ![在这里插入

╰半橙微兮°/ 2021年07月24日 17:15/ 0 赞/ 473 阅读