前端攻城狮---node之http模块综合

最新推荐文章于 2022-01-27 13:25:43 发布

csdn_gyh

最新推荐文章于 2022-01-27 13:25:43 发布

阅读量191

点赞数

分类专栏：前端攻城狮文章标签： node html 前端

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/83786210

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

登录案例

这里我们主要讲解http模块的综合使用，那么先来个小案例塞塞牙缝。

这个案例就是一个登录功能，通过get/post请求去分别解析输入的账号密码，从而去判断用户名密码是否正确

1.登录验证js模块

/*
   登录验证
 */
const http = require("http");
const qs = require("querystring");
const url = require("url");
const path = require("path");
const ss = require("./static.js");
http.createServer((req,res)=>{
   // 启动静态资源服务  localhost:3000/www/index.html
   if(req.url.startsWith("/index")) {
        let ext = path.extname(req.url);
        let name = path.basename(req.url,ext)
        ss.staticreadfile(res,ext,name);
   
    }
   if(req.url.startsWith("/login")) {
        res.writeHead(200,{
            'Content-Type': 'text/plain; charset=utf8' 
        });
        // get请求
        if(req.method == "GET") {
            let param = url.parse(req.url,true).query;
           if(param.username == "admin" && param.password == "123456") {
              res.end("get请求登录成功");
           } else {
               res.end("get请求登录失败");
           }
        }
        // post请求
        if(req.method == "POST") {
            let pdata = "";
            req.on("data",(chunk)=>{
               pdata += chunk;
            });
            req.on("end",()=>{
               let obj = qs.parse(pdata);
               //console.log(obj.username+"-"+obj.password);
               if(obj.username == "admin" && obj.password == "123456") {
                   res.end("post请求登录成功");
               } else {
                   res.end("post请求失败");
               }
            });
        }
   }
}).listen(3000,()=>{
   console.log("app is running...."); 
});

2.static.js


const fs = require("fs");
const path = require("path");
const mime = require("./mime.json");
// 封装根据不同路径读取文件，并把文件内容响应到浏览器
exports.staticreadfile = (res,ext,name)=>{
    let datatype ="text/plain;charset=utf8"; 
    if(mime[ext]){
        res.writeHead(200, { 'Content-Type': mime[ext] });
    }else{
        res.writeHead(200, { 'Content-Type': 'text/plain' });
    }
    
    let readpath = __dirname+"/www/"+name+ext;
    fs.readFile(readpath,"utf8",(error,data)=>{
        if(error){
            res.end("页面被妖怪抓走了");
        }else{
            res.end(data);
        }
    })

3.index.html 登录界面

<!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>
    <form action="http://localhost:3000/login" method="get">
        用户名: <input type="text" name="username" /><br />
        密码: <input type="password" name="password" /><br />
        <input type="submit" value="登录" />
    </form>
</body>
</html>

首先static.js就是我们上一章封装的一个方法，根据请求的类型去设置对应的响应类型，并去读取对应的文件。

我们重点来看看登录js模块。

第一步

首先导入我们需要的模块，然后进行常规的操作，初始化http对象，然后设置端口号

第二步

通过req.url去获取请求的地址，做个路由解析。若是访问index.html则去打开对应的index.html文件并且显示出来；若是访问login则去解析数据。

第三步

通过req.method来判断是否是get请求还是post请求。

get请求

则通过url模块的parse方法，将req.url转化为对象，去找到query下的请求的数据，从而去解析去判断是否登入成功。

post请求

则通过监听data，on方法去获取数据，将数据以字符串的形式接受，并且通过querystring模块的parse方法去将string转化成对象。

效果图如下

art-template

接下来我们来讲解一下art-template，看学习看看这个模板引擎

常用语法

输出

标准写法：{{value}}
         {{data.key}}
         {{data['key']}}
         {{a ? b : c}}
         {{a || b}}
         {{a + b}}
原始写法：<%= value %>
         <%= data.key %>
         <%= data['key'] %>
         <%= a ? b : c %>
         <%= a || b %>
         <%= a + b %>

以上两种写法都可以

判断

标准写法：{{if value}} ... {{/if}}
         {{if v1}} ... {{else if v2}} ... {{/if}}
原始写法：<% if (value) { %> ... <% } %>
         <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环

标准写法：方式1：{{each target}}
                {{$index}} {{$value}}
                {{/each}}
         方式2：{{each target value index}}
                {{index}} {{value}}
                {{/each}}
原始写法：<% for(var i = 0; i < target.length; i++){ %>
          <%= i %> <%= target[i] %>
        <% } %>

方式1 里面 target表示数组 $index 表示下标 $value表示数组里的item

方法2 里面target表示数组 index 表示下标 value 表示数组里的item

在方法1里面，我们没有指定下标和数组里的item的命名，所以默认就是$index $value。在方法2里，我们写了第三个和第四个参数就表示给item和下标命名。

我们这里来介绍三种模板的使用

基于模板名渲染模板

let template = require('art-template');
let html = template(__dirname + '/my.art', {
    user: {
        name: 'hello'
    }
});
console.log(html);

//my.art
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

这里要注意的是模板名字需要是art的后缀，template方法要传入两个参数，第一个是模板的路径，第二个是传入的数据

将模板源代码编译成函数

let template = require('art-template');
let tpl = `<% if (user) { %>
    <h2><%= user.name %></h2>
  <% } %>`;
// 将模板源代码编译成函数
let render = template.compile(tpl);
let ret = render({
      user:{
          name:"zs"
      }
});
console.log(ret);

我们通过template.compile将模板源代码编译成函数，接着还要调用该返回的函数，填写的参数就是传入的值。

将模板源代码编译成函数并立即执行

let template = require('art-template');
// 将模板源代码编译成函数并立刻执行
let res = template.render(tpl, {
    user:{
        name:"lucy"
    }
});
console.log(res);

这么一对比，若是模板是以代码的形式，那么就使用render方法更优秀。