nodejs搭建静态资源服务器、 Express基本使用

其他 2020-09-07 13:32:28 阅读次数: 0

nodejs搭建静态资源服务器

  1. 浏览器中的所有外部资源路径，都会变成网络请求
  2. 一般的静态资源（css文件，图片，音视频）使用url路径拼接的方式来处理
//1.导入模块
const http = require('http');
const fs = require('fs');
const path = require('path');


//2.创建服务器
let server = http.createServer((req,res)=>{
    //(1)请求：req
    console.log(req.url);
    
    //(2)处理
    if( req.url == '/' ){
        //读取html文件响应返回
        fs.readFile( path.join(__dirname,'www','index.html'),(err,data)=>{
            if(err) throw err;
             //(3)响应：res
            res.end(data);
        });
    }else if( req.url.indexOf('/resource') == 0  ){
        fs.readFile( path.join(__dirname,'www',req.url),(err,data)=>{
            if(err) throw err;
             //(3)响应：res
            res.end(data);
        });
    }else{//错误路径
        res.end('404 not found');
    }
   
});

//3.开启服务器
server.listen(3000,()=>{
    console.log('服务器开启成功');
});

nodejs接收get与post参数

Nodejs获取get请求参数

在http协议中，一个完整的url路径如下图

  • 通过下图我们可以得知，get请求的参数是直接在url路径中显示。
  • get的请求参数在path资源路径的后面添加，以?表示参数的开始，以key=value表示参数的键值对，多个参数以&符号分割
  • hash部分表示的是资源定位符（滚动网页可视区域），由浏览器自动解析处理，它的作用是跳转到对应id的标签的位置
  • get参数解析原理是 字符串切割
  • 第一个参数：要切割的url字符串 第二个参数：布尔类型 默认false:query不处理 true:query处理成对象
    let obj = url.parse( req.url,true );
    在这里插入图片描述

  1. 前端发送get请求： 直接在url后面拼接 url?key1=value1&key2=value2

  2. nodejs接收get请求参数

    1. 导入url模块
    2. 调用parse()方法解析参数： url.parse( req.url,true )
    3. 获取解析好的query属性 ： get参数
//1.导入模块
const http = require('http');

const url = require('url');

//2.创建服务器
let server = http.createServer((req,res)=>{

    //(1)get请求参数直接在url后面拼接
    console.log( req.url );
    //(2)get参数解析原理是 字符串切割

    //第一个参数：要切割的url字符串  第二个参数：布尔类型  默认false:query不处理  true:query处理成对象
    let obj =  url.parse( req.url,true );
    console.log(obj);

    let {query} = obj;
    console.log( query );


    //响应返回参数：告诉客户端解析成功  (js对象需要转json对象才可以响应返回)
    res.end( JSON.stringify(query) );
     
});

//3.开启服务器
server.listen(3000,()=>{
    console.log('服务器开启成功');
});

在这里插入图片描述

Nodejs获取post请求参数

post请求特点

  • post请求的参数是在请求体中，无法使用get的方式来接收post请求的参数
  • post请求的参数无法一次获取，有可能是多次 原因：post可以提交大数据，而宽带有网络限制
  1. 前端发送post
    1.1 需要设置请求头
    1.2 请求体中发送： xhr.send(key=value)
  2. nodejs接收post参数
    2.1 给req注册data事件(接收数据包)
    2.2 给req注册end事件(数据包接收完毕)
    2.3 在end方法中使用querystring模块解析body
// 1.导入模块
const http = require('http');

// 解析get请求参数
const url = require('url');
// 解析post请求参数
const querystring = require('querystring');

// 2.创建服务器

let server = http.createServer((req, res) => {
	console.log(req.url);
	/* 箩筐思想
        (1)给req注册data事件
        客户端每发送一个数据包，这个事件就会触发一次（触发多次） 
    */
	let postData = '';
	req.on('data', function (chunk) {
		postData += chunk;
	});
	/* 
        (2)给req注册end事件
        客户端每一次post所有的数据包发送完毕会执行一次

    */
	req.on('end', () => {
		//    (3)处理post参数：使用querystring模块切割 请求体
		console.log(postData);
		let body = querystring.parse(postData);
		console.log(body);

		// 响应给客户端
		res.end(JSON.stringify(body));
	});
});
// 3.开启服务器
server.listen(3000, () => {
	console.log('服务器开启成功');
});

post请求与get请求的区别

  1. 位置不同：
    get是在url后面拼接(请求行)
    post是在请求体中发送(请求体)

  2. 大小不同：一般文件上传接口都是post
    get发送数据有大小限制(一般是1MB)
    post发送数据没有大小限制

  3. 速度不同
    get速度比post快

  4. 安全性不同：一般登录注册都是post
    post比get安全

Express

Express是NodeJS开发中一个非常重量级的第三方框架，它对于NodeJS服务端就相当于Jquery对于HTML客户端。

Express一个非常重要的亮点就是它没有改变nodejs已有的特性，而是在它的基础上进行了拓展也就是说，使用Express你既可以使用nodejs原生的任何API，也能使用Express的API

官网地址：

Express的github地址:
https://github.com/expressjs/express

Express三大核心功能

  1. 托管静态资源

  2. 路由(前端人员的接口文档)

    • express自带路由功能,让Node服务端开发变得极其简单
    • express支持链式语法，可以让代码看起来更加简洁

  3. 中间件（相当于插件）

Express最为核心的技术和思想，万物皆中间件

Express基本使用

  • npm使用流程
  • 1.初始化：在当前nodejs项目中执行终端命名: npm init -y
    • 作用：生成一个pachage.json文件，帮你记录当前项目安装了哪些第三方模块及对应的版本号
  • 2.安装：在当前nodejs项目中执行终端命名: npm install 模块名
    • 安装之后，你的项目目录会新增两个文件node_modules与package-lock.json
      • node_modules:npm会自动将所有的第三方模块放入这个文件夹中。类似于前端的lib文件夹
      • package-lock.json：npm会自动记录第三方模块的下载地址，下一次安装或更新的时候直接从这个地址下载，速度更快(只是影响以后更新速度，不影响开发)
      • pachage.json:帮你记录当前项目安装了哪些第三方模块及对应的版本号
  • 3.注意点：
    • (1)使用npm文件夹路径不能有中文
    • (2)使用cnpm安装第三方模块得时候需要添加 --save命令。
      • 示例
        • npm安装crawler : npm install crawler
          • npm会自动执行–save，将下载路径保存到package-lock.json文件中
        • cnpm安装crawler : cnpm install crawler --save
    • (3)优先建议使用npm命令来安装。 如果网速很慢导致无法安装第三方模块，建议使用以下两种方式
      • a.优先建议 ： 更改npm镜像源为淘宝服务器
        • npm config set registry https://registry.npm.taobao.org/
        • 查看当前npm得镜像源：npm config list
      • b.使用cnpm命令来安装第三方模块

第三方模块使用流程（适合所有第三方模块）

  • 1.进npm官网搜索模块:https://www.npmjs.com/
  • 2.按照官方文档要求安装模块npm install 模块名
  • 3.复制粘贴官网代码(别人作者提前写好的)

第三方中间件使用
第三方中间件使用步骤一般都是固定两步

  • 一： 安装 npm i xxxx（官网复制粘贴）
    • 第三方中间件都需要使用npm安装，可以理解为是一种特殊的第三方模块
  • 二: 使用 app.use(xxx)（官网复制粘贴）

爬虫实战

//仅供学习交流，切勿用做其他用途
//1.导入爬虫模块
var Crawler = require('crawler');

//2.创建爬虫对象
var c = new Crawler({
	maxConnections: 10,
	// This will be called for each crawled page
	callback: function (error, res, done) {
		if (error) {
			console.log(error);
		} else {
			//爬虫成功回调

			//将爬取到的网页DOM树赋值给jq的$ (目的：使用jq的语法来操作DOM树)
			var $ = res.$;
			
			let heroList = [];
			$('.herolist>li').each((index, ele) => {
				// ele：dom对象
				// console.log(`名字：${$(ele).find('a').text()}`);
				// console.log(`图片：${$(ele).find('img').attr('src')}`);
				heroList.push({
					name: $(ele).find('a').text(),
					pic: $(ele).find('img').attr('src'),
				});
			});
            console.log(heroList);
           
			
		}
		done();
	},
});

//3.开始爬虫
// Queue just one URL, with default callback
c.queue('网址');

express搭建服务器

//1.导入模块 : 相当于http
const express = require('express');

//2.创建服务器
let app = express();

//3.开启服务器
app.listen(3000,()=>{
    console.log('服务器启动成功');
});

express响应客户端数据 (4个步骤)

  • express框架本质不是修改原生代码，而是在原生的基础上添加方法 （给req和res原型添加成员）
  • 路由（接口文档）：一个请求对应一个函数
    (1)响应普通文本 ： res.send(‘字符串’)
    (2)响应json对象 : res.send( js对象 )
    (3)响应html文件 : res.sendFile( 文件绝对路径 )
// 1.导入模块
const express = require('express');

// 2.创建服务器
let app = express();

// 3.路由（接口文档）：一个请求对应一个函数
app.get('/', (req, res) => {
	//响应普通文本

	// 原生语法
	// res.end('这是首页');
	// express语法
	res.send('这是首页');
});
app.get('/login', (req, res) => {
	// 响应json：底层会自动将js对象转成json格式字符串
	res.send({
		username: 'admin',
		password: 123456,
	});
});
app.get('/list', (req, res) => {
	// 响应html文件:文件的绝对路径
	res.sendFile(`${__dirname}/list.html`);
});
app.use((req, res) => {
	res.end('404');
});
// 4.开启服务器
app.listen(3000, () => {
	console.log('服务器开启成功');
});

express托管静态资源（5个步骤）

const express = require('express');

//2.创建服务器
let app = express();

//3.托管静态资源
/* 
(1)如果请求路径为/ , express会自动读取www下面index.html响应返回
(2)如果请求路径是以www中文件夹开头，express会自动根据url拼接路径返回
*/
app.use(express.static('www'));

//4.写路由（接口文档）

//5.开启服务器
app.listen(3000, () => {
	console.log('服务器开启成功');
});

express接收get与post参数

// 1.导入模块
const express = require('express');

// 2.创建服务器
let app = express();

// 3.托管静态资源
app.use(express,static('www'));

// 4.配置中间件(jq的插件)：本质都是给req或者res原型添加成员

// 4.1body-parser中间件：解析post参数
// (1)导入中间件
const bodyParse = require('body-parser');
// (2)使用中间件：给req添加body属性，储存解析好的post参数
app.use(bodyParse.urlencoded({extended:false}))

// 5.写路由(接口文档)
/* 
    接收get请求参数
    req.query
 */
app.get('/hero/list',(req,res)=>{
    console.log(req,url);
    // 获取get参数：express会自动帮我们解析get参数并且添加到reqde 原型query属性中
    console.log(req.query);
    res.send(req.query)

});
/* 
    接收post请求参数
    (1)使用body-parser插件
    (2)req.body

*/
app.post('/hero/add',(req,res)=>{
    console.log(req.url);
    console.log(req.body);
    res.send(req.body)

});
// 6.开启服务器
app.listen(3000,()=>{
    console.log('服务器开启成功');
})

猜你喜欢

转载自blog.csdn.net/weixin_44757417/article/details/108426286
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022