~/blog/user/art/1.0.0/add.js 開發
新增文章頁面主要的功能就是乙個提交表單,這裡我們採用非同步提交
1.模組依賴
為了提高開發效率,我們用jquery進行開發(我們建議乙個專案只用乙個jquery版本,因此我們把jquery作為乙個核心模組進行處理)
訪問 我們可以看到jquery檔案的id為$, 提供的介面就是jquery(就是平時我們用到的$函式)
因此,我們可以這樣在add.js中宣告對jquery的依賴
var $ = require('$');
接下來為表單繫結submit事件,然後牽扯到乙個問題,資料互動的問題,很多時候我們在開發前端的時候,後台資料還沒準備好,或者說即使準備好了由於跨域等一些問題也沒法直接用,因此atm本地的node開發環境提供了測試資料的支援
2.測試資料
atm規定:測試資料必須放在views資料夾下面(一般只有有模板的時候才需要測試資料)
因此,我們在 ~/blog/user/art/1.0.0/views下面新建乙個模擬表單提交後返回資料的指令碼檔案 eg: submit-add.js
因為datas與add.ejs平級, 因此submit-add.js我們這樣訪問:
因此,在add.ejs中,我們可以通過 給form表單的 action 寫成 "./datas/submit-add"即可
<2.對測試資料的相關思考
有時候我們會有以下幾種需求:
a.需要多種狀態的測試資料
b.有時候需要讓資料延遲幾秒返回,以測試乙個loading效果或其他效果
c.最好能把json資料轉成jsonp資料
如何延遲返回:
為了解決上述幾個問題,我們需要對測試資料訪問位址增加不同的query,大致格式如下
?status=ok?timeout=3000
?callback=random_func
那麼submit-add.js怎麼寫?
var datas = ,error:
};/**
* * @param query location.search物件
* @param req http request物件
* @param res http response物件
* @returns
*/module.exports = function (query, req, res) ;
?status=error(或者我們自定義一些其他的規則或資料都行)
timeout和jsonp在**中不用考慮,只需要變幻url中的timeout和callback引數即可
<% atmjs.use('$family/$module:$version/add'); %><%- atmjs.loadjs(); %>
接下來add.js**就很簡單了
var $ = require('$');$(document).on('submit', '#submit-add', function (e) );
});
目前為止,乙個簡單的發布文章頁面及**已經完成!
0008 文章管理
先做個選擇文章專欄的下拉選擇框。用easyui提供的combobox來實現,通過傳送ajax獲取專欄資料,然後根據返回的json資料構造下拉框。前端頁面ajax請求 構造下拉框 function alert user id arti cate combobox arti cate combobox ...
文章筆記 Phone 2010文章摘要
1.手機上的多種感測器整合,感知系統和使用者的行為。有一篇文章提出了一種監視器服務,能夠整合感測器 系統和使用者行為,為應用程式提供服務,可以讓開發者優化應用程式,提高系統的效能。另有一篇文章提出了一種應用程式框架,避免應用程式直接監視感測器。這樣可以降低能耗,尤其是在多個應用在同乙個裝置上使用時。...
HEXO 02 文章建立
你可以執行下列命令來建立一篇新文章 hexo new layout 您可以在命令中指定文章的布局 layout 預設為post,可以通過修改 config.yml中的default layout引數來指定預設布局。hexo 有三種預設布局 post page和draft,它們分別對應不同的路徑,而您...