Node.js从URL中解析变量

1.URL解析方法

在此之前，我们需要知道url模块的一个内置方法，parse，这个方法是用来将一个URL字符串解析成一个对象，方便我们来提取其中的参数

vue 复制代码

const server = http.createServer((request,response) => {
        console.log(request.url)
        console.log(url.parse(request.url,true));
        const pathName = request.url;
        const chatset = {'Content-type':'text/html;charset=utf-8'}

这里query的输出是node.js故意设计的，并不影响我们访问属性，出现 $Object: null prototype$ 是因为parse方法会把id解析成一个无原型的对象，没有原型的对象就是没有proto等原型链，不会污染全局对象原型

2.获取属性

这个对象中，我们需要知道路径和参数，组合在一起就能找到我们想要的产品详情了

vue 复制代码

        const {query,pathname} = url.parse(request.url,true);

之后我们获取ID，替换一下模板就可以了

js 复制代码

       //产品页
        } else if(pathName === '/product'){
            response.writeHead(200,{'content-type':'text/html'});
            const productId = dataObj[query.id];
            const output = replaceTemplate(tempProduct,product)
            response.end(output);

但是这个点击返回是没有用的，我们修改一下模板

js 复制代码

<body>
    <div class="container">
        <h1>🌽 节点农场 🥦</h1>
        <figure class="product">
            <div class="product__organic {%NOT_ORGANIC%}">
                <h5>有机</h5>
            </div>
            <a href="/overview" class="product__back">
                <span class="emoji-left">👈</span>返回
            </a>
            <div class="product__hero">
                <span class="product__emoji product__emoji--1">{%IMAGE%}</span>
                <span class="product__emoji product__emoji--2">{%IMAGE%}</span>
                <span class="product__emoji product__emoji--3">{%IMAGE%}</span>
                <span class="product__emoji product__emoji--4">{%IMAGE%}</span>
                <span class="product__emoji product__emoji--5">{%IMAGE%}</span>

这样就实现了通过解析URL将id传入然后显示产品详情页了；