Explication détaillée des étapes d'interaction des données frontales et back-end de vue.js

Cette fois, je vais vous apporter une explication détaillée des étapes d'interaction des données entre le front et le backend de vue.js Quelles sont les précautions pour l'interaction des données entre le front et le backend de vue.js. . Voici des cas pratiques, jetons un oeil.

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 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é 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. . Par exemple, si vous souhaitez interroger la table nommée student et que vous avez besoin d'obtenir la confiance des étudiants avec l'ID studentID 40001, l'instruction de requête peut être écrite sous la forme « query?table=student&studentIDeq=40001 ». liés aux champs de fonctionnement 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, ça ; La fonction est terminée. 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 adapter les images à la hauteur du modèle dans le mini programme WeChat

Presse spécifiée lors du téléchargement d'images jquery Aperçu à l'échelle (avec code)

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!