Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9 登录功能-前后端分离演示案例（二）

hi，我是温新，一名PHPer

本篇文章基于 Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9前后端分离演示案例（一） ，因此要完成本篇文章的功能，需要先完成前置操作。

第一步：安装 vue-axios，vue-router

npm i vue-axios
npm i vue-router

第二步：创建路由文件

// src/router/index.js

import {createRouter, createWebHistory} from 'vue-router'

import HomeView from '../views/HomeView.vue'
import Login from '../views/auth/Login.vue'
import Register from '../views/auth/Register.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    },
    {
        path: '/register',
        name: 'register',
        component: Register
    }
];

const router = createRouter({
    history:createWebHistory(import.meta.env.BASE_URL),
    routes,
});

export default router

第三步：创建vue视图文件

创建导航栏文件

<!-- src/components/Navvar.vue -->
<template>
  <nav class="container flex justify-around py-8 mx-auto bg-white border">
    <div>
      <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
    </div>
    <div class="flex items-center space-x-8">
      <RouterLink to="/">主页</RouterLink>
      <RouterLink to="/login">登录</RouterLink>
      <RouterLink to="/register">注册</RouterLink>
      <button @click="Logout">退出</button>
    </div>
  </nav>
</template>

<script>
import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter();
    const Logout = () => {
      localStorage.clear();
      router.push({ path: '/login' });
    };
    return { Logout };
  },
};
</script>

创建 register 视图

<!-- src/views/auth/Register.vue -->

<template>
  <div class="relative flex flex-col items-center justify-center min-h-screen">
    <span class="px-2 py-2 mb-4 text-red-600 rounded shadow">
      {{ validation.message }}
    </span>
    <div class="w-full p-6 shadow bg-gray-50 lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">LOGO</h1>
      <form class="space-y-4" @submit.prevent="submit">
        <div>
          <label for="name" class="block text-sm text-gray-800">用户名</label>
          <input
              v-model="name"
              name="name"
              type="text"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">邮箱</label>
          <input
              v-model="email"
              name="email"
              type="email"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="password" class="block text-sm text-gray-800"
          >密码</label
          >
          <input
              v-model="password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="password" class="block text-sm text-gray-800"
          >确认密码</label
          >
          <input
              v-model="password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <button
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
          >
            注册
          </button>
        </div>
      </form>
      <p class="mt-8 text-xs font-light text-center text-gray-700">
        已有账号？

        <RouterLink
            to="/login"
            class="font-medium text-purple-600 hover:underline"
        >Login</RouterLink
        >

        >
      </p>
    </div>
  </div>
</template>

<script>
  import {ref} from "vue";
  import axios from "axios";
  import {useRouter} from "vue-router";

  export default {
    name: "Register",
    setup() {
      const name = ref('');
      const email = ref('');
      const password = ref('');
      const password_confirmation = ref('');
      const router = useRouter();
      const validation = ref([]);

      const submit = async () => {
        await axios.post('/register', {
          name: name.value,
          email: email.value,
          password: password.value,
          password_confirmation: password_confirmation.value,
        })
        .then(() => {
          router.push({path: '/login'})
        })
        .catch((error) => {
          validation.value = error.response.data;
        })
      };

      return {
        name,
        email,
        password,
        password_confirmation,
        submit,
        validation,
      }
    }
  }
</script>

<style scoped></style>

创建 login 视图

<!-- src/views/auth/Login.vue -->

<template>
  <div class="relative flex flex-col items-center justify-center min-h-screen">
    <div class="w-full p-6 shadow bg-gray-50 lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">LOGO</h1>
      <form class="space-y-4" @submit.prevent="submit">
        <div>
          <label for="email" class="block text-sm text-gray-800">邮箱</label>
          <input
              type="email"
              name="email"
              v-model="email"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="password" class="block text-sm text-gray-800"
          >密码</label
          >
          <input
              type="password"
              name="password"
              v-model="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
          >
            登录
          </button>
        </div>
      </form>
      <p class="mt-8 text-xs font-light text-center text-gray-700">
        还没有账号？
        <RouterLink
            to="/register"
            class="font-medium text-purple-600 hover:underline"
        >Register</RouterLink
        >
      </p>
    </div>
  </div>
</template>

<script>
  import {ref} from "vue";
  import axios from "axios";
  import {useRouter} from "vue-router";


  export default {
    name: 'Login',
    setup() {
      const email = ref('');
      const password = ref('');
      const router = useRouter();

      const submit = async () => {
        const response = await axios.post('/login', {
          email: email.value,
          password: password.value,
        });
        localStorage.setItem('token', response.data.access_token);
        await router.push({ path: '/' });
      };

      return {
        email,
        password,
        submit,
      };
    },
  };
</script>

<style scoped></style>

第四步：main.js 入口文件引入相关资源

// src/main.js

import { createApp } from 'vue'
import './index.css'		// tailwind 样式
import App from './App.vue'
import router from "./router";	// 路由文件
import axios from 'axios'

// 配置域名
axios.defaults.baseURL = 'http://la9vue3.test/api/';
axios.defaults.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;


createApp(App).use(router).mount('#app')

第五步：修改 App.vue

<!-- src/App.vue --->

<template>
  <Navbar></Navbar>
  <RouterView></RouterView>


</template>

<script setup>
  import {RouterView} from 'vue-router'
  import Navbar from "./components/Navbar.vue";
</script>

第六步：运行项目

npm run dev

到这里，vue3 相关前端工作已经完成后，接下来就交给 Laravel9了。