创建Laravel项目
使用 Composer 命令安装 Laravel 10。
composer create-project --prefer-dist laravel/laravel laravel_auth
安装和配置 Lravel UI
composer require laravel/ui
如果选择了bootstrap
需要执行php artisan ui命令来创建用于认证的脚手架（如认证页面、登录页面等）。
如果你想使用Vue.js或React，你可以指定vue、react。
- 创建认证
php artisan ui bootstrap --auth
The [Controller.php] file already exists. Do you want to replace it? (yes/no) [no]
❯
INFO Authentication scaffolding generated successfully.
INFO Vue scaffolding installed successfully.
WARN Please run [npm install && npm run dev] to compile your fresh scaffolding.
在安装依赖之前，我们先来看一下package.json文件里面的内容
{
//略
"devDependencies": {
"@popperjs/core": "^2.11.6",
"axios": "^1.6.4",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^1.0.0",
"sass": "^1.56.1",
"vite": "^5.0.0"
}
}
然后执行npm install 来安装依赖，安装完成之后执行npm run dev 来运行项目。
npm run dev
//略
VITE v5.0.11 ready in 543 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
LARAVEL v10.41.0 plugin v1.0.1
➜ APP_URL: http://localhost
执行之后，Vite的开发服务器将会启动。这与使用php artisan serve启动的Laravel开发服务器不同。
使用 php artisanserve 命令启动开发服务器。
php artisan serve
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server
当开发服务器启动时，用于身份验证的登录和注册链接将显示在屏幕右上角。如果未安装 Laravel UI，则不会显示登录和注册链接。如下图：
单击注册链接显示用户注册表单。由于数据库尚未建立，无法进行用户注册。如下图：
- Laravel UI的用户注册界面
用户注册、登录认证和登录后的Blade文件都保存在resources\views目录下。查看register.blade.php文件，会发现它只使用了Blade模板和bootstrap的CSS进行编写。
//register.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="row mb-3">
<label for="name" class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
数据库设置
这里使用一个简单的sqlite数据库。我们需要修改.env文件中与数据库相关的环境变量。
在.env文件中，请将DB_CONNECTION从mysql改为sqlite，并删除其它所有与数据库相关的环境变量。需要删除的环境变量都以DB_为前缀。
//.env
DB_CONNECTION=sqlite
这样就完成了对数据库的配置，接下来执行php artisan migrate命令。由于SQLite是基于文件的数据库，如果文件不存在，将会显示警告，并询问你是否创建文件，请选择“是”。执行完毕后，将会创建5个表格。
php artisan migrate
WARN The SQLite database does not exist: database/database.sqlite.
┌ Would you like to create it? ────────────────────────────────┐
│ Yes │
└──────────────────────────────────────────────────────────────┘
INFO Preparing database.
Creating migration table ................................. 8ms DONE
INFO Running migrations.
2014_10_12_000000_create_users_table ...................... 3ms DONE
2014_10_12_100000_create_password_reset_tokens_table ...... 1ms DONE
2014_10_12_200000_add_two_factor_columns_to_users_table ... 3ms DONE
2019_08_19_000000_create_failed_jobs_table ................ 2ms DONE
2019_12_14_000001_create_personal_access_tokens_table ..... 3ms DONE
如果表的创建正常完成，那么就可以开始进行用户注册和登录，登录后跳转到resource\views\home.blade.php 页面,以下是登录成功的面板。
如果选择了Vue
安装Laravel和Laravel UI包的步骤与之前相同，但是在执行php artisan ui命令创建认证脚手架时，我们需要指定vue。
% php artisan ui vue --auth
The [Controller.php] file already exists. Do you want to replace it? (yes/no) [no]
❯
INFO Authentication scaffolding generated successfully.
INFO Vue scaffolding installed successfully.
WARN Please run [npm install && npm run dev] to compile your fresh scaffolding.
- 检查是否安装成功
检查package.json，如果有vue3就可以。
//package.json
{
//略
"devDependencies": {
"@popperjs/core": "^2.11.6",
"@vitejs/plugin-vue": "^4.5.0",
"axios": "^1.6.4",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^1.0.0",
"sass": "^1.56.1",
"vite": "^5.0.0",
"vue": "^3.2.37"
}
}
- 安装依赖和启动项目
然后执行npm install 安装依赖，和执行npm run dev启动项目。
% npm install && npm run dev
//略
VITE v5.0.11 ready in 754 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
LARAVEL v10.41.0 plugin v1.0.1
➜ APP_URL: http://localhost
虽然用户注册页面和登录页面与指定bootstrap时相同，但是如果查看 resouces/js/app.js 文件，会发现一些不同之处。 如果指定了bootstrap，文件顶部只有一行 require('./bootstrap')。然而，如果选择了Vue，会在文件中看到关于Vue的一些设置。
//app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import './bootstrap';
import { createApp } from 'vue';
/**
* Next, we will create a fresh Vue application instance. You may then begin
* registering components with the application instance so they are ready
* to use in your application's views. An example is included for you.
*/
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue ->
*/
// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
// app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
// });
/**
* Finally, we will attach the application instance to a HTML element with
* an "id" attribute of "app". This element is included with the "auth"
* scaffolding. Otherwise, you will need to add an element yourself.
*/
app.mount('#app');
使用 SQLite 创建数据库，就像使用 Bootstrap 一样。如果表的创建正常完成，那么就可以开始进行用户注册和登录，登录后跳转到resource\views\home.blade.php 页面,以下是登录成功的面板。
ExampleComponent组件的内容
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
在app.js文件中，ExampleComponent组件已经被注册到Vue中，因此我们可以在home.blade.php文件中显示ExampleComponent组件。
//home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
<example-component />
</div>
</div>
@endsection
在浏览器中会显示：
- 显示多个组件
除了显示ExampleComponent组件，还是可以显示别的组件。可以在resouces/js文件夹中创建UserList.vue文件。
//UserList.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">User List</div>
<div class="card-body">I'm an example component.</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log("Component mounted.");
},
};
</script>
仅仅创建文件并不能使其在Blade文件中被使用，需要将创建的组件注册到Vue中。ExampleComponent.vue文件是通过Vue.component进行注册的。以便Vue可以注册js文件夹下的所有.vue扩展的组件,我们可以这么写。
//app.js
// import ExampleComponent from "./components/ExampleComponent.vue";
// app.component("example-component", ExampleComponent);
Object.entries(import.meta.glob("./**/*.vue", { eager: true })).forEach(
([path, definition]) => {
app.component(
path
.split("/")
.pop()
.replace(/\.\w+$/, ""),
definition.default
);
}
);
通过这项设置，你可以注册ExampleComponent.vue和UserList.vue。然后，你可以在Home.blade.php文件中添加已注册的ExampleComponent.vue和UserList.vue。
//Home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
<div>
<example-component />
</div>
<div>
<user-list />
</div>
</div>
</div>
@endsection
如果你更新了JavaScript文件，需要重新进行构建，执行运行npm run dev命令。
在浏览器中检查，会看到两个组件已显示。
在UserList中，我们会设置显示从外部资源获取的数据。因为在bootstrap.js文件中导入了axios，所以我们可以使用axios。使用了JSONPlaceHolder这个外部资源，如果你想从Laravel的后端获取数据，你需要向在api.php中注册的路由发送GET请求。
//UserList.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">User Lists</div>
<div class="card-body">
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
users: [],
};
},
mounted() {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((response) => {
this.users = response.data;
});
},
};
</script>
评论(0)