~/blog/user/art/1.0.0/add.js Development
Add article page The main function is a submit form, where we use asynchronous commit
1. Module dependencies
To improve development efficiency, we use jquery for development (we recommend that a project use only one jquery version, so we handle jquery as a core module)
To access http://127.0.0.1:1234, we can see that the jquery file has an ID of $, and the interface provided is jquery (the $ function we usually use)
So we can declare a dependency on jquery in Add.js.
var $ = require (' $ ');Next to the form binding the Submit event, and then involved in a problem, data interaction problems, many times we are in the development of the front end, the background data is not ready, or even if it is ready for cross-domain and other problems can not be directly used, Therefore, the local node development environment in ATM provides test data support
2. Test data
<1. Test data access Address problem:
ATM rules: Test data must be placed under the Views folder (usually only need to test data when the template)
Therefore, we create a new script file that returns data after a mock form is submitted under ~/blog/user/art/1.0.0/views Eg:submit-add.js
We also remember that the access address of the add article is
Http://127.0.0.1:1234/dev/user/art/1.0.0/views/add
Because Datas and Add.ejs are sideways, so submit-add.js us to visit:
Http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add
Therefore, in Add.ejs, we can write "./datas/submit-add" for the action of form form.
<2. Thinking about the test data
Sometimes we have the following requirements:
A. Test data that requires multiple states
B. Sometimes you need to delay the data for a few seconds to test for a loading effect or other effect
C. It is better to convert the JSON data into JSONP data
How to delay the return:
To solve the above problems, we need to add a different query to the test data access address, the approximate format is as follows
http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add?status=okhttp://127.0.0.1:1234/dev/user/art/ 1.0.0/views/datas/submit-add?timeout=3000http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add? Callback=random_func
So how does submit-add.js write?
var datas = { OK: { status:true, message: ' article added success ' }, error: { status:false, message: ' Article added failed ' }};/** * * @param query {Object} Location.search Object * @param req {Object} HTTP Request Object * @param res {object} HTTP Response Object * @returns {json| jsonp| Text| HTML} */module.exports = function (query, req, res) { var status = Query.status | | ' OK '; return datas[status];};
If you want to test the failed data,
Http://127.0.0.1:1234/dev/user/art/1.0.0/views/datas/submit-add?status=error (or we can customize some other rules or data)
Timeout and Jsonp are not considered in the code, they only need to change the timeout and callback parameters in the URL.
Code in the Add.ejs
<% atmjs.use (' $family/$module: $version/add '); %><!doctype html>
The next add.js code is pretty straightforward.
var $ = require (' $ '); $ (document). On (' Submit ', ' #submit-add ', function (e) { e.preventdefault (); var Ajaxurl = $ (this). attr (' action '); $.getjson (Ajaxurl, function (data) { alert (data.message); });So far, a simple publish article page and code has been completed!
2.2-2 Article Module Development "Add article page scripting"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
