前端知識點小結--node、express、mongodb

想看花開發表於2020-12-28

文章標題

1、node–get、post請求

index.html程式碼：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<h1>這是登入頁面</h1>
		<!-- 預設是get請求 -->
		<!-- get和post區別？
			get請求引數在url內部  請求引數可見
			post不可見，請求速度比較慢
			action請求地址
		 -->
		<!-- <form action="http://localhost:8989/submit" method="get">
			如果是form直接提交資料，前端一定要有name值，才可以傳送資料給後臺 
			name相當於前後端介面
			<input type="text" placeholder="請輸入使用者名稱" name="user"><br><br>
			<input type="password" placeholder="請輸入密碼" name="pass" ><br><br>
			<input type="submit">
		</form> -->
		<form action="http://localhost:8989/submit" method="get">
			<input type="text" placeholder="請輸入使用者名稱" name="user"><br><br>
			<input type="password" placeholder="請輸入密碼" name="pass" ><br><br>
			<input type="submit">
		</form>
		<a href="">登入</a>
	</body>
</html>

get請求：

js程式碼：

const http=require('http');
const fs=require('fs');
const path=require('path');
const url=require('url');
// 引入讀檔案的模組
const readfile=require('readfile');

//建立伺服器
let server=http.createServer((req,res)=>{
	if(req.url=='/favicon.ico') return;
    //如果瀏覽器地址輸出form開啟
	if(req.url.startsWith('/form')){
    //則通過路徑讀取內容
		readfile(__dirname,req,res);
			
	}else if(req.url.startsWith('/submit')){
		// get請求的引數，在url內部，所以需要解析url 需要url模組
		// url模組專門用來處理地址
		// url.parse(地址,true)可以把地址解析為物件;true可以把儲存引數的query轉化為物件

		// 前端傳遞過來的資料
		console.log(url.parse(req.url,true).query);
		let params=url.parse(req.url,true).query;

		// 傳送的資料只能是字串
		res.end(`使用者名稱是${params.user}密碼是${params.pass}`);
	}else{
		res.end('404');
	}
})

server.listen('8989')

在cmd中執行js
在這裡插入圖片描述
開啟inde.html，點選提交

跳轉得到

post請求

首先修改index.html程式碼

	<form action="http://localhost:8989/submit" method="post">

post的js程式碼：

const url=require('url');
const querystring=require('querystring')
// 引入讀檔案的模組
const readfile=require('readfile');

let server=http.createServer((req,res)=>{
	if(req.url=='/favicon.ico') return;

	if(req.url.startsWith('/form')){

		readfile(__dirname,req,res);
			
	}else if(req.url.startsWith('/submit')){
		// post請求傳送資料的時候，是一段段傳送
		// data事件，監聽接收的資料
		// 一般測試不出來。
		var allData='';
		req.on('data',(chunk)=>{
			allData+=chunk;
		})

		// end事件 資料接收完的時候執行
		req.on('end',()=>{
			// allData得到的是k=v&k=v形式的資料  使用querystring轉化 querystring.parse()可以把類似k=v&k=v的字串轉化為物件
			console.log(querystring.parse(allData));
			res.end(`使用者名稱是${allData.user}密碼是${allData.pass}`);
		})
	}else{
		res.end('404');
	}
})

server.listen('8989')

按步驟執行即可

兩個js檔案整合起來：

const readfile=require('readfile');
const http=require('http');
const url=require('url');
const querystring=require('querystring')
// 建立伺服器
let server=http.createServer((req,res)=>{
	if(req.url=='/favicon.ico') return;
	// 處理get或者post請求
	// 如果是post請求的時候，query引數為空
	if(req.url.startsWith('/form')){
		readfile(__dirname,req,res);

		return;
	}
	if(url.parse(req.url,true).query=={}){
		var allData='';
		req.on('data',(chunk)=>{
			allData+=chunk;
		})

		// end事件 資料接收完的時候執行
		req.on('end',()=>{
			// allData得到的是k=v&k=v形式的資料  使用querystring轉化 querystring.parse()可以把類似k=v&k=v的字串轉化為物件
			console.log(querystring.parse(allData));
			res.writeHead(200,{'Content-type':'text/plain;charset=utf-8'});
			res.end(`使用者名稱是${allData.user}密碼是${allData.pass}`);
		})
	}else{
		let params=url.parse(req.url,true).query;
		res.writeHead(200,{'Content-type':'text/plain;charset=utf-8'})
		// 傳送的資料只能是字串
		res.end(`使用者名稱是${params.user}密碼是${params.pass}`);
	}
})
// 監聽埠號
server.listen('8989');

2、Express 簡介

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各種 Web 應用，和豐富的 HTTP 工具。

使用 Express 可以快速地搭建一個完整功能的網站。

Express 框架核心特性：

可以設定中介軟體來響應 HTTP 請求。

定義了路由表用於執行不同的 HTTP 請求動作。

可以通過向模板傳遞引數來動態渲染 HTML 頁面。

安裝 Express 並將其儲存到依賴列表中：
cmd命令：

npm install express --S

以上命令會將 Express 框架安裝在當前目錄的 node_modules 目錄中。

例項：靜態資源讀取

// 第一步：引入框架
const express=require('express');
// 建立伺服器
const app=express();

// 讀取靜態資源 自動去form目錄下尋找index.html,呈遞給前臺。如果沒有index.html
//會提示錯誤


// 路徑：除了ip地址和埠號剩下的就是路徑
// http://localhost:8989/zsh/dsfsdfsd

// app.use('獲取的url路徑',express.static('讀取靜態資源路徑'))
// 前端要和路徑完全匹配，才會執行程式碼
app.use('/',express.static('./www/form/index.html'));

// 如果不是處理靜態資源,路徑的意思就是以該路徑開始即可匹配,不是完全匹配
app.use('/zsh',(req,res)=>{
	// 封裝完以後，結束響應使用send,執行完以後不會再往下執行，結束響應
	res.send('404');
})

console.log(11111);
// 新增監聽埠號
app.listen('8989')

讀取靜態資源–app.get()
JS程式碼：

const express=require('express');
const app=express();
// 靜態資源讀取
// /預設 尋找的路徑需要是index.html
app.use('/',express.static('./www/form'));

// app.get()可以處理get請求
app.get('/submit',(req,res)=>{
	// get請求的引數在url內部  req.query獲取get請求引數
	console.log(req.query);
	res.send(`您輸入的使用者名稱是${req.query.user}`);
})

app.listen('8989')

cmd執行js;
開啟html頁面：
在這裡插入圖片描述

在這裡插入圖片描述
讀取靜態資源–app.post()
JS程式碼：

const express=require('express');
const app=express();

// post請求需要依賴專門的模組
// 第一步：npm install  body-parser -S;
// 第二步：在頁面中引入
// 第三步：在post請求的第二個引數加上剛剛解析body-parser得到的引數。
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })

// 靜態資源讀取
// /預設 尋找的路徑需要是index.html
app.use('/',express.static('./www/form'));
// app.post()可以處理post請求
// post請求引數處理比較麻煩，需要依賴一個模組 body-parser
// 具體用法可以參照手冊
// post請求的第二個引數需要通過解析body-parser模組得到
app.post('/submit',urlencodedParser,(req,res)=>{
	// 獲取post請求的引數 req.body
	res.send(req.body);
})

app.listen('8989');

按步驟進行即可

兩者整合：

const express=require('express');
const app=express();

var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use('/',express.static('./www/form'));
app.post('/submit',urlencodedParser,(req,res)=>{
	res.send(req.body);
})

app.get('/submit',(req,res)=>{
	console.log(req.query);
	res.send(`您輸入的使用者名稱是${req.query.user}`);
})
app.listen('8989');

靜態資源讀取—ajax
先在目錄下再建立一個public資料夾
public一般放置的是css 、js檔案;
js程式碼：

const express=require('express');
const app=express();

// 引入處理post引數的模組
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use('/',express.static('./www/form'));

//把靜態資源呈遞
app.use('/public',express.static('./public'));

app.post('/submit',urlencodedParser,(req,res)=>{
	// 獲取post請求的引數 req.body
	res.send(req.body);
})

app.get('/submit',(req,res)=>{
	// get請求的引數在url內部  req.query獲取get請求引數
	console.log(req.query);
	res.send(`${req.query.user}`);
})

app.listen('8989');

index.html:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="../../public/js/jquery-3.0.0.min.js"></script>
		<link rel="stylesheet" href="../../public/css/my.css">
	</head>
	<body>
		<h1>這是登入頁面</h1>
			<input type="text" placeholder="請輸入使用者名稱" name="user">
			<span></span>
			<br><br>
			<input type="password" placeholder="請輸入密碼" name="pass" ><br><br>
			<!-- <input type="submit"> -->
			<button>按鈕</button>
		<!-- </form> -->
		<a href="sign.html">已有賬號請註冊</a>

		<script>
			$('button').click(()=>{
				$.ajax({
					url:'http://localhost:8989/submit',
					method:'get',
					data:{
						user:$('input[type="text"]').val(),
						pass:$('input[type="password"]').val()
					},
					success:function(res){
						console.log(res);
						if(res=='zsh'){
							$('span').html('您輸入的使用者名稱有誤')
						}else{
							$('span').html('√');
							
						}
						
					}
				})
			})
		</script>
	</body>
</html>

ajax：不需要跳轉
在這裡插入圖片描述
開啟其他頁面：

<form action="http://localhost:8989/submit" method="get">

提交get請求，跳轉:
在這裡插入圖片描述
post請求：

<form action="http://localhost:8989/submit" method="post">

在這裡插入圖片描述

3、Mongodb資料庫

自己寫的相關介紹連結：https://blog.csdn.net/weixin_53037175/article/details/111829602

連線資料庫，和後臺聯絡起來：

const express=require('express');
const app=express();
// 引入資料庫
var MongoClient = require('mongodb').MongoClient;
// 資料庫地址
var url = "mongodb://localhost:27017";
 

app.use('/zsh',(req,res)=>{
	// 插入資料庫
	// 連線資料庫  把資料庫和後臺聯絡起來
	MongoClient.connect(url, function(err, db) {
    if (err) throw err;
    var dbo = db.db("student");
    dbo.collection("stu1"). find({}).toArray(function(err, result) { // 返回集合中所有資料
        if (err) throw err;
        console.log(result);
        db.close();
        res.send(result);
    });
});
})

app.use('/',(req,res)=>{
	MongoClient.connect(url, function(err,db) {
    	if (err) throw err;
    	// 選擇資料庫
	    var dbo = db.db("student");
	    var myobj = { name: "菜鳥教程", url: "www.runoob" };
	    // 插入資料操作
	    dbo.collection("stu1").insertOne(myobj, function(err, res1) {
	        if (err) throw err;
	        db.close();
	        res.send('資料插入成功了');
	    });
	});
})
app.listen('8989');

node知識點小結（一）
2020-12-25
前端小知識點
2021-12-02
前端
MongoDB知識點總結
2020-06-09
MongoDB
前端小知識點彙總
2019-04-10
前端
前端(js html)小知識點
2019-02-16
前端JSHTML
【JAVA】- 知識點小結
2019-10-28
Java
promise知識點小結
2019-03-04
Promise
HTTP知識點小結
2017-12-14
HTTP
makefile 知識點小結
2024-06-14
mongoDB知識點
2013-07-14
MongoDB
前端須知的 Cookie 知識小結
2019-05-10
前端Cookie
前端知識點總結——Vue
2019-03-19
前端Vue
前端知識點總結——HTML
2019-06-18
前端HTML
前端知識點總結——DOM
2019-06-18
前端
shell知識點小結2
2017-12-20
awk知識點小結1
2013-07-05
shell知識點小結1
2013-06-17
MongoDB知識要點
2019-12-09
MongoDB
雜湊表知識點小結
2019-07-17
總結的小知識點（一）
2018-12-10
oracle事務知識點小結
2017-12-19
Oracle
前端知識點
2019-04-04
前端
前端基礎知識之什麼是節點Node？
2019-06-22
前端
前端知識點總結——JavaScript基礎
2019-06-20
前端JavaScript
前端知識點總結—面試專用
2019-02-16
前端面試
前端知識點總結——H5
2019-02-16
前端H5
前端知識點總結——C3
2019-02-16
前端
html前端知識點
2020-11-26
HTML前端
前端小知識10點（2019.5.2）
2019-05-03
前端
web前端javascript+jquery知識點總結
2020-02-17
Web前端JavaScriptjQuery
Node.js 知識點一
2018-11-12
Node.js
後端知識點總結——NODE.JS（高階）
2019-02-16
後端Node.js
後端知識點總結——NODE.JS基礎
2019-02-16
後端Node.js
java小知識點
2021-09-09
Java
js小知識點
2019-01-17
JS
小知識點1
2020-12-10
mongo 小知識點
2018-05-18
Go
javascript小知識點
2017-02-07
JavaScript

前端知識點小結--node、express、mongodb

文章標題

1、node–get、post請求

2、Express 簡介

3、Mongodb資料庫

相關文章