Explication détaillée de l'opération de soumission des données de l'interaction des données frontales et back-end de vue.js

Cette fois, je vais vous apporter une explication détaillée de l'opération de soumission des données pour l'interaction des données front-end et back-end de vue.js Quelles sont les précautions pour l'utilisation de vue.js front-. Interaction des données finales et back-end. Ce qui suit est la pratique réelle.

Lorsque les débutants du front-end ont commencé à créer des pages, nous utilisions souvent des formulaires dans nos pages front-end, donc apprendre à soumettre des formulaires est également une compétence de base. En fait, cela peut être réalisé avec ajax, mais c'est le cas. la 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 les champs du contenu du formulaire et les règles de contrainte du formulaire dans les données ; ;

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;
        }
      });
    }
}

L'introduction de baseURL et de l'API dans la fonction de soumission ci-dessus est la suivante :

Ici, je vais vous présenter une autre méthode. Utilisez vue-resource pour demander des données au backend.

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 est défini ici 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é sur le serveur, le format général. est www.XXX.com/ Nom du projet ; l'API suivante est l'interface API encapsulée par le backend, puis les conditions sont des instructions telles que query, delete, etc. tableau. 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é. Vous pouvez visualiser les données obtenues à partir du backend via le réseau de la console du navigateur, ou imprimer la sortie via la console. ! !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'état de mise à jour de la méthode vuex dans le composant parent et le composant enfant ne peut pas mettre à jour le rendu à temps

Comment implémenter le développement international de vue-i18n et element-ui dans le projet vue

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!