Bagaimana untuk menggunakan Vue untuk melaksanakan halaman pengurusan bahagian belakang akaun rasmi WeChat?

Dengan pempopularan Internet dan perkembangan pesat Internet mudah alih, kehidupan hari ini telah banyak berubah. Dalam era baharu ini, Internet mudah alih sentiasa menjadi hala tuju pembangunan yang penting. Sebagai jenis produk Internet mudah alih baharu, akaun rasmi WeChat telah menjadi popular dengan cepat di seluruh dunia. Pada masa ini, halaman pengurusan bahagian belakang akaun awam WeChat juga telah menjadi keperluan pembangunan yang popular.

Dari segi teknologi hadapan, Vue ialah rangka kerja yang sangat baik. Terutama dalam projek besar, Vue mempunyai prestasi dan fleksibiliti yang sangat baik. Oleh itu, adalah wajar mencuba menggunakan Vue untuk melaksanakan halaman pengurusan bahagian belakang akaun rasmi WeChat.

Jadi, bagaimana untuk menggunakan Vue untuk melaksanakan halaman pengurusan bahagian belakang akaun rasmi WeChat? Artikel ini akan memperkenalkannya secara terperinci dari aspek berikut.

1. Bina projek Vue

Untuk membangunkan projek menggunakan Vue, langkah pertama ialah membina projek menggunakan Vue CLI.

Jika anda telah memasang Node.js dan NPM, masukkan arahan berikut dalam baris arahan untuk melengkapkan pembinaan projek asas Vue:

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

Selepas mencipta projek, masukkan folder projek dan mulakan projek:

$ cd my-project
$ npm run serve

Pada ketika ini, anda boleh mengakses projek dalam penyemak imbas anda.

2. Reka reka letak antara muka

Dalam halaman pengurusan bahagian belakang akaun awam WeChat, terdapat banyak modul: pengurusan menu, pengurusan bahan, pengurusan pengguna, dsb., jadi anda perlu mereka bentuk reka letak keseluruhan antara muka terlebih dahulu. Anda boleh menggunakan perpustakaan UI seperti UI Elemen, yang menyediakan banyak komponen matang dan sangat mudah dan pantas.

Mula-mula, pasang UI Elemen dalam projek Vue:

$ npm install element-ui -S

Selepas pemasangan selesai, anda boleh mengkonfigurasinya dalam main.js dan memperkenalkan UI Elemen:

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

Vue.use(ElementUI)

Selepas pengenalan, kami boleh menggunakan komponen yang disediakan oleh UI Elemen dalam projek itu.

Ambil halaman log masuk sebagai contoh biasanya terdapat dua kotak input (nombor akaun, kata laluan) dan butang log masuk. Ia boleh dilaksanakan menggunakan kod berikut:

<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 Laksanakan interaksi data

Pengasingan bahagian hadapan dan belakang adalah penyelesaian yang lebih biasa sekarang, jadi kita mesti mempertimbangkan isu interaksi hadapan dan belakang. semasa menulis halaman pengurusan latar belakang.

Anda boleh menggunakan pustaka Axios untuk interaksi hadapan dan belakang Ia adalah perpustakaan HTTP berasaskan Promise yang boleh digunakan dalam penyemak imbas dan Node.js.

Mula-mula pasang Axios dalam projek:

$ npm install axios -S

Kemudian, konfigurasikannya dalam main.js:

import axios from 'axios'

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

Selepas konfigurasi, anda boleh menghantar permintaan dalam projek. Mengambil halaman log masuk sebagai contoh, ia boleh dilaksanakan seperti ini:

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

4 Laksanakan navigasi laluan

Dalam projek besar, halaman biasanya mempunyai banyak sub-halaman, jadi kita perlu menggunakan navigasi laluan untuk menukar sub- muka surat.

Anda boleh menggunakan perpustakaan Penghala Vue untuk melaksanakan fungsi navigasi laluan. Seterusnya, mari kita laksanakan navigasi penghalaan.

Mula-mula pasang Penghala Vue dalam projek Vue:

$ npm install vue-router -S

Kemudian, cipta fail penghalaan router.js dalam projek, dan konfigurasikan penghalaan:

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

Dalam kod di atas, kami menyatakan tiga halaman: halaman log masuk, Rumah halaman dan halaman alu-aluan menggunakan fungsi penghalaan bersarang dan ubah hala. Pada masa yang sama, kami juga menggunakan pengawal laluan Apabila pengguna tidak log masuk, dia akan melompat ke halaman log masuk untuk pengesahan.

5. Laksanakan pengkapsulan komponen

Apabila membangunkan projek besar, kita perlu merangkum beberapa komponen yang biasa digunakan untuk memudahkan kita memanggil dan mengurangkan jumlah kod berlebihan.

Ambil kotak carian sebagai contoh, anda boleh mencipta komponen baharu 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>

Dalam komponen ini, kami menggunakan ciri-ciri komponen dinamik dan slot untuk merangkum secara seragam pelbagai jenis komponen kotak input dalam kotak carian , menjadikan komponen lebih fleksibel, lebih mudah diselenggara dan dikembangkan.

Apabila menggunakan komponen ini, anda hanya perlu memasukkan parameter yang sepadan:

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

Ringkasan

Artikel ini memberikan pengenalan terperinci kepada langkah-langkah menggunakan Vue untuk melaksanakan halaman pengurusan belakang akaun awam WeChat Secara ringkasnya, ia terutamanya merangkumi aspek berikut :

• Bina projek Vue
• Reka bentuk susun atur antara muka
• Laksanakan interaksi data
• Laksanakan navigasi laluan
• Laksanakan pengkapsulan komponen

Vue mempunyai kebolehgunaan yang sangat fleksibel dan boleh digunakan dalam aplikasi lain. dan perpustakaan Untuk meningkatkan kecekapan pembangunan dan kefungsian projek.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan halaman pengurusan bahagian belakang akaun rasmi WeChat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!