Vue.js 中使用 post 请求传递参数：account、username、password

<template>
  <div id="poster">
  <el-form ref="ruleFormRef"  :model="ruleForm" status-icon :rules="rules" label-position="left" label-width="0px" class="register-container">
    <h3 class="register_title">
      自律即自由
    </h3>
    <el-form-item label="" prop="loginName">
      <el-input v-model="ruleForm.loginName" type="text" placeholder="请输入你的账号" />
    </el-form-item>
    <el-form-item label="" prop="username">
      <el-input v-model="ruleForm.username" type="text" placeholder="请输入你的用户名" />
    </el-form-item>
    <el-form-item label="" prop="password">
      <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码"  />
    </el-form-item>
    <el-form-item label="" prop="checkPass"  >
      <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width:100%;background: cornflowerblue" @click="submitForm(ruleForm)">注册</el-button>
      <el-button style="width:100%;border: none" @click="tologin()">已有账号，点击登录</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>
<script>
export default {
  name: "MyLoginRight",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        loginName: '1111',
        username: '',
        password:'',
        checkPass: '',
      },
      rules: {
       loginName: [
          {required: true,message:'请输入你的名称',trigger: 'blur' },
         {min: 2,max:16,message: '长度为2到9个字符',trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    tologin(){
  this.$router.push({path:'left'})
},
    submitForm(){
      const data = {
        account: this.ruleForm.loginName,
        username: this.ruleForm.username,
        password: this.ruleForm.password
      };
      this.$net.post('/Register/Register2', data).then(resp => {
        console.log(data)
        // if (resp.data.code === 200) {
        //   alert('注册成功')
        //   this.fetchTaskList()
        // } else {
        //   alert('注册失败')
        // }
      }).catch(error => {
        console.log(error)
        alert('保存失败')
      })

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

</script>
<style scoped>
#poster{
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position:fixed;
  margin: -100px;
  padding: 0px;
}

.register_title{
  margin-left: 120px;
  margin-bottom: 20px;
}
.register-container{
  border-radius: 15px;
  background-clip: padding-box;
  margin-top: 150px ;
  margin-left: 500px;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #1bd5c5;
  box-shadow:0 0 25px #ccdcdb;
}
</style>
<p>在 Vue.js 中，使用 <code>$net.post()</code> 方法发送 post 请求，将参数 <code>data</code> 传递到后端 <code>/Register/Register2</code> 接口。</p>
<p>参数 <code>data</code> 是一个对象，包含三个属性：</p>
<ul>
<li><code>account</code>：用户账号，类型为字符串</li>
<li><code>username</code>：用户名，类型为字符串</li>
<li><code>password</code>：密码，类型为字符串</li>
</ul>
<p>这段代码展示了如何使用 Vue.js 发送 post 请求并将参数传递到后端，以便在注册过程中将用户的信息提交给服务器。</p>
<p><strong>注意：</strong></p>
<ul>
<li>实际代码中，<code>$net</code> 对象需要根据你使用的网络请求库进行调整。</li>
<li><code>/Register/Register2</code> 是后端 API 接口的地址，你需要根据实际情况进行修改。</li>
<li>你可能需要根据需求调整参数的类型和名称。</li>
</ul>