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);
    });
});

目前为止，一个简单的发布文章页面及代码已经完成！