Comment utiliser Vue pour implémenter la page de gestion backend du compte officiel WeChat ?

Avec la popularisation d'Internet et le développement rapide de l'Internet mobile, la vie d'aujourd'hui a beaucoup changé. Dans cette nouvelle ère, l’Internet mobile a toujours été une direction de développement importante. En tant que nouveau type de produit Internet mobile, le compte officiel WeChat est rapidement devenu populaire dans le monde entier. À l’heure actuelle, la page de gestion backend du compte public WeChat est également devenue une exigence de développement populaire.

En termes de technologie front-end, Vue est un très excellent framework. Surtout dans les grands projets, Vue offre d'excellentes performances et flexibilité. Par conséquent, cela vaut la peine d'essayer d'utiliser Vue pour implémenter la page de gestion backend du compte officiel WeChat.

Alors, comment utiliser Vue pour implémenter la page de gestion backend du compte officiel WeChat ? Cet article le présentera en détail sous les aspects suivants.

1. Créer un projet Vue

Pour développer un projet à l'aide de Vue, la première étape consiste à créer un projet à l'aide de Vue CLI.

Si vous avez installé Node.js et NPM, entrez les commandes suivantes dans la ligne de commande pour terminer la construction d'un projet Vue de base :

$ npm install -g @vue/cli
$ vue create my-project

Après avoir créé le projet, entrez dans le dossier du projet et démarrez le projet :

$ cd my-project
$ npm run serve

À ce stade, vous pouvez accéder au projet dans votre navigateur.

2. Concevoir la présentation de l'interface

Dans la page de gestion du backend du compte public WeChat, il existe de nombreux modules : gestion des menus, gestion du matériel, gestion des utilisateurs, etc., vous devez donc d'abord concevoir la présentation de l'ensemble de l'interface. Vous pouvez utiliser une bibliothèque d'interface utilisateur comme Element UI, qui fournit de nombreux composants matures et est très pratique et rapide.

Tout d'abord, installez Element UI dans le projet Vue :

$ npm install element-ui -S

Une fois l'installation terminée, vous pouvez le configurer dans main.js et introduire Element UI :

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Après l'introduction, nous pouvons utiliser les composants fournis par Element UI dans le projet.

Prenons l'exemple de la page de connexion. Il y a généralement deux champs de saisie (numéro de compte, mot de passe) et un bouton de connexion. Il peut être implémenté en utilisant le code suivant :

<el-form ref="form" :model="form" :rules="rules" label-width="100px">
  <el-form-item label="账号" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" show-password></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
  </el-form-item>
</el-form>

3. Implémenter l'interaction des données

La séparation du front-end et du back-end est une solution plus courante maintenant, nous devons donc considérer la question de l'interaction front-end et back-end. lors de la rédaction de la page de gestion de l'arrière-plan.

Vous pouvez utiliser la bibliothèque Axios pour l'interaction front-end et back-end. Il s'agit d'une bibliothèque HTTP basée sur Promise qui peut être utilisée dans les navigateurs et Node.js.

Installez d'abord Axios dans le projet :

$ npm install axios -S

Ensuite, configurez-le dans main.js :

import axios from 'axios'

Vue.prototype.$http = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

Après la configuration, vous pouvez envoyer des requêtes dans le projet. En prenant la page de connexion comme exemple, elle peut être implémentée comme ceci :

methods: {
  onSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        this.$http.post('/login', this.form).then((response) => {
          // 登录成功后的逻辑
        }).catch((error) => {
          // 登录失败后的逻辑
        })
      } else {
        return false
      }
    })
  }
}

4. Implémenter la navigation par itinéraire

Dans un grand projet, une page comporte généralement de nombreuses sous-pages, nous devons donc utiliser la navigation par itinéraire pour changer de sous-page. pages.

Vous pouvez utiliser la bibliothèque Vue Router pour implémenter des fonctions de navigation d'itinéraire. Ensuite, implémentons la navigation par routage.

Installez d'abord Vue Router dans le projet Vue :

$ npm install vue-router -S

Ensuite, créez le fichier de routage router.js dans le projet, et configurez le routage :

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
import Welcome from './views/Welcome.vue'
import Users from './views/user/Users.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        {
          path: '/welcome',
          component: Welcome
        },
        {
          path: '/users',
          component: Users
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    return next()
  }
  const token = window.sessionStorage.getItem('token')
  if (!token) {
    return next('/login')
  }
  next()
})

export default router

Dans le code ci-dessus, nous avons spécifié trois pages : page de connexion, L'accueil La page et la page d'accueil utilisent les fonctions d'imbrication et de redirection du routage. Dans le même temps, nous utilisons également un garde-routage. Lorsque l'utilisateur n'est pas connecté, il accède à la page de connexion pour vérification.

5. Implémenter l'encapsulation des composants

Lors du développement de grands projets, nous devons encapsuler certains composants couramment utilisés pour faciliter l'appel et réduire la quantité de code redondant.

Prenons le champ de recherche comme exemple, vous pouvez créer un nouveau composant SearchBar.vue :

<template>
  <el-form ref="form" :model="form" :inline="true" label-width="80px" class="search-bar">
    <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
      <component :is="item.component" v-model="form[item.prop]" :options="item.options"></component>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button type="text" icon="el-icon-refresh" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    formItems: {
      type: Array,
      default: () => []
    },
    onSearch: Function,
    onReset: Function
  },
  data() {
    return {
      form: {}
    }
  }
}
</script>

Dans ce composant, nous utilisons les caractéristiques des composants dynamiques et des emplacements pour encapsuler uniformément différents types de composants de zone de saisie dans le champ de recherche, rendant les composants plus flexibles, plus faciles à entretenir et à développer.

Lors de l'utilisation de ce composant, il vous suffit de transmettre les paramètres correspondants :

<search-bar :form-items="formItems" :on-search="handleSearch" :on-reset="handleReset"></search-bar>

Résumé

Cet article fournit une introduction détaillée aux étapes d'utilisation de Vue pour implémenter la page de gestion backend du compte public WeChat. comprend les aspects suivants :

• Construire le projet Vue
• Concevoir la disposition de l'interface
• Implémenter l'interaction des données
• Implémenter la navigation d'itinéraire
• Implémenter l'encapsulation des composants

Dans les applications pratiques, Vue a une évolutivité très flexible et peut utiliser d'autres plug-ins et bibliothèques Pour améliorer l'efficacité du développement et la fonctionnalité du projet.

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!