好程式設計師web前端學習教程之Node Js流程

　　 好程式設計師 w eb 前端學習教程之 Node Js 流程 1 ，專案前期準備：

 

　　以 express 框架為例

 

　　npmiexpress-generator-g// 全域性安裝 express 框架

 

　　express-e// 生成 express 應用骨架

 

　　npmi// 安裝依賴

 

　　npmstart// 在 3000 埠監聽

 

　　擴充：目前最市面上最流行的 node 框架有：

 

　　--Sail.js

 

　　Sails.js 就像是 Node.js 平臺上的 Rails 框架。這是一個可靠可伸縮的開發框架，面向服務的架構，提供資料驅動的 API 集合。用來開發多玩家遊戲、聊天應用和實時皮膚引用非常方便，也可用於開發企業級 Node.js 應用。

 

　　Sails.js 基於 Node.js,Connect,Express 和 Socket.io 構建。

 

　　--Koa.js

 

　　koa.js 是下一代的 Node.js 的 Web 框架。由 Express 團隊設計。旨在提供一個更小型、更富有表現力、更可靠的 Web 應用和 API 的開發基礎。

 

　　Koa 可以透過生成器擺脫回撥，極大地改進錯誤處理。 Koa 核心不繫結任何中介軟體，但提供了優雅的一組可以快速和愉悅地編寫伺服器應用的方法。

 

　　2, 專案開始

 

　　-- 利用 bootstrap 完成佈局 ( 或者使用 bulma 前端 css 框架也很方便 )

 

　　-- 把需要複用的小元件放在一個資料夾在 , 這裡我新建了一個 commjs 目錄

 

　　-- 建構函式中載入 DOM 結構 ( 物件導向思想 )

 

　　-- 把一切需要重複使用的元件模組化，哪裡需要哪裡引入，程式碼複用

 

　　3 ，理解 mvc

 

　　-- 控制器 Controller ：

 

　　是應用程式中處理使用者互動的部分。

 

　　通常控制器負責從檢視讀取資料，控制使用者輸入，並向模型傳送資料。

 

　　作用：根據路由中設定的路徑不同，呼叫控制器中對應的方法 ( 函式 ) ，

 

　　res.body=> 獲取 post 請求中傳遞的引數

 

　　res.query=> 獲取 get 請求中的資料

 

　　業務邏輯基本都在控制層，呼叫模型中相對應的函式，把需要傳遞的資料作為引數傳遞進去

 

　　-- 模型 Model

 

　　Model( 模型 ) 是應用程式中用於處理應用程式資料邏輯的部分。

 

　　作用：通常模型物件負責在資料庫中存取資料。

 

　　因為模型中的函式需要在控制器裡呼叫，所以在最後需要匯出模型。

 

　　模型裡 , 涉及到資料庫的操作需要依賴 mogoose 包

 

　　模型處理資料會返還一個 promise 物件，成功或者失敗透過 Promise.then 呼叫控制器裡傳遞過來的成功或者失敗的函式

 

　　再由控制器 res.json 返還到前端

 

　　--View( 檢視 )

 

　　是應用程式中處理資料顯示的部分。

 

　　通常檢視是依據模型資料建立的

 

　　4, 前端到後端

 

　　作為前端如果我們需要拿到後端的資料，就得傳送 ajax 請求，如果涉及到檔案操作，就必須用 post 請求

 

　　透過不同的 url( 在 app.js 裡設定過 ) ，拿到不同的資料

 

　　view-Controller-Model ，根據返還的資料渲染頁面

 

　　這裡還是 MVC 模式，所以 MVC 流程必須得熟悉。

 

　　5, 功能

 

　　登入 :

 

　　涉及到資料庫的操作，查詢的結果是 Promise 物件，

 

　　控制器裡面的操作還是那麼回事 , 前端傳遞到控制器的引數，一個成功的回撥，一個失敗的回撥

 

　　模型裡 promise.then() 決定呼叫成功或者失敗的函式，傳到控制器回撥，控制器 res.json 返還到資訊前端

 

　　需要儲存使用者登入資訊： npmicookie-session--save

 

　　app.js 中配置 cookie-session 中介軟體

 

　　檢查是否登入：

 

　　前端載入時，傳送 ajax 請求，根據響應資訊，判斷是否登入，渲染登入效果

 

　　點選退出時，把 req.session 置為 null

 

　　**fromData.append("","") 可以追加請求資訊

 

　　6, 關於檔案上傳

 

　　-- 涉及到檔案上傳，在伺服器端 ( 路由 ) 中引入

 

　　multer 模組 npmimulter--save

 

　　-- 配置檔案上傳， cv 原則，修改儲存位置和命名規則即可

 

　　-- 路由裡，回撥函式前加一個檔案上傳的方法

 

　　router.post('',upload,single(' 檔案上傳表單 name 名 ') ， fn)

 

　　-- 控制器判斷是否有檔案上傳 (res.file)

 

　　如果有用變數儲存檔案路徑 =>constfile="/ 路由中配置的儲存路徑 /"+req.file.filename

 

　　7,mvc 意義

 

　　MVC 分層有助於管理複雜的應用程式，因為您可以在一個時間內專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注於檢視設計。同時也讓應用程式的測試更加容易。

 

　　MVC 分層同時也簡化了分組開發。不同的開發人員可同時開發檢視、控制器邏輯和業務邏輯。

 

　　8 ，總結

 

　　Node.js 實現了前後端分離，把 mvc 理解之後，所有的操作都是按部就班，前端請求到後端資料，只用根據請求到的資料來渲染頁面，後端控制器裡主要負責業務邏輯，模型裡面儲存的是資料 (mongodb 是非關係型資料庫，需要轉化成關係型資料庫 ) 。控制器聯絡著顯示層和模型，它決定後端返回什麼資料，前端能拿到什麼資料

 

　　本文由 好程式設計師 web 前端培訓學員總結。