您现在的位置是:自如初>Vue.jsVue.js

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

温新 2022-09-12 11:20:51 Vue.js 549人已围观

简介Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9 登录功能-前后端分离演示案例(二)。通过一个登录来演示 Laravel9 & vue3 前后端分离

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了。


很赞哦!(3)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息