Laravel Nuxt 项目教程

最新推荐文章于 2024-11-27 16:35:28 发布

原创最新推荐文章于 2024-11-27 16:35:28 发布 · 911 阅读

19 ·

CC 4.0 BY-SA版权

Laravel Nuxt 项目教程

laravel-nuxtBuild a SPA with Laravel and Nuxt.项目地址:https://gitcode.com/gh_mirrors/lar/laravel-nuxt

项目介绍

Laravel Nuxt 是一个开源项目，旨在为开发者在 Laravel 和 Nuxt.js 框架上提供一个高性能的 API 开发模板。该项目包含了预制的授权方法、图像上传优化以及用户角色管理等功能。通过使用 Laravel 11 和 Nuxt 3，开发者可以快速搭建起一个现代化的 Web 应用。

项目快速启动

环境准备

确保你的开发环境已经安装了以下工具：

Node.js
Composer
Docker（可选，用于 Laravel Sail）

克隆项目

git clone https://github.com/skyrpex/laravel-nuxt.git
cd laravel-nuxt

安装依赖

composer install
npm install

配置环境

复制 .env.example 文件并命名为 .env，然后配置数据库和其他必要的环境变量。

cp .env.example .env

启动应用

使用 Laravel Sail 启动应用：

sail up

或者使用传统的 PHP 服务器：

php artisan serve
npm run dev

应用案例和最佳实践

用户认证

在 Nuxt 中使用 $fetch 进行用户认证：

<script lang="ts" setup>
const router = useRouter()
const auth = useAuthStore()
const form = ref()
const state = reactive({
  email: "",
  password: "",
  remember: false
})

const [refresh, onSubmit, status] = useFetch("login", {
  method: "POST",
  body: state,
  immediate: false,
  watch: false
})

async function login() {
  await onSubmit()
  if (status.value === 'success') {
    router.push('/dashboard')
  }
}
</script>

图像上传

使用 Laravel 提供的文件上传功能，结合 Nuxt 进行前端处理：

// Laravel Controller
public function upload(Request $request)
{
    $path = $request->file('image')->store('images', 'public');
    return response()->json(['path' => $path]);
}

<template>
  <input type="file" @change="uploadImage" />
</template>

<script lang="ts" setup>
async function uploadImage(event) {
  const file = event.target.files[0]
  const formData = new FormData()
  formData.append('image', file)

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  })

  const data = await response.json()
  console.log(data.path)
}
</script>