还是以 vue 项目为例，去配置和使用 tailwindcss
官网 https://tailwindcss.com/docs/installation/using-postcss
安装 vue 项目
# 创建
pnpm create vue
# 选择配置，尽量选 TypeScript、Router、Pinia、ESLint、Prettier 这些。你做一个大的项目，这些都是必须的
我们把 package.json 中的 type 设置成 module。遵循使用 es 模块规范。
{
…,
"type": "module"
}
然后运行起来看看。
使用 vite 来作为构建前端的工具，是有一些缺陷的。
However, it lacks some features that Laravel Mix supports, such as the ability to copy arbitrary assets into the build that are not referenced directly in your JavaScript application.https://laravel.com/docs/10.x/vite
https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix
注册，登录这些页面，以及 request 错误的提示，都是英文的。想要中文的，就得有对应的语言配置。
https://laravel-lang.com/installation/
composer require laravel-lang/common --dev
php artisan lang:add zh_CN
php artisan lang:update然后，在 config/app.php 中，将 lang 设置成 'zh_CN' 即可。
vue 这边是可以登录了。可是登录态没有保存。在这里，我们仅仅只要知道用户已经登录或已经注册了就好。然后再通过接口去获取用户信息，然后通过状态管理去处理这些信息。
这里不是通过 token 的方式维护状态。所以登录态仅仅加个标志和生命时间。想象一下，这就是一个独立的后台页面。结合 vue 的生态，它的流程是什么样子的呢。
流程图如下：
增加路由，路由应遵循 restful 的风格。通过请求方式 + 资源名 + 参数的方式。比如，如果是 put 请求，表示该请求是修改已存在的资源。
# routes/admin.php
Route::group([
'middleware' => ['auth:sanctum'],
], function () {
Route::get('userinfos', [UserController::class, 'getUserInfo'])->name('admin.api.getUserInfo');
});
增加控制器逻辑
# app/Http/Controllers/Admin/UserController
public function getUserInfo(Request $request)
{
$user = $request->user();
return response()->json(['user' => $user, 'menus' => []]);
}
这里可以直接拿到用户信息，是因为有 sanctum 中间件的守护。如果用户的认证未通过，在中间件环节就已经返回 401 了。这里是测试，所以菜单，直接给个空的数组。
json 没有指定 http状态码，默认就是 200。
vue 中的状态管理这里用 pinia。
删除默认的 stores/counter.js
增加 stores/userinfo.js
import { defineStore } from 'pinia'
export const useUserinfo = defineStore('userinfo', {
state: () =>({
isLogin: localStorage.getItem('isLogin') || false,
name: '',
email: ''
}),
actions: {
login() {
localStorage.setItem('isLogin', true)
this.isLogin = true
},
loginOut() {
localStorage.removeItem('isLogin')
this.isLogin = false
},
setUserinfo(value) {
const keys = ['name', 'email']
keys.forEach(item => {
if (value[item]) {
this[item] = value[item]
} else {
this[item] = ''
}
})
}
}
})
现在的 pinia 是以前的 vuex 新版。用起来更方便，如果不是它的功能，感觉就自己组件内的调用。而且，也不像以前那样多很多 modules 的概念。
状态处理好了，我们现在来处理路由守护。将以前的路由里边加上守护逻辑就好。
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useUserinfo } from '@/stores/userinfo.js'
import { GetUserinfo }from '@/api/request'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
base: '/admin/',
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/home/index.vue')
},
{
path: '/login',
name: 'login',
component: () => import('../views/user/login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('../views/user/register.vue')
}
]
})
router.beforeEach(async (to, from, next) => {
const whiteList = ['/login']
const userinfo = useUserinfo()
const isLogin = userinfo.isLogin
if (isLogin) {
GetUserinfo().then(
res => {
userinfo.setUserinfo(res.data.user)
next()
}
).catch(() => {
userinfo.loginOut()
next(`/login?redirect=${to.path}`)
})
} else {
if (whiteList.some(value => value == to.path)) {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
export default router
路由守护做好了，我们只需要在登录成功后调用状态的 login 方法，并跳转到首页就好。
关于这个跳转，体验做到更好的话，不是非要强制跳转到首页的。比如本来用户是在看后台的用户信息，这个时候刚好 session 过期了，需要重新登录。登录成功后跳转到之前的页面，就是后台的用户信息页面才是最好的。
关于这个路由，我们可以在登录组件中，通过路由的监听获取到。
最后，我们修改下 header 组件。如果用户登录了，就显示用户的称呼。否则显示登录注册按钮。
<template>
<header>
<div>
<n-avatar round size="large" @click="goHome">
LOGO
</n-avatar>
</div>
<div class="nav-bar">
<n-space class="left-nav">
<n-button quaternary @click="goHome">首页</n-button>
<n-button quaternary>产品介绍</n-button>
<n-button quaternary>关于我们</n-button>
</n-space>
<n-space v-if="userinfo.name">
<span>{{ userinfo.name }}</span>
</n-space>
<n-space v-else class="right-nav">
<n-button type="success" size="small" style="font-size: 12px;" @click="goLogin">登录</n-button>
<n-button type="success" size="small" style="font-size: 12px" @click="goRegister">注册</n-button>
</n-space>
</div>
</header>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useUserinfo } from '@/stores/userinfo.js'
const userinfo = useUserinfo()
const router = useRouter()
const goHome = () => {
router.push({name: 'home'})
}
const goLogin = () => {
router.push({name: 'login'})
}
const goRegister = () => {
router.push({name: 'register'})
}
</script>
<style lang="scss" scoped>
header {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 30px;
width: 100%;
height: 72px;
background-color: #fff;
box-shadow: 0 0.125rem 0.25rem #00000013 !important;
.nav-bar {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding-left: 50px;
.left-nav {
flex:1;
}
}
}
</style>
退出功能没做。这里就不做了，这里仅仅是 demo。不是真正的项目。
其实，注册按钮也是不需要的。后台我就不想让用户注册。还有登录这里，我其实也不想要用户输入，直接让用户扫码还更快。现在谁没个手机，现在谁没个微信。就是这么霸道，只要一个登录二维码就可以。
这里，我还是把注册相关的删掉吧。删除注册组件，删除注册按钮，删除注册路由信息。
好了。现在打包一下项目。拿到 php 那边去测试一下。
pnpm run build
效果如图所示。
到此，已经验证了。 项目主网站和vue做的spa后台网站，可以公用登录态。下一步就是做移动端（app、小程序等）的接口逻辑。这个接口适用 token 的方式来验证登录态，不再是 cookie和session的方式。
提交代码。清洗车子。收拾房子。
git add .
git commit -m '登录功能彻底完成'
git remote add origin https://gitlab.com/demo9885/vue3_backstage.git
git push -u origin main
代码仓库： https://gitlab.com/demo9885/vue3_backstage
这个只是一个简单的架构。离完整的项目还差很多。比如多语言，多主题（白天，晚上等），组件库，图表，大屏展示等等。
服务端 admin/api 的注册登录逻辑处理。
先创建基本的控制器和Request文件。
php artisan make:controller Admin/UserController
php artisan make:request Admin/AdminRequest
php artisan make:request Admin/RegisterRequest
php artisan make:request Admin/LoginRequest
我们先把 request 完成起来。 AdminRequest 作为其他 Request 的父类，需要做两件事。
一是 authorize 永远返回 true。这个是给接口用的，不是网页自己用。没必要去验证通过。验证的逻辑会在路由和中间件中完成。
二是重写 failedValidation 方法。默认的 failedValidation 会发起重定向。这里是接口，也是不需要的。
所以 AdminRequest.php 是这个样子。
<?php
namespace App\Http\Requests\Admin;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Contracts\Validation\Validator;
use Illuminate\Validation\ValidationException;
use Illuminate\Http\Exceptions\HttpResponseException;
use Illuminate\Http\JsonResponse;
class AdminRequest extends FormRequest
{
public function authorize(): bool
{
return true;
}
protected function failedValidation(Validator $validator)
{
throw new HttpResponseException(response()->json([
'error' => (new ValidationException($validator))->errors()
], JsonResponse::HTTP_UNPROCESSABLE_ENTITY));
}
}
再看其他 request。
#LoginRequest
<?php
namespace App\Http\Requests\Admin;
class LoginRequest extends AdminRequest
{
public function rules(): array
{
return [
'email' => ['required', 'string', 'email', 'max:255'],
'password' => ['required', 'string', 'min:8'],
];
}
public function messages()
{
return [];
}
public function attributes()
{
return [
'email' => '邮箱',
'password' => '密码'
];
}
}
# RegisterRequest
<?php
namespace App\Http\Requests\Admin;
class RegisterRequest extends AdminRequest
{
public function rules(): array
{
return [
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => ['required', 'string', 'min:8'],
];
}
public function messages()
{
return [];
}
public function attributes()
{
return [
'name' => '称呼',
'email' => '邮箱',
'password' => '密码'
];
}
}
在 UserController.php 中创建登录注册接口。
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Http\Requests\Admin\LoginRequest;
use App\Http\Requests\Admin\RegisterRequest;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Auth;
use App\Models\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function login(LoginRequest $request)
{
$data = $request->only(['email', 'password']);
$remember = true;
if (Auth::attempt($data, $remember)) {
$user = auth()->user();
return response()->json($user);
} else {
return response()->json(['message' => '账号或密码错误'], 403);
}
}
public function register(RegisterRequest $request)
{
$data = $request->only(['name', 'email', 'password']);
$data['password'] = Hash::make($data['password']);
$user = User::create($data);
Auth::guard()->login($user);
return response()->json($user);
}
}
最后，看看路由。
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Admin\UserController;
// 登录
Route::post('login', [UserController::class, 'login'])->name('admin.api.login');
// 注册
Route::post('register', [UserController::class, 'register'])->name('admin.api.register');
csrf-token 路由是 Sanctum 自己提供的。我们只需要再 config/sanctum.php 中配置上前缀就好。
…
'prefix' => 'admin/api'
到了这里，服务端的逻辑算是好了。现在用之前创建的 vue 项目来测试登录注册接口。
我们先从简单的入手。那就是登录。登录页面和注册页面很香香。是这样子的。
<template>
<div class="container">
<div class="form-wrap">
<n-card title="登录">
<n-form
ref="formRef"
:model="model"
:rules="rules"
label-placement="left"
label-width="auto"
require-mark-placement="right-hanging"
:style="{
maxWidth: '640px'
}">
<n-form-item label="邮箱" path="email">
<n-input v-model:value="model.email" :placeholder="rules.email.message" />
</n-form-item>
<n-form-item label="密码" path="password">
<n-input type="password" v-model:value="model.password" :placeholder="rules.password.message" />
</n-form-item>
<n-form-item label=" " :show-feedback="false" class="login-item">
<n-button strong type="primary" @click="submit">登录</n-button>
</n-form-item>
</n-form>
</n-card>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { GetCsrfCookie, Login } from '@/api/request.js'
const router = useRouter()
const formRef = ref(null)
const model = reactive({
email: null,
password: null
})
const rules = {
email: {
required: true,
trigger: ['blur', 'input'],
message: '请输入邮箱'
},
password: {
required: true,
trigger: ['blur', 'input'],
min: 8,
message: '请输入密码'
}
}
const submit = () => {
formRef.value
?.validate((errors) => {
if (errors) {
console.error(errors)
}
})
.then(() => {
doLogin()
})
}
const doLogin = () => {
GetCsrfCookie(null).then(() => {
Login({ email: model.email.trim(), password: model.password.trim() }).then(() => {
// 登录完成，就跳转到首页吧
router.push({ name: 'home' })
})
})
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
.form-wrap {
display: flex;
margin: 30px 0;
min-width: 640px;
}
.login-item {
margin-top: 12px;
}
}
</style>
好了，我们打个包，试一试。
pnpm run build
然后将打包好的 admin 这个文件夹移动到 laravel 项目的 public 下。
浏览器访问：http://ypb2.com/admin/
ok，显示正常。然后刷新也是没有问题的。再点点登录注册。也可以。好吧，那来登录吧。因为之前通过 laravel 已经注册过一个账号了，就用那个账号登录。
演示如下图：
通过这个可以看到 vue 编写的 spa 页面和 laravel 自己的页面，共同持有 cookie。保证了登录的一致性。
这样做的目的就是想 laravel 的页面是官网。 vue 写的是后台。后台和官网有各自的特点。也有对应的方式去实现（后台用 vue、react 这样实现起来比较好）。
到了这里，还不算完成。虽然 vue 页面登录了。但是对登录的用户信息没有保存处理。下一步，就是对登录的信息进行保存处理。
这里来安装 naiveui，将上一步的测试页面搭建完成。
官网： https://www.naiveui.com/zh-CN/os-theme
pnpm add -D naive-ui
流行的组件库，都支持按需引入。我们通过 unplugin-auto-import插件来完成。
pnpm add -D unplugin-vue-components
pnpm add -D unplugin-auto-import
然后再 vite.config.js 中进行配置。
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue']
}),
Components({
resolvers: [
NaiveUiResolver()
]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
通过上边的配置，就可以在项目中，直接使用 naiveui 的组件了。
现在，我们修改下 header.vue。来实现登录注册首页三个页面的跳转。
# header.vue
<template>
<header>
<div>
<n-avatar round size="large" @click="goHome">
LOGO
</n-avatar>
</div>
<div class="nav-bar">
<n-space class="left-nav">
<n-button quaternary @click="goHome">首页</n-button>
<n-button quaternary>产品介绍</n-button>
<n-button quaternary>关于我们</n-button>
</n-space>
<n-space class="right-nav">
<n-button type="success" size="small" style="font-size: 12px;" @click="goLogin">登录</n-button>
<n-button type="success" size="small" style="font-size: 12px" @click="goRegister">注册</n-button>
</n-space>
</div>
</header>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goHome = () => {
router.push({name: 'home'})
}
const goLogin = () => {
router.push({name: 'login'})
}
const goRegister = () => {
router.push({name: 'register'})
}
</script>
<style lang="scss" scoped>
header {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 30px;
width: 100%;
height: 72px;
background-color: #fff;
box-shadow: 0 0.125rem 0.25rem #00000013 !important;
.nav-bar {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding-left: 50px;
.left-nav {
flex:1;
}
}
}
</style>
效果如下：
提交代码。
git add .
git commit -m '安装 Naive以及配置顶部 Ui'
顶部ui以及路由跳转完成了。现在做注册页面的 ui 以及相关逻辑。
对注册页面 ui 简单的进行一个布局，对表单数据只进行了基础的验证，就是只要存在就好。更详细的规则没配置。
<template>
<div class="container">
<div class="form-wrap">
<n-card title="注册">
<n-form
ref="formRef"
:model="model"
:rules="rules"
label-placement="left"
label-width="auto"
require-mark-placement="right-hanging"
:style="{
maxWidth: '640px'
}">
<n-form-item label="称呼" path="name">
<n-input v-model:value="model.name" :placeholder="rules.name.message" />
</n-form-item>
<n-form-item label="邮箱" path="email">
<n-input v-model:value="model.email" :placeholder="rules.email.message" />
</n-form-item>
<n-form-item label="密码" path="password">
<n-input type="password" v-model:value="model.password" :placeholder="rules.password.message" />
</n-form-item>
<n-form-item label="确认密码" path="confirmPassword">
<n-input type="password" v-model:value="model.confirmPassword" :placeholder="rules.confirmPassword.message" />
</n-form-item>
<n-form-item label=" " :show-feedback="false" class="register-item">
<n-button strong type="primary" @click="submit">注册</n-button>
</n-form-item>
</n-form>
</n-card>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const formRef = ref(null)
const model = reactive({
name: null,
email: null,
password: null,
confirmPassword: null
})
const rules = {
name: {
required: true,
trigger: ['blur', 'input'],
message: '请输入称呼'
},
email: {
required: true,
trigger: ['blur', 'input'],
message: '请输入邮箱'
},
password: {
required: true,
trigger: ['blur', 'input'],
message: '请输入密码'
},
confirmPassword: {
required: true,
trigger: ['blur', 'input'],
message: '请输入确认密码'
}
}
const submit = () => {
formRef.value?.validate((errors) => {
if (errors) {
console.error(errors)
}
}).then(() => {
})
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
.form-wrap {
display: flex;
margin: 30px 0;
min-width: 640px;
}
.register-item {
margin-top: 12px;
}
}
</style>
效果如下：
提交代码。
git add .
git commit -m '注册页面的搭建'
开始写数据请求部分的逻辑了。一般用 axios、flyio 这类库。这里用 axios。
pnpm add axios
安装好后，然后简单封装一个请求库，src/api/request.js。
如下：
import axios from 'axios'
// 全局基本配置
axios.defaults.baseURL = 'http://ypb2.com/admin/api/'
axios.withCredentials = true
axios.timeout = 20000
// 请求拦截器
axios.interceptors.request.use(
(config) => {
config.headers = {
Authorization: `Bearer ${GetToken()}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
(response) => {
return response
},
(error) => {
return Promise.reject(error)
}
)
// 获取 token
function GetToken() {
const token = localStorage.getItem('token')
const now = new Date().getTime() / 1000
if (token && token.expires_at > now) {
return token.token
}
return null
}
// scrf-cookie
const GetCsrfCookie = () => {
return axios.get('csrf-cookie')
}
// 登录
const Login = (data) => {
return axios.post('login', data)
}
// 注册
const Register = (data) => {
return axios.post('register', data)
}
export {
GetCsrfCookie,
Login,
Register
}
然后就可以在 register.vue 中用起来了
import { ref, reactive, onMounted } from 'vue'
import { Register } from '@/api/request.js'
…
onMounted(() => {
Register(null).then()
})
当然，这样肯定是有问题的。一个是跨域，另外一个也是不符合服务端 Sanctum 认证的场景的。默认进来必须先进行一个 csrf-cookie 请求。再进行登录或注册的逻辑。
为了更贴合服务端的请求。我们将 base 设置为 admin，并且将 vue-router 的base也设置成 admin。
# vite.config.js
export default defineConfig({
base: '/admin',
build: {
outDir: 'admin'
},
…
# router/index.js
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
base: '/admin/',
routes: [
…
于是，访问的地址就变成：http://ypb2.com/admin/
这样在 vite 这里是可以的。但是在 nginx 那边就不行。打开页面再刷新就找不到资源了。对 nginx 也需要配置。这里先配置好。
cd /etc/nginx/sites-enabled
sudo vim ypb2.com
# 添加下边的配置
location ~* ^\/admin\/((?!api\/).) {
try_files $uri $uri/ /admin/index.html;
}
# 重启 nginx
sudo nginx -s reload
这个配置很重要的哈。到此，算是前端打包的配置完成。git 版本控制中将 admin 目录设置为忽略。提交版本控制。
git add .
git commit -m '配置输出文件夹，路由前缀等'
当后端接口还没有完成的时候，前端没必要等。可以自己使用 mock 来构建服务端接口的环境和数据。自己动手，丰衣足食。
pnpm add mockjs vite-plugin-mock -D
在 vite.config.ts 中配置
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteMockServe({
supportTs: true,
mockPath: "./src/mock/source", // 解析，路径可根据实际变动
localEnabled: true, // 开发环境设为true，
prodEnabled: false, // 生产环境设为true，也可以根据官方文档格式
injectCode:
` import { setupProdMockServer } from './src/mock';
setupProdMockServer(); `,
watchFiles: true, // 监听文件内容变更
injectFile: resolve("src/main.ts"), // 在m
})
]
})
在 src/mock/source 下新建 user.ts 文件，内容如下：
export default [
{
url: "/api/users",
method: "GET",
response: () => {
return {
code: 0,
message: "success",
result: {
nickname: '神奇动物在哪里',
gender: 1
},
};
}
}
]
import axios from 'axios'
axios.create({
baseURL: import.meta.env.VITE_BASE_URL
})
axios.get("/api/users").then(res => { console.log(res); });
运行起来，看到控制台的网络中请求的状况：
请求网址: http://localhost:3000/api/users
请求方法: GET
状态代码: 200 OK
远程地址: 127.0.0.1:3000
引荐来源网址政策: strict-origin-when-cross-origin
# response
{code: 0, message: "success", result: {nickname: "神奇动物在哪里", gender: 1}}
code: 0
message: "success"
result: {nickname: "神奇动物在哪里", gender: 1}
gender: 1
nickname: "神奇动物在哪里"
原子化 css 的好用是真的好用。
https://antfu.me/posts/reimagine-atomic-css-zh
https://juejin.cn/post/7028841960752283656
https://blog.csdn.net/qq_41499782/article/details/124074678
https://blog.csdn.net/sg_knight/article/details/124097860
https://github.com/unocss/unocss
https://github.com/unocss/unocss
class 可以参考参考
https://www.tailwindcss.cn/docs/align-items
这里用 pnpm 来安装。
pnpm add unocss -D
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Unocss({})
]
})
import 'uno.css'
<div class="w-300px h-120px rounded-8px m-20px shadow-md">
</div>
仅仅用样式就可以实现宽300像素高120像素圆角8像素 margin 20 像素，带 md 程度的阴影的div盒子。这样多方便呀。
当你已经在使用了，可以通过 http://localhost:3000/__unocss 查看生成的 css 文件，是不是很人性化，文件量还小。
都说 pnpm vite vue 组合好。那就试试。
# shenya 是项目名
pnpm create vite shenya
cd shenya
pnpm install
pnpm run dev
如果从来没有使用过 pnpm，第一次创建的时候是要花一点时间。后边就是秒创建了哈。