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

好程式設計師IT發表於2019-03-29

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 是非關係型資料庫,需要轉化成關係型資料庫 ) 。控制器聯絡著顯示層和模型,它決定後端返回什麼資料,前端能拿到什麼資料


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2639736/,如需轉載,請註明出處,否則將追究法律責任。

相關文章