1. 创建一个http服务器:
1).服务器端:
var http=require('http');
var app=http.createServer(function(req,res){
//1次http请求就会有1次http响应
//2.rep 请求的信息放在req 里面, 浏览器向node 服务器发送的信息
//3.res 响应的信息放在res 里面,node服务器向浏览器发送的信息
res.write("this is one node server!!");
res.end( ); //请求服务响应之后,必须关闭请求响应.
});
//监听端口
app.listen(3000);
2). 在本地hosts 文件中绑定本地的回环地址: IP: 127.0.0.1 本地hosts存放路径:
C:\Windows\System32\drivers\etc
系统默认显示网页字体为: 英文。如何设置中文字体:setting---file encodeing--- utf-8
2. URL 路由
//require() 可以引入node 的模块(node 扩展的功能)
var http = require('http');
// 创建一个服务器实例对象
var app = http.createServer(function (req,res) {
// req 请求信息对象 res 响应信息对象
// 需求: 根据不同的方案请求,返回不同的数据
res.setHeader("Content-Type","text/html;charset=utf-8");
console.log(req.url);
//URL 路由 根据不同的请求,返回不同的页面
if(req.url === '/')
{
res.write("欢迎来到页面首页");
res.end();
}else if (req.url==='/admin')
{
res.write("欢迎来到页面后台管理页面");
res.end();
}else if (req.url==='/login')
{
res.write("欢迎来到登陆界面");
res.end();
}else if(req.url==='/register')
{
res.write("欢迎来到注册页面");
res.end();
}else
{
res.write(" 404! 您访问的页面不存在!");
res.end();
}
});
app.listen(3100);
3. 一个简单的页面请求和浏览器响应
服务器端:
// 用fs 模块来处理文件操作
var fs = require('fs');
var http = require('http');
var app = http.createServer(function(req,res)
{
if(req.url==="/login")
{
// 返回一个登录页面
// 把login.html这个文件中的内容读取出来,然后返回浏览器
// 读取文件,在fs模块身上有一个readfile 方法可以用来读取文件的内容。
fs.readFile ('./login.html','utf-8',function(err,data)
{//consol.log(err) err 表示错误信息
if(!err)
{
//err为空,表示读取正确。
//console.log(data);
// 把读取的这些内容返回给浏览器
res.write(data);
res.end();
}
})
}
});
app.listen(3001);
login 客户端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<form action="/usr_login">
用户名:<input type="test" name="username" value="请输入您的名字"> <br>
密码:<input type="test" name="password" value="请输入密码"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
页面效果:
4. URL 模块:
// url 模块 把url 字符串解析成对象
var url= require('url');
var url_str= "http://nodeing.com/search?q=html&name=lihaipeng";
var url_obj= url.parse(url_str);
//console.log(url_obj);
// 关注的内容
//1. query, 发送请求的时候,发送到后台的数据。
//2.Pathname 路由
console.log(url_obj.query,url_obj.pathname);
// 需求: 从q=html&name=lihaipeng 里面得到两个值: html lihaipeng 这两个值?
// 使用querystring 模块来解决。parse 方法
var str = 'q=html&name=lizixing';
var querystring = require('querystring');
var str_obj = querystring.parse(str);
console.log(str_obj);
console.log(str_obj.q);
console.log(str_obj.name);
5. 理论梳理:
node 模块: 每个模块就是具有处理不同功能的方法的集合
fs 处理文件 ;querystring 把字符串解析成对象 ; url 模块:把URL 字符串解析成对象 ;http 处理http请求
6. 数据发送的方式和获取数据
// 用fs 模块来处理文件操作
var fs = require('fs');
var http = require('http');
//引入url模块来解析url字符串
var url = require('url');
var app = http.createServer(function(req,res)
{
res.setHeader("Content-Type","text/html;charset=utf-8");
// 获取到url字符串并且解析成对象
var url_obj = url.parse(req.url);
console.log(url_obj.pathname);
// 获取到浏览器的发送方式
//console.log(req.method);
// 获得到浏览器发送数据的方式作用就是可以根据不同的发送方式做相应的处理
if(req.url==="/login")
{
// 返回一个登录页响应页面
// 把login.html这个文件中的内容读取出来,然后返回浏览器
// 读取文件,在fs模块身上有一个readfile 方法可以用来读取文件的内容。
fs.readFile ('./login.html','utf-8',function(err,data)
{//consol.log(err) err 表示错误信息
if(!err)
{
//err为空,表示读取正确。
//console.log(data);
// 把读取的这些内容返回给浏览器
res.write(data);
res.end();
}
})
}
if(url_obj.pathname==="/user_login")
{
res.write("欢迎登录");
res.end();
}
});
app.listen(3000);
login.html 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<!--
1.method: 表单数据发送方式
2.action: 表单把数据发送到哪里去了
3.
-->
<form action="/user_login" method="get">
用户名:<input type="test" name="username" value="请输入您的名字"> <br>
密码:<input type="test" name="password" value="请输入密码"><br>
<!-- 当点击登录的时候,浏览器会把数据发送到 usr_login-->
<input type="submit" value="登录">
</form>
</body>
</html>
综合小案例: 登录验证
1.创建一个服务器
2.路由知识:根据不同的请求返回不同的数据
3.如何返回一个html页面,要有一个登录的展示界面
4.url querystring
5. 数据发送方式 get post red.method
5.1 使用get 数据的方式实现
var url = require('url');
var fs = require('fs');
var http = require ('http');
var querystring = require('querystring');
var app = http.createServer(function(req,res){
//设置返回内容的格式和编码
res.setHeader('content-type','text/html;charset=utf-8');
// 把url 字符串解析成对象
var url_obj=url.parse(req.url);
if(url_obj.pathname === '/login')
{
//返回一个网页
fs.readFile('./login.html','utf-8',function(err,data){
if(!err){
res.write(data);
res.end();
}
})
}
if (url_obj.pathname === '/user_login' && req.method === 'GET')
{ res.setHeader('content-type','text/html;charset=utf-8');
// 验证用户名是否正确,假如正确的用户名是 admin 密码:123
// 接收前台发送过来的数据 数据存储在: url_obj.query username=aaa&password=123
var query_data = querystring.parse(url_obj.query);
if (query_data.username === 'admin' && query_data.password === '123')
{
//res.write(url_obj.query);
res.write("恭喜登录成功!进入到用户中心。");
res.end();
}
else
{
res.write("用户名和密码错误!<a href='/login'>重新登录</a>");
res.end();
}
}
});
app.listen(3010);
5.2 使用post 数据方式实现:
/**
* Created by Administrator on 2019-7-31.
*/
var url = require('url');
var fs = require('fs');
var http = require ('http');
var querystring = require('querystring');
var app = http.createServer(function(req,res){
//设置返回内容的格式和编码
res.setHeader('content-type','text/html;charset=utf-8');
// 把url 字符串解析成对象
var url_obj=url.parse(req.url);
if(url_obj.pathname === '/login')
{
//返回一个网页
fs.readFile('./login.html','utf-8',function(err,data){
if(!err){
res.write(data);
res.end();
}
})
}
// 用来接收get方式发送过来的数据
if (url_obj.pathname === '/user_login' && req.method === 'GET')
{ res.setHeader('content-type','text/html;charset=utf-8');
// 验证用户名是否正确,假如正确的用户名是 admin 密码:123
// 接收前台发送过来的数据 数据存储在: url_obj.query username=aaa&password=123
var query_data = querystring.parse(url_obj.query);
if (query_data.username === 'admin' && query_data.password === '123')
{
//res.write(url_obj.query);
res.write("恭喜登录成功!进入到用户中心。");
res.end();
}
else
{
res.write("用户名和密码错误!<a href='/login'>重新登录</a>");
res.end();
}
}
// 用来接收POST方式发送的数据
if(req.method==='POST' && url_obj.pathname === '/user_login')
{ var post_data ='';
// 要获取post 方式发送过来的数据, 需要去监听两个事件
// data 事件作用: 当浏览器有数据发送过来的时候就会触发data 事件
req.on('data',function(chunk)
{
//chunk 参数: 表示数据块,浏览器把数据切块类分块发送
post_data += chunk;
console.log(post_data);
});
req.on('end', function ()
{
// end 事件: 数据接收完成以后触发这个事件。
//console.log ('数据接收完成!')
var post_obj = querystring.parse(post_data);
if (post_obj.username === 'admin' && post_obj.password === '123')
{
//res.write(url_obj.query);
res.write("恭喜登录成功!进入到用户中心。");
res.end();
}
else
{
res.write("用户名和密码错误!<a href='/login'>重新登录</a>");
res.end();
}
});
// res.write("post方式");
// res.end();
}
});
app.listen(3010);
客户端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<!--
1.method: 表单数据发送方式
2.action: 表单把数据发送到哪里去了
3.如果想发送数据到后台,必须给表单项加name 属性
-->
<form action="/user_login" method="post">
用户名:<input type="test" name="username" value="请输入您的名字"> <br>
密码:<input type="test" name="password" value="请输入密码"><br>
<!-- 当点击登录的时候,浏览器会把数据发送到 usr_login-->
<input type="submit" value="登录">
</form>
</body>
</html>
总结:
1. 表单的发送方式: get post 区别: get 发送的数据放在url 里面的,查询字符串。POST 发送的数据, headers 里面,form data
2. get 和 post 应用场景:get 用来做数据查询 post 涉及到数据库的修改
3. 表单项name 属性,必须要有name 属性,后台才能接收到数据
4.前台用get 方式发送,后台就用get 方式接收;前台用post发送,后台用post方式接收。
6. req.method 可以获取前台的发送方式。