2.2-2 文章模块开发【添加文章页面脚本编写】
~/blog/user/art/1.0.0/add.js 开发
添加文章页面主要的功能就是一个提交表单，这里我们采用异步提交
1.模块依赖
为了提高开发效率，我们用jQuery进行开发（我们建议一个项目只用一个jquery版本，因此我们把jQuery作为一个核心模块进行处理）
访问 http://127.0.0.1:1234,我们可以看到jquery文件的id为$, 提供的接口就是jQuery(就是平时我们用到的$函数)
因此，我们可以这样在add.js中声明对jQuery的依赖
var $ = require('$');
接下来为表单绑定submit事件,然后牵扯到一个问题，数据交互的问题，很多时候我们在开发前端的时候，后台数据还没准备好，或者说即使准备好了由于跨域等一些问题也没法直接用，因此atm本地的node开发环境提供了测试数据的支持
2.测试数据
<1. 测试数据的访问地址问题：
atm规定：测试数据必须放在views文件夹下面（一般只有有模板的时候才需要测试数据）
因此，我们在 ~/blog/user/art/1.0.0/views下面新建一个模拟表单提交后返回数据的脚本文件 eg: submit-add.js
我们还记得 添加文章的访问地址是
http://127.0.0.1:1234/dev/user/art/1.0.0/views/add
因为datas与add.ejs平级, 因此submit-add.js我们这样访问：
http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add
因此，在add.ejs中，我们可以通过 给form表单的 action 写成 "./datas/submit-add"即可
<2.对测试数据的相关思考
有时候我们会有以下几种需求：
a.需要多种状态的测试数据
b.有时候需要让数据延迟几秒返回，以测试一个loading效果或其他效果
c.最好能把json数据转成jsonp数据
如何延迟返回：
为了解决上述几个问题，我们需要对测试数据访问地址增加不同的query,大致格式如下
http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add?status=ok http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add?timeout=3000 http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add?callback=random_func
那么submit-add.js怎么写？
var datas = {
ok: {
status: true,
message: '文章添加成功'
},
error: {
status: false,
message: '文章添加失败'
}
};
/**
*
* @param query {Object} location.search对象
* @param req {Object} http request对象
* @param res {Object} http response对象
* @returns {JSON|JSONP|TEXT|HTML}
*/
module.exports = function (query, req, res) {
var status = query.status || 'ok';
return datas[status];
};
如果想测试失败的数据，
http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add?status=error(或者我们自定义一些其他的规则或数据都行)
timeout和jsonp在代码中不用考虑，只需要变幻url中的timeout和callback参数即可
add.ejs中的代码
<% atmjs.use('$family/$module:$version/add'); %>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>添加文章页面</title>
<%- atmjs.loadCss(); %> <!--渲染入口文件依赖的css-->
</head>
<body>
<form id="submit-add" action="./datas/submit-add">
<ul>
<li><input type="text" id="title" name="title"/></li>
<li><textarea name="content" id="content" cols="30" rows="10"></textarea></li>
<li><input type="submit" value="添加文章"/></li>
</ul>
</form>
<%- atmjs.loadJs(); %> <!--渲染入口文件依赖的JS相关代码-->
</body>
</html>
接下来add.js代码就很简单了
var $ = require('$');
$(document).on('submit', '#submit-add', function (e) {
e.preventDefault();
var ajaxUrl = $(this).attr('action');
$.getJSON(ajaxUrl, function (data) {
alert(data.message);
});
});
目前为止，一个简单的发布文章页面及代码已经完成！
