VueJS3 connect to oracle database

Viewed 21

I build a registration page that containing a form, and now I want to post the form to oracle database. What should I do? I tried to search online but theres no resourses about vuejs connect to oracle.

Oracle database info example:
host name:MyDB
port: 9999
SID: DB
UserName: vueDB
password: passW0rd

Registration.vue

<template>
  <div class="auth-inner" id="regAuth">
    <h3>New User Registration</h3>
    <Form @submit="onSubmit" :validation-schema="schema">
      <span class="lblMandatory">* </span><span class="lblExplanatoryNote">This is a mandatory field and data must be provided.</span>

      <div class="form-group">
        <span class="lblSectionField">Company Name <span class="lblMandatory">*</span></span>
        <Field name="CompanyName" class="form-control"/>
        <ErrorMessage name="CompanyName" class="ErrorMessage"/>
      </div>

      <div class="form-group">
        <label>Company Name [Chinese]</label>
        <Field name="ChiCompanyName" type="ChiCompanyName" class="form-control"/>
        <ErrorMessage name="ChiCompanyName" class="ErrorMessage"/>
        <br>
        <span class="lblSectionField"><span class="lblExplanatoryNote">(Please input the company name as shown on the certificate of incorporation for "Limited Company")</span></span>

      </div>

      <div class="form-group">
        <span class="lblSectionField">Registered Address <span class="lblMandatory">*</span></span>
        <Field name="RegisteredAddress" type="RegisteredAddress" class="form-control" maxlength="40"/>
        <Field name="RegisteredAddress" type="RegisteredAddress" class="form-control" maxlength="40"/>
        <Field name="RegisteredAddress" type="RegisteredAddress" class="form-control" maxlength="40"/>
        <Field name="RegisteredAddress" type="RegisteredAddress" class="form-control" maxlength="40"/>
       <ErrorMessage name="RegisteredAddress" class="ErrorMessage"/>
      </div>
      <div class="form-group">
        <span class="lblSectionField"><span class="lblExplanatoryNote">If Correspondence Address is the same as the Registered Address, please leave the Correspondence Address fields blank.</span></span><br>
        <span class="lblSectionField">Correspondence Address</span>
        <Field name="CorrespondenceAddress" type="text" class="form-control" size="41" maxlength="40" />
        <Field name="CorrespondenceAddress" type="text" class="form-control" size="41" maxlength="40" />
        <Field name="CorrespondenceAddress" type="text" class="form-control" size="41" maxlength="40" />
        <Field name="CorrespondenceAddress" type="text" class="form-control" size="41" maxlength="40" />
      </div> 
      <span class="lblSectionField">Does your company have Inland Revenue Department Business Registration Certificate? <span class="lblMandatory">*</span></span>     
      

        <Field class="form-check-input" name="Certificate" type="radio" value="yes" /> 
        <label for="yes">&nbsp;yes&nbsp;</label> 
        <Field class="form-check-input" name="Certificate" type="radio" value="no" /> 
        <label for="no">&nbsp;no&nbsp;</label>
          
      <br>
      <ErrorMessage name="Certificate" class="ErrorMessage"/>
      
      <div class="form-group">
        <span class="lblSectionField">Business Registration Certificate No.  </span>
        <Field class="form-control" maxlength="8" size="9" name="CertificateNumber" type="Text" value="" />
        <!--
        - 
        <Field class="ctrlText" maxlength="3" size="4" name="CertificateNumber" type="Text" value="" />
        - 
        <Field class="ctrlText" maxlength="2" size="3" name="CertificateNumber" type="Text" value="" /> 
        - 
        <Field class="ctrlText" maxlength="2" size="3" name="CertificateNumber" type="Text" value="" />
        - 
        <Field class="ctrlText" maxlength="1" size="2" name="CertificateNumber" type="Text" value="" />-->
        <ErrorMessage name="CertificateNumber" class="ErrorMessage"/>
      </div>      
      
      <div class="form-group">
        <div class="title">Liaison Officer</div>
        
      </div>     
       

      <div class="form-group">
        <span class="lblSectionField">Name <span class="lblMandatory">*</span></span>
        <Field name="LIAISON_OFFICER_NAME" type="text" class="form-control" size="41" maxlength="40" value="" />
      </div>      

      <div class="form-group">
        <span class="lblSectionField">Title <span class="lblMandatory">*</span></span>
        <Field name="Title" as="select" class="form-select form-select-sm">
          <option value="Mr">Mr</option>
          <option value="Mrs">Mrs</option>
          <option value="Ms">Ms</option>
        </Field>
        <ErrorMessage name="Title" class="ErrorMessage"/>
      </div>      
      <div class="form-group">
        <span class="lblSectionField">Email Address <span class="lblMandatory">*</span></span>
        <Field name="Email" type="form-control" class="form-control" size="41" maxlength="50" value="" />
        <ErrorMessage name="Email" class="ErrorMessage"/>
      </div>      
      <div class="form-group">
        <span class="lblSectionField">Telephone No.</span>
        <Field name="LIAISON_OFFICER_TEL_NO" type="text" class="form-control" size="21" maxlength="20" value="" />
      </div>      
      <div class="form-group">
        <span class="lblSectionField">Mobile No.</span>
        <Field name="LIAISON_OFFICER_MOB_NO" type="text" class="form-control" size="21" maxlength="20" value="" />
      </div>
      <div class="form-group">
        <span class="lblSectionField"><span class="lblExplanatoryNote">Please enter 3 choices for login username:</span></span>
        <br>
        <span class="lblSectionField">First Choice <span class="lblMandatory">*</span></span>
        <Field v-model="choiceOne" name="SYS_USER_FIRST" type="text" class="form-control" size="21" maxlength="20" value="" />
        <ErrorMessage name="SYS_USER_FIRST" class="ErrorMessage"/>
        <br>
        <span class="lblSectionField">Second Choice <span class="lblMandatory">*</span></span>
        <Field v-model="choiceTwo" name="SYS_USER_SECOND" type="text" class="form-control" size="21" maxlength="20" value="" />
        <ErrorMessage name="SYS_USER_SECOND" class="ErrorMessage"/>
        <br>
        <span class="lblSectionField">Third Choice <span class="lblMandatory">*</span></span>
        <Field v-model="choiceThree" name="SYS_USER_THIRD" type="text" class="form-control" size="21" maxlength="20" value="" />
        <ErrorMessage name="SYS_USER_THIRD" class="ErrorMessage"/>
      </div>

      <div class="form-group">
        <a name="Data_Entry_Officer"><div class="title">Data Entry Officer</div></a>
       
        <span class="lblSectionField">
          <br>
        <Field name="D_ACCT_IND" class="form-check-input" type="checkbox" value="Y" />   Please tick if you would like to obtain an account for data entry officer
        </span>
      </div>

      <div class="form-group">
        <span class="lblSectionField"><span class="lblExplanatoryNote">Please enter 3 choices for login username:</span></span>
        <br>
        <span class="lblSectionField">First Choice</span>
        <Field  name="D_SYS_USER_FIRST" type="text" class="form-control" size="21" maxlength="20" value="" />
        <span class="lblSectionField">Second Choice</span>
        <Field  name="D_SYS_USER_SECOND" type="text" class="form-control" size="21" maxlength="20" value="" />
        <span class="lblSectionField">Third Choice</span>
        <Field  name="D_SYS_USER_THIRD" type="text" class="form-control" size="21" maxlength="20" value="" />
      </div>

      <div class="form-group">
        <a name="Supporting_Document"><div class="title">Supporting Document</div></a>
        <span class="lblExplanatoryNote">
          Please provide the following information
        </span>
      </div>

      <div class="form-group">
        <span class="lblSectionField"><span class="lblExplanatoryNote">1. Copy of Business Registration Certificate </span></span>
        <br>
        <span class="lblSectionField">File&nbsp;attached    </span>
        <Field type="file" class="form-control" name="BRC_FILE_CONTENT" size="35" value="" />
      </div>

        <button class="btn btn-primary" type="submit">Submit</button>
    </Form>
  </div>
</template>

<script>
  export default {
    methods: {
      onSubmit(){
        console.log("submitted")
      }
    }
  }
</script>
0 Answers
Related