网页前端后台技巧(CSS+HTML)Web前端开发笔记

【Node.js】处理url

2019-06-22  本文已影响0人  德育处主任
微信订阅号:Rabbit_svip

会一步一步讲(中间会讲点小弯路),如果需要看最终效果请滑到最下方。


1、创建前端页面(用于访问)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://localhost:8100/news?module=每日精选&id=10">Node.js之get请求</a>
</body>
</html>

这里有个 a 链接,访问 localhost:8100

并通过get的方式提交数据。

module=每日精选

id=10

2、后台处理请求

const http = require('http');

const server = http.createServer( (req, res)=>{
    console.log(req.url);
    res.end();
} )

server.listen(8100);
左侧是编辑器,可以查看后台到处理结果。右侧是浏览器。 微信订阅号:Rabbit_svip

这里直接用 req.url 就能把url里到内容拿到。
这里一共有两段内容。其中 /favicon.ico 可以不用管。这个是网页请求时候获取的图标。

另一段才是有价值的
/news?module=%E6%AF%8F%E6%97%A5%E7%B2%BE%E9%80%89&id=10

可以看到,请求的页面是 /news

客户端发送的数据有 module=%E6%AF%8F%E6%97%A5%E7%B2%BE%E9%80%89id=10

module对应的数据被转码了。

但我们所希望拿到的是一个json格式的数据才对。

{
    module: "每日精选",
    id: "10"
}

以上才是我们所希望得到的数据。
要把格式转好,需要用系统提供到url模块。

3、引入url模块,解析url

const http = require('http');
const url = require("url");

const server = http.createServer( (req, res)=>{
    console.log(url.parse(req.url, true));
    res.end();
} )

server.listen(8100);

这里引入了 url 这个系统提供的模块。

然后用了 url.parse() 这个方法。
第一个参数传入 req.url,这是指向客户端访问的url。
第二个参数传入 true,不写true会默认转码。(不传第二个参数,可以滑到第4点看另一种解决方法)

当客户端访问的时候,后台就会接受到一份请求信息,并以json格式打包好。


微信订阅号:Rabbit_svip

红框部分就是我们想要的数据。

所以可以把代码写成下面这样。

url.parse(req.url, true).query
微信订阅号:Rabbit_svip

这样就得到我们想要的数据了。


另一种方式解释url

4、通过querystring系统模块解析url

const http = require('http');
const url = require("url");
const querystring = require("querystring");

const server = http.createServer( (req, res)=>{

    const reqUrl = req.url;

    const queryUrl = url.parse(reqUrl).query;

    console.log( querystring.parse(queryUrl) );
    res.end();
} )

server.listen(8100);

以上两种方式用哪种都行。

上一篇下一篇

猜你喜欢

热点阅读