web前端培訓分享node學習筆記

愛創課堂培訓崔老師發表於2020-12-30
Web前端筆記

愛創課堂 web前端培訓分享 node學習筆記

一、NodeJS如何連結mongodb

NodeJS中連結Mongodb
1、安裝
cnpm install mongodb -S
2、建立連結的地址
3、連結
const mongoClient = require( “mongodb” ).MongoClient; //2、建立連結的方式 const url = “mongodb://127.0.0.1:27017” ; //3、建立連結的資料庫 const db_name = “gp17” ; //4、連結 mongoClient.connect(url,(err,client)=>{
if (err){
console.log( “連結失敗” )
} else {
console.log( “連結成功” )
//5、連結資料庫以及表 var user = client.db(db_name).collection( “user” );
}})

二、mongoose的基本使用

1、mongoose與mongodb的區別

參考上面的

2、NodeJS連結mongoose

const mongoose = require( ‘mongoose’ ); //是一個建構函式 用來限制表的欄位型別 const Schema = mongoose.Schema; //連結的地址 const url = “mongodb://127.0.0.1:27017/gp17” ; //連結 mongoose.connect(url,(err)=>{
if (err){
console.log( “連結失敗” );
} else {
console.log( “連結成功” )
}}) //連結表/建立表 var StudentsSchema = new Schema({
sname : String ,
sage : Number }) //返回值是一個建構函式 const Students = mongoose.model( “student” ,StudentsSchema); //如果表的名稱是複數則 資料庫中的表名稱不會變 如果不是複數則資料庫中標的名稱會自動加s // mongoose.model(“students”,{// sname:String,// sage:Number// })

三、用所封裝好的路由+nodeJS+Mongoose+MVC實現登入註冊

< 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 >
 < link   rel = "stylesheet"   href = "./css/index.css" ></ head >< body >
 < h1 > index頁面 </ h1 >
 < div >
     < img   src = "./img/u=2071817741,4218539796&fm=58&s=EE7A2FC0DE0120D6CF6D1509010070D2.jpg"   alt = "" >
     < img   src = "./img/u=2708490274,319030395&fm=58&s=9E3269850EF36DB70811A15B03008060.jpg"   alt = "" >
     < img   src = "./img/u=3473750589,1700978550&fm=58&s=4E946D84D2417CFE5C3FB5D90300D0B9.jpg"   alt = "" >
     < img   src = "./img/u=3508817781,1654561115&fm=58&s=6D83639716736DB3087070600300E070.jpg"   alt = "" >
 </ div >
 < form   id = "user" >
     使用者名稱: < input   type = "text"   id = "username" >
     密碼: < input   type = "text"   id = "password" >
     < input   type = "submit" >
 </ form ></ body ></ html >< script   src = "./js/index.js" ></ script >< script   src = "https://cdn.bootcss.com/jquery/1.11.3/jquery.js" ></ script >

< script >
$( “#user” ).on( “submit” , function (e) {
e.preventDefault()
var username = $( “#username” ).val();
var password = $( “#password” ).val();
$.ajax({
url : “/user/register” ,
method : “post” ,
data : {
username,
password
},
success :function (data){
console.log(data);
}
})
}) </ script >

const http = require( “http” ); const router = require( “./router” ) const server = http.createServer(router) router.post( “/user/register” ,(req,res)=>{
console.log(req.body);
res.json({
code : 200 ,
errMsg : ‘’
})}) server.listen( 9000 ) const url = require( “url” ); const fs = require( “fs” ); const path = require( “path” ); const qs = require( “querystring” ) //收集事件 const routerMap = {
get : {},
post : {}} const router = function (req,res){
//給res新增一個json方法 res.json = function (obj){
res.end(JSON.stringify(obj))
}
//處理靜態資源 handleStatic(req,res);
//獲取使用者請求的方式 var method = req.method.toLowerCase();
//獲取使用者請求的地址 var {pathname,query} = url.parse(req.url, true );
if (method === “get” ){
if (routerMap.get[pathname]){
//將query的值賦值給req.query req.query = query;
routerMap.getpathname
} else {
res.end( “404” )
}
} else if (method === “post” ){
if (routerMap.post[pathname]){
var str = “” ;
//獲取post傳遞的引數 req.on( “data” ,(data)=>{
str += data;
})
req.on( “end” ,()=>{
req.body = qs.parse(str);
routerMap.postpathname
})

     }
 }} //註冊事件 router.get   =   function (path,callback){
 routerMap.get[path]   =   callback;} //註冊事件 router.post   =   function (path,callback){
 routerMap.post[path]   =   callback;} //處理所有的靜態資源訪問 function   handleStatic(req,res){
 var   {pathname}   =   url.parse(req.url, true );
 //獲取檔案的字尾      var   ext   =   pathname.substring(pathname.lastIndexOf( "." ));
 if (pathname   === "/" ){
     res.writeHead( 200 ,{ "content-type" : "text/html;charset=utf8" });
     res.end(getFile(path.join(__dirname, "../public/index.html" )))
 } else   if (ext   ===   ".css" ){
     res.writeHead( 200 ,{ "content-type" : "text/css;charset=utf8" });
     res.end(getFile(path.join(__dirname, "../public" ,pathname)));
 } else   if (ext   ===   ".js" ){
     res.writeHead( 200 ,{ "content-type" : "application/x-javascript;charset=utf8" });
     res.end(getFile(path.join(__dirname, "../public" ,pathname)));
 } else   if ( /.*\.(jpg|png|gif)/ .test(ext)){
     res.writeHead( 200 ,{ "content-type" : `image/${ RegExp .$1 };charset=utf8` });
     res.end(getFile(path.join(__dirname, "../public" ,pathname)));
 } else   if (ext   ===   ".html" ){
     res.writeHead( 200 ,{ "content-type" : "text/html;charset=utf8" });
     res.end(getFile(path.join(__dirname, "../public" ,pathname)));
 }} function   getFile(filePath){
 return   fs.readFileSync(filePath);} module.exports   =   router;

四、express的基本入門
1、什麼是express？
Express 是一個保持最小規模的靈活的 Node.js Web 應用程式開發框架,為 Web 和移動應用程式提供一組強大的功能
2、什麼是中介軟體
請求和回覆之間的一個應用
3、常見的中介軟體有哪些？
1、應用層中介軟體(http請求之類的應用)
const express = require( “express” ); const app = express(); //應用層的中介軟體 app.use((req,res,next)=>{
console.log( 123 );
next()}) app.use((req,res,next)=>{
console.log( 456 )
next()}) app.use((req,res,next)=>{
console.log( 789 );
next();}) app.use( “/home” ,(req,res,next)=>{
res.end( “home” );}) app.get( “/list” ,(req,res,next)=>{
res.end( “list” )}) app.post( “/list” ,(req,res,next)=>{
res.end( “list” )}) app.listen( 9000 ,()=>{
console.log( “server address:127.0.0.1:9000” )}) /* express中的中介軟體會分為哪幾類？ 1、應用層中介軟體(http請求之類的應用) app.use app.get app.post 2、內建中介軟體 3、錯誤處理中介軟體 4、路由中介軟體 5、第三方中介軟體 6、自定義中介軟體 如何使用中介軟體？ app.use(中介軟體) 使用中介軟體 app.use中的引數 path:選填 callback || router 如果是callback的請求下 這個回撥中會有3個引數 req:請求 res:響應 next:執行下一個中介軟體 只要http這個服務跑一次那麼久會將app.use中的所有函式統一執行一遍*/

2、內建中介軟體
const express = require( “express” ); const app = express(); const path = require( “path” ); //內建中介軟體 app.use(express. static (path.join(__dirname, “./public” ))) app.listen( 9000 ,()=>{
console.log( “server address:127.0.0.1:9000” )})

3、錯誤處理中介軟體
const express = require( “express” ); const app = express(); const path = require( “path” ); //內建中介軟體 app.use(express. static (path.join(__dirname, “./public” ))) //錯誤中介軟體處理一般寫在程式的最後面 app.use((req,res,next)=>{
res.status( 404 ).send( “沒有這個頁面” )}) app.listen( 9000 ,()=>{
console.log( “server address:127.0.0.1:9000” )})

4、路由中介軟體
const express = require( “express” ); const app = express(); const path = require( “path” ); const indexRouter = require( “./router/index” ); //內建中介軟體 app.use(express. static (path.join(__dirname, “./public” ))) //路由級別的中介軟體 app.use( “/user” ,indexRouter) app.listen( 9000 ,()=>{
console.log( “server address:127.0.0.1:9000” )})

5、第三方中介軟體
例如 cheerio jsonwebToken等

6、自定義中介軟體
自己根據需求封裝的中介軟體

在這裡插入圖片描述

前端技術每年都會不斷更新，學習前端開發建議大家還是要選擇培訓為好，推薦愛創課堂，是一家專門做前端教育的學校，愛創課堂是一家以就業為導向的前端培訓學校，所學習的就是企業所需要的，培養企業最需要的前端工程師為企業理念，授課以實戰課程為主，更多的學習大專案對以後工作有幫助，畢業後輕鬆就業！

一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。那麼如何系統的學習企業實用的web前端技術呢，前端學習培訓、視訊教程、學習路線，可以給我留言或私信我，獲取前端學習資料。相信從中會受到啟發，找到學習的方向和目標。如大家對前端還有不瞭解的問題，可以持續關注我。

相關文章