文章首發(fā)微信公眾號:春哥府吭露。歡迎關(guān)注捞蛋。
前言
最近嘗試接觸Web后端技術(shù)孝冒,看了看基于Java、Python拟杉、Nodejs的各種框架庄涡,最終選擇了MEAN架構(gòu)進行學(xué)習(xí),理由主要包括三個方面:
- 輕量級搬设,入門門檻低穴店。
- 框架成熟撕捍,可參考資料多。
- 可以一并學(xué)習(xí)Angular和Mongodb泣洞。
本次學(xué)習(xí)歷時12天忧风,產(chǎn)出物是一個簡單的用戶管理系統(tǒng)。這篇博客將會記錄我在MEAN的安裝配置過程中的一些操作方法球凰,為日后再次上手提供一些支持狮腿。
node.js與npm安裝
首先引用官網(wǎng)的話來介紹一下node.js與npm。
Node.js? is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
- npm:
npm is the package manager for node .
本人Win8.1-64位系統(tǒng)呕诉,Windows的Node.js安裝包安裝里包含了npm缘厢。安裝方法非常簡單,從node.js官網(wǎng)下載對應(yīng)版本的msi安裝文件安裝即可甩挫。
MongoDB安裝
MongoDB是一種文件導(dǎo)向數(shù)據(jù)庫管理系統(tǒng)贴硫,由C++撰寫而成,以此來解決應(yīng)用程序開發(fā)社區(qū)中的大量現(xiàn)實問題伊者∮⒃猓——維基百科
安裝方法:
官網(wǎng)下載安裝包進行安裝。
將MongoDB/bin文件夾添加至系統(tǒng)PATH環(huán)境變量删壮。
安裝目錄下新建mongo.config配置文件贪绘,配置data和log目錄。
##store data here
dbpath=D:\mongodb\data
##all output go here
logpath=D:\mongodb\log\mongo.log
##log read and write operations
diaglog=3啟動MongoDB央碟。
預(yù)配置:
>mongod --config D:\mongodb\mongo.config
...
>mongo
MongoDB shell version: 2.6.6
connecting to: test添加至Windows本地服務(wù)税灌,這樣就可以隨機器開機啟動了。
> mongod --config D:\mongodb\mongo.config --install簡單的測試操作亿虽。以下代碼執(zhí)行了創(chuàng)建(轉(zhuǎn)換)數(shù)據(jù)庫菱涤,添加數(shù)據(jù),查找并顯示數(shù)據(jù)的操作洛勉。
>mongo
MongoDB shell version: 2.6.6
connecting to: test
>use usercollection
swiched to db usercollection
>db.usercollection.insert({ “username”:“testuser1″,“email”:“testuser1@testdomain.com” })
...
>db.usercollection.find().pretty()
...
Express安裝
Express 是一個簡潔粘秆、靈活的 node.js Web 應(yīng)用開發(fā)框架, 它提供一系列強大的特性,幫助你創(chuàng)建各種 Web 和移動設(shè)備應(yīng)用收毫。
網(wǎng)上關(guān)于Express安裝的博客很多攻走,但方法不盡相同。主要差異原因在于Express版本的變化此再。文章主要參考Express官網(wǎng)指南進行安裝昔搂,Express版本4.x。
安裝方法:
使用生成器生成输拇。
$ npm install -g express-generator編輯依賴項摘符。
根據(jù)項目需求修改package.json文件,在dependencies中添加MongoDB和Monk的依賴:
"mongodb": "*",
"monk": "*"安裝。
$ npm install測試逛裤。成功后打開localhost:3000將會顯示Express主頁瘩绒。
$ npm start使用monk連接MongoDB。
在app.js中添加以下代碼
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/yourdbname');
...
app.use(function(req,res,next){
req.db = db;
res.locals.user = req.session.user;
next();
});后端調(diào)用數(shù)據(jù)庫方法
var db = req.db;
var collection = db.get('usercollection');
//查詢
collection.find({email:req.body.email,password:req.body.password},{},function(e,docs){});
//插入
collection.insert(req.body,function(err,doc){});
//更新
collection.update({email:req.body.olduser.email},req.body.newuser,{safe:true},function(e,docs){});
//刪除
collection.remove({email:req.body.email},{safe:true},function(e,docs){});
使用monk操作MongoDB的方法在網(wǎng)上并沒有查閱到相關(guān)文檔带族,也許是我查找的方式不對锁荔。另一種方法是使用mongoose操作,資料較全炉菲。
Angular安裝
AngularJS是一款開源JavaScript函式庫堕战,由Google維護,用來協(xié)助單一頁面應(yīng)用程序運行的拍霜。它的目標是透過MVC模式(MVC)功能增強基于瀏覽器的應(yīng)用嘱丢,使開發(fā)和測試變得更加容易§艚龋——維基百科
官網(wǎng)和百科上對Angular的解釋一如既往的深入難懂越驻,但估計大部分小白第一次接觸Angular只是被大牛告訴Angular出色的雙向數(shù)據(jù)綁定的功能〉劳担快速了解Angular可以參考文末文章《怎樣快速的學(xué)習(xí)AngularJS》缀旁。
Angular和Bootstrap不算是安裝了,在前端添加依賴就可(也可以用npm勺鸦、bower類似的工具進行配置與管理)并巍。js和css包可以在官網(wǎng)下載。
Express安裝完成后换途,在目錄中添加App文件夾存放前端文件懊渡,修改默認啟動入口,刪除Express中不需要的文件與文件夾军拟。
Ending
MEAN架構(gòu)的優(yōu)勢主要在于前段后端的一體化剃执,被譽為前端工程師的福音。在學(xué)習(xí)的過程中也接觸到許多項目生成方法如:
不多作為初學(xué)者肾档,而且目標系統(tǒng)也很簡單輕小,因此沒有一開始就上手這種方法辫继。以后有機會可以嘗試怒见。
最后的最后,感謝一下給予幫助的博客文章們: