Comment utiliser Vue pour réaliser la séparation front-end et back-end et l'amarrage d'interface ?

Avec le développement continu de la technologie front-end, le modèle d'architecture de séparation du front-end et du back-end devient de plus en plus populaire. Les avantages de la séparation du front-end et du back-end sont évidents. Le front-end et le back-end peuvent être développés indépendamment, chacun avec sa propre sélection technologique et son propre rythme de développement, ce qui peut améliorer la maintenabilité et l'évolutivité du système. En tant que framework frontal populaire, Vue peut apporter une meilleure expérience utilisateur. Cet article présentera en détail comment utiliser Vue pour implémenter le modèle architectural de séparation front-end et back-end, et démontrera la méthode d'amarrage d'interface.

1. Implémentation back-end

Pour l'implémentation back-end, nous pouvons choisir des langages et des frameworks que nous connaissons, comme le framework Spring de Java ou le framework Django de Python. Je n’entrerai pas dans les détails ici.

2. Implémentation front-end

Vue est un framework front-end léger et facile à utiliser, très approprié pour réaliser le modèle architectural de séparation front-end et back-end. Les étapes pour utiliser Vue pour réaliser la séparation front-end et back-end sont les suivantes :

1. Créer un projet Vue

Tout d'abord, nous devons créer un nouveau projet Vue via l'outil de ligne de commande. Ici, nous utilisons l'échafaudage Vue-cli. La commande est la suivante :

npm install -g vue-cli         // 全局安装Vue-cli
vue init webpack my-project   // 创建一个webpack项目

2. Modifiez le fichier de configuration

Dans le fichier de configuration config/index.js, configurez l'attribut proxyTable sur l'adresse du backend proxy :

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8888',   // 后端接口地址
        changeOrigin: true      // 是否跨域
      }
    }
  }
}

3. Écrire la page front-end et les appels d'interface

L'idée centrale de Vue est la composantisation. Nous pouvons définir une page front-end en tant que composant. En même temps, l'interface est appelée via ajax. Vous pouvez utiliser la bibliothèque Vue-resource ici :

<template>
  <div>
    <h2>用户列表</h2>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export default {
  name: 'UserList',
  data () {
    return {
      users: []
    }
  },
  created () {
    Vue.http.get('/api/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dans le code ci-dessus, nous définissons un composant nommé UserList, déclenchons l'événement créé pour appeler l'interface pour obtenir la liste des utilisateurs. , et enfin transférer les données Bind vers la page. Il convient de noter que l'adresse de l'interface appelée ici est "/api/users". Parce que nous avons défini le proxy dans le fichier de configuration, nous accédons en fait à l'adresse du backend "http://localhost:8888/api" /users".

4. Construire et déployer

Après avoir fini d'écrire le code front-end, nous pouvons construire et empaqueter le projet Vue via la commande :

npm run build

Le dossier généré après l'empaquetage est le dossier que nous devons déployer, placez ce dossier Déployez-le simplement sur le serveur Web de la manière normale.

3. Comment connecter l'interface ?

L'amarrage d'interface est le contenu principal de l'architecture de séparation front-end et back-end. Dans le code ci-dessus, nous impliquons l'accès à l'adresse du backend "http://localhost:8888/api/users". En fait, il existe deux méthodes de connexion au backend.

1. Amarrage du format de données JSON

Dans ce cas, nous avons besoin que le backend fournisse une interface API qui renvoie le format JSON, et le frontend appelle cette interface via ajax pour obtenir des données. Le format des données renvoyées par le backend est le suivant :

{
    "code": 0,
    "message": "",
    "data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}

Dans le code front-end, nous devons analyser et afficher en fonction des données renvoyées par le backend :

Vue.http.get('/api/users')
      .then(response => {
        if (response.body.code === 0) {
          this.users = response.body.data
        } else {
          alert(response.body.message)
        }
      })

Dans le code ci-dessus, si l'attribut data code renvoyé par le backend est 0, puis les données de la liste sont affichées sur la page, sinon une boîte d'avertissement apparaît pour afficher un message d'erreur.

2. Amarrage de l'interface Restful

Dans ce cas, notre backend doit exposer l'interface API RESTful. Par exemple, dans un système géré par l'utilisateur, nous pouvons avoir l'interface API suivante :

Dans le code front-end, des exemples de méthodes pour appeler ces interfaces sont les suivantes :

// 获取所有用户
Vue.http.get('/api/users')
    .then(response => {
        // ...
    })

// 获取指定用户信息
Vue.http.get('/api/users/' + userId)
    .then(response => {
        // ...
    })

// 新建一个用户
let data = { name: '张三', age: 20 }
Vue.http.post('/api/users', data)
    .then(response => {
        // ...
    })

// 更新指定用户信息
let data = { name: '李四', age: 30 }
Vue.http.patch('/api/users/' + userId, data)
    .then(response => {
        // ...
    })

// 删除指定用户
Vue.http.delete('/api/users/' + userId)
    .then(response => {
        // ...
    })

Dans le ci-dessus le code, nous démontrons Comment appeler différentes interfaces RESTful pour implémenter différentes fonctions métier. Vue-resource peut facilement réaliser la fonction d'accueil d'interface via des appels de méthode simples.

En bref, le modèle architectural de séparation front-end et back-end via Vue peut considérablement améliorer la maintenabilité et l'évolutivité du système. Cet article présente en détail comment utiliser Vue pour réaliser le modèle architectural de séparation front-end et back-end sous trois aspects : le principe d'implémentation, l'implémentation du code front-end et l'amarrage de l'interface. Dans le même temps, il convient de noter que dans le processus de développement actuel, vous devez procéder à des ajustements et à des transformations en fonction de votre situation réelle afin d'obtenir une architecture de séparation front-end et back-end plus belle.

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!