登录案例
这里我们主要讲解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方法更优秀。