Sails Framework V1.0- Form POST

Sails Framework  V1.0 - Form POST

STEP 1:

a) Generate pages using the command

sails generate page foldername/functionname

view raw SailsGeneratePage.sh hosted with ❤ by GitHub

In the above example foldername is the name of the folder. which will be created under the following locations
i) API
ii) views/pages/
iii) assets/js/pages/
iv) assets/styles/pages/

b) copy the generated routes into routes file.
The above single command will be used to generate files for the following locations.
under i) API folder back end foldername/view-functionname.js file will be created .
ii) views/pages/foldername/functionname.ejs file will be create for html file.
iii)  assets/js/pages//foldername/functionname.js  this file is for javascript operations.
iv) assets/styles/pages/foldername/functionname.less  this file is for css operations.

STEP 2:
a) Create API alone using the command
sails generate auth apifolder/functionname

b) Again copy the generated routes into routes file.
c) create logic for the function example

	// you can refer https://sailsjs.com/documentation/reference/waterline-orm/datastores/send-native-query
	// Build our SQL query template.
	var SPNAME_CALL_SQL = `call sp_spname($1,$2)`;
	// Send it to the database.
	var rawResult = await sails.sendNativeQuery(SPNAME_CALL_SQL, [ 'dog', 'cat' ]);
	return exits.success();

view raw functionname.js hosted with ❤ by GitHub

STEP 3:
a) Run the command to generation post action for form post.
sails run rebuild-cloud-sdk


STEP 4:

a) now look into ii) views/pages/foldername/functionname.js and create a ajax form using the following code.

	<div class="container">
	<ajax-form action="cloudsetupactionname" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm" :handle-parsing="handleParsingForm">
	<!-- write other code here -->
	<p class="text-danger" v-if="cloudError==='error1'"><small>error1.</small></p>
	<p class="text-danger" v-else-if="cloudError==='error2'"><small>error2.</small></p>
	<ajax-button type="submit" :syncing="syncing" class="btn-dark btn-lg btn-block">Submit</ajax-button>
	</ajax-form>
	</div>

view raw ajax-form.ejs hosted with ❤ by GitHub

STEP 5:
a) now look into assets/js/pages//foldername/functionname.js and create the required functions

	data: {
	// Form data
	formData: { /* … */ },
	// For tracking client-side validation errors in our form.
	// > Has property set to `true` for each invalid property in `formData`.
	formErrors: { /* … */ },
	// Syncing / loading state
	syncing: false,
	// Server error state
	cloudError: '',
	// Success state when form has been submitted
	cloudSuccess: false,
	},
	// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
	// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
	// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
	beforeMount: function() {
	// Attach any initial data from the server.
	_.extend(this, SAILS_LOCALS);
	},
	mounted: async function() {
	//…
	},
	// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
	// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
	// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
	methods: {
	submittedForm: async function(response) {
	if(response.APIstatus=="200") {
	// If email confirmation is enabled, show the success message.
	this.cloudSuccess = true;
	}
	else {
	// Error message will display in the
	this.syncing = true;
	}
	},
	handleParsingForm: function() {
	// Clear out any pre-existing error messages.
	this.formErrors = {};
	var argins = this.formData;
	/* Validate full name:
	if(!argins.fullName) {
	this.formErrors.fullName = true;
	}*/
	// If there were any issues, they've already now been communicated to the user,
	// so simply return undefined. (This signifies that the submission should be
	// cancelled.)
	if (Object.keys(this.formErrors).length > 0) {
	return;
	}
	return argins;
	},
	}

view raw sails_jsfile.js hosted with ❤ by GitHub

STEP 6:
a) now look into config/policies.js
check the session validation on the page is authorized to view for the user.


STEP 7:
a) Stop the server once and restart again. Usually it back-end related operations require to restart the server

See this video Tutorial