À propos de l'opération de soumission de données pour l'interaction des données frontales et back-end de vue.js

Cet article présente principalement l'opération de soumission de données de l'interaction des données frontales et back-end de vue.js. Il analyse en détail la structure du formulaire, les règles de contrainte, la soumission de données et d'autres compétences opérationnelles liées à vue.js front-. Interaction des données finales et back-end sous forme d'exemples. Pour des précautions, les amis dans le besoin peuvent se référer à

Cet article décrit le fonctionnement des données de soumission de l'interaction des données frontales et back-end de vue.js. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

Lorsque les débutants du front-end commencent à créer des pages, les formulaires sont souvent utilisés dans nos pages front-end, donc apprendre à soumettre des formulaires est également une base En fait, utiliser ajax peut être implémenté, mais sa syntaxe originale est un peu délicate. . . Front . . . C'est compliqué, voici donc une façon d'utiliser vue-resource pour soumettre des données au backend.

(1) La première étape consiste à écrire un formulaire dans le modèle

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
 <el-form-item label="用户名" prop="name">
   <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
 <el-form-item label="用户类型" prop="type">
   <el-select v-model="ruleForm.type" placeholder="请选择专利类型" style="width:500px;">
 <el-option label="一级管理员" value="1"></el-option>
 <el-option label="二级管理员" value="2"></el-option>
 <el-option label="三级管理员" value="3"></el-option>
 <el-option label="普通用户" value="4"></el-option>
   </el-select>
 </el-form-item>
 <el-form-item label="出生日期" prop="date">
   <el-input v-model="ruleForm.date"></el-input>
 </el-form-item>
 <el-form-item label="备注" prop="intro">
   <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">提交</el-button>
 </el-form-item>
</el-form>

(2) Définir le formulaire dans les données ; Champs de contenu et règles de contrainte du formulaire

data() {
   return {
    ruleForm: {
       name: '',
       type: '',
       date: '',
       intro: '',
     }
   }
 rules: {
     name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 1, max: 20, message: '长度在 1 到20个字符', trigger: 'blur' }
     ],
     type: [
      { required: true, message: '请选择用户类型', trigger: 'change' }
     ],
     date: [
      { required: true, message: '请输入出生日期', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
     ],
     intro: [
      { required: true, message: '请输入备注', trigger: 'blur' },
      { min: 50, max: 500, message: '请输入至少50个字', trigger: 'blur' }
     ],
    }
}

(3) Définir la méthode de soumission du formulaire

methods:{
submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
      this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){
            if(res.body==1){
              this.$alert("提交成功", '提交结果', {
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                },
              });
            }
            else{
              this.$alert("提交失败", '提交结果', {
                confirmButtonText: '确定',
                type: 'warning',
                callback: action => {
                },
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
}

La baseURL et l'API dans la fonction de soumission ci-dessus sont supplémentaires comme suit :

Ici, je vais vous présenter une méthode de demande de données au backend à l'aide de vue-resource.

Par exemple, demandez une table au backend,

(1) Tout d'abord, renvoyez un tableau msg:[] dans data pour recevoir les données de la table

(2) ) Définissez une fonction de requête dans la méthode. Par exemple, le nom de la fonction ici est défini comme showDetails

methods:{
  showDetails:function(){
    this.$http.get(baseURL+"api/条件").then(function(res){
      this.msg = res.body;
    });
  }
}

Le chemin du projet baseURL ici, si le projet est déployé, le format général sur le serveur est www.XXX.com/project name ; l'API suivante est l'interface API encapsulée par le backend ; puis les conditions sont des instructions telles que la requête de table et la suppression. Par exemple, si vous interrogez la table nommée student et que vous devez obtenir la confiance des étudiants portant l'ID d'étudiant 40001, l'instruction de requête peut être écrite sous la forme « query?table=student&studentIDeq=40001 ». Ce qu'il faut noter, c'est qu'elle est liée. aux champs d'opération de la base de données (en termes simples, on peut comprendre que les champs définis par le backend) doivent être placés entre guillemets, tandis que les champs définis par le front-end doivent être placés en dehors des guillemets

;

(3) Enfin, n'oubliez pas que cette opération de requête n'est pas appelée et est exécutée par défaut. Elle doit donc être exécutée en temps réel en monté

mounted: function (){
   this.showDetails();
}

<.>

D'accord, cette fonction est terminée, vous pouvez la visualiser via le réseau de la console du navigateur. Les données obtenues via le terminal peuvent également être vues via l'impression de la console ! ! !

Bien sûr. Le principe est qu'il existe une table nommée user dans votre base de données, qui contient les champs nom, type, date et intro, et que l'interface back-end a été définie, sinon elle ne réussira pas

Ce qui précède est tout le contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à la définition dynamique des paramètres de routage dans Vue

À propos de l'intégration de vue.js dans mint-ui Image du carrousel de

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!