# [**node.js項(xiàng)目環(huán)境安裝配置**]
## **需要準(zhǔn)備的軟件**
- 數(shù)據(jù)庫(kù)MongoDB
- 圖形化的MongoDB管理工具M(jìn)ongoChef
- node.js（下載地址：https://nodejs.org/zh-cn/）
- npm（Node的模塊管理器，用來(lái)安裝別人寫(xiě)好的模塊。不用單獨(dú)安裝，安裝 Node.js時(shí)默認(rèn)已經(jīng)默認(rèn)安裝了）
- 編輯器（webstorm）
## **配置環(huán)境**
### **安裝Node.js和npm。**
1. Windows 或 Mac 直接去 Node.js 官網(wǎng)下載安裝，默認(rèn)是已經(jīng)安裝上 npm 的，查看 node.js 和npm版本可以在終端分別輸入 node -v 和 npm -v 可以查看各自的版本號(hào)。
2. 用 npm 安裝模塊。安裝分為本地安裝和全局安裝。如果需要用到 Node.js 的 require 來(lái)獲取依賴，那么需要本地安裝。(以下是在terminal（終端）運(yùn)行的命令)
- 本地安裝命令：npm install。這個(gè)命令就是在命令行的當(dāng)前目錄下創(chuàng)建一個(gè)叫node_modules的文件夾，然后把安裝代碼放到這個(gè)文件夾下面。（在項(xiàng)目目錄中使用該命令）。
- 在install后，如果沒(méi)有異常，安裝的代碼將會(huì)出現(xiàn)在 node_modules 的目錄下。查看是否安裝成功，Mac及Linux系統(tǒng)下命令是：ls node_modules (ls命令表示遍歷當(dāng)前目錄下的文件)。Windows系統(tǒng)下命令是：dir node_modules(dir同ls命令)。
### **安裝MongoDB**
1.Mac上用brew在線安裝：brew install mongodb（參考鏈接：http://yijiebuyi.com/blog/b6a3f4a726b9c0454e28156dcc96c342.html)
2.下載MongoDB源碼，解壓，安裝。（下載地址：https://www.mongodb.com/download-center?jmp=nav#community）
### **安裝MongoChef**
1. 下載MongoChef（下載地址：http://3t.io/mongochef/）默認(rèn)安裝即可。
## **項(xiàng)目導(dǎo)入打開(kāi)**
1. 把項(xiàng)目導(dǎo)入webstorm編輯器。
2. 啟動(dòng)MongoDB數(shù)據(jù)庫(kù)：在終端下輸入sudo mongod，在彈出的輸入密碼框中輸入電腦密碼即可，此時(shí)終端會(huì)顯示等待連接端口。（數(shù)據(jù)庫(kù)已在項(xiàng)目代碼中創(chuàng)建完成）
3. 打開(kāi)MongoChef，點(diǎn)擊連接在彈出窗口選擇要連接的數(shù)據(jù)庫(kù)連接即可。此時(shí)終端會(huì)顯示已經(jīng)連接上數(shù)據(jù)庫(kù)中的數(shù)據(jù)表。
4. 啟動(dòng)npm，在終端下，切換到項(xiàng)目目錄，輸入 npm start啟動(dòng)npm
5. 在瀏覽器中打開(kāi)項(xiàng)目地址完成。
**以上都是在Mac上的操作**
**可能需要了解的框架：vue.js框架（鏈接：https://vuejs.org.cn/guide/overview.html）和React框架（鏈接：https://facebook.github.io/react/docs/why-react-zh-CN.html）express.js**
## **項(xiàng)目結(jié)構(gòu)（只涉及到數(shù)據(jù)處理）**
項(xiàng)目結(jié)構(gòu)如圖所示不會(huì)有太大變化。
- app文件夾中存放數(shù)據(jù)模型models文件和模型調(diào)用數(shù)據(jù)庫(kù)端口號(hào)設(shè)置setting文件。
- bin文件存放命令行相關(guān)代碼
- node_modules是進(jìn)行npm安裝之后自動(dòng)生成的需要調(diào)用的模塊，需要添加的模塊都下載到這里。
- public文件夾中存放公共CSS文件，圖片，公共js代碼
- routes是路由文件的存放處
- view文件夾存放html靜態(tài)頁(yè)面
-package.json文件：每個(gè)項(xiàng)目的根目錄下面，一般都有一個(gè)package.json文件，定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開(kāi)發(fā)環(huán)境。
- server.js是服務(wù)器模塊負(fù)責(zé)連接數(shù)據(jù)庫(kù)并實(shí)現(xiàn)監(jiān)聽(tīng)端口等行為,建立的models文件和頁(yè)面路由文件也需要在此文件中請(qǐng)求使用
### **項(xiàng)目中數(shù)據(jù)處理的步驟**
**執(zhí)行流程： a.html文件加載（暫時(shí)沒(méi)有數(shù)據(jù)）（引用vue框架來(lái)加載數(shù)據(jù)）---->引用a.js來(lái)請(qǐng)求數(shù)據(jù)（根據(jù)路由地址）----->在server.js中設(shè)置路由請(qǐng)求地址----->server.js請(qǐng)求地址到相應(yīng)的路由文件根據(jù)模型設(shè)置數(shù)據(jù)進(jìn)行數(shù)據(jù)操作----->路由請(qǐng)求到model文件夾在模型
- demo:a.html 中(引用js文件，a.js和vue.js) -----> a.js中（ this.$http.get('http://127.0.0.1:3000/api/a').then(function (response) ）-----> server.js 中var health = require('./routes/a_route');app.use('/api/a', health);-----> var example= require('../app/models/a_Model')接下來(lái)對(duì)example進(jìn)行數(shù)據(jù)增刪查改 **
1. 建立數(shù)據(jù)模型。
- 在app－models文件夾中創(chuàng)建一個(gè)js文件，文件命名一般和實(shí)際意義相關(guān)（盡量英文）。
- 在建立數(shù)據(jù)模型時(shí)需要用到mongoose語(yǔ)句來(lái)實(shí)例化連接對(duì)象（在server.js中已經(jīng)連接到了數(shù)據(jù)庫(kù)）數(shù)據(jù)庫(kù)（mongoose是MongoDB的驅(qū)動(dòng)程序）。
- 建立schema（一種以文件形式存儲(chǔ)的數(shù)據(jù)庫(kù)模型骨架，不具備數(shù)據(jù)庫(kù)操作能力）
- 建立model（由schema生成的模型具有抽象屬性和行為的數(shù)據(jù)庫(kù)操作對(duì)）
- 建立Entity（model創(chuàng)建的實(shí)體，操作會(huì)影響數(shù)據(jù)庫(kù)）
Demo：
> var mySchema = new mongoose.Schema ({ name : String });//創(chuàng)建模式
> var Name = new mongoose.model ( 'Name' , mySchema); //建一個(gè)數(shù)據(jù)表names（數(shù)據(jù)庫(kù)不存在該數(shù)據(jù)庫(kù)的時(shí)候添加數(shù)據(jù)會(huì)默認(rèn)添加數(shù)據(jù)庫(kù)并會(huì)把大寫(xiě)字母改為小寫(xiě)字母并變?yōu)閺?fù)數(shù)）
> var jack = new Name ({ name: 'jack' });//新建一條數(shù)據(jù)到數(shù)據(jù)表中
> var jack.save ( function (err) ){
> if(err) return console.log(err);
>console.log('save success');}
2. 建立路由文件可以把操作數(shù)據(jù)庫(kù)的方法放到這里來(lái)。
3. 在server.js中設(shè)置連接數(shù)據(jù)庫(kù)例以及設(shè)置數(shù)據(jù)請(qǐng)求路徑：mongoose.connect('');
app.use('/api/health', health);
//瀏覽器中http://127.0.0.1:3000/api/health
4. 在js文件中引用 （vue方法）this.$http.get('http://127.0.0.1:3000/api/health').then(function (response) {｝獲取數(shù)據(jù)
5.把數(shù)據(jù)附加到html靜態(tài)頁(yè)。語(yǔ)法：｛｛｝｝（頁(yè)面需引用vue文件）。
