Code Generator Tool for VueJs

VueJs 3.0 + NodeJs(12) + ExpressJs(4.13)+ MongoDB

System Requirements

For running the code.
Hardware Requirements

For ReactJs Requirements

 

What does the download contain?

Two folders

How to run the code generation?

  1. Open the application folder 
  2. Click on the CodeGenerator.exe as shown in the below image

 

 

File-->New, Save, Open, Set Download Path

New project :

To create a new project click on the File-->New.

Click on ManageCollections and start adding the collections and required fileds in the collections.

After setting the required properties we can save the project for future use. The file will be save in json format.

Click on File->Save

 

File-->Open

We can open the saved project file by click on File->open

 

File-->Set Download Path

And after completing the code generation the generated copied to the given destination folder.

Click on Done to save them.

 

Process-->Validate, Generate Code

After setting the properties for the forms and the field (tables and fields), need to check for any errors.

The basic rules it checks for is

  1. Each and every table should contain only on primary key.
  2. Every form should be in a valid Menu. 
  3. If any of the filed is set as required it should have a Validation message.
  4. If thare are Tabs for a form all the fields should be set with forms.
  5. If the fileds control type is Combo box it should be set with either Dynamic or Static look should be set.

Once all the rules are set the validation will be success or else the errors will be displayed and needs to be corrected.

Process-->Generate Code

After the validation is successfull click on the Process-->Generate Code. The code will be generated and copied to the destination folder( which was set in the set theame path).

Manage Tabs, Manage Static look up, Dynamic Look Up

Manage Tabs

Tabs are used to show alternative views of the same group of information in a page. Select the table the tabs need to be added and click on "Add New Tab" and provide the required tab name.

Static lookup service is used for filling the combo boxes with static array of data. Like for filling a combobox with Gender we can create a static lookup with list of Male and Female types. Key is the one which is displayed to the user and the value is for storing to DB etc.

Manage Dynamic Look Up

Dynamic lookup service is used for filling the combo boxes with data from a table. Need to provide Table from which the data needs to be fetched. Key the filed which is shown in the UI and Value is the one which is stored to DB etc.

 

 

 

View Form , Add Update form, Delete Form

To create a form which Displays the list of records for the table in a Grid. Can set the properties like display in grid or not, included in search or not etc. For more info click here

Add Update form

To craete Add/Update form. can set the display text of the form, control types for the fields, validation messages etc. For more info click here

Delete Form

To craete Delete form. can set the display text of the form, and the message.

Generated Code contents

Setting .NodeJs ExpressJs Rest Api and Running

  1. Open the project in visual studio code.
  2. Open the configmain.js from the config folder
  3. Replace the database with your databse name.

 

And open the terminal and run "npm installl" command

 

 

After installing the node_modules 

Run the command "npm start"

Setting VueJs And Running

 

 

Run the ReactJs project

In the Integrated Terminal  Use npm start to run the project.