html5前臺入門教程風險:Node.Js 框架

  • 時間:2018-10-30 22:56 作者:千鋒Html5學習課堂 來源:千鋒Html5學習課堂 閱讀:223
  • 掃一掃,手機訪問
摘要:項目前期準備: 以express 框架為例 npm i express-generator -g //全局安裝express框架 express -e //生成express應用骨架 npm i //安裝依賴 npm start //在3000端口監聽 拓展:目前最市面上最流行的node框架有:

html5前臺入門教程風險:Node.Js 框架

項目前期準備:
以express 框架為例
npm i express-generator -g //全局安裝express框架
express -e //生成express應用骨架
npm i //安裝依賴
npm start //在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核心不綁定任何中間件,但提供了優雅的一組可以快速和愉悅地編寫服務器應用的方法。

項目開始

  • 利用bootstrap完成布局(或者者使用bulma前臺css框架也很方便)

  • 把需要復用的小組件放在一個文件夾在,這里我新建了一個commjs目錄

  • 構造函數中加載DOM結構(面向對象思想)

  • 把一切需要重復使用的組件板塊化,哪里需要哪里引入,代碼復用

了解mvc

  • 控制器Controller:
    是應用程序中解決客戶交互的部分。
       通常控制器負責從視圖讀取數據,控制客戶輸入,并向模型發送數據。

作用:根據路由中設置的路徑不同,調用控制器中對應的方法(函數),
res.body =>獲取post請求中傳遞的參數
res.query => 獲取get請求中的數據
業務邏輯基本都在控制層,調用模型中相對應的函數,把需要傳遞的數據作為參數傳遞進去

  • 模型Model
    Model(模型)是應用程序中用于解決應用程序數據邏輯的部分。
      作用:通常模型對象負責在數據庫中存取數據。

由于模型中的函數需要在控制器里調用,所以在最后需要導出模型。
模型里,涉及到數據庫的操作需要依賴mogoose包

模型解決數據會返還一個promise對象,成功或者者失敗通過Promise.then調用 控制器里傳遞過來的成功或者者失敗的函數
再由控制器res.json返還到前臺

  • View(視圖)
    是應用程序中解決數據顯示的部分。
       通常視圖是依據模型數據創立的

前臺到后臺

作為前臺假如我們需要拿到后臺的數據,就得發送ajax請求,假如涉及到文件操作,就必需用post 請求
通過不同的url(在app.js里設置過),拿到不同的數據
view-Controller-Model ,根據返還的數據渲染頁面
這里還是MVC模式,所以MVC流程必需得熟習。


功能
登錄:
涉及到數據庫的操作,查詢的結果是Promise對象,
控制器里面的操作還是那么回事,前臺傳遞到控制器的參數,一個成功的回調,一個失敗的回調
模型里promise.then()決定調用成功或者者失敗的函數,傳到控制器回調,控制器res.json返還到信息前臺

需要保存客戶登錄信息:npm i cookie-session --save
app.js中配置cookie-session中間件

檢查能否登錄:
前臺加載時,發送ajax請求,根據響應信息,判斷能否登錄,渲染登錄效果
點擊退出時,把req.session置為null

**fromData.append("","")可以追加請求信息

關于文件上傳

  • 涉及到文件上傳,在服務器端(路由)中引入
    multer板塊 npm i multer --save

  • 配置文件上傳 ,cv準則,修改保存位置和命名規則就可

  • 路由里,回調函數前加一個文件上傳的方法
    router.post('',upload,single('文件上傳表單name名'),fn)

  • 控制器判斷能否有文件上傳(res.file)
    假如有用變量儲存文件路徑 => const file = "/路由中配置的保存路徑/" + req.file.filename


mvc意義

MVC 分層有助于管理復雜的應用程序,由于您可以在一個時間內專門關注一個方面。例如,您可以在不依賴業務邏輯的情況下專注于視圖設計。同時也讓應用程序的測試更加容易。
MVC 分層同時也簡化了分組開發。不同的開發人員可同時開發視圖、控制器邏輯和業務邏輯。

總結

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

編輯:千鋒HTML5

2019白小姐旗袍图库
  • 全部評論(0)
最新發布的資訊信息
【系統環境|】阿里云服務器Centos7搭建pptp VPN 一鍵安裝腳本 親測好用(2020-03-18 02:39)
【系統環境|服務器應用】在CentOS 7上如何安裝Gogs 0.11.53(2020-02-10 10:14)
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部