詳細記錄基於vue+nodejs+mongodb構建的商城學習（四）基於項目的node.js開發後端的學習與梳理總結

前置：

本系列文章是一個本人邊學習邊梳理的學習筆記，俗話說好腦殼不如爛筆頭，再好的記憶力時間長了也會有細節忘記，本項目選擇的前端框架是vue,後端開發使用是node.js，數據庫使用的是mongodb，本系列文章重要內容主要有四點：

1.雲服務器的購買，怎麼使用xshell工具鏈接雲服務器；

2.在本地及雲服務器安裝mongodb數據庫，及數據庫的使用；

3.梳理我在學習vue這個前端框架以後的完整項目的實際運用總結；

4.關於node.js開發後端的學習與梳理總結；

5.完整項目的上線部署；

node.js後端開發篇

本文主要歸納爲如下幾點：

• node.js開發環境的搭建
• node.js的特色概要
• node.js相關模塊（建立server服務，經過node加載靜態資源等）
• 搭建基於express框架的運行環境
• node.js的啓動調試方式
• 基於Express框架開發相關接口

1、node.js開發環境的搭建

一、下載node.js安裝包

能夠根據node.js的開發運行平臺去官網下載node.js安裝包nodejs.cn/download/

由於windows環境mac環境咱們直接下載對應環境.msi的可執行文件傻瓜式安裝就好，不是很難，因此咱們主要來研究記錄linux環境下的node.js的環境安裝。

下載安裝包有兩種方式：

1）經過wget命令直接在linux服務器上面下載

wget https://npm.taobao.org/mirrors/node/v10.15.1/node-v10.15.1-linux-x64.tar.xz複製代碼

2)先下載到本地，而後經過scp命令上傳以下：

scp /path/filename username@servername:/path 複製代碼

例如scp /var/www/test.php root@192.168.0.101:/var/www/ 把本機/var/www/目錄下的test.php文件上傳到192.168.0.101這臺服務器上的/var/www/目錄中

我使用第一種方法安裝：

而後解壓，根據下載安裝包的格式不一樣，有兩種解壓命令：

xz -d node-v10.15.1-linux-x64.tar.xz複製代碼

tar -xzvf node-v10.15.1-linux-x64.tar.gz複製代碼

而後解壓成.tar格式的壓縮包，而後使用命令，再次解壓：

tar -xvf node-v10.15.1-linux-x64.tar複製代碼

解壓完成。

二、配置軟鏈接，能夠全局訪問node、npm

cd node-v10.15.1-linux-x64/bin
ls -la複製代碼

如今還不能全局訪問node跟npm。

使用一下命令：

ln -s /usr/local/node-v10.15.1-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node-v10.15.1-linux-x64/bin/npm /usr/local/bin/npm複製代碼

而後進入/usr/local/bin

證實軟鏈接創建成功

注：bin文件通常都是可執行文件，因此通常放在bin文件夾

2、node.js的特色概要

一、基於Chrome V8引擎

是可構建可擴展的高性能服務器，在處理高併發方面有必定優點，和C語言在性能方面幾乎不相上下。

二、單線程

即同一時間只能幹一件事，相對的java語言是多線程

三、可使用javascript語言開發後端代碼

咱們使用node.js開發後端能夠像寫前端代碼同樣開發咱們後端服務，只是咱們node.js會提供服務端的模塊，可讓咱們像寫前端js代碼同樣去寫後端服務

四、非阻塞的IO

由於node.js是基於事件驅動的

3、node.js相關模塊（建立server服務，經過node加載靜態資源等）

關於node.js的相關詳細模塊，node.js官網有詳細介紹：nodejs.cn/api/，如今重點介紹http模塊。

http.Server類：爲何咱們能夠經過某一個連接訪問某一個頁面呢，那是由於在服務器端部署的有一套服務，因此咱們可以訪問到，http.Server類，也能建立一套服務，那樣客戶端也就能訪問node.js建立的服務。

http.ClientRequest類 ：這個屬於客戶端的類，是當咱們的node.js服務須要嗲用第三方數據接口的時候，咱們的服務就變成了客戶端，第三方接口就變成了服務端，就須要這個類。

fs模塊（文件系統）：fs模塊提供了一個 API，用於以模仿標準 POSIX 函數的方式與文件系統進行交互。

http.get類：能夠做爲客戶端去請求第三方的方法，接受與 http.request()類 相同的 options，且 method 始終設置爲 GET。從原型繼承的屬性將被忽略。

4、搭建基於express框架的運行環境

搭建express框架運行環境分爲如下幾個步驟：

• 安裝express generator生成器
• 經過生成器自動建立項目與配置分析
• .jade文件替換成.html文件開發

一、安裝express generator生成器

使用如下命令安裝生成器：

npm install -g express-generator複製代碼

安裝完畢後使用一下命令能夠查看安裝的版本：

express --version複製代碼

若是出現上圖結果，我安裝的是4.16.0版本，證實安裝成功了。

二、經過生成器自動建立項目

使用下面命令自動生成項目：

express node-project複製代碼

其中node-project是項目名稱，以下圖：

使用命令安裝依賴

npm install複製代碼

完成後的項目目錄結構以下圖：

使用如下命令能夠啓動項目：

npm start複製代碼

或者

node ./bin/www複製代碼

瀏覽器訪問http://localhost:3000/，分析下路由配置：訪問http://localhost:3000/或者http://localhost:3000，程序首先會找「/」對應的路由，也就是indexRouter路由，看入口文件以下：

就會運行routes下面對應的index.js文件，而後會render裏面的index,render會自動加載views下面的文件

不須要再去指定咱們的文件夾，由於在入口文件已經設置過了（注意：這張截圖是我已經把.jade文件替換成.html開發的配置）

三、.jade文件替換成.html文件開發

首先安裝ejs插件

npm install ejs --save複製代碼

安裝完成後再入口文佳app.js更改相關配置，首先引入ejs插件

var ejs = require('ejs')複製代碼

而後在app.set('views', path.join(__dirname, './views'));

下面添加app.engine('.html',ejs.__express);

把app.set('view engine', 'jade');

改爲app.set('view engine', 'html');

而後把views文件夾下面的.jade文件所有刪除，新建對應的html文件就能夠了

5、node.js的啓動調試方式

node.js的啓動方式有如下幾種：

• 經過node命令啓動
• webstorm配置啓動入口
• pm2啓動工具（基於進程管理的，能夠提供當前電腦的負載均衡）

一、經過node命令啓動

cmd或者IDE的Terminal模式下進入到項目目錄使用以下命令啓動項目：

node ./bin/www複製代碼

二、webstorm配置啓動入口

點擊編輯器的run-->Edit Configurations

而後點擊左上角的+號

選擇裏面的node.js

而後界面以下，按照要求去填寫

而後點擊Apply，點擊ok

三、pm2啓動工具

首先全局安裝pm2插件

npm install pm2 -g複製代碼

啓動命令以下：

pm2 start bin/www複製代碼

中止命令以下：

pm2 stop bin/www複製代碼

6、基於Express框架開發相關接口

一、安裝Mongoose

Mongoose 是 MongoDB 數據庫的模型工具，爲 NodeJS 設計，工做於異步環境下。是對MongoDB的封裝，提供增刪改查的api,方便咱們隊數據庫進行操做。

安裝Mongoose命令以下：

npm install mongoose --save複製代碼

二、建立models

Mongoose須要建立model，經過建立model就至關因而實例了，經過實體能夠跟MongoDB數據庫進行關聯

三、建立路由

當你查詢接口時，須要經過路由調model實例，經過model提供的api查詢MongoDB數據庫

四、基於mongoose、實現商品列表的查詢功能

代碼層面表現以下：

首先在咱們的express項目根目錄下新建一個models文件夾（由於會包括不少model實體，因此是複數），而後新建一個goods商品列表的model，goods定義的商品模型是根據咱們此次項目的表結構dumall裏面的goods集合是相對應的,以下圖：

而後咱們的model層以下：

注意：咱們定義一個商品Good時，在數據庫創建集合時的goods必定要加「s」，不然這個模型就關聯不上goods這個集合，由於在關聯時程序會默認加「s」,若是不加「s」，輸出model模型時能夠這樣寫：

model.exports = mongoose.model('Good',productSchema,'good')實現完商品這個model複製代碼

實現完商品這個model層後，咱們須要新建一個對應的路由

而後在app.js裏面建一個對應的一級路由，必須創建一級路由，而後在一級路由下能夠增長二級路由（也就是接口）

goods路由內容以下

而後接下來實現路由，在路由裏實現業務代碼（例如查詢對應集合裏面的文檔）：

接下來是跟本地開發的vue.js項目結合：

由於都是本地開發，兩個項目，不一樣的端口，因此須要配置反向代理：

而後ajax接口獲取json數據：

vue項目這邊出現了一個問題：

我請求的數據也能過來，在控制檯查看network裏面結構以下：

是正常的數據。

但我console.log打印ajax獲取到的response數據時，返回的以下數據：

多返回了config,headers,request等信息，由於接口會返回全部的信息。

五、實現排序與分頁功能

req.param("userId")是express封裝的獲取參數的api（注意：req.param()是get方法獲取參數的api，req.body.userId是post方法獲取參數的api），.sort()是排序的方法，其中1是升序，-1是降序。

.skip()方法是計算分頁使用的，獲取的數據返回給前段時要跳轉的條數，.limit()是順序取得條數。

6.post請求方式及加入購物車的代碼邏輯

一種狀況是要加入的物品在該用戶下的購物車裏有存在，則在購物車對應物品的數量字段加1

而後保存

另一種狀況是，若是該用戶的購物車裏沒有要加入的物品，經過前端傳過來的productId，去查詢物品種類的那個集合（也就是goods），找到對應物品後，在該物品下新加計數字段productNum，是否默認選中字段checked，而後把該物品保存到用戶下存放物品的字段裏（也就是購物車裏，cartList）

7.登陸模塊

獲取前端傳過來的用戶名密碼，經過user這個模型去users集合查詢有沒有對應的用戶，若是存在把對應用戶的userId，userName存放在服務器的根目錄，也就是域名下的cookie裏面,而後返回給前端用戶名userName

也能夠存放到session裏面，注意放在session裏須要一個插件express-session

8.退出登陸模塊

退出原理是操做cookie，是把存在cookie的userId的有效期設置爲-1失效狀態

9.檢測用戶是否處於登陸狀態

原理是能不能獲取到客戶端的cookie裏面的userId

10.登陸攔截

身份認證，也就是白名單，哪些接口是須要登陸才能訪問的，哪些是能夠直接訪問的

登陸攔截,在程序走路由以前都會必須先通過這個函數複製代碼