node學習（一）項目初始化搭建

時間 2019-11-09

標籤 node 學習項目初始化搭建简体版

原文原文鏈接

node+express+mysql+Vue（一）

項目後端架構搭建

技術棧

語言node.js
框架express
數據庫mysql

開發環境及工具

node.js 菜鳥教程
 mysql 菜鳥教程
 nodemon --node http服務熱更新
postman --接口本地測試工具html

開始

項目使用的是Express框架，從初始化一個Express項目開始。node

1.初始化一個Express項目

在Express框架的官方文檔中，是經過生成器工具express-generator快速生成了一個Express應用，相關步驟以下：mysql

安裝Express生成器: npm install -g express-generator
初始化一個Express應用`express express_server

目錄結構概覽

目錄結構簡介

app.js應用的初始化文件，包括引入應用程序的基礎依賴項、設置視圖即view的引擎目錄以及模板、設置靜態資源路徑、配置通用的中間件、引入路由和一些錯誤處理中間件等。
package.json應用的配置文件，文件內包含程序的基礎信息、啓動腳本和依賴包等。
bin/www應用的啓動文件，文件內包含引用要啓動的應用、設置應用監聽的端口和啓動http服務等。
public/**應用的靜態資源文件目錄，該目錄下的文件資源不須要通過文件映射就能夠直接訪問。
routes/**應用的路由文件，這些路由文件中設置的接口最終會以指定的HTTP請求方式暴露給用戶，並在用戶請求以後將結果返回。
views應用的視圖文件，在app.js中設置好視圖引擎和模板以後，該目錄即爲應用視圖的根目錄，而後路由文件就會根據app.js中的設置加載並渲染該目錄下的視圖文件。

前面安裝了nodemon,修改package.json 啓動腳本命令

2.啓動應用

npm install 安裝項目依賴包
node bin/www 或者npm start 啓動http服務
應用默認監聽的端口是3000，而後訪問localhost:3000

文件詳解

(1) app.js文件詳解

如下是初始化的Express應用中的已經作了一些註釋說明後的app.js文件中的代碼：sql

// 引入依賴包
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// 引入路由文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

// 建立應用實例
var app = express();

// 設置視圖目錄和模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 如下皆爲註冊中間件
// 內置中間件
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 路由中間件
app.use('/', indexRouter);
app.use('/users', usersRouter);

// 404錯誤處理中間件
app.use(function(req, res, next) {
  next(createError(404));
});

// 錯誤處理中間件
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// 導出app實例對象
module.exports = app;
複製代碼

(2)bin/wwww文件的內容就是建立HTTP服務，監聽端口和錯誤

(3)router/**詳解

router/**包含了路由文件，每一個路由文件中包含了不一樣HTTP請求對用的路由以及邏輯處理函數，此處以router/index.js文件爲例，如下是index.js文件的代碼：數據庫

路由文件主要相應相應的HTTP請求，而後執行函數進行相應的邏輯處理，以上代碼，是對GET請求的響應，而後渲染view目錄下的index.jade頁面（在app.js中設置了視圖目錄和模板引擎），同時傳遞數據{title: 'Express'}給index.jade頁面。

(4)view/**詳解

view/**主要存放應用的頁面，以view/index.jade爲例，代碼以下： express

頁面文件主要是接收路由文件傳遞的數據，而後生成渲染後的頁面給客戶端，在上一步，傳遞了數據{title: 'Express'}給index.jade頁面，因此真實的頁面應該是以下的代碼：

3.改進

在實際開發中，咱們項目的路由文件的數目會因項目複雜度而不一樣，當項目足夠複雜時，咱們須要引入的路由文件和須要註冊的路由就會更多，同時除了應用自己的404和錯誤處理中間件以外，還可能根據實際需求新增咱們自定義的中間件，若是這些初始化的代碼都放置於app.js中，無疑，app.js文件會愈來愈大愈來愈臃腫，這並非一個很好的選擇。同時路由和路由對應的處理函數在一個文件中，這樣的處理不夠優雅，不便於維護，因此進行路由分離顯得頗有必要性。固然，這個應用只是生成器工具初始化的一個簡單腳手架，並非最終的樣子。下面遵循mvc設計來抽離路由層，模型-視圖-控制器。npm

M層模型是對象及數據結構的實現，一般包含數據庫的操做
V層視圖表示用戶界面，在網站中一般就是html的組織結構、
C層控制器用來處理用戶請求和數據流、複雜模型、將輸出傳遞給視圖層

對應的，在Node中的MVC框架，處理流程應該是如下步驟：json

1.服務端收到客戶端的請求
2.客戶端的路由層去匹配對應的路由頁面
3.匹配到相應的路由以後調用對應的controller（即對應的邏輯處理函數），controller接收到請求以後，向model層取用數據
4.這裏model層對數據庫的操做寫在server文件夾下，將操做結果返回給controller
5.controller層把結果返給view層，view層收到controller層返回的數據以後，根據相應的視圖模板和數據組裝以後，返回一個渲染過的頁面
6.服務端將上一步的結果返回給客戶端
!（5,6這個過程把頁面的渲染放在了服務器端處理，這裏我是用了Vue框架+element ui，第四步返回數據後頁面的渲染放在了瀏覽器）

抽離路由層

路由層的工做是根據請求路徑匹配相應的路由而後調用相應的controller，原先路由的使用混在app.js文件中後端

首先，在項目根目錄下建立route.js文件,該文件中的代碼以下：

而後在app.js中添加以下代碼：

! 注：routes(app)須要在建立應用實例以後，即var app = express()以後。

同時，刪除app.js中的// app.use('/', indexRouter)。瀏覽器

抽離controller層

先，在根目錄下建立controller/index.js，在index.js中編寫以下代碼，思路：把每一個頁面的業務邏輯單獨寫在一個js文件裏，index.js文件引入他們，封裝成對象暴露出去

或者

處理M層

先，在根目錄下建立server/index.js，在index.js中編寫以下代碼，思路：把每一個頁面的數據結構和對數據庫操做單獨寫在一個js文件裏，index.js文件引入他們，封裝成對象暴露出去

而後在control的具體操做業務邏輯的js文件中引入server對象，調用對象定義的方法

4.express-mysql-session 和express-session 的安裝

淺談session,cookie,sessionStorage,localStorage的區別及應用場景
登陸註冊頁面的時候，須要對用戶是否已登陸過進行處理，這裏採用session存儲的方式。把sessionId能夠存到內存中，不足的是加入忽然斷電，就會失去保存的sessionId，因此這裏存到mysql數據庫中。
express-mysql-session
express-session
express-session的使用得依賴cookie,還須要安裝cookie-parser
cookie-parser