260110

一、vue前端项目启动

默认启动方式为 npm run serve ，并且不会自动跳转
如何修改启动方式为执行 npm run serve 后可自动跳转至指定路由

1.1 检查构建工具类型

先查看项目根目录的 package.json 文件，找到 scripts 下的 dev 命令，确认构建工具：

若 dev 是 "vue-cli-service serve" → 属于 Vue-CLI（Webpack 底层）

若 dev 是 "vite" → 属于 Vite 构建

若 dev 是 "webpack serve" → 属于纯 Webpack 配置

若为Vue-CLI 构建的项目（最常见），找到项目根目录下的vue.config.js文件，进行修改

1.2 修改vue.config.js文件

1.2.1 新增依赖引入

在vue.config.js中新增对open包的引入，用于跨平台（Windows/Mac/Linux）打开浏览器，解决不同系统下打开浏览器的兼容性问题。

javascript 复制代码

const open = require('open'); // 引入跨平台打开浏览器的包

1.2.2 在configureWebpack中新增devServer配置块

在configureWebpack中新增devServer配置块（核心修改），原configureWebpack仅包含resolve配置，修改后新增了完整的devServer配置：

javascript 复制代码

// 关键：将 webpack-dev-server 原生配置写在这里，避开 @vue/cli 的过滤
devServer: {
    port: 8081, // 端口指定为 8081（原是8080）
    open: false, // 关闭默认的自动打开行为
    // 服务启动并监听端口成功后执行的钩子（原生 webpack-dev-server 支持）
    onListening: async function(devServer) {
        if (!devServer) {
            throw new Error('webpack-dev-server is not defined');
        }
        // 获取实际监听的端口（确保和配置一致）
        const port = devServer.server.address().port;
        // 拼接目标跳转地址（Vue2 hash路由需带#）
        const targetUrl = `http://localhost:${port}/#/login`;
        // 跨平台打开浏览器并跳转到指定地址
        await open(targetUrl);
    }
}

1.3 修改原理

首先要清楚@vue/cli（Vue2 脚手架）和webpack-dev-server（webpack 开发服务器）的核心关系：

1.3.1 @vue/cli对devServer的 "过滤" 特性

@vue/cli为了简化配置，对vue.config.js中顶级的devServer配置做了一层封装和过滤：

1、它只暴露了部分常用配置项（如proxy、host、port、hot等）；

2、像onListening这类webpack-dev-server的原生生命周期钩子，并不会被@vue/cli识别和传递给底层的 webpack。

因此，若想使用webpack-dev-server的原生钩子（如onListening），必须绕过@vue/cli的封装，直接在configureWebpack中配置devServer------ 因为configureWebpack是直接传递给 webpack 的原生配置，所有webpack-dev-server的配置都会被完整识别。

1.3.2 关键配置

(1) open: false（关闭默认自动打开）

显式设置为false是为了避免@vue/cli的默认打开行为和自定义的onListening钩子冲突，确保只有我们自定义的逻辑会打开浏览器。

(2) onListening钩子的核心作用

这是webpack-dev-server的原生生命周期钩子，仅在开发服务器成功启动并监听端口后触发：

1、避免 "提前打开浏览器"：如果直接在启动时打开浏览器，可能端口还未就绪，导致浏览器打开空白页 / 报错；

2、动态获取实际端口：devServer.server.address().port会获取服务器实际监听的端口（而非配置值），解决 "端口被占用时 webpack 自动分配新端口" 的问题；

3、自定义跳转路径：拼接/#/login是适配 Vue2 的 hash 路由模式，实现打开浏览器后直接跳转到登录页。

(3) open包的作用

Node.js 原生没有跨平台打开浏览器的 API，open包封装了不同系统的底层命令：

Windows：start 命令；

Mac：open 命令；

Linux：xdg-open 命令。

保证在任何系统下都能稳定打开浏览器。

二、添加用户注册功能

在login.vue文件中添加一个"注册用户"的按钮

2.2 index.js

在index.js文件中添加一个用户注册功能的路由

先导入

javascript 复制代码

import yonghuRegister from '@/views/yonghu/register'

然后再children[]数组中加入

javascript 复制代码

{
		path: '/yonghuRegister',
		name: '用户注册',
		component: yonghuRegister
	},

三、添加用户登录功能

3.1 右键检查

在登录页面右键检查，定位到前端login.vue文件

选项内容存储在userList中

userList 数组的数据不是写死的，而是从后端接口获取并筛选得到的，核心逻辑在getMenujson函数中

前端下拉框的 "管理员"、"骑手"、"商家" 这些选项，本质是存储在 menujson 这个字符串字段里的。该字段存储的是 JSON 数组字符串

如果想调整下拉框的选项（比如新增 / 删除角色），不需要改代码，只需修改 menu 表中 menujson 字段的内容：

方法1：直接修改数据库：编辑 menu 表中对应记录的 menujson 字段，调整 JSON 数组里的项；

方法2：后端管理界面：如果有后台管理功能，会有专门的页面编辑 menujson 内容（本质还是修改数据库）------后端menu.js文件

3.2 数据库文件（方法1）

修改 menu 表中对应记录的 menujson 字段中的用户部分的hasBackLogin字段为"是"

修改用户部分的hasBackLogin字段为"是"

四、登录时的"滑动拼图验证"模块

4.1.1 第三方组件

在login.vue文件中引入第三方组件 vue3-puzzle-vcode

javascript 复制代码

// 拼图验证码 - 引入第三方拼图验证组件
import Vcode from "vue3-puzzle-vcode";

4.1.2 模板中使用验证组件

在template里挂载了 Vcode 组件，并绑定了关键的状态和回调事件：

javascript 复制代码

<Vcode 
  :show="isShow"        // 控制组件是否显示（核心开关）
  @success="success"    // 拼图验证成功的回调
  @close="close"        // 关闭验证组件的回调
  @fail='fail'          // 拼图验证失败的回调

></Vcode>

:show="isShow"：通过 isShow 这个响应式变量控制拼图验证弹窗的显示 / 隐藏；

@success/@close/@fail：分别对应验证成功、关闭组件、验证失败时要执行的函数。

4.1.3 控制验证组件的显示

定义了 pictureShow 函数，用于触发拼图验证组件的显示：

javascript 复制代码

const isShow = ref(false) // 初始隐藏验证组件
const pictureShow = () => {
  isShow.value = true     // 将开关置为true，显示拼图验证弹窗
}

4.1.4 处理验证结果的回调函数

三个回调函数分别处理不同的验证状态，核心是 success 回调（验证通过后才执行登录）：

javascript 复制代码

// 拼图成功回调（核心）
const success = (msg) => {
  isShow.value = false // 关闭验证组件
  context?.$toolUtil.message('验证通过', 'success') // 提示验证成功
  // 延迟1.5秒执行真正的登录逻辑（提升用户体验）
  setTimeout(() => {
    login()
  }, 1500)
}

// 拼图关闭（未验证成功就关闭）
const close = () => {
  isShow.value = false // 仅关闭组件，不执行登录
}

// 拼图失败回调
const fail = () => {
  context?.$toolUtil.message('验证不通过', 'error') // 提示验证失败
  isShow.value = false // 关闭组件
}

4.1.5 与登录流程的联动（核心触发逻辑）

点击「登录」按钮时执行 handleLogin 函数，逻辑如下：

javascript 复制代码

const handleLogin = () => {
  // 1. 先做表单基础验证（账号、密码、角色）
  if (!loginForm.value.username) {
    context?.$toolUtil.message('请输入用户名', 'error')
    return;
  }
  if (!loginForm.value.password) {
    context?.$toolUtil.message('请输入密码', 'error')
    return;
  }
  if (userList.value.length > 1 && !loginForm.value.role) {
    context?.$toolUtil.message('请选择角色', 'error')
    return;
  }

  // 2. 表单验证通过后，触发拼图验证（显示验证组件）
  pictureShow()
  
  // 注意：这里的 return false 会让后续的 login() 直接跳过
  // 真正的 login() 会在 success 回调里执行
  return false
  login() // 这行代码不会执行，因为上面有 return false
}

1、先校验账号、密码、角色等基础信息；

2、基础校验通过后，调用 pictureShow() 显示拼图验证组件；

3、只有用户完成拼图且验证成功（触发 success 回调），才会执行 login() 函数调用后端登录接口。

4.1.6 真正的登录逻辑（验证成功后执行）

javascript 复制代码

const login = () => {
  context?.$http({
    url: `${tableName.value}/login?username=${loginForm.value.username}&password=${loginForm.value.password}`,
    method: 'post'
  }).then(res => {
    // 登录成功：存储token、角色等信息，跳转到首页
    context?.$toolUtil.storageSet("Token", res.data.token);
    context?.$toolUtil.storageSet("role", loginForm.value.role);
    context?.$toolUtil.storageSet("sessionTable", tableName.value);
    context?.$toolUtil.storageSet("adminName", loginForm.value.username);
    context?.$router.push('/')
  }, err => {
    // 登录失败的处理（暂未实现）
  })
}

五、优化

5.1 修改登录时的背景图片

5.1.1 定位

在login.vue文件中定位到.login_view 这个 CSS 类的 background 属性

5.1.2 使用在线图片链接

直接替换 url() 里的链接为想要修改的在线图片地址即可

5.1.3 使用本地图片

1、先把背景图片文件（比如 login-bg.jpg）放到你的 Vue 项目目录中，建议路径：src/assets/images/（如果没有该目录，手动创建）

2、修改 CSS 中的背景图片路径：

css 复制代码

.login_view {
  // 用@符号指向src目录，路径更稳定
  background: url("@/assets/images/login-bg.jpg") no-repeat center center / cover;
  // 其他样式保持不变...
}

六、购物车权限

将list.vue文件中的

javascript 复制代码

<el-button v-if="btnAuth('caipinxinxi','加入购物车')" type="primary" @click="openCartDialog(scope.row)">加入购物车</el-button>

修改为

javascript 复制代码

<el-button v-if="true" type="primary" @click="openCartDialog(scope.row)">加入购物车</el-button>

才会出现"加入购物车"按钮，为什么？

因为btnAuth函数在控制着权限

6.1 btnAuth 函数的作用

首先看代码中 btnAuth 函数的定义：

javascript 复制代码

const btnAuth = (e,a)=>{
  return context?.$toolUtil.isAuth(e,a)
}

这个函数是权限验证工具函数，作用是：

参数 e：模块标识（这里是 caipinxinxi，即 "菜品信息" 模块）
参数 a：操作权限名称（这里是 "加入购物车"）
返回值：布尔值（true 表示有权限，false 表示无权限）

当 btnAuth('caipinxinxi','加入购物车') 返回 false 时，v-if 条件不满足，Vue 就不会渲染这个按钮；改为 v-if="true" 后，跳过了权限验证，按钮自然就显示了。

6.2 btnAuth 返回 false 的常见原因

context?.$toolUtil.isAuth 是项目封装的权限校验方法，返回 false 通常有以下几种情况：

权限未配置：后端的权限管理系统中，当前登录用户的角色没有分配 "菜品信息 - 加入购物车" 这个权限，导致前端获取的用户权限列表中没有该权限标识。
权限标识不匹配：前端传入的权限名称（"加入购物车"）和后端配置的权限名称不一致（比如后端配置的是 "添加购物车""加入购物车_按钮" 等），导致匹配失败。
权限工具类逻辑问题：isAuth 方法本身有 bug（比如参数处理错误、未正确读取用户权限缓存、权限列表加载失败等）。
用户权限信息未加载：用户登录后，权限列表未正确加载到前端（比如登录逻辑遗漏了权限获取步骤），导致所有权限验证都返回 false。

一、vue前端项目启动

1.1 检查构建工具类型

1.2 修改vue.config.js文件

1.2.1 新增依赖引入

1.2.2 在configureWebpack中新增devServer配置块

1.3 修改原理

1.3.1 @vue/cli对devServer的 "过滤" 特性

1.3.2 关键配置

(1) open: false（关闭默认自动打开）

(2) onListening钩子的核心作用

(3) open包的作用

二、添加用户注册功能

2.1 login.vue

2.2 index.js

三、添加用户登录功能

3.1 右键检查

3.2 数据库文件（方法1）

3.3 后端menu.js文件（方法2）

四、登录时的"滑动拼图验证"模块

4.1 login.vue

4.1.1 第三方组件

4.1.2 模板中使用验证组件

4.1.3 控制验证组件的显示

4.1.4 处理验证结果的回调函数

4.1.5 与登录流程的联动（核心触发逻辑）

4.1.6 真正的登录逻辑（验证成功后执行）

五、优化

5.1 修改登录时的背景图片

5.1.1 定位

5.1.2 使用在线图片链接

5.1.3 使用本地图片

六、购物车权限

6.1 btnAuth 函数的作用

6.2 btnAuth 返回 false 的常见原因