ตัวอย่างหน้า Login โดยใช้ vue.js

VueJS
Created At :
Views 👀 :

นี่คือตัวอย่างการสร้างหน้า Login ด้วย Vue.js โดยใช้ Bootstrap 5 ในส่วนของ UI สำหรับหน้า Login:

  1. สร้างโปรเจกต์ Vue.js:

    ในกรณีที่คุณยังไม่มีโปรเจกต์ Vue.js ใหม่, ให้ใช้ Vue CLI เพื่อสร้างโปรเจกต์ใหม่:

    1
    vue create my-login-app

  2. สร้าง Component สำหรับหน้า Login:

    ในโปรเจกต์ Vue.js, สร้าง Component สำหรับหน้า Login ที่มีแบบฟอร์มสำหรับกรอกชื่อผู้ใช้และรหัสผ่าน:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!-- src/components/Login.vue -->
    <template>
      <div class="container mt-5">
        <div class="row justify-content-center">
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">Login</div>
              <div class="card-body">
                <form @submit.prevent="login">
                  <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" class="form-control" id="username" v-model="username" required>
                  </div>
                  <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" v-model="password" required>
                  </div>
                  <button type="submit" class="btn btn-primary">Login</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          username: '',
          password: '',
        };
      },
      methods: {
        login() {
          // เพิ่มโค้ดสำหรับการเรียก API หรือตรวจสอบการเข้าสู่ระบบที่นี่
          console.log('Username:', this.username);
          console.log('Password:', this.password);
        },
      },
    };
    </script>

  3. นำเข้า Component ในหน้า App:

    ในหน้า App.vue, นำเข้า Component ของหน้า Login และแสดง Component ใน <router-view>:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- src/App.vue -->
    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>

    <script>
    export default {
      name: 'App',
    };
    </script>

  4. เพิ่ม Bootstrap 5:

    ในไฟล์ public/index.html, นำเข้าไฟล์ CSS และ JavaScript ของ Bootstrap 5:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html>
    <head>
      <!-- ... -->
      <link
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
      >
    </head>
    <body>
      <div id="app"></div>
      <!-- ... -->
      <script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      ></script>
    </body>
    </html>

  5. กำหนดเส้นทางใน Router:

    ในไฟล์ src/router/index.js, กำหนดเส้นทางสำหรับหน้า Login:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Login from '@/components/Login.vue';

    Vue.use(VueRouter);

    const routes = [
      {
        path: '/login',
        name: 'Login',
        component: Login,
      },
      // เพิ่มเส้นทางอื่น ๆ ตามความต้องการ
    ];

    const router = new VueRouter({
      routes,
    });

    export default router;

  6. รันแอป Vue.js:

    ใช้คำสั่งต่อไปนี้เพื่อรันแอป Vue.js:

    1
    npm run serve

  7. เข้าสู่ระบบ:

    เมื่อแอป Vue.js ถูกเรียกใช้, คุณสามารถเข้าถึงหน้า Login โดยไปที่ URL http://localhost:8080/login (หรือ URL ที่คุณกำหนดในการรันแอป).

ตัวอย่างนี้เป็นเริ่มต้นในการสร้างหน้า Login ด้วย Vue.js และ Bootstrap 5 คุณสามารถปรับแต่งและเพิ่มฟีเจอร์การเข้าสู่ระบบและการจัดการข้อมูลผู้ใช้ตามความต้องการของคุณ.

©2023 Love Computer