由于項目的原因,項目的前端架構(gòu)要從單純的angularjs轉(zhuǎn)到nodejs+angular+express的架構(gòu),這樣的架構(gòu)對大家來說可能比較眼熟,沒錯,就是大名鼎鼎的MEAN (MongoDB,express,angularjs,node) framework。隨著nodejs技術(shù)的日益成熟(當(dāng)然io.js也逐漸崛起,并且和node重歸于好),和其關(guān)聯(lián)技術(shù)必將炙手可熱,順利成章地將全棧的概念更加普及。
創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計,漢臺網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:漢臺等地區(qū)。漢臺做網(wǎng)站價格咨詢:028-86922220
國內(nèi)node社區(qū)很是活躍,比如說前端亂燉(http://www.html-js.com/),nodejs中文社區(qū)(https://cnodejs.org/,github上可以下載到源碼),你當(dāng)然也可以通過nodejs官方網(wǎng)站的企業(yè)登記頁查詢有哪些公司和項目在使用nodejs(https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node),包括我們熟知的公司有LinkedIn, Yahoo, Paypal, eBay, Walmart,Groupon 還有很多的中小型公司,國內(nèi)的公司如雪球、淘寶、網(wǎng)易、百度等也都有很多項目運行在Node.js之上,并且很多項目都在向node遷移。node包和npm是捆綁在一起的,從npm包的數(shù)量就可以看到node的火熱程度,截止此刻已經(jīng)達(dá)到150355,一個月的download量甚至能達(dá)到億的數(shù)量級。
回到項目中來,從純的angularjs項目遷移到MEAN,我以為是個不怎么復(fù)雜的任務(wù),無非就是加入node的支持,Express框架的引入和頁面繼續(xù)沿用以前項目的結(jié)果就完事兒了,現(xiàn)在看來,真是很傻很天真,一個個問題并且沒有思路解決的時候就開始懷疑自己這么做的可行性。后來我考慮使用generator來生成MEAN工程(我使用的是meanjs,meanstack),由于網(wǎng)絡(luò)原因也均作罷(根據(jù)錯誤信息提示可能是bower引起的,后面再研究下),還是自己捯飭吧。
下面記錄下我捯飭的過程, 僅供參考。
第一部分,我們建立node環(huán)境。
首先,在某個目錄下建立一個package.json文件,鍵入如下內(nèi)容:
{ "name": "starter-mean", "main": "server.js", "dependencies": { "express" : "~4.5.1", "mongoose" : "~3.8.0", "body-parser" : "~1.4.2", "method-override" : "~2.0.2" } }
Express為4.5.1及其以上版本(Node的一個MVC框架,當(dāng)然還有其他的mvc框架,如express-io,koa,Geddy,Total,Partial,Locomotive,Sails),mongoose為3.8.0及其以上版本,body-parser 和method-override為Express的內(nèi)置模塊。
接下來我們使用npm install 裝下node modules,安裝成功后,在package.json同級目錄下生成一個node_modules目錄,該目錄下是項目依賴的目錄,即在package.json的dependencies中定義的模塊。
這時候該工程還不能啟動,因為還沒有定義node的入口,就像java的main方法。接下來在package.json的同級目錄下定義一個server.js文件,即package.jso中的main字段,鍵入如下內(nèi)容:
var express = require('express'); var app = express(); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var methodOverride = require('method-override'); // config files var db = require('./config/db'); var port = process.env.PORT || 8080; // get all data/stuff of the body (POST) parameters // mongoose.connect(db.url); // connect to our mongoDB database app.use(bodyParser.json()); // parse application/json app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users require('./app/routes')(app); // pass our application into our routes app.listen(port); console.log('Magic happens on port ' + port); exports = module.exports = app;
如果想讓你的工程鏈接mongodb,可以建立一個config目錄,并建一個db.js,鍵入以下內(nèi)容:
module.exports = { url : 'mongodb://<user>:<pass>@mongo.onmodulus.net:27017/uw45mypu' }
我們在這里建一個數(shù)據(jù)模型,為支持操作mongodb,建立app/models/XXX.js, 可以鍵入如下內(nèi)容,
// grab the mongoose module var mongoose = require('mongoose'); // define our nerd model // module.exports allows us to pass this to other files when it is called module.exports = mongoose.model('demo', { name : {type : String, default: ''} });
我不打算在demo中支持mongodb,只是示例而已。不過多解釋。
我們還需要一個router,以便鏈接到我們的主頁面,在app文件夾下建立一個router.js,鍵入:
module.exports = function(app) { // route to handle all angular requests app.get('*', function(req, res) { res.sendfile('./public/index.html'); }); };
node的基本結(jié)構(gòu)就是這樣了,那么js文件,css文件,controller,server該怎么存放呢,Express要求建一個public文件夾用來存放這些文件。
為了保持同步,我們先看下現(xiàn)在的目錄結(jié)構(gòu):
第二部分:建立WEB部分
我們先建立一個index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Starter MEAN Single Page Application</title> </head> <body> Mean framework! </body> </html>
下面我們啟動下node服務(wù),在server.js同級目錄下啟動命令行,執(zhí)行
node server.js
在瀏覽器輸入http://localhost:8080,如果看到“Mean framework ”,證明你的基本服務(wù)是ok的。
我們的demo還需要做如下幾件事情:
(1)css文件和js文件需要加載到頁面
(2)angularjs結(jié)構(gòu)(controller,service,directive)
(3)創(chuàng)建3個頁面
(4)使用ngRoute創(chuàng)建頁面路由
(5)使用bootstrap構(gòu)建頁面
靜態(tài)文件管理
既然是新的架構(gòu),我們將采用新的管理文件工具bower。如果你還在用傳統(tǒng)的手工方法搜索、下載js/css文件,那你就out的不行了。首先,確保你的機(jī)器已經(jīng)安裝bower,如果沒有安裝,可以通過如下命令安裝:
npm install -g bower
之后,我們需要另外兩個文件(.bowerrc和bower.json)文件才能讓bower為我們工作,在工程根目錄建立這兩個文件,在 .bowerrc文件中鍵入文件目錄,以后通過bower安裝的文件都可以在這個目錄下找到。
{ "directory": "public/libs" }
在bower.json中,輸入中如下內(nèi)容:
{ "name": "angular", "version": "1.0.0", "dependencies": { "bootstrap": "latest", "angular": "latest", "angular-route": "latest" } }
dependencies字段中指明我們需要的第三方庫,以后我們需要引入別的庫,只需要在該文件中配置即可,然后執(zhí)行:
bower insall
下載依賴庫并把依賴庫賦值到相應(yīng)的目錄下(注意:如果執(zhí)行bower install報錯時,錯誤的信息為無法鏈接到github.com,可以在執(zhí)行該命令前執(zhí)行
git config --global url."https://".insteadOf git://
將git://協(xié)議替換為https協(xié)議)。
是不是發(fā)現(xiàn)public/lib目錄下多了些文件,現(xiàn)在你可以隨意使用了。
我們最后看下新的文件結(jié)構(gòu):
這里不在貼各個文件的代碼,有需要的請查看附件,但是由于附件大小的限制,不再提供node_modules,請自行執(zhí)行npm install && bower insall .
最后附上效果圖:
如果有問題請聯(lián)系我。謝謝!
分享標(biāo)題:自己構(gòu)建meanframework
文章轉(zhuǎn)載:http://www.rwnh.cn/article12/ipcggc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號、域名注冊、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)