前端知識點小結--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');