Où est écrite l'interface frontale d'uniapp ?

Avec le développement rapide de l'Internet mobile et de la technologie du cloud computing, les applications Web et les applications mobiles sont devenues le courant dominant de l'ère Internet moderne. Dans ce processus, l'importance de la technologie front-end est devenue de plus en plus importante et l'écriture d'interfaces front-end est devenue une compétence indispensable pour les ingénieurs front-end. Cet article explorera où écrire l'interface frontale d'Uniapp.

uniapp est un framework de développement basé sur Vue.js. C'est un framework multiplateforme qui permet de développer simultanément des applications iOS, Android et Web. Dans uniapp, l'écriture de l'interface front-end est principalement divisée en deux parties : l'interface back-end et l'interface front-end.

Interface backend

L'interface backend fait référence à l'interface fournie par le serveur à l'application front-end. Les développeurs front-end d'Uniapp peuvent accéder à ces interfaces via des requêtes http et obtenir les données qui doivent être affichées.

Le code de l'interface back-end est généralement écrit par le développeur côté serveur. Le développeur doit transmettre les données côté serveur à l'application front-end sous forme de texte ou de JSON. docking de données et extraction de données Dans uniapp, l'URL de l'interface backend est généralement une adresse commençant par "/api". Le code côté serveur peut être écrit dans n'importe quel langage, tel que Java, Python, PHP et d'autres langages ; les données côté serveur peuvent être des données structurées stockées dans la base de données, telles que MySQL, Oracle et d'autres bases de données relationnelles, ou des données textuelles. , Données XML, données JSON, etc., les développeurs peuvent choisir en fonction de leurs besoins.

Dans uniapp, les développeurs utilisent généralement axios.js, une bibliothèque tierce, pour envoyer des requêtes Ajax pour appeler l'interface backend. Axios.js est un client HTTP basé sur Promise qui prend en charge les navigateurs et Node.js. Dans le développement front-end, il peut être utilisé pour échanger plus facilement des données avec le backend. Voici un exemple de code qui utilise Axios.js pour appeler l'interface back-end :

import axios from 'axios';
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    axios.get('/api/userInfo').then(response => {
      this.userInfo = response.data;
    }).catch(error => {
      console.log(error);
    });
  }
}

Interface front-end

L'interface front-end fait référence à l'interface fournie par l'application frontale vers le serveur back-end, généralement Il est déclenché par la saisie de l'utilisateur, les clics de souris, etc. La fonction principale de l'interface frontale est d'envoyer des données au serveur back-end pour mettre en œuvre diverses opérations commerciales. Par exemple, la connexion de l'utilisateur, l'enregistrement de l'utilisateur, le changement de mot de passe, etc. doivent tous utiliser l'interface frontale pour interagir avec le back-end.

L'écriture de l'interface front-end est réalisée par les développeurs front-end. Les interfaces frontales sont généralement écrites dans des applications frontales sous la forme de code JavaScript ou TypeScript. Ces interfaces sont responsables du traitement des entrées de l'utilisateur et de l'affichage des résultats du programme, de l'interaction, de la validation, etc.

Dans uniapp, l'écriture de l'interface front-end s'appuie principalement sur les deux bibliothèques front-end de Vue.js, la bibliothèque Vue-Resource et Axios.js. Parmi elles, la bibliothèque Vue-Resource est la bibliothèque client HTTP officiellement recommandée par Vue.js. Elle prend en charge Promise et les intercepteurs, et peut filtrer et convertir les données, permettant aux développeurs de traiter les données de manière plus flexible. Voici un exemple de code qui utilise la bibliothèque Vue-Resource pour appeler l'interface frontale :

import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      this.$http.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

Comme le montre le code ci-dessus, nous utilisons la méthode $http.post de Vue-Resource bibliothèque pour envoyer un POST au serveur. Une requête. La cible de la requête est "/api/login". Les données demandées contiennent le nom d'utilisateur et le mot de passe de connexion. Après avoir reçu la requête, le serveur vérifiera l'identité de l'utilisateur en fonction. ces paramètres.

Résumé

L'écriture de l'interface front-end d'uniapp comprend l'écriture de l'interface back-end et de l'interface front-end est principalement responsable. pour les développeurs back-end et est généralement utilisée pour envoyer des messages au front-end ; l'interface front-end est écrite par les développeurs front-end pour traiter les entrées de l'utilisateur et afficher les résultats du programme, l'interaction, la vérification, etc. Qu'il s'agisse d'écrire des interfaces back-end ou des interfaces front-end, uniapp fournit une multitude de bibliothèques tierces, telles que axios.js et Vue-Resource, qui peuvent aider les développeurs à effectuer plus facilement les opérations d'interaction de données.

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!