经过前边的处理，用户登录，侧边栏渲染，路由跳转，登录信息展示，用户退出。这些功能最小化完成。如下图所示。
在线预览，可切换角色。新用户注册，有一个默认角色。只有测试账号有多角色。
打开后台域名任意 url 。在路由全局守卫中。 如果用户已登录（存在 token），先判断用户信息是否初始化，如果没有，先请求用户信息（返回数据不仅有用户信息，还有该用户对应的后台权限【用户生产菜单】），处理存储用户信息，添加路由信息。再重定向。如果已初始化，就继续。如果用户没登录，先重定向到登录页面。
调用接口，请求登录。获取用户的 token。存储 token。
通过 token，请求用户信息（数据中包括用户的权限数据），存储用户信息以及权限数据。处理权限数据，生成菜单。
做了一些基础的配置。现在准备开始做布局了。这里只要两种布局，空白布局和后台布局。空白布局什么时候用呢，登录页面会用到。后台布局，就后台真正内容会用到。始终喜欢极简风格，所以方方面面都不要搞的太复杂。后台布局页面主要有左侧菜单栏，顶部信息栏，中间内如区域构成。
要做好这些，先温习一下 vue3 的 vue-router 以及 transition 还有 element plus 的 menu 组件。当然，loading 相关的也会考虑进去。
额外一点。左侧菜单的内容（和路由会一一映射），请求 api 的权限，全部有后端生成。前端不做权限的控制。也就是后端返回过来的菜单是什么样子，前端就渲染成什么样子。
https://cn.vuejs.org/guide/built-ins/transition.html
https://element-plus.org/zh-CN/component/menu.html#collapse-%E6%8A%98%E5%8F%A0%E9%9D%A2%E6%9D%BF
先看看构成后台的三部分。这里建立了一个 layout，拆分成了三部分。
src/views
├── HomeView.vue
├── layouts
│ ├── components
│ │ ├── AppMain
│ │ │ └── AppMain.vue
│ │ ├── NavBar
│ │ │ └── NavBar.vue
│ │ └── SideBar
│ │ └── SideBar.vue
│ └── index.vue
└── test.vue路由是这样的。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Layout from '@/views/layouts/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/test',
name: 'test',
component: Layout,
children: [
{
path: '',
name: 'test-child',
component: () => import('@/views/test.vue')
}
]
}
]
})
export default router这里只是初步尝试，没有做更细致的逻辑编写。
希望你的屏幕足够宽，希望一屏足够承载你的业务。如果不够，如果不可以。那么滚动条在所难免。那么滚动条怎么出现最好看呢。
一种方式如上图所示。还有一种，可以只在 content 区域左右上下滚动。个人觉得那种不好看,交互也不是很好。最好就是一屏足够承载吧。
side bar 和 nav bar 都没使用背景色。滑动中间区域会看到穿透。真正做时，会有背景色，z-index 也会高出一些。
白天以及暗黑主题安排上，侧边栏展开收缩也安排上。
还有移动端的布局（小程序、h5、app 等等），特别是小程序。有的公司为了一套代码，给很多企业或多项目用。底部 tabbar 采用非原生写法，滚动条从顶滚到底，不仅滚动条丑，底部切换还会闪动。体验特不好。有时候为了好的滚动条效果，加入了 scroll-view 组件去控制。
这里，如果左侧菜单足够多，也会出现滚动条。这个在 side bar 内部去处理就好了。
丰富的互联网资源，用 svg 文件作为 icon 已经很常见了。这里使用 iconify 来处理 icon。 iconify 可以理解为一个管理封装各个 icon 的工具。
https://element-plus.org/zh-CN/component/icon.html
# 安装
pnpm install unplugin-icons unplugin-vue-components -D
# 修改 vite.config.ts
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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/assets/styles/element.scss";
@use "@/assets/styles/element-dark.scss";
@use "@/assets/styles/main.scss";
@use "@/assets/styles/preflight.scss";
`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass",
directives: true
})],
}),
Components({
dts: "./components.d.ts",
resolvers: [
IconsResolver({
prefix: "i", // 默认为i,设置为false则不显示前缀
enabledCollections: ["ep"],
alias: {
'icon': "ep", //配置别名
}
}),
ElementPlusResolver({
importStyle: "sass",
directives: true
})
],
}),
Icons({
autoInstall: true, // 是否自动安装对应的图标库，默认为true
scale: 1, // 图标缩放，默认为1
defaultStyle: "", // 图标style
defaultClass: "", // 图标class
compiler: 'vue3', // 编译方式，可选值：'vue2', 'vue3', 'jsx'
jsx: "react", // jsx风格：'react' or 'preact'
})
]
})多主题，是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。
https://element-plus.org/zh-CN/guide/theming.html
先安装 sass
pnpm add -D sass再创建覆盖默认主题颜色的 sass 文件
# 创建
touch assets/styles/element.scss
# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #003261,
),
'success': (
'base': #21ba45,
),
'warning': (
'base': #f2711c,
),
'danger': (
'base': #db2828,
),
'error': (
'base': #db2828,
),
'info': (
'base': #42b8dd,
),
),
$button-padding-horizontal: (
'default': 80px,
)
);因为想部署到非根目录下。所以需要明确配置该非根目录的目录名。
修改 nuxt.config.js
import postcss from './postcss.config'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: false },
css: [
'@/assets/css/main.scss'
],
postcss,
app: {
baseURL: '/nuxt/'
}
})其中， app: { baseURL: ''} 就是配置目录的。
首页就按照原网站的图弄弄。图片资源从以往的库中复制过来。
<template>
<NuxtLayout name="base">
<div class="container flex">
<div class="md:w-1/3 flex flex-col">
<span class="text-black text-xl font-semibold mt-16">约拍宝</span>
<a class="text-blue-500 text-sm mt-3" href="https://www.yuepaibao.com" target="_blank">官方网站</a>
<p class="text-gray-600 text-sm mt-3">约拍宝是一款专业摄影类平台,主要服务于爱拍摄的人群。用户可以在平台上进行交互约定支付等来促成合作，还可以发布作品供其他用户欣赏、评论等。</p>
<div class="mt-5">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_miniapp.jpg" alt="约拍宝小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_iosapp.jpg" alt="约拍宝 ios app" />
</div>
<div class="mt-1">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_baidu.png" alt="百度小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_douyin.png" alt="抖音小程序" />
</div>
</div>
<div class="md:w-2/3 p-10 flex">
<img class="w-full object-contain max-w-3xl" src="../assets/image/home/ypb.jpg" />
</div>
</div>
</NuxtLayout>
</template>效果是这样子的。
有追求，自然会把尽力把每一个地方做到最好。有这样一个场景，中间实体内容很少。这个时候不做特殊处理，如果是正常排版下来，底下会出现很大空白。这样就不好看。既然知道了，那就想办法去解决掉。
先截图看看我说的这个场景。底部我还没完善哈。但是底部下边一大片空白。这样体验就不好了。只是一般网页的内容都会比较多，会把底部堆下去。总不能保证每个页面都能堆下去。
还是以 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
这个只是一个简单的架构。离完整的项目还差很多。比如多语言，多主题（白天，晚上等），组件库，图表，大屏展示等等。