基于nodejs的前端項(xiàng)目搭建過(guò)程


參考:
Nodejs之目錄介紹及app.js說(shuō)明:http://www.cnblogs.com/Chen-xy/p/4466351.html
nodejs入門(mén): http://www.bkjia.com/webzh/1025703.html

項(xiàng)目框架

|--app
   |--core
      |--baseRouter.js
      |--logger.js
      |--pageHelper.js
|--bin
   |--www
|--docs
|--logs
|--public
|--routes
|--static
   |--images
   |--pages
|--tools
   |-- config
       |--default.json
    |--configHeiper.js
    |--entryHelper.js
    |--fileHelper.js
    |--webpak.config.dev.js
    |--webpack.config.js
|--views
   |--index.js
   |--layout.js
|--.gitignore
|--app.js
|--asset.json
|--package.json
|--README.md
|--staticDevServer.js

step1: package.json文件

相關(guān)資源:
1卓箫、文件作用及字段解析:http://jingpin.jikexueyuan.com/article/34254.html
2、通過(guò)init指令創(chuàng)建package.json文件:http://blog.csdn.net/liyanhui1001/article/details/44020235
3烹棉、package.json文件中的script字段作用:http://www.imooc.com/article/6179

此文件為node項(xiàng)目必須文件掸冤,位于項(xiàng)目根目錄,其作用:
   1食呻、描述項(xiàng)目(name流炕、version、description等)
   2仅胞、管理項(xiàng)目依賴(lài)模塊(應(yīng)用依賴(lài)模塊dependencies每辟、開(kāi)發(fā)環(huán)境依賴(lài)模塊devDependencies)
   3、指定入口模塊的路徑(設(shè)置服務(wù)器啟動(dòng)命令的scripts字段)

package.json:
{
  "name": "mui",
  "version": "1.0.0",
  "scripts": {
    "start": "node ./bin/www"  //通過(guò)命令npm start啟動(dòng)項(xiàng)目入口
  },
  "dependencies": {   //項(xiàng)目依賴(lài)模塊干旧,任何環(huán)境都生效的模塊
    "co": "^4.6.0",
    "cookie": "^0.3.1",
    "cookie_js": "^1.2.1",
    "debug": "^2.3.2",
    "jade": "^1.11.0",
    "koa": "^1.2.4",
    "koa-bodyparser": "^2.2.0",
    "koa-json": "^1.1.3",
    "koa-logger": "^1.3.0",
    "koa-onerror": "^3.0.1",
    "koa-router": "^5.4.0",
    "koa-static": "^2.0.0",
    "koa-views": "^5.2.0",
    "store2": "^2.3.2"
  },
  "devDependencies": {  //開(kāi)發(fā)階段的依賴(lài)模塊渠欺,只在開(kāi)發(fā)階段生效
    "assets-webpack-plugin": "^3.5.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-preset-stage-3": "^6.17.0",
    "consoler": "^0.2.0",
    "es6-promise": "^4.0.5",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-util": "^3.0.7",
    "jquery": "^3.1.1",
    "koa-cors": "0.0.16",
    "koa-jade": "^2.1.0",
    "koa-router": "^5.4.0",
    "koa-session": "^3.4.0",
    "koa-webpack-dev-middleware": "^1.3.0",
    "koa-webpack-hot-middleware": "^1.0.3",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "lodash": "^4.17.0",
    "mini-logger": "^1.1.1",
    "morgan": "^1.7.0",
    "node-jsx": "^0.13.3",
    "vue": "^2.0.5",
    "vue-loader": "^9.9.0",
    "vue-router": "^2.0.1",
    "vue-server-renderer": "^2.0.5"
  }
}

初次加載項(xiàng)目時(shí),手動(dòng)寫(xiě)好需要的模塊字段椎眯,通過(guò)命令npm install 下載模塊到node_modules文件

step2: bin文件夾下的www文件

文件創(chuàng)建方式:
   在bin文件夾下新建txt文檔, 命名為www, 去掉后綴名即可挠将。
此文件作用:
   1、 引入http模塊盅视,啟動(dòng)http服務(wù)
   2捐名、監(jiān)聽(tīng)端口

www文件具體代碼:

**start**

#!/usr/bin/env node
/**
 * Module dependencies.
 */
var app = require('../app');
var debug = require('debug')('mui:server');
var http = require('http');
//var consoler = require('consoler');
//var logger = require('../app/core/logger');

/**
 * Get port from environment and store in Express.
 */
var port = normalizePort(process.env.PORT || '3000');

/**
 * Create HTTP server.
 */
var server = http.createServer(app.callback());

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */
function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */
function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
  consoler.info('The Main Server is Listening On ' + bind);
  logger.other('The Main Server is Listening On ' + bind);
}

**end**

step3: app.js文件

此文件為項(xiàng)目的核心文件,koa框架等各種中間件和配置的引入

**start**

//模塊依賴(lài)
var app = require('koa')(),
    koa = require('koa-router')(),
    koaLogger = require('koa-logger'),
    json = require('koa-json'),
    koaJade = require('koa-jade'),
    path = require('path'),
    onerror = require('koa-onerror');
//var logger = require('./app/core/logger')

onerror(app);

//routers
var routers = {
    index: require('./routes/index')
}

// global middlewares: 設(shè)置視圖引擎
var jade = new koaJade({
    viewPath: path.resolve(__dirname, 'views'),
    debug: false,
    helperPath: [{
        pageHelper: require('./app/core/pageHelper')
    }]
});
app.use(jade.middleware);

app.use(require('koa-bodyparser')());
app.use(json());
app.use(koaLogger());

app.use(require('koa-static')(__dirname + '/public'));

//appConfig middleware: 配置環(huán)境變量
var env = process.env.NODE_ENV || 'development';
var appConfig = require('./tools/configHelper');
app.use(appConfig.config(app, env));

// session middleware
var session = require('koa-session');
app.keys = ['user context'];
app.use(session(app));

// routes definition
koa.use(routers.index.routes(), routers.index.allowedMethods());

// mount root routes
app.use(koa.routes());

app.on('error', function(err, ctx) {
    logger.error({
        err: err ? err.toString() : 'unknow',
        ctx: ctx || '',
        errorPosition: err.stack
    });
});

//導(dǎo)出app對(duì)象
module.exports = app;

**end**

step4: routes

koa-router源碼解讀:http://www.tuicool.com/articles/7Zre63f

**start**
var router = require('koa-router')();
router.get('/',function*(){
    this.render('index',{
        title: 'mui'
    });
});

module.exports = router;
**end**

**路由前綴
 var myRouter = new Router({
     prefix: '/koa'
 });
// 等同于"/koa"
myRouter.get('/', function* () {
     this.response.body = 'koa router';
 });

// 等同于"/koa/:id"
myRouter.get('/:id', function* () {
     this.response.body = 'koa router-1';
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闹击,一起剝皮案震驚了整個(gè)濱河市镶蹋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖贺归,帶你破解...
    沈念sama閱讀 211,376評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件淆两,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡拂酣,警方通過(guò)查閱死者的電腦和手機(jī)秋冰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)婶熬,“玉大人剑勾,你說(shuō)我怎么就攤上這事≌月” “怎么了虽另?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,966評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)饺谬。 經(jīng)常有香客問(wèn)我捂刺,道長(zhǎng),這世上最難降的妖魔是什么募寨? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,432評(píng)論 1 283
  • 正文 為了忘掉前任族展,我火速辦了婚禮,結(jié)果婚禮上拔鹰,老公的妹妹穿的比我還像新娘仪缸。我一直安慰自己,他們只是感情好列肢,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布腹殿。 她就那樣靜靜地躺著,像睡著了一般例书。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上刻炒,一...
    開(kāi)封第一講書(shū)人閱讀 49,792評(píng)論 1 290
  • 那天决采,我揣著相機(jī)與錄音,去河邊找鬼坟奥。 笑死树瞭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的爱谁。 我是一名探鬼主播晒喷,決...
    沈念sama閱讀 38,933評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼访敌!你這毒婦竟也來(lái)了凉敲?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,701評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎爷抓,沒(méi)想到半個(gè)月后势决,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,143評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蓝撇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評(píng)論 2 327
  • 正文 我和宋清朗相戀三年果复,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渤昌。...
    茶點(diǎn)故事閱讀 38,626評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡虽抄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出独柑,到底是詐尸還是另有隱情迈窟,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評(píng)論 4 329
  • 正文 年R本政府宣布群嗤,位于F島的核電站菠隆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏狂秘。R本人自食惡果不足惜骇径,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望者春。 院中可真熱鬧破衔,春花似錦钱烟、人聲如沸晰筛。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)拥刻。三九已至,卻和暖如春般哼,著一層夾襖步出監(jiān)牢的瞬間吴汪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工蒸眠, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留漾橙,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓楞卡,卻偏偏與公主長(zhǎng)得像霜运,于是被迫代替她去往敵國(guó)和親脾歇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 作為一個(gè)前端程序猿觉渴,下面這些站會(huì)讓你眼前一亮介劫。 amazeui框架組建豐富 http://amazeui.org...
    歐巴冰冰閱讀 8,810評(píng)論 18 303
  • 上一章 凄凄慘慘 全章目錄 陳嘉豪祭日的頭七已過(guò),周?chē)诉€像往常一樣過(guò)著安寧又幸福的日子案淋。依依卻依舊日日生活在痛苦...
    小豆利子閱讀 782評(píng)論 0 7
  • 剛剛高考結(jié)束座韵,志愿未填,初次接觸這個(gè)app踢京,初感誉碴。 不想感嘆高考的心酸,因?yàn)椴皇侵挥形业淖x書(shū)生活辛...
    小兔幾rrrabbit閱讀 116評(píng)論 0 0
  • 現(xiàn)在自己畫(huà)的比較慢瓣距,兩天畫(huà)一幅黔帕,感覺(jué)還是不夠立體,需要大膽突破蹈丸,無(wú)限創(chuàng)意成黄,無(wú)限空間和想象力,大膽發(fā)揮吧逻杖!期待更加驚...
    喜悅Iris閱讀 346評(píng)論 0 0