ThinkJS 項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)

通過 thinkjs 命令創(chuàng)建完項(xiàng)目后，項(xiàng)目目錄結(jié)構(gòu)類似如下：

|-- nginx.conf  
|-- package.json
|-- src  
|   |-- common  
|   |   |-- bootstrap 
|   |   |   |-- generate_icon.js
|   |   |   `-- middleware.js
|   |   |-- config  
|   |   |   |-- config.js
|   |   |   |-- env  
|   |   |   |   |-- development.js
|   |   |   |   `-- production.js
|   |   |   |-- hook.js 
|   |   |   |-- locale 
|   |   |   |   |-- en.js
|   |   |   |   `-- zh-CN.js
|   |   |   `-- route.js 
|   |   |-- controller 
|   |   |    `-- error.js
|   |   `-- runtime
|   `-- home   
|       |-- config
|       |-- controller
|       |   |-- base.js
|       |   `-- index.js
|       |-- logic
|       |   `-- doc.js
|       `-- model
|-- view
|   `-- zh-CN
|       |-- common
|       |   |-- error_400.html
|       |   |-- error_403.html
|       |   |-- error_404.html
|       |   |-- error_500.html
|       |   `-- error_503.html
|       `-- home
|           |-- doc_index.html
|           |-- doc_search.html
|           |-- inc
|           |   |-- footer.html
|           |   `-- header.html
|           |-- index_changelog.html
|           |-- index_demo.html
|           `-- index_index.html
`-- www
   |-- favicon.ico
   |-- index.js
   |-- production.js
   `-- static
       |-- css
       |-- img
       `-- js

注： 指定不同的模式創(chuàng)建的項(xiàng)目目錄機(jī)構(gòu)可能有細(xì)微的差別，但總體是類似的。

nginx.conf

nginx 的配置文件，建議線上使用 nginx 做反向代理。

src

源代碼目錄，使用 --es6 參數(shù)創(chuàng)建項(xiàng)目才有該目錄。需要通過 npm run watch-compile 命令編譯該目錄下的文件到 app/ 目錄。

如果沒有使用 ES6 特性創(chuàng)建項(xiàng)目，則直接有 app/ 目錄。

src/common

通用模塊目錄，項(xiàng)目目錄都是按模塊來劃分的，common 模塊下存放一些通用的處理邏輯。

src/common/bootstrap

項(xiàng)目啟動(dòng)目錄，該目錄下的文件會(huì)自動(dòng)加載，無需手動(dòng) require 。

可以在這個(gè)目錄下文件里定義一些全局函數(shù)、注冊中間件等常用的功能。

定義全局函數(shù)

// src/common/bootstrap/fn.js
global.formatDate = obj => {
  ...
}

這里定義了一個(gè)全局函數(shù) formatData，那么項(xiàng)目里任何地方都可以直接使用該函數(shù)。

注冊中間件

// src/common/bootstrap/middleware.js
think.middleware("replace_image", http => {
  ...
});

這里定義了一個(gè)中間件 replace_image，那么就可以在配置文件 hook.js 里將該中間件注冊進(jìn)去了。

注：bootstrap 只能放在 common 模塊里。

src/common/config

配置文件，這里放一些通用的配置。

其中：路由配置、Hook配置、本地化配置等必須放在這里。

"use strict";
/**
 * config
 */
export default {
  //key: value
};

src/common/controller

控制器，放一些通用的控制器。其中 error.js 里錯(cuò)誤處理的不同行為，項(xiàng)目里可以根據(jù)需要進(jìn)行修改。

src/common/runtime

項(xiàng)目運(yùn)行時(shí)生成的一些目錄，如：緩存文件目錄，用戶上傳的文件臨時(shí)存放的目錄。

src/home

home 模塊，項(xiàng)目默認(rèn)模塊?？梢栽?nbsp;src/common/config/config.js 中修改配置 default_module 來重新定義默認(rèn)模塊。

src/home/logic

邏輯處理。每個(gè)操作執(zhí)行前可以先進(jìn)行邏輯校驗(yàn)，可以包含：參數(shù)是否合法、提交的數(shù)據(jù)是否正常、當(dāng)前用戶是否已經(jīng)登錄、當(dāng)前用戶是否有權(quán)限等。這樣可以降低 controller 里的 action 的復(fù)雜度。

"use strict";
/**
 * logic
 * @param  {} []
 * @return {}     []
 */
export default class extends think.logic.base {
  /**
   * index action logic
   * @return {} []
   */
  indexAction(){

  }
}

src/home/controller

控制器。一個(gè) url 對應(yīng)一個(gè) controller 下的 action。

"use strict";

import Base from "./base.js";

export default class extends Base {
  /**
   * index action
   * @return {Promise} []
   */
  indexAction(){
    //auto render template file index_index.html
    return this.display();
  }
}

src/home/model

模型。數(shù)據(jù)庫相關(guān)操作。

view

視圖目錄，存放對應(yīng)的模版文件。如果支持國際化和多主題，那么視圖目錄下需要有對應(yīng)的子目錄。

www

項(xiàng)目的可訪問根目錄，nginx 里的根目錄會(huì)配置到此目錄下。

www/index.js

開發(fā)模式下項(xiàng)目的入口文件，可以根據(jù)項(xiàng)目需要進(jìn)行修改。www/production.js 為線上的入口文件。

入口文件的代碼類似如下，可以根據(jù)項(xiàng)目需要進(jìn)行修改。

var thinkjs = require("thinkjs");
var path = require("path");

var rootPath = path.dirname(__dirname);

var instance = new thinkjs({
  APP_PATH: rootPath + "/app",
  ROOT_PATH: rootPath,
  RESOURCE_PATH: __dirname,
  env: "development"
});

instance.run();

www/static

存放一些靜態(tài)資源文件。