2 2 2 文章模組開發 新增文章頁面指令碼編寫

2022-07-29 06:30:17 字數 1621 閱讀 1600

~/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,它們分別對應不同的路徑,而您...