web开发 on acye's blog

CSS小案例，讲布局（Flex+Grid）

Sun, 14 Dec 2025 22:36:00 +0000

从新闻页面 CSS+成果图看布局设计：实用 Flex 与结构化布局技巧

在前端开发中，布局是页面的骨架，直接决定了内容呈现的逻辑性和视觉舒适度。最近落地了一个新闻列表页面（如下成果图所示），其布局设计简洁高效，尤其适合信息密集型页面（如新闻、资讯类），今天就结合成果图+对应 CSS 代码，拆解其中的布局思路和实用技巧。

（注：下图即为本次分析对应的页面成果，后续会一一对应布局模块）

一、布局基础：全局样式与容器搭建（成果图整体框架）

任何布局的第一步都是打“地基”——成果图里的整个内容区域，就是通过以下代码实现的核心容器：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: orange;
  background-attachment: fixed;
  padding-top: 25px;
}
.big_box {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(180deg, #f0f0f0 0%, whitesmoke 100%);
  border-radius: 20px;
}

对应成果图的效果：

成果图里的所有内容（左侧新闻+右侧热搜）都包裹在big_box中，实现了水平居中+左右留白，适配不同屏幕；
容器的渐变背景+圆角，让成果图里的内容区和外部橙色背景区分开，视觉更整洁。

二、核心布局：Flex 的灵活运用（成果图主次分栏+内容排列）

成果图的“左主新闻区+右热搜区”“单图/多图新闻”等结构，全靠 Flex 布局实现：

1. 主次分栏布局（成果图左+右区域）

.box {
  max-width: 1200px;
  display: flex;
  gap: 50px;
  align-items: flex-start;
}
.left {
  flex: 1;
} /* 成果图左侧主新闻区 */
.right {
  width: 360px;
  flex-shrink: 0;
} /* 成果图右侧热搜区 */

对应成果图的效果：

左侧主区（left）自动占满剩余空间，呈现多条新闻；右侧热搜区（right）固定宽度不收缩，保证榜单布局稳定（成果图右侧的热搜列表不会被挤压）；
两者顶部对齐（align-items: flex-start），对应成果图里左、右区域的顶部是齐平的。

2. 单图新闻布局（成果图“2024 高考倒计时”那条）

.row_box {
  display: flex;
  gap: 16px;
}
.img1 {
  width: 32%;
  aspect-ratio: 4/3;
  flex-shrink: 0;
  border-radius: 8px;
}
.text_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

对应成果图的效果：

成果图里“2024 高考倒计时”左侧的空白块，就是img1（固定宽占比+比例），不会因文本长度变形；
右侧文本区上下分布（标题在上、时间/来源在下），对应成果图里这条新闻的文字区域布局均匀。

3. 多图新闻布局（成果图第三条新闻的三个图）

.img3_box {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}
.img3 {
  flex: 1;
  aspect-ratio: 16/10;
  border-radius: 6px;
}

对应成果图的效果：

成果图第三条新闻下方的三个空白块，就是通过flex: 1实现的均等分栏，无需手动算宽度，保证三张图整齐排列。

4. 热搜榜单布局（成果图右侧列表）

.hot_li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
}
.rank {
  width: 18px;
  flex-shrink: 0;
  font-weight: 700;
}
.hot_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

对应成果图的效果：

成果图右侧的“1、2、3…”排名，是rank（固定宽度不位移）；
超长热搜标题自动省略（比如成果图里的第一条热搜），避免换行打乱布局。

三、布局设计的核心思路总结（结合成果图）

这个页面的布局之所以在成果图里呈现得清晰舒适，核心是“结构化+灵活性”的平衡：

先骨架后内容：先通过big_box/box定整体框架（成果图的大容器+分栏），再填内部组件；
Flex 适配场景：分栏用 Flex、单图/多图用 Flex、榜单用 Flex，替代浮动/定位，代码简洁且适配成果图的各种排列需求；
固定+灵活结合：热搜区/图片/排名固定（保证成果图里的关键区域稳定），主新闻区灵活伸缩（适配不同屏幕）；
细节控体验：文本省略、统一间距、固定比例，让成果图里的布局既规整又不呆板。

如何将vue cli 写的前端文件转换为vite（详细板）

Sun, 14 Dec 2025 22:36:00 +0000

从 Vue CLI 迁移到 Vite 的完整指南

📋 迁移概览

将项目从 Vue CLI 迁移到 Vite 确实如你所说，主要包括以下几个核心步骤。

🗺️ 迁移路线图

步骤 1：备份原有项目

1
2

# 在开始前一定要备份
cp -r my-project my-project-backup

步骤 2：删除旧配置文件

# 删除 Vue CLI 相关配置文件
rm vue.config.js
rm babel.config.js  # 如果存在
rm .eslintrc.js     # 如果使用单独的配置文件

步骤 3：清理项目依赖

1
2
3

# 删除 node_modules 和锁文件
rm -rf node_modules
rm package-lock.json  # 或 rm yarn.lock

📝 详细步骤说明

1. 修改 package.json

主要变化：

{
  "type": "module", // 新增：声明为 ES 模块
  "scripts": {
    // Vue CLI 脚本 → Vite 脚本
    "serve": "vue-cli-service serve", // 删除
    "build": "vue-cli-service build", // 删除
    "dev": "vite", // 新增
    "build": "vite build", // 修改
    "preview": "vite preview" // 新增
  },
  "dependencies": {
    // 移除 Vue CLI 特定的依赖
    // 保持应用层依赖不变
  },
  "devDependencies": {
    // 完全替换开发依赖
    "@vue/cli-*": "~5.0.0", // 删除所有
    "@vitejs/plugin-vue": "^5.0.5", // 新增
    "vite": "^5.4.8", // 新增
    "sass-embedded": "^1.83.0" // 推荐使用 sass-embedded
  }
}

为什么要这样改？

Vue CLI 基于 Webpack，而 Vite 是全新的构建工具
type: "module" 让 Node.js 支持 ES6 模块语法
Vite 的命令更简洁直观

2. 配置文件迁移

从 vue.config.js 到 vite.config.js

// vue.config.js (旧)
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://10.245.30.86:8080",
        changeOrigin: true,
      },
    },
  },
};

// vite.config.js (新)
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://10.245.30.86:8080",
        changeOrigin: true,
      },
    },
  },
});

关键差异：

Vite 使用 ES 模块语法 (import/export)
配置结构更扁平
热更新速度显著提升

3. 环境变量处理

Vue CLI 方式：

// .env.development
VUE_APP_BASE_API=/api
VUE_APP_PROXY_TARGET=http://10.245.30.86:8080

// 代码中使用
process.env.VUE_APP_BASE_API

Vite 方式：

// .env.development
VITE_BASE_API=/api
VITE_PROXY_TARGET=http://10.245.30.86:8080

// 代码中使用
import.meta.env.VITE_BASE_API

或者保留 Vue 前缀：

// vite.config.js 中配置
envPrefix: ["VUE_APP_", "VITE_"],
  // 这样可以使用两种前缀
  import.meta.env.VUE_APP_BASE_API;

4. 请求配置文件修改

修改 src/utils/request.js（或类似文件）：

// 原来的 Vue CLI 方式
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || "/api",
  timeout: 10000,
});

// 修改为 Vite 方式
const service = axios.create({
  baseURL: import.meta.env.VUE_APP_BASE_API || "/api",
  timeout: 10000,
});

重要说明：

process.env → import.meta.env
只有以 VITE_ 或配置的前缀开头的变量才会被暴露
环境变量在构建时被替换

5. HTML 文件处理

Vue CLI：

1
2
3

public/
  index.html
src/

Vite：

1
2
3

根目录/
  index.html  # 移动到根目录
src/

修改 index.html：

<!-- 原来的 -->
<script src="/js/chunk-vendors.js"></script>
<script src="/js/app.js"></script>

<!-- 现在：删除所有显式的脚本引入 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- Vite 会自动注入脚本 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

6. 静态资源引用方式

Vue CLI：

import logo from '@/assets/logo.png';
<img :src="logo" />

// 或
<img src="@/assets/logo.png" />

Vite：

// 方式1：使用相对或绝对路径
<img src="/src/assets/logo.png" />

// 方式2：使用 import
import logoUrl from '@/assets/logo.png';
<img :src="logoUrl" />

// 方式3：使用 public 目录（不经过构建）
<img src="/logo.png" />  // 放在 public/logo.png

7. 路径别名配置

vite.config.js 中配置：

import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      // 可以添加更多别名
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
});

🔧 常见问题解决

问题 1：CommonJS 模块报错

// 错误：require is not defined
const module = require("module");

// 解决：改为 ES6 导入
import module from "module";

问题 2：process 变量报错

// 错误：process is not defined
if (process.env.NODE_ENV === "development") {
}

// 解决：使用 import.meta.env
if (import.meta.env.MODE === "development") {
}

问题 3：CSS 预处理器错误

// vite.config.js 中正确配置
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
});

📦 完整迁移脚本

#!/bin/bash
# migrate-to-vite.sh

echo "🚀 开始迁移 Vue CLI 到 Vite..."

# 1. 备份
echo "📦 备份原项目..."
cp -r ./ ./backup-$(date +%Y%m%d-%H%M%S)

# 2. 删除旧文件
echo "🗑️  删除旧配置文件..."
rm -f vue.config.js
rm -f babel.config.js

# 3. 清理依赖
echo "🧹 清理 node_modules..."
rm -rf node_modules
rm -f package-lock.json

# 4. 移动 HTML 文件
echo "📄 移动 HTML 文件..."
if [ -f "public/index.html" ]; then
    mv public/index.html ./
    rm -rf public
fi

# 5. 更新 package.json
echo "📝 更新 package.json..."
# 这里可以编写 sed 命令或手动修改

# 6. 创建 vite.config.js
echo "⚙️  创建 Vite 配置文件..."
cat > vite.config.js << 'EOF'
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    port: 8081,
    open: true,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
});
EOF

echo "✅ 迁移完成！"
echo "📦 请运行: npm install"
echo "🚀 然后运行: npm run dev"

📊 迁移前后对比

特性	Vue CLI (Webpack)	Vite
启动速度	20-30 秒	1-3 秒
热更新	1-3 秒	50-300 毫秒
配置复杂度	复杂	简单
插件生态	成熟	快速增长
构建速度	中等	快速

🎯 迁移后的优势

极速启动：Vite 启动速度比 Vue CLI 快 10-100 倍
闪电热更新：无论项目大小，热更新几乎瞬间完成
更简单配置：配置文件更简洁易懂
现代工具链：原生支持 ES 模块、TypeScript 等
更好的开发体验：按需编译，无需等待整个应用构建

📚 总结

迁移到 Vite 确实是一个相对简单的过程，主要就是：

改配置：package.json + vite.config.js
改代码：环境变量访问方式
改结构：HTML 文件位置
改引用：静态资源导入方式

校园OJ开发之布局逻辑

Sat, 06 Dec 2025 12:36:00 +0800

写给小白的校园 OJ 开发详解

前言：为什么需要这些配置？

想象一下你要建一座房子 🏠：

vue.config.js = 房子的施工图纸和施工规则
main.js = 房子的地基和主要结构
App.vue = 房子的外壳框架
router = 房子的导航系统（房间分布图）
layout = 房子的装修布局（每个房间的固定摆设）

下面我一步步拆解，保证你能完全看懂！

注：本文基于 Vue3 开发，如果你用的是 Vue2，请自行修改。的本个项目的代码可以看这个仓库：仓库地址

vue.config.js 这个文件告诉 Vue 项目“怎么干活”：

// 就像给工人说：从环境变量读取接口地址，默认用"/api"
const VUE_APP_BASE_API = process.env.VUE_APP_BASE_API || "/api";

module.exports = {
  devServer: {
    port: 8081, // 开发服务器端口（房子建在8081号地皮）
    open: true, // 自动打开浏览器（房子建好自动开门）
    proxy: {
      // 配置代理：把本地/api开头的请求转发到真正的后端服务器
      "/api": {
        target: "http://real-backend.com", // 真正的后端地址
        changeOrigin: true, // 改变请求源（假装是同源的）
        pathRewrite: { "^/api": "" }, // 转发时去掉/api前缀
        ws: false, // 关闭WebSocket代理（避免冲突）
      },
    },
  },
};

通俗理解：

开发时，前端在localhost:8081运行，后端可能在localhost:8080或其他地方。配置代理后，前端访问/api/user时，会自动转发到http://real-backend.com/user，解决了跨域问题。

二、地基建设：main.js

这是整个应用的启动入口：

// 1. 导入Vue框架（拿到建房子的工具包）
import { createApp } from "vue";

// 2. 导入三个核心模块（三大件）
import App from "./App.vue"; // 房子蓝图
import router from "./router"; // 导航系统
import store from "./store"; // 中央仓库（存数据）

// 3. 导入UI组件库（预制好的门窗、家具）
import ElementPlus from "element-plus";

// 4. 创建Vue应用实例（开始施工）
const app = createApp(App);

// 5. 安装各种功能模块
app.use(router); // 安装导航系统
app.use(store); // 安装中央仓库
app.use(ElementPlus); // 安装预制家具

// 6. 挂载到页面（把建好的房子放到#app这个地块上）
app.mount("#app");

一张图看懂：

1
2

浏览器打开 → main.js启动 → 创建Vue实例 →
挂载路由/状态管理/UI库 → 渲染App.vue → 显示页面

三、房子外壳：App.vue

这是最外层的容器，所有页面都装在这里：

<template>
  <!-- 这里就是一个动态展示区，根据URL显示不同页面 -->
  <router-view />
</template>

<script setup>
// 这里是空的，因为这个组件只负责"装东西"，不处理具体业务
</script>

<style lang="scss">
/* 导入全局样式（全房子通用） */
@import "@/assets/styles/variables.scss"; // 颜色/尺寸变量
@import "@/assets/styles/common.scss"; // 公共样式
</style>

重要概念：

<router-view /> 就像一个幻灯片投影仪，URL 变化时，自动切换显示的内容
全局样式在这里引入，所有子页面都能用这些样式

四、房间布局：MainLayout.vue

这是页面的通用布局模板（像酒店的标准间装修）：

<template>
  <div class="main-layout">
    <!-- 顶部导航栏（每个页面都有） -->
    <AppNavbar />

    <!-- 主要内容区（会变化的部分） -->
    <main class="content">
      <router-view />
      <!-- 这里显示具体页面 -->
    </main>

    <!-- 底部页脚（每个页面都有） -->
    <AppFooter />
  </div>
</template>

布局逻辑：

┌─────────────────────┐
│     导航栏 Navbar    │ ← 固定，每个页面都有
├─────────────────────┤
│                     │
│     <router-view>    │ ← 动态变化的部分
│    (当前路由页面)     │
│                     │
├─────────────────────┤
│     页脚 Footer      │ ← 固定，每个页面都有
└─────────────────────┘

五、导航系统：路由配置

1. 路由规则（routes.js）

这是房间分布图，告诉系统每个 URL 对应哪个页面：

const routes = [
  {
    path: "/", // 访问路径
    component: MainLayout, // 用哪个布局模板
    redirect: "/home", // 重定向到首页
    children: [
      // 子路由（布局内的具体内容）
      {
        path: "home", // 实际路径：/home
        name: "Home", // 路由名字（方便跳转）
        component: () => import("@/views/AppHome.vue"), // 懒加载组件
        meta: { title: "首页" }, // 额外信息（页面标题、权限要求等）
      },
      {
        path: "problems",
        name: "ProblemList",
        component: () => import("@/views/problem/ProblemList.vue"),
        meta: { title: "题目列表" },
      },
    ],
  },
  {
    path: "/login", // 登录页不需要MainLayout布局
    component: () => import("@/views/login/AppLogin.vue"),
    meta: { title: "登录", requiresGuest: true }, // 仅游客可访问
  },
];

路由类型：

公共路由：所有人可访问（首页、题目列表）
登录路由：需要登录才能访问（个人中心）
管理员路由：需要管理员权限（题目管理）
404 路由：找不到页面时显示

2. 路由守卫（index.js）

这是门口的保安，控制谁能进哪个房间：

router.beforeEach(async (to, from, next) => {
  // 1. 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - OJ平台`;
  }

  // 2. 检查是否登录（看有没有token）
  const hasToken = store.getters.token;

  if (hasToken) {
    // 已登录的情况
    if (to.path === "/login") {
      next("/"); // 已登录还去登录页？跳回首页！
    } else {
      // 检查是否是管理员页面
      if (to.meta.requiresAdmin && !isAdmin) {
        next("/"); // 不是管理员？滚回首页！
      } else {
        next(); // 放行！
      }
    }
  } else {
    // 未登录的情况
    if (白名单.includes(to.path)) {
      next(); // 登录页可以进
    } else {
      next(`/login?redirect=${to.path}`); // 去登录，记下来路
    }
  }
});

保安的工作流程：

用户访问页面 → 保安拦截 →
    ↓
判断是否登录？
    ├─ 已登录 → 想进登录页？→ 踢回首页
    │         → 想进管理页？→ 检查权限 → 放行/踢回
    │         → 进普通页 → 直接放行
    │
    └─ 未登录 → 想进登录页？→ 放行
            → 想进其他页？→ 带到登录页（记住想去哪）

六、权限控制逻辑

1. 路由元信息（meta 字段）

meta: {
  title: "页面标题",
  requiresAuth: true,     // 需要登录
  requiresAdmin: true,    // 需要管理员
  requiresGuest: true     // 仅游客（未登录）
}

2. 用户角色判断

// 从store获取用户信息
const userInfo = store.getters.userInfo;

// 判断是否是管理员
const isAdmin = userInfo.roles?.includes("admin");

// 根据角色显示不同菜单
<el-menu v-if="isAdmin">
  <el-menu-item>题目管理</el-menu-item>
</el-menu>;

七、开发流程总结

步骤 1：环境配置

配置vue.config.js（代理、端口等）
配置环境变量（接口地址等）

步骤 2：项目初始化

main.js引入核心依赖
App.vue设置路由容器和全局样式

步骤 3：布局设计

创建MainLayout.vue（通用布局）
设计导航栏、页脚等公共组件

步骤 4：路由配置

在routes.js定义所有路由
按需设置权限（public、auth、admin）
在router/index.js配置路由守卫

步骤 5：页面开发

在views/目录创建页面组件
根据路由配置连接页面

步骤 6：权限集成

登录后保存 token 到 store
路由守卫根据 token 和角色控制访问
页面内根据角色显示不同内容

常见问题解答

Q1：为什么需要路由守卫？

A：就像学校大门，要检查学生证（登录）、权限卡（角色），防止无关人员进入。

Q2：懒加载（() => import()）有什么好处？

A：按需加载，首次打开只下载首页代码，其他页面点到了再下载，提高首次加载速度。

Q3：为什么 token 要存 store 而不是 localStorage？

A：store 是响应式的，组件能实时感知登录状态变化，localStorage 需要手动监听。

Q4：如何新增一个页面？

1
2

1. 在views/创建组件 → 2. 在routes.js添加路由 →
3. 在导航栏添加菜单（如果需要） → 4. 测试访问

最后的小贴士

配置先行：先配好路由和权限，再开发页面
分模块开发：用户模块、题目模块、提交模块分开
权限细化：按钮级别也要控制权限
错误处理：404 页面、无权限提示要友好

记住这个开发流程，你就能搭建一个结构清晰、权限分明的校园 OJ 系统了！加油 💪

校园OJ项目的详细开发(登录界面)

Fri, 05 Dec 2025 18:36:00 +0800

手把手教你理解校园 OJ 登录系统：从输入密码到进入首页

一、前言：登录系统的“三件套”

想象一下你要进宿舍楼：

门禁卡（token） - 证明你是楼里的学生
保安（路由守卫） - 检查你有没有门禁卡
楼长（Vuex） - 登记你的入住信息

我们的登录系统就是这样的三级验证机制！

二、核心模块详解

1. Token 管理系统 - `auth.js`（你的电子门禁卡）

这个文件专门管理你的“门禁卡”（token）：

// 就像宿舍楼的门禁系统
const TOKEN_KEY = "oj_user_token"; // 门禁卡的编号

// 进门时刷卡（获取token）
export function getToken() {
  return localStorage.getItem(TOKEN_KEY);
}

// 办新卡（设置token）
export function setToken(token) {
  localStorage.setItem(TOKEN_KEY, token);
}

// 卡丢了/毕业了（移除token）
export function removeToken() {
  localStorage.removeItem(TOKEN_KEY);
}

// 检查有没有卡（是否已登录）
export function isAuthenticated() {
  return !!getToken(); // !!就是把任何值变成true/false的魔法
}

比喻理解：

localStorage = 你的钱包，专门放重要卡片
TOKEN_KEY = 卡包里的特定卡槽，只放门禁卡
每次进出，保安只看这个卡槽有没有卡

2. 通信专员 - `request.js`（你的专属信使）

这个文件负责和后端服务器对话，就像你有个专属信使：

import axios from "axios"; // 信使工具包
import { getToken, removeToken } from "./auth"; // 带上/退回门禁卡
import { ElMessage } from "element-plus"; // 消息提示喇叭

// 招募一个专属信使
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || "/api", // 服务器地址
  timeout: 10000, // 10秒没回复就算超时
});

// 【出发前的准备】请求拦截器 - 信使出发前做的事
request.interceptors.request.use((config) => {
  const token = getToken(); // 从钱包拿出门禁卡
  if (token) {
    config.headers["Authorization"] = `Bearer ${token}`; // 把卡挂在脖子上
  }
  return config; // 可以出发了！
});

// 【回来后的处理】响应拦截器 - 信使回来后做的事
request.interceptors.response.use(
  (response) => {
    const res = response.data; // 打开信封
    if (res.code === 1) {
      // 如果信上说"一切正常"
      return res.data; // 把真正的内容给你
    } else {
      // 信上说"有问题"
      ElMessage.error(res.message || "请求失败"); // 用喇叭广播问题
      throw new Error(res.message || "请求失败"); // 抛出问题
    }
  },
  (error) => {
    // 信使自己出问题了（网络错误）
    const { status } = error.response || {};

    switch (status) {
      case 401: // 门禁卡过期
        ElMessage.error("登录已过期，请重新登录");
        removeToken(); // 扔掉过期卡
        if (window.location.pathname !== "/login") {
          window.location.href = "/login"; // 赶回登录处重新办卡
        }
        break;
      case 403: // 权限不足
        ElMessage.error("没有权限访问");
        break;
      default:
        ElMessage.error("网络错误");
    }

    throw error; // 把问题继续上报
  }
);

信使工作流程图：

1
2
3

你要发信 → 信使出发前（拦截器）→ 检查带没带门禁卡 → 出发送信
         ↓
服务器回信 → 信使回来后（拦截器）→ 检查信的内容 → 正常就给你，异常就广播

3. 用户服务接口 - `user.js`（能办的四件事）

这个文件定义了你能让信使办的四件事：

import request from "@/utils/request"; // 调用刚才的信使

// 1. 办门禁卡（登录）
export function login(data) {
  return request({
    url: "/user/login", // 去"办卡处"
    method: "post", // 用"申请"的方式
    data, // 带上身份证明（账号密码）
  });
}

// 2. 注册新身份（注册）
export function register(data) {
  return request({
    url: "/user/register", // 去"登记处"
    method: "post",
    data,
  });
}

// 3. 更新个人信息（修改资料）
export function updateUserInfo(data) {
  return request({
    url: "/user/info", // 去"资料修改处"
    method: "put", // 用"修改"的方式
    data,
  });
}

// 4. 注销门禁卡（退出登录）
export function logout() {
  return request({
    url: "/user/logout", // 去"注销处"
    method: "post",
  });
}

// 5. 查看个人档案（获取用户信息）
export function getUserInfo() {
  return request({
    url: `/user/stats`, // 去"档案室"
    method: "get",
  });
}

通俗理解：

每个export function就像一张办事指南
request()就是让信使按指南办事
返回值是一个Promise（承诺书），承诺会给你结果

4. 用户管理中心 - `user.js (store/modules)`（楼长的登记簿）

这里是 Vuex 的用户模块，负责管理所有用户相关的全局状态：

// 【状态仓库】楼长手里的登记簿
const state = {
  token: getToken(), // 当前有效的门禁卡
  userInfo: null, // 住户的详细信息
};

// 【修改规则】楼长能做的修改操作
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token; // 登记新卡
  },
  SET_USER_INFO: (state, userInfo) => {
    state.userInfo = userInfo; // 登记住户信息
  },
  CLEAR_USER: (state) => {
    state.token = ""; // 注销卡片
    state.userInfo = null; // 清除住户信息
    removeToken(); // 从钱包里也扔掉
  },
};

// 【办事流程】楼长处理事务的流程
const actions = {
  // 办理入住（登录）
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      // 情况1：模拟模式（开发时用）
      if (useMock) {
        if (用户名密码正确) {
          commit("SET_TOKEN", "临时卡"); // 发临时卡
          commit("SET_USER_INFO", { 角色: "管理员" }); // 登记信息
          resolve(); // 办好了！
        } else {
          reject("密码错了"); // 办不了
        }
      }

      // 情况2：真实模式（实际上线用）
      else {
        apiLogin(userInfo).then((响应) => {
          if (响应.成功) {
            commit("SET_TOKEN", 响应.token); // 发正式卡
            commit("SET_USER_INFO", 响应.用户信息); // 登记信息
            resolve(); // 办好了！
          }
        });
      }
    });
  },

  // 查看住户档案（获取用户信息）
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      if (!state.token) {
        reject("你没卡啊！"); // 没卡看什么档案
        return;
      }

      // ...获取信息的逻辑
    });
  },

  // 办理退宿（退出登录）
  logout({ commit }) {
    return new Promise((resolve, reject) => {
      // 1. 通知服务器我要走了
      apiLogout().then(() => {
        // 2. 本地也清理
        commit("CLEAR_USER");
        resolve();
      });
    });
  },
};

Vuex 核心概念（必须理解！）：

state = 当前的状态（现在有什么）
mutations = 能做什么修改（只能通过这里改！）
actions = 做事的流程（可以包含异步操作）

修改状态的标准流程：

`1`	`你要改数据 → 调用action → action调用mutation → mutation修改state`

5. 快捷访问门 - `getters.js`（快速查询通道）

这个文件提供快速查询状态的方法：

const getters = {
  token: (state) => state.user.token, // "给我当前的门禁卡"
  userInfo: (state) => state.user.userInfo, // "给我住户信息"
  isLogin: (state) => !!state.user.token, // "告诉我有没有卡"（!!转布尔值）
};

为什么需要 getters？

就像图书馆的查询机，不用自己去书库翻
统一的查询接口，避免拼写错误
可以计算衍生数据（如isLogin）

6. Vuex 总仓库 - `index.js`（所有登记簿的集合）

这里是 Vuex 的入口文件，整合所有模块：

import { createStore } from "vuex";
import getters from "./getters";
import user from "./modules/user";

export default createStore({
  modules: {
    user, // 用户登记簿
    // problem,  题目登记簿（可以后续添加）
    // submission, 提交记录登记簿
  },
  getters, // 快速查询通道
});

模块化设计的好处：

用户数据放user模块
题目数据放problem模块
提交记录放submission模块
互不干扰，清晰明了

7. 登录页面 - `AppLogin.vue`（前台接待处）

这是用户看到的登录界面：

<template>
  <div class="login-container">
    <div class="login-card">
      <!-- 标题区域 -->
      <div class="login-header">
        <h2>OJ平台登录</h2>
      </div>

      <!-- 表单区域 -->
      <el-form @submit.prevent="handleLogin">
        <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="用户名" />
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

// 获取工具
const router = useRouter(); // 导航员（负责跳转页面）
const route = useRoute(); // 当前路线信息
const store = useStore(); // 楼长（Vuex）

// 表单数据
const formData = reactive({
  username: "",
  password: "",
});

// 登录函数
const handleLogin = async () => {
  try {
    // 1. 找楼长办卡（调用Vuex的login）
    await store.dispatch("user/login", {
      username: formData.username,
      password: formData.password,
    });

    // 2. 办卡后登记详细信息（调用getInfo）
    const userInfo = await store.dispatch("user/getInfo");

    // 3. 欢迎入住！
    ElMessage.success(`欢迎回来，${userInfo.username}！`);

    // 4. 导航员带你去想去的地方
    const redirect = route.query.redirect || "/home";
    router.push(redirect);
  } catch (error) {
    // 出错了，喇叭广播
    ElMessage.error(error.message);
  }
};
</script>

页面组件关键点：

useRouter() - 获取导航员，用于页面跳转
useStore() - 获取楼长，用于状态管理
store.dispatch() - 让楼长办事（异步操作）
router.push() - 让导航员带路

三、完整登录流程（故事版）

让我们跟着"小明"走一遍完整流程：

第一幕：来到登录页面

小明打开浏览器，输入 OJ 平台网址，看到登录页面（AppLogin.vue）。

第二幕：填写信息

小明输入：

用户名：xiaoming
密码：123456

第三幕：点击登录按钮

// 发生的事：
1. 页面调用 handleLogin()
2. 找楼长（store）："帮我办卡！"
3. 楼长查看登记簿（state），发现没卡
4. 楼长派信使（request）去服务器办卡

第四幕：信使出发

// request.js 的工作：
1. 信使出发前检查："带门禁卡了吗？" → 没带（第一次登录）
2. 出发去服务器（baseURL + "/user/login"）
3. 带上小明的账号密码（data）

第五幕：服务器验证

// 服务器的工作：
1. 检查账号密码
2. 正确：生成一张门禁卡（token）
3. 返回：{ code: 1, data: { token: "abc123", userInfo: {...} } }
4. 错误：返回 { code: 0, message: "密码错误" }

第六幕：信使归来

// request.js 的响应拦截器：
1. 打开信封看code
2. code=1：把data给页面
3. code=0：用喇叭广播"密码错误"

第七幕：楼长登记

// user.js (store) 的login action：
1. 收到信使带回的token
2. 调用SET_TOKEN登记到簿子
3. 调用setToken存到钱包（localStorage）
4. 调用SET_USER_INFO登记用户信息

第八幕：获取完整信息

// 登录后自动调用getInfo：
1. 楼长："刚办了卡，现在去档案室拿详细资料"
2. 派信使去/user/stats
3. 拿回完整档案（roles、permissions等）
4. 登记到簿子（SET_USER_INFO）

第九幕：页面跳转

// AppLogin.vue 的最后：
1. 喇叭广播："欢迎回来，小明！"
2. 导航员查看："小明原来想去哪？"
3. 发现route.query.redirect是"/problems"
4. 带小明去题目列表页

第十幕：后续访问

小明第二天再访问：

1. 进大门（打开网站）
2. 保安（路由守卫）拦截："请出示门禁卡！"
3. 小明从钱包拿出卡（getToken()）
4. 保安验证有效，放行到首页

四、关键概念精讲

1. 什么是 Token？

比喻：Token 就像酒店的房卡。

办入住时（登录）给你一张
每次进房间（访问页面）要刷卡
退房时（退出登录）收回
过期了要重新办（token 过期）

2. localStorage vs sessionStorage

localStorage（长期钱包）：
- 关浏览器还在
- 适合存token这种重要东西
- 容量大（5MB）

sessionStorage（临时口袋）：
- 关浏览器就丢
- 适合临时数据
- 同标签页共享

3. Promise 异步处理

比喻：叫外卖的过程

// 点外卖（发起请求）
const 外卖 = 点餐("鱼香肉丝");

// then：外卖到了做什么
外卖.then((餐) => {
  吃(餐);
});

// catch：外卖出问题了
外卖.catch((错误) => {
  打电话投诉(错误);
});

// async/await：优雅的等外卖
async function 吃饭() {
  try {
    const 餐 = await 点餐("鱼香肉丝");
    吃(餐);
  } catch (错误) {
    打电话投诉(错误);
  }
}

4. Vuex 数据流

1
2
3

单向数据流（必须遵守！）：
组件 → dispatch Action → commit Mutation → 修改 State → 更新组件
      （做什么事）       （怎么改）        （改哪里）    （看到变化）

五、常见问题解答

Q1：为什么登录后页面刷新，又变未登录了？

可能原因：

token 没存进 localStorage（检查setToken）
刷新后 Vuex 的 state 重置了，但 token 还在 localStorage
需要在main.js或App.vue初始化时从 localStorage 读 token

Q2：如何实现"记住我"功能？

// auth.js 增加
export function setToken(token, remember = false) {
  if (remember) {
    localStorage.setItem(TOKEN_KEY, token); // 长期存储
  } else {
    sessionStorage.setItem(TOKEN_KEY, token); // 会话存储
  }
}

// 登录时
await store.dispatch("user/login", {
  username,
  password,
  remember: true, // 传这个参数
});

Q3：多个标签页同时登录怎么办？

// 监听storage变化
window.addEventListener("storage", (event) => {
  if (event.key === TOKEN_KEY) {
    // token变了，同步更新Vuex
    store.commit("user/SET_TOKEN", event.newValue);
  }
});

Q4：如何防止 XSS 攻击盗取 token？

安全措施：

token 设置合理过期时间
使用 HttpOnly Cookie（后端设置）
重要操作需要二次验证
定期更换 token

六、登录系统架构总结

【三层架构】
1. 展示层（View） - AppLogin.vue
   ↓ 用户交互
2. 逻辑层（ViewModel） - Vuex (user模块)
   ↓ 状态管理
3. 服务层（Service） - request.js + user.js(api)
   ↓ 网络通信
4. 持久层（Persistence） - localStorage + auth.js

【五大模块】
1. 认证模块（auth.js）- 管卡
2. 通信模块（request.js）- 管信使
3. 接口模块（user.js api）- 管能办什么事
4. 状态模块（user.js store）- 管登记簿
5. 界面模块（AppLogin.vue）- 管用户看到什么

七、给新手的黄金法则

法则 1：先理解流程，再写代码

画个流程图，搞清楚"点击登录"到"进入首页"中间发生了什么。

法则 2：分层思考，各司其职

auth.js：只关心 token 存哪、怎么取
request.js：只关心怎么发请求、怎么处理响应
store：只关心数据怎么存、怎么改
组件：只关心用户怎么交互、数据怎么展示

法则 3：错误处理要全面

每个可能出错的地方都要有应对方案：

网络错误
服务器错误
用户输入错误
token 过期错误

法则 4：用户体验要友好

登录中显示 loading
错误提示要明确
成功后有反馈
记住用户上次操作

八、下一步学习方向

掌握了登录系统后，你可以继续学习：

权限管理：不同角色看到不同菜单
路由守卫：更精细的访问控制
第三方登录：微信、QQ 快速登录
双因素认证：密码+手机验证码
单点登录：一个账号通行所有系统

记住，登录系统是 Web 应用的大门，大门设计得好不好，直接影响用户体验和系统安全。现在你不仅知道怎么用，还知道为什么这样设计，这就是成为高级开发者的第一步！

加油，你已经掌握了现代前端登录系统的核心原理！🚀

校园OJ项目的整体结构

Fri, 05 Dec 2025 17:36:00 +0800

引言（为什么写这个?）

在完成全域生活服务平台后，我对前后端协同开发的流程有了更深入的理解。但一直想挑战一个更贴近编程学习场景的项目——在线判题系统（OJ，Online Judge）。这类平台不仅需要清晰的用户交互设计，还涉及代码提交、实时判题、数据统计等复杂业务逻辑，非常适合用来巩固前端工程化思想。

本次分享将聚焦前端开发细节，包括项目架构设计、核心功能实现及业务流程梳理。后端部分由好友 shuimo 负责搭建，后续若有机会会邀请他补充后端架构细节。

先放一张完整的项目架构图，帮助大家建立整体认知：

下面是校园 OJ 平台前端项目的完整目录结构，这个结构体现了现代 Vue 项目的模块化设计思想：

src
├─ api                  # 接口请求层：封装所有后端接口调用
│  ├─ admin.js          # 管理员相关接口（题目管理、权限操作等）
│  ├─ problem.js        # 题目相关接口（题目列表、详情、提交判题等）
│  ├─ submission.js     # 提交记录相关接口（提交列表、判题结果查询等）
│  └─ user.js           # 用户相关接口（登录、注册、个人信息、设置等）
├─ assets               # 静态资源层：存放样式、图片等静态文件
│  ├─ css               # 通用CSS文件（未拆分到styles的基础样式）
│  ├─ images            # 项目图片资源（图标、背景图等）
│  └─ styles            # 核心样式文件
│     ├─ Applogin.css   # 登录/注册页面专属样式
│     ├─ AppNavbar.css  # 导航栏组件专属样式
│     ├─ common.css     # 全局通用样式（重置样式、公共类名等）
│     └─ variables.scss # SCSS全局变量（颜色、字体、间距等）
├─ components           # 通用组件层：可复用的Vue组件（按业务拆分）
│  ├─ admin             # 管理员专属组件
│  │  ├─ ProblemForm.vue # 题目新增/编辑表单组件
│  │  └─ ProblemManagement.vue # 题目列表管理组件（查询、删除、编辑）
│  ├─ common            # 全局通用组件
│  │  ├─ AppFooter.vue  # 页面底部版权/导航组件
│  │  └─ AppNavbar.vue  # 页面顶部导航栏（含登录态、菜单切换）
│  ├─ problem           # 题目相关组件
│  │  ├─ ProblemDetail.vue # 题目详情展示组件（题干、输入输出示例等）
│  │  ├─ ProblemItem.vue   # 题目列表项组件（单个题目卡片）
│  │  └─ ProblemTags.vue   # 题目标签组件（难度、题型等标签展示）
│  └─ submission        # 提交记录相关组件
│     ├─ CodeEditor.vue    # 代码编辑组件（支持语法高亮、代码提交）
│     ├─ JudgeResult.vue   # 判题结果展示组件（AC/WA/RE等状态+详情）
│     ├─ SubmissionItem.vue # 提交记录列表项组件（单个提交记录展示）
│     └─ SubmissionList.vue # 提交记录列表组件（查询、筛选提交记录）
├─ layouts              # 布局组件层：页面整体布局容器
│  └─ MainLayout.vue    # 主布局组件（包含Navbar+Footer+内容区域）
├─ router               # 路由配置层：前端路由管理
│  ├─ index.js          # 路由入口（创建路由实例、挂载路由守卫等）
│  └─ routes.js         # 路由规则定义（所有页面的路由路径、组件映射）
├─ store                # 状态管理层：Vuex全局状态管理（按模块拆分）
│  ├─ modules           # Vuex模块拆分
│  │  ├─ problem.js     # 题目相关状态（题目列表、当前题目详情等）
│  │  ├─ submission.js  # 提交相关状态（提交记录、判题结果等）
│  │  └─ user.js        # 用户相关状态（登录态、用户信息、权限等）
│  ├─ getters.js        # Vuex全局getters（统一获取各模块状态）
│  └─ index.js          # Vuex入口（创建store实例、注册模块等）
├─ utils                # 工具函数层：通用工具方法封装
│  ├─ auth.js           # 权限相关工具（JWT存储/解析、登录态校验等）
│  ├─ constant.js       # 全局常量（接口地址、状态码、枚举值等）
│  ├─ debounce.js       # 防抖函数（防止重复点击、频繁请求）
│  ├─ format.js         # 格式化工具（时间、判题状态、文件大小等）
│  ├─ mockData.js       # 模拟数据（开发阶段替代后端接口）
│  └─ request.js        # 请求封装（Axios拦截器、请求/响应统一处理）
├─ views                # 页面视图层：对应路由的页面级组件
│  ├─ admin             # 管理员页面
│  │  ├─ ProblemEdit.vue   # 题目编辑页面（复用ProblemForm组件）
│  │  └─ ProblemManagement.vue # 题目管理页面（复用ProblemManagement组件）
│  ├─ login             # 登录/注册页面
│  │  ├─ AppLogin.vue   # 登录页面（账号密码登录、验证码等）
│  │  └─ AppRegister.vue # 注册页面（用户信息填写、校验等）
│  ├─ problem           # 题目相关页面
│  │  ├─ ProblemDetailView.vue # 题目详情页面（基于MainLayout+ProblemDetail）
│  │  └─ ProblemListView.vue   # 题目列表页面（基于MainLayout+ProblemItem）
│  ├─ submission        # 提交记录页面
│  │  └─ SubmissionHistory.vue # 提交历史页面（基于MainLayout+SubmissionList）
│  ├─ user              # 用户中心页面
│  │  ├─ UserProfile.vue # 个人资料页面（展示/编辑用户信息）
│  │  └─ UserSetting.vue # 用户设置页面（密码修改、偏好设置等）
│  ├─ AppHome.vue       # 项目首页（展示平台介绍、热门题目等）
│  └─ NotFound.vue      # 404页面（路由匹配失败时展示）
├─ App.vue              # 根组件（挂载路由出口、全局样式引入）
└─ main.js              # 项目入口文件（创建Vue实例、挂载路由/store等）

这个架构清晰地将项目分为 10 个核心模块，每个模块都有明确的职责边界，确保了代码的可维护性和可扩展性。

技术栈解析

核心技术框架

Vue 3 - 渐进式 JavaScript 框架，负责整个应用的核心逻辑和 UI 渲染
Vue Router - 官方路由管理器，处理页面导航和权限控制
Vuex - 状态管理模式，管理全局共享数据
Element Plus - UI 组件库，提供丰富的预制界面元素

开发工具链

Vue CLI - 项目脚手架，快速初始化标准化项目结构
npm - 包管理器，管理项目依赖和构建脚本
SCSS/Sass - CSS 预处理器，提供变量、嵌套等高级功能
ESLint - 代码检查工具，保证代码质量和风格统一
Babel - JavaScript 编译器，确保代码兼容性

辅助工具库

Axios - HTTP 客户端，处理网络请求和数据交互
Vue I18n (可选) - 国际化支持
Vite (可选) - 下一代前端构建工具，提供更快开发体验

各模块深度解析

api/ - 网络通信枢纽

这个模块是前端与后端之间的通信桥梁。它将 HTTP 请求封装成语义化的函数，让业务代码无需关心底层网络细节。

admin.js - 管理员专属接口网关，处理题目管理、权限控制等高阶操作
problem.js - 题目数据接口，提供题目列表查询、详情获取等服务
submission.js - 提交记录服务，处理代码提交、评测结果查询
users.js - 用户身份服务，管理登录、注册和个人信息

设计理念：每个文件对应一个后端服务领域，通过统一的请求拦截器处理认证、错误等通用逻辑。

assets/ - 静态资源仓库

这里是项目的视觉资产库，存放所有非代码资源。

css/login.css - 登录页专属样式，实现特殊视觉效果
images/ - 图片资源中心，管理 logo、图标、背景图等
styles/variables.scss - 设计令牌系统，定义颜色、间距、字体等设计常量
styles/common.scss - 全局样式基础，包含重置样式、工具类、布局框架

设计理念：通过 CSS 变量和混合宏实现主题可配置性，支持白天/黑夜模式切换。

components/ - 可复用组件工厂

这个模块采用乐高积木式的设计思想，每个组件都是独立、可复用的 UI 单元。

common/ - 基础设施组件
- AppNavbar：全局导航系统，根据用户权限动态显示菜单
- AppFooter：版权信息展示区，包含网站信息和外部链接
problem/ - 题目相关组件套件
- ProblemDetail：题目展示器，渲染题目描述、示例和难度信息
- ProblemItem：题目卡片，在列表中展示题目的核心信息
- ProblemTags：标签管理系统，支持标签展示和筛选
admin/ - 管理后台组件集
- ProblemForm：题目编辑器，提供富文本编辑和测试用例配置
- ProblemManagement：题目控制面板，支持批量操作和高级搜索
submission/ - 代码提交组件包
- CodeEditor：代码编辑器，提供语法高亮和智能提示
- SubmissionItem：提交记录卡片，显示评测状态和时间消耗
- SubmissionList：提交历史视图，支持分页和过滤

设计理念：组件遵循单一职责原则，通过 Props 和 Events 与父组件通信，支持深度定制。

layouts/ - 页面布局框架

MainLayout.vue 是应用的骨架系统，定义了页面的基本结构：

顶部：导航栏区域
中部：动态内容区域
底部：页脚信息区域

这个布局被大多数页面复用，确保用户体验的一致性。

router/ - 应用导航系统

路由模块是应用的GPS 导航系统，管理着所有页面的访问路径。

routes.js - 路线图数据库，定义了 URL 到页面的映射关系
index.js - 导航控制中心，包含权限守卫和路由钩子

权限分级：

公共路由：无需登录即可访问（首页、题目列表）
用户路由：需要登录凭证（提交记录、个人中心）
管理员路由：需要管理员权限（题目管理、用户管理）

store/ - 全局状态管理中心

这里是应用的中央数据中心，采用模块化设计管理全局状态。

modules/user.js - 用户状态库，管理登录态、权限信息和个人数据
modules/problem.js - 题目状态库，缓存题目列表和详情数据
modules/submission.js - 提交状态库，跟踪提交历史和评测结果
getters.js - 数据查询接口，提供便捷的状态访问方法
index.js - 状态库入口，集成所有模块并提供插件支持

数据流：组件 → Actions → Mutations → State → 组件

utils/ - 工具函数库

工具库是项目的瑞士军刀，提供各种通用功能。

request.js - HTTP 请求引擎，封装 Axios 并提供拦截器
auth.js - 身份验证工具，管理 Token 的存储和验证
constant.js - 常量字典，集中管理接口地址、状态码等
format.js - 数据格式化器，统一日期、数字等展示格式
mockData.js - 模拟数据生成器，支持离线开发和测试

views/ - 页面视图层

视图层是用户直接交互的界面，每个页面都是路由的终点。

login/ - 身份验证门户
- AppLogin.vue：登录注册一体化页面，支持第三方登录
problem/ - 题目浏览区
- ProblemList.vue：题目目录页，支持搜索和筛选
- ProblemDetailView.vue：题目详情页，集成代码编辑器
submission/ - 提交记录区
- SubmissionHistory.vue：个人提交历史，支持状态过滤
admin/ - 管理控制台
- ProblemManagement.vue：题目管理面板
- ProblemEdit.vue：题目编辑界面
user/ - 个人空间
- AppHome.vue：个人主页，展示统计信息和活动记录
NotFound.vue - 404 错误页面，提供友好的错误提示

核心入口文件

App.vue - 应用根容器，定义全局样式和基础结构
main.js - 应用启动器，集成所有插件并挂载到 DOM

校园OJ开发之admin页面的开发

Sun, 30 Nov 2025 12:36:00 +0000

由于没有后端，我来为你添加前端模拟数据和模拟 API，并解释为什么不需要处理 token。

1. 创建模拟数据存储

首先在 src/utils/ 下创建模拟数据管理工具：

`src/utils/mockData.js`

// 模拟数据存储
class MockStorage {
  constructor() {
    this.storageKey = "oj_mock_data";
    this.initData();
  }

  initData() {
    if (!localStorage.getItem(this.storageKey)) {
      const initialData = {
        problems: [
          {
            id: 1,
            title: "两数之和",
            label: "数组,哈希表,简单",
            testPointNum: 3,
            description:
              "给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。\n\n你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。",
            testPointList: [
              { input: "3\n2 7 11 15\n9", output: "0 1", isSample: 1 },
              { input: "2\n3 2 4\n6", output: "1 2", isSample: 0 },
              { input: "2\n3 3\n6", output: "0 1", isSample: 0 },
            ],
            createTime: "2024-01-15 10:00:00",
          },
          {
            id: 2,
            title: "验证回文串",
            label: "字符串,双指针,简单",
            testPointNum: 6,
            description:
              "给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略字母的大小写。\n\n说明：本题中，我们将空字符串定义为有效的回文串。",
            testPointList: [
              {
                input: '"A man, a plan, a canal: Panama"',
                output: "true",
                isSample: 1,
              },
              { input: '"race a car"', output: "false", isSample: 1 },
              { input: '""', output: "true", isSample: 0 },
            ],
            createTime: "2024-01-16 14:30:00",
          },
        ],
        nextProblemId: 3,
      };
      this.saveData(initialData);
    }
  }

  getData() {
    return JSON.parse(localStorage.getItem(this.storageKey)) || {};
  }

  saveData(data) {
    localStorage.setItem(this.storageKey, JSON.stringify(data));
  }

  // 获取所有题目
  getProblems() {
    return this.getData().problems || [];
  }

  // 添加题目
  addProblem(problem) {
    const data = this.getData();
    const newProblem = {
      ...problem,
      id: data.nextProblemId++,
      createTime: new Date().toLocaleString("zh-CN"),
    };
    data.problems.push(newProblem);
    this.saveData(data);
    return newProblem;
  }

  // 更新题目
  updateProblem(updatedProblem) {
    const data = this.getData();
    const index = data.problems.findIndex((p) => p.id === updatedProblem.id);
    if (index !== -1) {
      data.problems[index] = {
        ...data.problems[index],
        ...updatedProblem,
        // 保留创建时间
        createTime: data.problems[index].createTime,
      };
      this.saveData(data);
      return data.problems[index];
    }
    return null;
  }

  // 删除题目
  deleteProblem(id) {
    const data = this.getData();
    data.problems = data.problems.filter((p) => p.id !== id);
    this.saveData(data);
    return true;
  }

  // 分页查询
  getProblemsByPage(pageNum = 1, size = 10) {
    const problems = this.getProblems();
    const start = (pageNum - 1) * size;
    const end = start + size;
    const pageData = problems.slice(start, end);

    return {
      records: pageData,
      total: problems.length,
      pageNum,
      size,
    };
  }

  // 根据ID查询
  getProblemById(id) {
    const problems = this.getProblems();
    return problems.find((p) => p.id === Number(id));
  }
}

// 创建单例实例
export const mockStorage = new MockStorage();

2. 修改 API 文件支持模拟数据

`src/api/admin.js` (更新版本)

import request from "@/utils/request";
import { mockStorage } from "@/utils/mockData";

// 是否使用模拟数据
const USE_MOCK = true;

// 模拟延迟
const mockDelay = (ms = 500) =>
  new Promise((resolve) => setTimeout(resolve, ms));

// 题目管理接口
export const problemAdminAPI = {
  // 添加题目
  addProblem: async (data) => {
    if (USE_MOCK) {
      await mockDelay();
      const result = mockStorage.addProblem(data);
      return { data: result, code: 200, message: "添加成功" };
    }

    return request({
      url: "/testQuestion/addTestQuestion",
      method: "POST",
      data,
    });
  },

  // 删除题目
  deleteProblem: async (id) => {
    if (USE_MOCK) {
      await mockDelay();
      const success = mockStorage.deleteProblem(id);
      return {
        data: null,
        code: success ? 200 : 400,
        message: success ? "删除成功" : "删除失败",
      };
    }

    return request({
      url: "/testQuestion/deleteTestQuestionById",
      method: "DELETE",
      data: { id },
    });
  },

  // 更新题目
  updateProblem: async (data) => {
    if (USE_MOCK) {
      await mockDelay();
      const result = mockStorage.updateProblem(data);
      if (result) {
        return { data: result, code: 200, message: "更新成功" };
      } else {
        return { data: null, code: 400, message: "题目不存在" };
      }
    }

    return request({
      url: "/testQuestion/updateTestQuestion",
      method: "POST",
      data,
    });
  },

  // 题目分页查询
  getProblemsByPage: async (params) => {
    if (USE_MOCK) {
      await mockDelay(300);
      const { pageNum = 1, size = 10, keyword } = params;

      let problems = mockStorage.getProblems();

      // 模拟搜索功能
      if (keyword) {
        problems = problems.filter(
          (p) =>
            p.title.toLowerCase().includes(keyword.toLowerCase()) ||
            p.label.toLowerCase().includes(keyword.toLowerCase())
        );
      }

      const start = (pageNum - 1) * size;
      const end = start + size;
      const pageData = problems.slice(start, end);

      return {
        data: {
          records: pageData,
          total: problems.length,
          pageNum,
          size,
        },
        code: 200,
        message: "查询成功",
      };
    }

    return request({
      url: "/testQuestion/getTestQuestionByPage",
      method: "GET",
      params,
    });
  },

  // 根据ID查询题目
  getProblemById: async (id) => {
    if (USE_MOCK) {
      await mockDelay();
      const problem = mockStorage.getProblemById(id);
      if (problem) {
        return { data: problem, code: 200, message: "查询成功" };
      } else {
        return { data: null, code: 404, message: "题目不存在" };
      }
    }

    return request({
      url: "/testQuestion/getTestQuestionById",
      method: "GET",
      params: { id },
    });
  },
};

3. 更新组件处理模拟数据响应

`src/components/admin/ProblemManagement.vue` (关键部分更新)

// 在 fetchProblems 方法中更新数据处理：
const fetchProblems = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: pagination.value.pageNum,
      size: pagination.value.size,
    };

    if (searchKeyword.value) {
      params.keyword = searchKeyword.value;
    }

    const response = await problemAdminAPI.getProblemsByPage(params);

    // 处理模拟数据和真实数据的响应格式差异
    if (USE_MOCK) {
      problemList.value = response.data.records || [];
      pagination.value.total = response.data.total || 0;
    } else {
      problemList.value = response.data?.records || [];
      pagination.value.total = response.data?.total || 0;
    }
  } catch (error) {
    ElMessage.error("获取题目列表失败");
    console.error("获取题目列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 在 handleDelete 方法中：
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm("确定要删除这个题目吗？", "警告", {
      type: "warning",
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    });

    const response = await problemAdminAPI.deleteProblem(id);

    // 检查响应是否成功
    if (response.code === 200) {
      ElMessage.success("删除成功");
      fetchProblems();
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
      console.error("删除失败:", error);
    }
  }
};

`src/components/admin/ProblemForm.vue` (关键部分更新)

// 在 handleSubmit 方法中更新：
const handleSubmit = async () => {
  try {
    await formRef.value.validate();

    submitting.value = true;

    // 更新测试点数量
    form.testPointNum = form.testPointList.length;

    const response = isEdit.value
      ? await problemAdminAPI.updateProblem(form)
      : await problemAdminAPI.addProblem(form);

    // 检查响应是否成功
    if (response.code === 200) {
      ElMessage.success(isEdit.value ? "更新成功" : "创建成功");
      router.push("/admin/problem");
    } else {
      ElMessage.error(
        response.message || (isEdit.value ? "更新失败" : "创建失败")
      );
    }
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(isEdit.value ? "更新失败" : "创建失败");
      console.error("提交失败:", error);
    }
    // 如果是验证失败，不显示错误消息
  } finally {
    submitting.value = false;
  }
};

// 在 fetchProblemDetail 方法中更新：
const fetchProblemDetail = async (id) => {
  try {
    const response = await problemAdminAPI.getProblemById(id);
    if (response.code === 200 && response.data) {
      Object.assign(form, response.data);
    } else {
      ElMessage.error(response.message || "获取题目详情失败");
    }
  } catch (error) {
    ElMessage.error("获取题目详情失败");
    console.error("获取题目详情失败:", error);
  }
};

4. 为什么不需要处理 Token

原因分析：

模拟环境特性：
- 在模拟环境中，所有数据都存储在前端（localStorage）
- 不需要与真实服务器通信，因此不需要身份验证
- 数据操作完全在前端完成，没有跨域或安全限制
开发阶段便利性：
- 简化开发流程，专注于功能实现
- 避免因认证问题阻碍开发进度
- 便于测试和演示
架构设计考虑：
- 保持 API 接口的一致性
- 真实环境切换简单（只需修改 USE_MOCK 常量）
- 模拟数据层与业务逻辑分离

真实环境切换：

当需要连接真实后端时，只需：

将 src/api/admin.js 中的 USE_MOCK 改为 false
确保 src/utils/request.js 中的 token 处理正常工作
配置正确的后端 API 地址

Token 处理的预备工作：

虽然在模拟环境中不需要 token，但你的项目已经具备了 token 处理能力：

// 在 src/utils/request.js 中已经有类似的代码：
import store from "@/store";

// 请求拦截器 - 添加 token
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      config.headers["Authorization"] = `Bearer ${store.getters.token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

这样设计确保了：

开发阶段：快速原型开发，无需后端依赖
生产环境：无缝切换到真实 API，自动处理认证
代码质量：保持接口一致性，便于维护

现在你的题目管理功能已经完全可以在前端独立运行，所有数据都会持久化保存在浏览器的 localStorage 中！

跨域问题讲解

Sat, 29 Nov 2025 22:36:00 +0000

前言

在前后端分离开发模式下，跨域是前端开发者绕不开的问题。浏览器的同源策略限制了不同域名/端口间的资源请求，而解决跨域的核心方案主要有两种：CORS（跨域资源共享） 和反向代理。本文结合全域生活平台的示例，详解这两种方案的原理、应用场景及踩坑要点。

注：后文会详细讲解 Nginx 反向代理（这是前端程序员的必备知识）

一、问题背景：为什么会跨域？

先看我们的项目环境：

前端（Vue）运行在 http://localhost:8081（通过vue.config.js配置）；
后端（Express）运行在 http://localhost:8080（接口路径如/api/merchant）。

浏览器的同源策略要求“协议+域名+端口”完全一致，因此前端直接请求后端接口会触发跨域错误——比如控制台提示No 'Access-Control-Allow-Origin' header is present on the requested resource。

二、CORS：后端主导的跨域解决方案

CORS 是 W3C 标准，通过后端设置响应头允许指定源的跨域请求，是最直接的跨域方案之一。以下是两种常见的 CORS 配置方式：

1. 方案 1：使用`cors`中间件（便捷高效）

Express 生态提供了cors包，可一键配置跨域规则，也是项目中最常用的方式：

// 使用cors中间件的Express代码
const express = require("express");
const cors = require("cors");
const app = express();

app.use(express.json());
// 全局启用cors，默认允许所有源（生产环境建议指定具体源）
app.use(
  cors({
    origin: "http://localhost:8081", // 仅允许前端8081端口访问
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], // 允许的请求方法
    allowedHeaders: ["Content-Type", "Authorization"], // 允许的请求头
  })
);

// 接口路由
const merchantRouder = require("./routes/merchant");
const customerRouder = require("./routes/service");
const orderRouder = require("./routes/order");
app.use("/api/merchant", merchantRouder);
app.use("/api/service", customerRouder);
app.use("/api/order", orderRouder);

app.listen(8080, () => {
  console.log("服务器启动成功！");
  console.log("http://localhost:8080");
});

这种方式无需手动处理预检请求，cors包会自动拦截OPTIONS请求并返回正确响应头。

2. 方案 2：手动配置 CORS（深入原理）

若不想依赖第三方包，可手动设置响应头并处理预检请求（适合理解 CORS 底层逻辑）：

// 手动处理CORS的Express代码
const express = require("express");
const app = express();

app.use(express.json());

// 自定义跨域中间件
app.use((req, res, next) => {
  // 允许前端8081端口访问
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
  // 允许的请求方法（覆盖所有常用HTTP方法）
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS"
  );
  // 允许的请求头（支持JSON、Token等）
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

  // 处理OPTIONS预检请求（非简单请求必加）
  if (req.method === "OPTIONS") {
    return res.sendStatus(200); // 预检请求直接返回200，不进入业务路由
  }

  next(); // 非预检请求，继续执行后续中间件/路由
});

// 接口路由不变
app.use("/api/merchant", require("./routes/merchant"));
app.use("/api/service", require("./routes/service"));
app.use("/api/order", require("./routes/order"));

app.listen(8080, () => {
  console.log("服务器启动成功！http://localhost:8080");
});

3. CORS 的关键细节

预检请求（OPTIONS）：前端发送PUT/DELETE或带自定义头的请求时，浏览器会先发OPTIONS请求“探路”，后端必须正确响应才能触发真实请求；
Access-Control-Allow-Origin：生产环境需指定具体域名（如https://your-domain.com），而非通配符*（否则前端无法携带 Cookie/Token）；
简单请求豁免预检：GET/POST/HEAD请求且请求头仅含Accept/Content-Type等基础字段时，无需预检。

三、devServer 反向代理：前端开发环境的跨域捷径

虽然 CORS 能解决跨域，但开发阶段频繁修改后端配置效率低。Vue CLI 的devServer.proxy通过反向代理绕过浏览器跨域限制，是更优雅的开发方案。

1. 反向代理的工作原理

devServer.proxy让前端开发服务器充当“中间人”：

前端请求同源的开发服务器（如http://localhost:8081/api/merchant）；
开发服务器将请求转发给后端（http://localhost:8080/api/merchant）；
后端响应结果由开发服务器回传给前端。

整个过程中浏览器仅与同源的localhost:8081交互，自然不会触发跨域限制。

2. 前端配置源码解析（vue.config.js）

// web-admin/vue.config.js
module.exports = {
  devServer: {
    port: 8081, // 前端开发端口（避开后端8080端口冲突）
    open: true, // 启动后自动打开浏览器
    proxy: {
      "/api": {
        target: "http://localhost:8080", // 后端接口真实地址
        changeOrigin: true, // 模拟后端服务器的Origin（关键！避免后端跨域拦截）
        // pathRewrite: { "^/api": "" }, // 后端接口无/api前缀时启用（如后端是/merchant）
      },
    },
  },
};

3. 关键配置说明

target：后端接口的根地址；
changeOrigin: true：让后端误以为请求来自localhost:8080（同源），避免后端的跨域拦截逻辑；
pathRewrite：示例中注释掉是因为后端接口带/api前缀（如/api/merchant），若后端接口无/api，需通过此配置去掉前缀。

4. 踩坑实录：为什么去掉 CORS 仍报错？

很多开发者疑惑：“明明配了devServer.proxy，为什么后端去掉 CORS 还是报跨域错？”
核心原因是非简单请求的OPTIONS预检请求会被代理转发到后端，而后端未处理预检——哪怕前端用了代理，浏览器收到后端非法的预检响应后，仍会判定跨域失败。

（1）预检请求的“转发陷阱”

前端devServer.proxy会转发所有请求（包括OPTIONS预检请求）到后端。比如前端发送POST /api/merchant（带 JSON 数据，属于非简单请求）：

浏览器先发送OPTIONS /api/merchant到前端开发服务器（localhost:8081）；
开发服务器把这个OPTIONS请求转发到后端（localhost:8080/api/merchant）；
若后端没配置 CORS、也没手动处理OPTIONS，会返回无跨域响应头的默认响应（甚至 404）；
浏览器收到这个非法响应，直接抛出跨域错误，真实的POST请求根本不会发送。

你的后端代码（去掉cors且无预检处理）：

// 后端未处理OPTIONS预检请求
app.use(express.json());
// 无CORS配置，也无OPTIONS处理逻辑
app.use("/api/merchant", merchantRouder);

此时后端对OPTIONS请求的响应里没有Access-Control-Allow-Origin等头，浏览器自然判定跨域失败。

（2）开发环境最优解：保留代理+后端极简预检处理

所谓“后端无需配置 CORS”，并非完全不用处理跨域，而是不用依赖cors包，但需手动处理预检请求（仅需几行代码）：

const express = require("express");
const app = express();

app.use(express.json());

// 极简预检处理（开发环境够用）
app.use((req, res, next) => {
  // 允许前端源（开发环境可直接用*，生产环境需指定域名）
  res.setHeader("Access-Control-Allow-Origin", "*");
  // 允许的请求方法和头（覆盖非简单请求需求）
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");

  // 拦截OPTIONS预检请求，直接返回200
  if (req.method === "OPTIONS") {
    return res.sendStatus(200);
  }
  next();
});

app.use("/api/merchant", merchantRouder);
// ...其他路由

app.listen(8080);

这样后端能合法响应预检请求，前端代理就能正常工作——既不用装cors包，也能避免跨域错误。

（3）简单请求的“例外情况”

如果前端只发简单请求（比如GET /api/merchant，无自定义头、无复杂数据），即使后端没处理预检，也可能成功：

简单请求不会触发OPTIONS预检，前端代理直接转发GET请求到后端；
后端返回数据给前端服务器，前端服务器再返回给浏览器（浏览器只看前端服务器的同源响应，不会校验后端的跨域头）。

但只要涉及POST（JSON 数据）、PUT/DELETE等非简单请求，必须处理预检，否则必报错。

四、Nginx 反向代理：生产环境的终极方案

devServer.proxy仅适用于开发环境，生产环境需用 Nginx 反向代理——既能解决跨域，又能优化资源加载和接口转发，是前端部署的标配。

1. Nginx 反向代理的优势

统一域名：将前端静态资源和后端接口代理到同一域名下（如https://your-domain.com）；
性能优化：支持缓存、压缩、负载均衡；
安全防护：隐藏后端真实地址，降低攻击风险。

2. Nginx 配置示例

# nginx.conf 或 conf.d/your-project.conf
server {
    listen 80; # 监听80端口（HTTP）
    server_name your-domain.com; # 生产环境域名

    # 前端静态资源配置（Vue打包后的dist目录）
    location / {
        root /usr/share/nginx/html/your-project; # 前端dist目录路径
        index index.html index.htm; # 默认首页
        try_files $uri $uri/ /index.html; # 解决Vue History路由刷新404问题
    }

    # 后端接口反向代理
    location /api {
        proxy_pass http://localhost:8080; # 转发到后端服务地址
        proxy_set_header Host $host; # 传递请求主机名
        proxy_set_header X-Real-IP $remote_addr; # 传递客户端真实IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递代理链IP
    }
}

3. HTTPS 配置（生产环境必加）

若需支持 HTTPS，只需添加 SSL 证书配置：

server {
    listen 443 ssl;
    server_name your-domain.com;

    # SSL证书路径
    ssl_certificate /etc/nginx/ssl/your-domain.crt;
    ssl_certificate_key /etc/nginx/ssl/your-domain.key;

    # 前端静态资源+接口代理配置同上...
}

五、总结

开发环境：优先使用devServer.proxy反向代理，无需频繁修改后端配置；
生产环境：推荐 Nginx 反向代理（统一域名+性能优化），或后端配置 CORS（不常用，这算黑魔法）；
CORS 核心：处理预检请求+设置正确的响应头；
反向代理核心：让前端请求同源地址，由代理服务器转发到后端。

结合源码理解这两种方案，跨域问题就能迎刃而解！

全域生活服务平台开发流程详解

Mon, 20 Oct 2025 16:36:00 +0000

全域生活服务平台 - 从零开始完整开发指南

🎯 项目概述

我们将构建一个完整的全域生活服务平台，包含：

Web 管理后台：管理员管理商家、服务、订单
微信小程序：用户浏览服务、下单
后端 API：Node.js + Express + MySQL
数据库：MySQL，使用 DataGrip 管理

🛠️ 阶段一：项目准备与环境搭建

第 1 步：安装必要软件

1.1 安装 Node.js（后端运行环境）

访问：Node.js
下载 LTS 版本（长期支持版）
双击安装，全部点"下一步"
验证安装：按 Win + R，输入 cmd 回车，输入：

node -v

显示版本号如 v18.x.x 即成功！

1.2 安装 Vue CLI（网页管理后台工具）

在 cmd 中继续输入：

`1`	`npm install -g @vue/cli`

等待安装完成（可能需要几分钟）

1.3 安装微信开发者工具（小程序开发）

访问：微信开发者工具
下载"稳定版"，安装后用微信扫码登录

1.4 安装 MySQL（数据库）

访问：MySQL Community Server
下载 MySQL Community Server
安装时记住设置的root 密码（建议设为 123456）

1.5 安装 DataGrip（数据库可视化工具）

访问：DataGrip
下载安装，学生可免费使用（用教育邮箱注册）
或使用 30 天免费试用

第 2 步：创建项目文件夹结构

在 D 盘创建项目文件夹：

D:/life-service/
├── server/          （后端API）
├── web-admin/       （网页管理后台）
└── mini-user/       （微信小程序）

第 3 步：配置 DataGrip 连接数据库

3.1 连接 MySQL

打开 DataGrip，点击 “New Project”
项目名称：life_service_platform
在右侧 “Database” 面板，点击 "+" → “Data Source” → “MySQL”

填写连接信息：

Host: localhost
Port: 3306
User: root
Password: 123456 （你设置的MySQL密码）

点击 “Test Connection”，看到 ✅ Success 表示成功
点击 “OK”

3.2 创建数据库

在 DataGrip 中执行 SQL 创建数据库：

按 Ctrl+Enter 打开新查询窗口
输入并执行：

1
2
3

CREATE DATABASE IF NOT EXISTS life_service
DEFAULT CHARACTER SET utf8mb4
DEFAULT COLLATE utf8mb4_unicode_ci;

3.3 创建数据表

在 DataGrip 中执行以下 SQL 创建表：

-- 1. 商家表
CREATE TABLE merchants (
  id INT PRIMARY KEY AUTO_INCREMENT COMMENT '商家ID',
  name VARCHAR(100) NOT NULL COMMENT '商家名称',
  address VARCHAR(200) NOT NULL COMMENT '地址',
  phone VARCHAR(20) NOT NULL COMMENT '联系方式',
  status TINYINT NOT NULL DEFAULT 0 COMMENT '状态：0-审核中，1-已通过',
  create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'
) COMMENT '商家表';

-- 2. 服务表
CREATE TABLE services (
  id INT PRIMARY KEY AUTO_INCREMENT COMMENT '服务ID',
  merchant_id INT NOT NULL COMMENT '关联商家ID',
  name VARCHAR(100) NOT NULL COMMENT '服务名称',
  price DECIMAL(10,2) NOT NULL COMMENT '价格',
  category VARCHAR(50) NOT NULL COMMENT '分类',
  image_url VARCHAR(200) COMMENT '图片地址',
  stock INT NOT NULL DEFAULT 0 COMMENT '库存',
  status TINYINT NOT NULL DEFAULT 0 COMMENT '状态：0-下架，1-上架',
  create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  FOREIGN KEY (merchant_id) REFERENCES merchants(id) ON DELETE CASCADE
) COMMENT '服务表';

-- 3. 订单表
CREATE TABLE orders (
  id INT PRIMARY KEY AUTO_INCREMENT COMMENT '订单ID',
  service_id INT NOT NULL COMMENT '关联服务ID',
  user_name VARCHAR(50) NOT NULL COMMENT '用户姓名',
  user_phone VARCHAR(20) NOT NULL COMMENT '用户电话',
  create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '下单时间',
  status TINYINT NOT NULL DEFAULT 0 COMMENT '状态：0-待支付，1-已完成',
  FOREIGN KEY (service_id) REFERENCES services(id) ON DELETE CASCADE
) COMMENT '订单表';

3.4 插入测试数据

-- 插入测试商家
INSERT INTO merchants (name, address, phone, status) VALUES
('阳光家政', '北京市朝阳区建国路100号', '13800138000', 1),
('快速维修', '上海市浦东新区张江路200号', '13900139000', 1),
('保洁专家', '广州市天河区体育西路300号', '13700137000', 1);

-- 插入测试服务
INSERT INTO services (merchant_id, name, price, category, stock, status) VALUES
(1, '日常保洁', 150.00, '家政', 10, 1),
(1, '深度清洁', 300.00, '家政', 5, 1),
(2, '空调维修', 200.00, '维修', 8, 1),
(3, '办公室保洁', 500.00, '保洁', 3, 1);

💻 阶段二：后端 API 开发（2-3 天）

第 1 步：创建后端项目

打开 cmd，进入 server 文件夹：

`1`	`cd D:/life-service/server`

初始化项目：

`1`	`npm init -y`

安装依赖包：

`1`	`npm install express mysql2 cors nodemon`

第 2 步：创建项目文件结构

在 server 文件夹中创建以下文件结构：

server/
├── app.js           （主入口文件）
├── db/
│   └── index.js     （数据库连接）
├── routes/
│   ├── merchant.js  （商家接口）
│   ├── service.js   （服务接口）
│   └── order.js     （订单接口）
└── controllers/
    ├── merchantCtrl.js
    ├── serviceCtrl.js
    └── orderCtrl.js

第 3 步：编写后端代码

3.1 数据库连接配置 (db/index.js)

const mysql = require("mysql2/promise");

const pool = mysql.createPool({
  host: "localhost",
  user: "root",
  password: "123456",
  database: "life_server",
  port: 3306,
});
console.log("数据库连接成功！");
module.exports = pool;

建议写一个 test.js 文件，测试数据库连接是否成功

// 引入我们创建的连接池
const pool = require("./index.js");
// 执行一条简单的 SQL：查询 MySQL 数据库的版本（不需要创建表，通用测试）
pool.query("SELECT VERSION() AS version", (err, results) => {
  // 回调函数：SQL 执行完成后会触发这个函数
  if (err) {
    console.error("数据库操作失败：", err.message);
    return;
  }
  console.log("数据库连接成功！MySQL 版本是：", results[0].version);
});

// 测试完成后，关闭连接池ps(我一般不建议关,除非你有需求）
// pool.end();

3.2 主入口文件 (app.js)

const express = require("express");
const cors = require("cors");
const app = express();
//中间件

app.use(express.json());
app.use(cors());
//路由（比作一个餐厅的话，像是服务员）

const merchantRouder = require("./routes/merchant");
const customerRouder = require("./routes/service");
const orderRouder = require("./routes/order");
//使用路由

app.use("/api/merchant", merchantRouder);
app.use("/api/service", customerRouder);
app.use("/api/order", orderRouder);
//启动

app.listen(8080, () => {
  console.log("服务器启动成功！");
  console.log("http://localhost:8080");
});

3.3 商家控制器 (controllers/merchantCtrl.js)

控制器是实际干活的（像是餐厅的主厨）

const pool = require("../db");

//获取商家列表
exports.getMerchantList = async (req, res) => {
  try {
    //执行
    const [result] = await pool.execute(`SELECT * FROM merchants`);
    res.json({
      code: 200,
      message: "获取成功",
      data: result,
    });
    //报错
  } catch (err) {
    res.json({
      code: 500,
      message: "获取失败",
      error: err.message,
    });
  }
};

//新增
exports.addMerchant = async (req, res) => {
  //获取数据
  const { name, address, phone } = req.body;
  try {
    const [result] = await pool.execute(
      `INSERT INTO merchants (name,address,phone) VALUES(?,?,?)`,
      [name, address, phone]
    );
    res.json({
      code: 200,
      message: "添加成功",
      data: { id: result.insertId },
    });
    //报错
  } catch (err) {
    res.json({
      code: 500,
      message: "添加失败",
      data: err.message,
    });
    console.log(err);
  }
};

// 审核商家（更新状态）
exports.approveMerchant = async (req, res) => {
  const { id } = req.params;
  try {
    const [result] = await pool.execute(
      "UPDATE merchants SET status = 1 WHERE id = ?",
      [id]
    );
    if (result.affectedRows === 1) {
      res.json({
        code: 200,
        msg: "商家审核通过！",
      });
    } else {
      res.json({
        code: 404,
        msg: "商家不存在",
      });
    }
  } catch (err) {
    res.json({
      code: 500,
      msg: "服务器出错",
      error: err.message,
    });
  }
};

3.4 商家路由 (routes/merchant.js)

const express = require("express");
const router = express.Router();

//引入控制器
const merchantCtrl = require("../controllers/merchantCtrl");

//发送到/add，用什么文件的什么方法处理
router.post("/add", merchantCtrl.addMerchant);

router.get("/list", merchantCtrl.getMerchantList);

// 审核商家
router.put("/approve/:id", merchantCtrl.approveMerchant);

//导出让add.js使用
module.exports = router;

3.5 服务控制器 (controllers/serviceCtrl.js)

const pool = require("../db");
// 关联 merchants 表的本质是通过数据库的关联查询能力，
// 一次性整合 “服务” 和 “商家” 的关联数据，
// 既满足了前端展示 “服务所属商家” 的业务需求
// 即使右表（merchants）中没有匹配的记录
// （比如商家被删除，但服务记录未清理），左表（services）的记录依然会被返回（此时商家名称为 NULL）
exports.getServices = async (req, res) => {
  const { category } = req.query;
  let sql = `
    SELECT s.*,m.name AS merchant_name
    FROM services AS s
    LEFT JOIN merchants AS m ON s.merchant_id = m.id
    where 1=1
    `;
  let params = [];
  // 根据前端传递的分类参数（category）
  // 动态为 SQL 查询添加 “服务分类” 筛选条件，实现 “按分类筛选服务列表” 的功能，同时兼顾灵活性和安全性。
  if (category && category !== "all") {
    sql += ` AND s.category=?`;
    params.push(category);
  }
  try {
    const [row] = await pool.execute(sql, params);
    res.json({
      code: 200,
      message: "获取成功",
      data: row,
    });
  } catch (err) {
    res.json({
      code: 500,
      message: "获取失败",
      error: err.message,
    });
  }
};

//新增
exports.addService = async (req, res) => {
  const { merchant_id, name, price, category, image_url, stock } = req.body;
  try {
    const [result] = await pool.execute(
      `INSERT INTO services (name,price,category, image_url,merchant_id,stock) VALUES(?,?,?,?,?,?)`,
      [name, price, category, image_url, merchant_id, stock]
    );
    res.json({
      code: 200,
      message: "新增服务成功",
      data: { id: result.insertId },
    });
  } catch (err) {
    res.json({
      code: 500,
      message: "新增服务失败",
      data: err.message,
    });
  }
};

// 服务上架（更新状态为“上架”）
exports.publishService = async (req, res) => {
  const { id } = req.params;
  try {
    const [result] = await pool.execute(
      "UPDATE services SET status = 1 WHERE id = ?",
      [id]
    );
    if (result.affectedRows === 1) {
      res.json({ code: 200, msg: "服务上架成功！" });
    } else {
      res.json({ code: 404, msg: "服务不存在" });
    }
  } catch (err) {
    res.json({ code: 500, msg: "服务器出错", error: err.message });
  }
};

// 服务下架（更新状态为“下架”）
exports.unpublishService = async (req, res) => {
  const { id } = req.params;
  try {
    const [result] = await pool.execute(
      "UPDATE services SET status = 0 WHERE id = ?",
      [id]
    );
    if (result.affectedRows === 1) {
      res.json({ code: 200, msg: "服务下架成功！" });
    } else {
      res.json({ code: 404, msg: "服务不存在" });
    }
  } catch (err) {
    res.json({ code: 500, msg: "服务器出错", error: err.message });
  }
};

3.6 服务路由 (routes/service.js)

const express = require("express");
const router = express.Router();
const serviceCtrl = require("../controllers/serviceCtrl");

// 获取服务列表
router.get("/list", serviceCtrl.getServices);

// 新增服务
router.post("/add", serviceCtrl.addService);

// 服务上架
router.put("/publish/:id", serviceCtrl.publishService);

router.put("/unpublish/:id", serviceCtrl.unpublishService);

module.exports = router;

3.7 订单控制器 (controllers/orderCtrl.js)

const pool = require("../db");

//创建定单
exports.createOrder = async (req, res) => {
  const { service_id, user_name, user_phone } = req.body;
  try {
    const [result] = await pool.execute(
      `INSERT INTO orders (service_id,user_name,user_phone) VALUES(?,?,?)`,
      [service_id, user_name, user_phone]
    );
    res.json({
      code: 200,
      message: "创建定单成功",
      data: { id: result.insertId },
    });
  } catch (err) {
    res.json({
      code: 500,
      message: "创建定单失败",
      error: err.message,
    });
  }
};

// WHERE 1=1
// 这是一个 “技巧性写法”，方便后续动态添加条件。
// 比如后面有 if (status !== undefined) 时，
// 会拼接 AND o.status = ?。如果没有 1=1，初始的 WHERE 子句是空的
// 第一次添加条件时需要写 WHERE o.status = ?，第二次添加才写 AND ...，代码里就要判断 “是不是第一个条件”，很麻烦。
// 有了 1=1 后，不管后面加多少条件，直接用 AND ... 拼接就行
// （比如 WHERE 1=1 AND o.status=? AND o.user_id=?），简化了动态条件的拼接逻辑。

//stayus 0:待处理 1:处理中 2:完成

//获取定单列表
exports.getOrders = async (req, res) => {
  const { status } = req.query;
  try {
    let sql = `SELECT o.*,
    s.name AS server_name,
    m.name AS merchant_name
    FROM orders AS o
    LEFT JOIN services AS s ON o.service_id = s.id 
    LEFT JOIN merchants AS m ON s.merchant_id = m.id
    WHERE 1=1`;
    let params = [];

    if (status !== undefined) {
      sql += ` AND o.status=?`;
      params.push(status);
    }
    //加一个空格
    sql += ` ORDER BY o.create_time DESC`;

    const [row] = await pool.execute(sql, params);
    res.json({
      code: 200,
      message: "获取成功",
      data: row,
    });
  } catch (err) {
    res.json({
      code: 500,
      message: "获取失败",
      error: err.message,
    });
  }
};

3.8 订单路由 (routes/order.js)

const express = require("express");
const router = express.Router();
const orderCtrl = require("../controllers/orderCtrl");

// 创建订单
router.post("/create", orderCtrl.createOrder);

// 获取订单列表
router.get("/list", orderCtrl.getOrders);

module.exports = router;

第 4 步：配置 package.json 脚本

修改 server/package.json 中的 scripts 部分：

{
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js"
  }
}

第 5 步：启动后端服务

1
2

cd D:/life-service/server
npm run dev

看到 ✅ 后端服务启动成功！ 表示后端正常运行。

第 6 步：测试后端 API

使用 Postman 或浏览器测试接口：

GET http://localhost:8080/api/merchant/list - 获取商家列表
POST http://localhost:8080/api/merchant/add - 新增商家

🌐 阶段三：Web 管理后台开发（3-4 天）

第 1 步：创建 Vue 项目

打开新的 cmd 窗口：

1
2

cd D:/life-service
vue create web-admin

选择配置：
- Vue 3
- Babel
- Router
- 其他按回车用默认配置（仔细看，别选错了）
进入项目并安装依赖：

1
2

cd web-admin
npm install axios

第 2 步：项目结构配置

在 src 文件夹中创建以下结构：

src/
├── api/
│   ├── merchant.js
│   ├── service.js
│   └── order.js
├── components/
├── views/
│   ├── Merchant/
│   │   └── index.vue
│   ├── Service/
│   │   └── index.vue
│   └── Order/
│       └── index.vue
└── router/
    └── index.js

第 3 步：配置路由

修改 src/router/index.js：

这里路由说的详细一点，方便理解这个整体架构

// 1. 导入创建路由的工具

import { createRouter, createWebHistory } from "vue-router";
// createRouter：用来创建路由实例（相当于“接待员”本身）
// createWebHistory：路由模式（用无#号的URL，比如 http://localhost:8080/service，更美观）

// 2. 导入需要跳转的页面组件（“房间”本身）
import Merchant from "../views/Merchant/index.vue";
import Service from "../views/Service/index.vue";
import Order from "../views/Order/index.vue";

// 3. 定义“地址→页面”的对应规则（“房间号→房间”的对照表）

const routes = [
  {
    path: "/",
    redirect: "/merchant", // 核心：访问 "/" 时自动跳转到 "/merchant"
  },
  {
    path: "/merchant", // 地址：网站根路径（http://localhost:8080/）
    component: Merchant, // 对应页面：商家管理页
    name: "商家管理", // 给这个路由起个名字（方便后续引用，可选）
  },
  {
    path: "/service", // 地址：/service（http://localhost:8080/service）
    name: "服务管理",
    component: Service, // 对应页面：服务管理页
  },
  {
    path: "/order", // 地址：/order（http://localhost:8080/order）
    name: "订单管理",
    component: Order, // 对应页面：订单管理页
  },
];

// 4. 创建路由实例（初始化“接待员”，告诉他规则和工作模式）
const router = createRouter({
  history: createWebHistory(), // 用无#号的URL模式
  routes, // 刚才定义的“地址→页面”规则
});

// 5. 导出路由实例，让整个项目能用（把“接待员”安排到酒店工作）
export default router;

第 4 步：封装 API 请求

创建 src/api/merchant.js：

import axios from "axios";

axios.defaults.baseURL = "http://localhost:8080";

export const merchantAPI = {
  addMerchant(merchant) {
    return axios.post("/api/merchant/add", merchant);
  },

  getMerchantList() {
    return axios.get("/api/merchant/list");
  },
  // 审核商家
  approveMerchant(id) {
    return axios.put(`/api/merchant/approve/${id}`);
  },
};

export default merchantAPI;

创建 src/api/service.js：

import axios from "axios";

export const serviceAPI = {
  getServices: (category = "") => {
    const params = {
      ...(category ? { category } : {}),
      t: Date.now(),
    };
    return axios.get("/api/service/list", { params });
  },
  addService: (data) => {
    return axios.post("/api/service/add", data);
  },
  publishService: (id) => {
    axios.put(`/api/service/publish/${id}`);
  },
  unpublishService: (id) => {
    axios.put(`/api/service/unpublish/${id}`);
  },
};

export default serviceAPI;

创建 src/api/order.js：

import axios from "axios";

export const orderAPI = {
  // 获取订单列表
  getOrders: (status) => {
    const params = status !== undefined ? { status } : {};
    return axios.get("/order/list", { params });
  },

  // 创建订单
  createOrder: (data) => {
    return axios.post("/order/add", data);
  },
};

export default orderAPI;

第 5 步：开发商家管理页面

创建 src/views/Merchant/index.vue：

<template>
  <div class="merchant-page">
    <h2>🏪 商家管理</h2>

    <!-- 新增商家表单 -->
    <div class="add-form">
      <h3>➕ 新增商家</h3>
      <div class="form-group">
        <input
          v-model="newMerchant.name"
          placeholder="商家名称"
          class="input"
          :disabled="isSubmitting"
        />
        <input
          v-model="newMerchant.address"
          placeholder="商家地址"
          class="input"
          :disabled="isSubmitting"
        />
        <input
          v-model="newMerchant.phone"
          placeholder="联系电话"
          class="input"
          :disabled="isSubmitting"
        />
        <button
          @click="addMerchant"
          class="btn btn-primary"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? "提交中..." : "添加商家" }}
        </button>
      </div>
    </div>

    <!-- 商家列表 -->
    <div class="merchant-list">
      <h3>📋 商家列表</h3>
      <!-- 加载状态 -->
      <div class="loading" v-if="isLoading">
        <span>加载中...</span>
      </div>

      <table class="table" v-else>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>地址</th>
            <th>电话</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
            <!-- 新增操作列，更清晰 -->
          </tr>
        </thead>
        <tbody>
          <!-- 空状态处理 -->
          <tr v-if="merchants.length === 0">
            <td colspan="7" class="empty-cell">暂无商家数据</td>
          </tr>

          <tr v-for="merchant in merchants" :key="merchant.id">
            <td>{{ merchant.id }}</td>
            <td>{{ merchant.name }}</td>
            <td>{{ merchant.address }}</td>
            <td>{{ merchant.phone }}</td>
            <td>
              <span
                :class="
                  merchant.status === 0 ? 'status-pending' : 'status-approved'
                "
              >
                {{ merchant.status === 0 ? "审核中" : "已通过" }}
              </span>
            </td>
            <td>{{ formatTime(merchant.create_time) }}</td>
            <td class="operation-cell">
              <!-- 审核按钮：只在"审核中"且非加载状态显示 -->
              <button
                class="approve-btn"
                @click="handleApprove(merchant.id)"
                v-if="merchant.status === 0 && !isLoading"
                :disabled="isApproving[merchant.id]"
              >
                {{ isApproving[merchant.id] ? "审核中..." : "审核通过" }}
              </button>
              <!-- 已通过状态提示 -->
              <span class="approved-text" v-else-if="merchant.status === 1">
                已审核
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import merchantAPI from "../../api/merchant";

export default {
  name: "MerchantView",
  setup() {
    // 商家列表数据
    const merchants = ref([]);
    // 新增商家表单数据
    const newMerchant = ref({
      name: "",
      address: "",
      phone: "",
    });
    // 加载状态（列表加载中）
    const isLoading = ref(false);
    // 提交状态（新增商家时）
    const isSubmitting = ref(false);
    // 审核状态（针对每个商家的单独加载状态，避免重复点击）
    const isApproving = ref({}); // 结构：{ 1: true, 2: false, ... }

    // 获取商家列表（封装为独立方法，便于复用）
    const getMerchants = async () => {
      try {
        isLoading.value = true; // 显示加载状态
        const response = await merchantAPI.getMerchantList();
        merchants.value = response.data.data || []; // 兼容空数据
      } catch (error) {
        alert("获取商家列表失败：" + (error.message || "网络错误"));
        console.error("商家列表加载失败：", error);
      } finally {
        isLoading.value = false; // 无论成功失败，关闭加载状态
      }
    };

    // 新增商家
    const addMerchant = async () => {
      // 表单验证
      if (!newMerchant.value.name.trim()) {
        alert("请输入商家名称！");
        return;
      }
      if (!newMerchant.value.address.trim()) {
        alert("请输入商家地址！");
        return;
      }
      if (!newMerchant.value.phone.trim()) {
        alert("请输入联系电话！");
        return;
      }
      // 简单手机号格式验证（11位数字）
      if (!/^\d{11}$/.test(newMerchant.value.phone)) {
        alert("请输入有效的11位手机号！");
        return;
      }

      try {
        isSubmitting.value = true; // 防止重复提交
        await merchantAPI.addMerchant(newMerchant.value);
        alert("商家添加成功！");

        // 清空表单
        newMerchant.value = { name: "", address: "", phone: "" };

        // 刷新列表
        getMerchants();
      } catch (error) {
        alert("添加商家失败：" + (error.message || "服务器错误"));
        console.error("新增商家失败：", error);
      } finally {
        isSubmitting.value = false; // 恢复提交状态
      }
    };

    // 审核商家（核心补充）
    const handleApprove = async (id) => {
      // 确认操作（避免误点）
      if (!confirm("确定要通过该商家的审核吗？")) {
        return;
      }

      try {
        // 标记当前商家正在审核中
        isApproving.value[id] = true;

        await merchantAPI.approveMerchant(id);
        alert("商家审核通过！");

        // 刷新列表
        getMerchants();
      } catch (error) {
        alert("审核失败：" + (error.message || "服务器错误"));
        console.error(`审核商家${id}失败：`, error);
      } finally {
        // 清除审核状态
        isApproving.value[id] = false;
      }
    };

    // 格式化时间（兼容空值）
    const formatTime = (timeString) => {
      if (!timeString) return "-";
      return new Date(timeString).toLocaleString();
    };

    // 页面加载时初始化数据
    onMounted(() => {
      getMerchants();
    });

    return {
      merchants,
      newMerchant,
      isLoading,
      isSubmitting,
      isApproving,
      addMerchant,
      handleApprove, // 导出审核方法（关键补充）
      formatTime,
    };
  },
};
</script>

<style scoped>
.merchant-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.add-form {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #f9f9f9;
}

.form-group {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex: 1;
  min-width: 200px;
  font-size: 14px;
}

.input:disabled {
  background: #f0f0f0;
  cursor: not-allowed;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.btn:disabled {
  background: #9e9e9e;
  cursor: not-allowed;
}

.btn-primary {
  background: #4caf50;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #45a049;
}

.merchant-list {
  margin-top: 30px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.table th {
  background: #f5f5f5;
  font-weight: bold;
  white-space: nowrap;
  /* 表头不换行 */
}

/* 空状态单元格 */
.empty-cell {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

/* 状态样式 */
.status-pending {
  color: #ff9800;
  font-weight: bold;
}

.status-approved {
  color: #4caf50;
  font-weight: bold;
}

/* 操作列样式 */
.operation-cell {
  white-space: nowrap;
  /* 操作按钮不换行 */
}

.approve-btn {
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s;
}

.approve-btn:hover:not(:disabled) {
  background: #0b7dda;
}

.approve-btn:disabled {
  background: #bbdefb;
  cursor: not-allowed;
}

.approved-text {
  color: #666;
  font-size: 13px;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 40px 0;
  color: #666;
  font-size: 14px;
}
</style>

第 6 步：修改 App.vue

更新 src/App.vue：

<template>
  <div id="app">
    <nav class="navbar">
      <div class="nav-container">
        <h1 class="nav-title">全域生活服务平台</h1>
        <div class="nav-links">
          <router-link to="/merchant" class="nav-link">商家管理</router-link>
          <router-link to="/service" class="nav-link">服务管理</router-link>
          <router-link to="/order" class="nav-link">订单管理</router-link>
        </div>
      </div>
    </nav>

    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: #f5f5f5;
}

.navbar {
  background: #2c3e50;
  color: white;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-title {
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 4px;
  transition: background 0.3s;
}

.nav-link:hover,
.nav-link.router-link-active {
  background: #34495e;
}

.main-content {
  min-height: calc(100vh - 60px);
  padding: 20px;
}
</style>

第 7 步：开发服务管理页面

创建 src/views/Service/index.vue：

<template>
  <div class="service-page">
    <h2>🛎️ 服务管理</h2>

    <!-- 新增服务表单 -->
    <div class="add-form">
      <h3>➕ 新增服务</h3>
      <div class="form-grid">
        <input v-model="newService.name" placeholder="服务名称" class="input" />
        <select v-model="newService.merchant_id" class="input">
          <option value="">选择商家</option>
          <option
            v-for="merchant in merchants"
            :key="merchant.id"
            :value="merchant.id"
          >
            {{ merchant.name }}
          </option>
        </select>
        <input
          v-model="newService.price"
          type="number"
          placeholder="价格"
          class="input"
        />
        <select v-model="newService.category" class="input">
          <option value="">选择分类</option>
          <option value="家政">家政</option>
          <option value="维修">维修</option>
          <option value="保洁">保洁</option>
        </select>
        <input
          v-model="newService.stock"
          type="number"
          placeholder="库存"
          class="input"
        />
        <input
          v-model="newService.image_url"
          placeholder="图片URL"
          class="input"
        />
        <button @click="addService" class="btn btn-primary">添加服务</button>
      </div>
    </div>

    <!-- 服务列表 -->
    <div class="service-list">
      <h3>📋 服务列表</h3>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>服务名称</th>
            <th>商家</th>
            <th>价格</th>
            <th>分类</th>
            <th>库存</th>
            <th>状态</th>
            <th>操作</th>
            <!-- 新增操作列 -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="service in services" :key="service.id">
            <td>{{ service.id }}</td>
            <td>{{ service.name }}</td>
            <td>{{ service.merchant_name }}</td>
            <td>¥{{ service.price }}</td>
            <td>{{ service.category }}</td>
            <td>{{ service.stock }}</td>
            <td>
              <span :class="service.status === 0 ? 'status-off' : 'status-on'">
                {{ service.status === 0 ? "下架" : "上架" }}
              </span>
            </td>
            <td>
              <!-- 上架按钮（下架状态时显示） -->
              <button
                v-if="service.status === 0"
                class="btn btn-publish"
                @click="handlePublish(service.id)"
              >
                上架
              </button>
              <!-- 下架按钮（上架状态时显示） -->
              <button
                v-else
                class="btn btn-unpublish"
                @click="handleUnpublish(service.id)"
              >
                下架
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import serviceAPI from "../../api/service";
import merchantAPI from "../../api/merchant";

export default {
  name: "ServiceView",
  setup() {
    const services = ref([]);
    const merchants = ref([]);
    const newService = ref({
      name: "",
      merchant_id: "",
      price: "",
      category: "",
      stock: "",
      image_url: "",
    });

    // 获取服务列表
    const getServices = async () => {
      try {
        const response = await serviceAPI.getServices();
        services.value = response.data.data;
      } catch (error) {
        alert("获取服务列表失败！");
        console.error(error);
      }
    };

    // 获取商家列表
    const getMerchants = async () => {
      try {
        const response = await merchantAPI.getMerchantList();
        merchants.value = response.data.data;
      } catch (error) {
        alert("获取商家列表失败！");
        console.error(error);
      }
    };

    // 新增服务
    const addService = async () => {
      if (
        !newService.value.name ||
        !newService.value.merchant_id ||
        !newService.value.price
      ) {
        alert("请填写完整信息！");
        return;
      }

      try {
        await serviceAPI.addService(newService.value);
        alert("服务添加成功！");
        newService.value = {
          name: "",
          merchant_id: "",
          price: "",
          category: "",
          stock: "",
          image_url: "",
        };
        getServices();
      } catch (error) {
        alert("添加服务失败！");
        console.error(error);
      }
    };

    // 上架服务（状态更新为1）
    const handlePublish = async (id) => {
      try {
        await serviceAPI.publishService(id);
        alert("服务上架成功！");
        getServices(); // 刷新列表
      } catch (error) {
        alert("上架失败！");
        console.error(error);
      }
    };

    // 下架服务（状态更新为0）
    const handleUnpublish = async (id) => {
      try {
        await serviceAPI.unpublishService(id);
        alert("服务下架成功！");
        getServices(); // 刷新列表
      } catch (error) {
        alert("下架失败！");
        console.error(error);
      }
    };

    onMounted(() => {
      getServices();
      getMerchants();
    });

    return {
      services,
      merchants,
      newService,
      addService,
      handlePublish, // 导出上架方法
      handleUnpublish, // 导出下架方法
    };
  },
};
</script>

<style scoped>
.service-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.add-form {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #f9f9f9;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  align-items: end;
}

.input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background: #4caf50;
  color: white;
  grid-column: 1 / -1;
  justify-self: start;
}

.btn-primary:hover {
  background: #45a049;
}

/* 上架按钮样式 */
.btn-publish {
  background: #2196f3;
  color: white;
}

.btn-publish:hover {
  background: #0b7dda;
}

/* 下架按钮样式 */
.btn-unpublish {
  background: #ff9800;
  color: white;
}

.btn-unpublish:hover {
  background: #e68900;
}

.service-list {
  margin-top: 30px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.table th {
  background: #f5f5f5;
  font-weight: bold;
}

.status-on {
  color: #4caf50;
  font-weight: bold;
}

.status-off {
  color: #f44336;
  font-weight: bold;
}
</style>

第 8 步：开发订单管理页面

创建 src/views/Order/index.vue：

<template>
  <div class="order-page">
    <h2>📦 订单管理</h2>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <h3>筛选条件</h3>
      <div class="filter-group">
        <label>
          <input type="radio" v-model="filterStatus" value="" /> 全部订单
        </label>
        <label>
          <input type="radio" v-model="filterStatus" value="0" /> 待支付
        </label>
        <label>
          <input type="radio" v-model="filterStatus" value="1" /> 已完成
        </label>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <h3>订单列表</h3>
      <table class="table">
        <thead>
          <tr>
            <th>订单ID</th>
            <th>服务名称</th>
            <th>商家</th>
            <th>用户姓名</th>
            <th>用户电话</th>
            <th>价格</th>
            <th>状态</th>
            <th>下单时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orders" :key="order.id">
            <td>{{ order.id }}</td>
            <td>{{ order.service_name }}</td>
            <td>{{ order.merchant_name }}</td>
            <td>{{ order.user_name }}</td>
            <td>{{ order.user_phone }}</td>
            <td>¥{{ order.price }}</td>
            <td>
              <span
                :class="
                  order.status === 0 ? 'status-pending' : 'status-completed'
                "
              >
                {{ order.status === 0 ? "待支付" : "已完成" }}
              </span>
            </td>
            <td>{{ formatTime(order.create_time) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from "vue";
import orderAPI from "../../api/order";

export default {
  name: "OrderView",
  setup() {
    const orders = ref([]);
    const filterStatus = ref("");

    // 获取订单列表
    const getOrders = async (status = "") => {
      try {
        const response = await orderAPI.getOrders(status);
        orders.value = response.data.data;
      } catch (error) {
        alert("获取订单列表失败！");
        console.error(error);
      }
    };

    // 格式化时间
    const formatTime = (timeString) => {
      return new Date(timeString).toLocaleString();
    };

    // 监听筛选条件变化
    watch(filterStatus, (newStatus) => {
      getOrders(newStatus);
    });

    // 页面加载时获取数据
    onMounted(() => {
      getOrders();
    });

    return {
      orders,
      filterStatus,
      formatTime,
    };
  },
};
</script>

<style scoped>
.order-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.filter-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #f9f9f9;
}

.filter-group {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.filter-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.order-list {
  margin-top: 30px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.table th {
  background: #f5f5f5;
  font-weight: bold;
}

.status-pending {
  color: #ff9800;
  font-weight: bold;
}

.status-completed {
  color: #4caf50;
  font-weight: bold;
}
</style>

第 9 步：启动 Web 管理后台

注意此时，还有前后端跨域问题（用 cores 或者 nginx 代理解决）
PS（我会在后续的文章中解决）

1
2

cd D:/life-service/web-admin
npm run serve

访问：http://localhost:8080

📱 阶段四：微信小程序开发（3-4 天）

第 1 步：创建小程序项目

打开微信开发者工具
点击"新建项目"
填写信息：
- 项目名称：生活服务平台
- 目录：选择 D:/life-service/mini-user
- AppID：点击"测试号"
- 后端服务：不使用云服务
点击"新建"

第 2 步：项目结构配置

在小程序项目中创建以下结构：

mini-user/
├── pages/
│   ├── index/（首页）
│   ├── serviceList/（服务列表）
│   ├── orderCreate/（创建订单）
│   └── orderList/（订单列表）
├── utils/
│   └── request.js（请求封装）
├── images/（图片资源）
└── app.js（小程序入口）

第 3 步：封装网络请求

创建 utils/request.js：

const request = (url, method = "GET", data = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: "http://localhost:8080/api" + url,
      method,
      data,
      success: (res) => {
        if (res.data.code === 200) {
          resolve(res.data.data);
        } else {
          reject(res.data.msg);
        }
      },
      fail: (err) => {
        reject("网络请求失败：" + err.errMsg);
      },
    });
  });
};

module.exports = request;

第 4 步：配置小程序页面

修改 app.json：

{
  "pages": [
    "pages/index/index",
    "pages/serviceList/serviceList",
    "pages/orderCreate/orderCreate",
    "pages/orderList/orderList"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2c3e50",
    "navigationBarTitleText": "生活服务平台",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

第 5 步：开发首页

创建 pages/index/index.js：

const request = require("../../utils/request");

Page({
  data: {
    services: [],
    categories: [
      { name: "家政", icon: "🏠", type: "家政" },
      { name: "维修", icon: "🔧", type: "维修" },
      { name: "保洁", icon: "✨", type: "保洁" },
    ],
  },

  onLoad() {
    this.getServices();
  },

  // 获取推荐服务
  async getServices() {
    try {
      const services = await request("/service/list");
      // 只取前4个作为推荐
      this.setData({
        services: services.slice(0, 4),
      });
    } catch (err) {
      wx.showToast({
        title: "加载失败",
        icon: "none",
      });
    }
  },

  // 跳转到服务列表
  toServiceList(e) {
    const type = e.currentTarget.dataset.type;
    wx.navigateTo({
      url: `/pages/serviceList/serviceList?type=${type}`,
    });
  },

  // 跳转到订单列表
  toOrderList() {
    wx.navigateTo({
      url: "/pages/orderList/orderList",
    });
  },
});

创建 pages/index/index.wxml：

<view class="container">
  <!-- 头部 -->
  <view class="header">
    <text class="title">生活服务平台</text>
    <text class="subtitle">便捷生活，一键送达</text>
  </view>

  <!-- 服务分类 -->
  <view class="category-section">
    <view class="section-title">服务分类</view>
    <view class="category-grid">
      <view
        class="category-item"
        wx:for="{{categories}}"
        wx:key="type"
        bindtap="toServiceList"
        data-type="{{item.type}}"
      >
        <text class="category-icon">{{item.icon}}</text>
        <text class="category-name">{{item.name}}</text>
      </view>
    </view>
  </view>

  <!-- 推荐服务 -->
  <view class="recommend-section">
    <view class="section-header">
      <text class="section-title">推荐服务</text>
      <text class="more" bindtap="toServiceList" data-type="">查看更多</text>
    </view>
    <view class="service-grid">
      <view
        class="service-card"
        wx:for="{{services}}"
        wx:key="id"
        bindtap="toOrderCreate"
        data-service="{{item}}"
      >
        <image class="service-image" src="{{item.image_url || '/images/default-service.png'}}"></image>
        <view class="service-info">
          <text class="service-name">{{item.name}}</text>
          <text class="service-merchant">{{item.merchant_name}}</text>
          <view class="service-bottom">
            <text class="service-price">¥{{item.price}}</text>
            <text class="service-category">{{item.category}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部导航 -->
  <view class="bottom-nav">
    <view class="nav-item" bindtap="toServiceList" data-type="">
      <text class="nav-icon">🔍</text>
      <text class="nav-text">全部服务</text>
    </view>
    <view class="nav-item" bindtap="toOrderList">
      <text class="nav-icon">📦</text>
      <text class="nav-text">我的订单</text>
    </view>
  </view>
</view>

创建 pages/index/index.wxss：

.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  text-align: center;
  margin: 40rpx 0 60rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 分类区域 */
.category-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 30rpx;
  display: block;
}

.category-grid {
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon {
  font-size: 60rpx;
  margin-bottom: 15rpx;
}

.category-name {
  font-size: 28rpx;
  color: #2c3e50;
}

/* 推荐服务 */
.recommend-section {
  margin-bottom: 100rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.more {
  font-size: 28rpx;
  color: #3498db;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.service-card {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.service-image {
  width: 100%;
  height: 200rpx;
  background: #ecf0f1;
}

.service-info {
  padding: 20rpx;
}

.service-name {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10rpx;
}

.service-merchant {
  display: block;
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 15rpx;
}

.service-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-price {
  color: #e74c3c;
  font-size: 28rpx;
  font-weight: bold;
}

.service-category {
  font-size: 24rpx;
  color: #3498db;
  background: #ecf0f1;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  padding: 20rpx;
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #2c3e50;
}

第 6 步：开发服务列表页面

创建 pages/serviceList/serviceList.js：

const request = require("../../utils/request");

Page({
  data: {
    services: [],
    categories: ["全部", "家政", "维修", "保洁"],
    activeCategory: "全部",
    searchKeyword: "",
  },

  onLoad(options) {
    if (options.type) {
      this.setData({ activeCategory: options.type });
    }
    this.getServices();
  },

  // 获取服务列表
  async getServices() {
    const { activeCategory, searchKeyword } = this.data;

    try {
      let category = activeCategory === "全部" ? "" : activeCategory;
      let services = await request("/service/list", "GET", { category });

      // 前端搜索过滤
      if (searchKeyword) {
        services = services.filter(
          (service) =>
            service.name.includes(searchKeyword) ||
            service.merchant_name.includes(searchKeyword)
        );
      }

      this.setData({ services });
    } catch (err) {
      wx.showToast({
        title: "加载失败",
        icon: "none",
      });
    }
  },

  // 切换分类
  switchCategory(e) {
    const category = e.currentTarget.dataset.category;
    this.setData({
      activeCategory: category,
      searchKeyword: "",
    });
    this.getServices();
  },

  // 搜索输入
  onSearchInput(e) {
    this.setData({ searchKeyword: e.detail.value });
  },

  // 执行搜索
  onSearch() {
    this.getServices();
  },

  // 跳转到下单页面（修改后）
  toOrderCreate(e) {
    const service = e.currentTarget.dataset.service;
    wx.navigateTo({
      url: `/pages/orderCreate/orderCreate?service=${encodeURIComponent(
        JSON.stringify(service)
      )}`,
    });
  },
});

创建 pages/serviceList/serviceList.wxml：

<view class="container">
  <!-- 搜索框 -->
  <view class="search-box">
    <input class="search-input" placeholder="搜索服务或商家..." value="{{searchKeyword}}" bindinput="onSearchInput" />
    <button class="search-btn" bindtap="onSearch">搜索</button>
  </view>

  <!-- 分类筛选 -->
  <scroll-view class="category-scroll" scroll-x>
    <view class="category-list">
      <view class="category-item {{activeCategory === item ? 'active' : ''}}" wx:for="{{categories}}" wx:key="*this" bindtap="switchCategory" data-category="{{item}}">
        {{item}}
      </view>
    </view>
  </scroll-view>

  <!-- 服务列表 -->
  <view class="service-list">
    <view class="service-item" wx:for="{{services}}" wx:key="id" bindtap="toOrderCreate" data-service="{{item}}">
      <image class="service-image" src="{{item.image_url || '/images/default-service.png'}}"></image>
      <view class="service-content">
        <view class="service-header">
          <text class="service-name">{{item.name}}</text>
          <text class="service-price">¥{{item.price}}</text>
        </view>
        <view class="service-merchant">{{item.merchant_name}}</view>
        <view class="service-footer">
          <text class="service-category">{{item.category}}</text>
          <text class="service-stock">库存: {{item.stock}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 空状态 -->
  <view class="empty-state" wx:if="{{services.length === 0}}">
    <text class="empty-text">暂无服务</text>
  </view>
</view>

创建 pages/serviceList/serviceList.wxss：

.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

/* 搜索框 */
.search-box {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.search-input {
  flex: 1;
  background: white;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.search-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

/* 分类筛选 */
.category-scroll {
  white-space: nowrap;
  margin-bottom: 30rpx;
}

.category-list {
  display: inline-flex;
  gap: 20rpx;
}

.category-item {
  display: inline-block;
  padding: 15rpx 30rpx;
  background: white;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
}

.category-item.active {
  background: #3498db;
  color: white;
}

/* 服务列表 */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.service-item {
  display: flex;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.service-image {
  width: 200rpx;
  height: 200rpx;
  background: #ecf0f1;
}

.service-content {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.service-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  flex: 1;
  margin-right: 20rpx;
}

.service-price {
  font-size: 32rpx;
  color: #e74c3c;
  font-weight: bold;
}

.service-merchant {
  font-size: 26rpx;
  color: #7f8c8d;
  margin-bottom: 15rpx;
}

.service-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-category {
  font-size: 24rpx;
  color: #3498db;
  background: #ecf0f1;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.service-stock {
  font-size: 24rpx;
  color: #95a5a6;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 32rpx;
  color: #bdc3c7;
}

第 7 步：开发创建订单页面

创建 pages/orderCreate/orderCreate.js：

const request = require("../../utils/request");

Page({
  data: {
    service: null,
    userInfo: {
      name: "",
      phone: "",
    },
  },

  onLoad(options) {
    if (options.service) {
      try {
        const serviceStr = decodeURIComponent(options.service);
        const service = JSON.parse(serviceStr);
        this.setData({ service });
      } catch (err) {
        // 3. 捕获解析错误，避免页面崩溃并提示用户
        console.error("服务信息解析失败：", err);
        wx.showToast({
          title: "服务信息错误",
          icon: "none",
          duration: 2000,
        });
        // 解析失败时返回上一页
        setTimeout(() => {
          wx.navigateBack();
        }, 2000);
      }
    } else {
      // 没有传递 service 参数时的提示
      wx.showToast({
        title: "未获取到服务信息",
        icon: "none",
        duration: 2000,
      });
      setTimeout(() => {
        wx.navigateBack();
      }, 2000);
    }
  },

  // 输入用户姓名
  onNameInput(e) {
    this.setData({
      "userInfo.name": e.detail.value,
    });
  },

  // 输入用户电话
  onPhoneInput(e) {
    this.setData({
      "userInfo.phone": e.detail.value,
    });
  },

  // 提交订单
  async submitOrder() {
    const { service, userInfo } = this.data;

    if (!userInfo.name.trim()) {
      wx.showToast({
        title: "请输入姓名",
        icon: "none",
      });
      return;
    }

    if (!userInfo.phone.trim()) {
      wx.showToast({
        title: "请输入手机号",
        icon: "none",
      });
      return;
    }

    // 简单的手机号验证
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(userInfo.phone)) {
      wx.showToast({
        title: "请输入正确的手机号",
        icon: "none",
      });
      return;
    }

    try {
      wx.showLoading({
        title: "提交中...",
      });

      await request("/order/create", "POST", {
        service_id: service.id,
        user_name: userInfo.name,
        user_phone: userInfo.phone,
      });

      wx.hideLoading();

      wx.showToast({
        title: "订单创建成功！",
        icon: "success",
        duration: 2000,
      });

      // 跳转到订单列表
      setTimeout(() => {
        wx.navigateTo({
          url: "/pages/orderList/orderList",
        });
      }, 2000);
    } catch (err) {
      wx.hideLoading();
      wx.showToast({
        title: "订单创建失败",
        icon: "none",
      });
    }
  },
});

创建 pages/orderCreate/orderCreate.wxml：

<view class="container">
	<!-- 服务信息 -->
	<view class="service-card" wx:if="{{service}}">
		<view class="card-title">服务信息</view>
		<view class="service-info">
			<image class="service-image" src="{{service.image_url || '/images/default-service.png'}}"></image>
			<view class="service-details">
				<text class="service-name">{{service.name}}</text>
				<text class="service-merchant">{{service.merchant_name}}</text>
				<text class="service-price">¥{{service.price}}</text>
			</view>
		</view>
	</view>

	<!-- 用户信息表单 -->
	<view class="form-card">
		<view class="card-title">填写订单信息</view>

		<view class="form-item">
			<text class="form-label">姓名</text>
			<input class="form-input" placeholder="请输入您的姓名" value="{{userInfo.name}}" bindinput="onNameInput" />
		</view>

		<view class="form-item">
			<text class="form-label">手机号</text>
			<input class="form-input" placeholder="请输入您的手机号" type="number" value="{{userInfo.phone}}" bindinput="onPhoneInput" />
		</view>
	</view>

	<!-- 提交按钮 -->
	<view class="submit-section">
		<view class="price-display">
			<text class="price-label">总计：</text>
			<text class="price-amount">¥{{service ? service.price : '0'}}</text>
		</view>
		<button class="submit-btn" bindtap="submitOrder">立即下单</button>
	</view>
</view>

创建 pages/orderCreate/orderCreate.wxss：

.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 200rpx;
}

/* 卡片样式 */
.service-card,
.form-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 30rpx;
}

/* 服务信息 */
.service-info {
  display: flex;
  gap: 30rpx;
}

.service-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  background: #ecf0f1;
}

.service-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

.service-merchant {
  font-size: 26rpx;
  color: #7f8c8d;
}

.service-price {
  font-size: 36rpx;
  color: #e74c3c;
  font-weight: bold;
}

/* 表单样式 */
.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #ecf0f1;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 30rpx;
  color: #2c3e50;
  width: 150rpx;
}

.form-input {
  flex: 1;
  font-size: 30rpx;
  color: #2c3e50;
}

/* 提交区域 */
.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
}

.price-display {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 28rpx;
  color: #2c3e50;
  margin-right: 10rpx;
}

.price-amount {
  font-size: 40rpx;
  color: #e74c3c;
  font-weight: bold;
}

.submit-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 25rpx 60rpx;
  font-size: 32rpx;
  font-weight: bold;
}

第 8 步：开发订单列表页面

创建 pages/orderList/orderList.js：

const request = require("../../utils/request");

Page({
  data: {
    orders: [],
  },

  onLoad() {
    this.getOrders();
  },

  onShow() {
    this.getOrders();
  },

  // 获取订单列表
  async getOrders() {
    try {
      const orders = await request("/order/list");
      this.setData({ orders });
    } catch (err) {
      wx.showToast({
        title: "加载失败",
        icon: "none",
      });
    }
  },

  // 格式化时间
  formatTime(timeString) {
    const date = new Date(timeString);
    return `${date.getFullYear()}-${(date.getMonth() + 1)
      .toString()
      .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
      .getHours()
      .toString()
      .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
  },
});

创建 pages/orderList/orderList.wxml：

<view class="container">
	<view class="header">
		<text class="title">我的订单</text>
	</view>

	<view class="order-list">
		<view class="order-item" wx:for="{{orders}}" wx:key="id">
			<view class="order-header">
				<text class="order-no">订单号: {{item.id}}</text>
				<text class="order-status {{item.status === 0 ? 'pending' : 'completed'}}">
					{{item.status === 0 ? '待支付' : '已完成'}}
				</text>
			</view>

			<view class="order-content">
				<view class="service-info">
					<text class="service-name">{{item.service_name}}</text>
					<text class="merchant-name">{{item.merchant_name}}</text>
				</view>
				<text class="service-price">¥{{item.price}}</text>
			</view>

			<view class="order-footer">
				<text class="user-info">{{item.user_name}} · {{item.user_phone}}</text>
				<text class="order-time">{{formatTime(item.create_time)}}</text>
			</view>
		</view>
	</view>

	<view class="empty-state" wx:if="{{orders.length === 0}}">
		<text class="empty-text">暂无订单</text>
		<text class="empty-desc">去首页看看有什么服务吧</text>
	</view>
</view>

创建 pages/orderList/orderList.wxss：

.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin: 40rpx 0;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-item {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #ecf0f1;
}

.order-no {
  font-size: 26rpx;
  color: #7f8c8d;
}

.order-status {
  font-size: 26rpx;
  font-weight: bold;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.order-status.pending {
  background: #fff3cd;
  color: #856404;
}

.order-status.completed {
  background: #d4edda;
  color: #155724;
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.service-info {
  flex: 1;
}

.service-name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10rpx;
}

.merchant-name {
  font-size: 26rpx;
  color: #7f8c8d;
}

.service-price {
  font-size: 36rpx;
  color: #e74c3c;
  font-weight: bold;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #ecf0f1;
}

.user-info {
  font-size: 26rpx;
  color: #2c3e50;
}

.order-time {
  font-size: 24rpx;
  color: #95a5a6;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  display: block;
  font-size: 32rpx;
  color: #bdc3c7;
  margin-bottom: 20rpx;
}

.empty-desc {
  display: block;
  font-size: 28rpx;
  color: #bdc3c7;
}

第 9 步：配置小程序入口

修改 app.js：

App({
  onLaunch() {
    console.log("小程序启动");
  },

  globalData: {
    userInfo: null,
  },
});

🧪 阶段五：集成测试与上线

第 1 步：完整流程测试

测试流程：

启动所有服务：

# 终端1 - 后端
cd D:/life-service/server
npm run dev

# 终端2 - 前端
cd D:/life-service/web-admin
npm run serve

在 DataGrip 中监控数据：
- 实时查看表数据变化
- 验证外键关系
测试完整业务流程：
- Web 端：添加商家 → 添加服务
- 小程序：浏览服务 → 下单
- Web 端：查看订单

第 2 步：代码优化

后端优化：

添加参数验证
错误处理完善
添加日志记录

前端优化：

加载状态提示
错误边界处理
表单验证加强

第 3 步：部署准备

整理项目文档：

创建 README.md：

# 全域生活服务平台

## 项目介绍

一个完整的生活服务平台，包含 Web 管理后台和微信小程序。

## 技术栈

- 后端：Node.js + Express + MySQL
- 前端：Vue 3 + Vue Router
- 小程序：微信小程序原生开发
- 数据库：MySQL 8.0
- 工具：DataGrip

## 启动步骤

### 后端

1. cd server
2. npm install
3. 修改 db/index.js 中的数据库密码
4. npm run dev

### Web 管理后台

1. cd web-admin
2. npm install
3. npm run serve

### 小程序

1. 微信开发者工具中打开 mini-user 文件夹
2. 点击预览

第 4 步：Git 版本控制

# 初始化Git
cd D:/life-service
git init

# 添加所有文件
git add .

# 提交代码
git commit -m "初始提交：完成全域生活服务平台开发"

# 推送到GitHub/Gitee
git remote add origin 你的仓库地址
git push -u origin main

后续的更新统管理

1
2
3

git init
git add .
git commit -m "update"

🎉 项目完成！

你已掌握的技能：

✅ 全栈开发：前端 + 后端 + 数据库
✅ 多端开发：Web + 微信小程序
✅ 数据库设计：MySQL 表设计与关系
✅ API 开发：RESTful 接口设计
✅ 工具使用：DataGrip 数据库管理

面试亮点：

“独立完成从数据库设计到前后端开发的全流程”
“掌握 Vue + Node.js + MySQL 技术栈整合”
“具备多端开发能力（Web + 小程序）”
“使用 DataGrip 进行专业的数据库管理”

下一步建议：

功能扩展：添加用户登录、支付功能
性能优化：添加缓存、分页查询
部署上线：购买云服务器部署项目
持续学习：学习 TypeScript、Docker 等进阶技术

web开发 on acye's blog

CSS小案例，讲布局（Flex+Grid）

从新闻页面 CSS+成果图看布局设计：实用 Flex 与结构化布局技巧

一、布局基础：全局样式与容器搭建（成果图整体框架）

对应成果图的效果：

二、核心布局：Flex 的灵活运用（成果图主次分栏+内容排列）

1. 主次分栏布局（成果图左+右区域）

对应成果图的效果：

2. 单图新闻布局（成果图“2024 高考倒计时”那条）

对应成果图的效果：

3. 多图新闻布局（成果图第三条新闻的三个图）

对应成果图的效果：

4. 热搜榜单布局（成果图右侧列表）

对应成果图的效果：

三、布局设计的核心思路总结（结合成果图）

如何将vue cli 写的前端文件转换为vite（详细板）

从 Vue CLI 迁移到 Vite 的完整指南

📋 迁移概览

🗺️ 迁移路线图

步骤 1：备份原有项目

步骤 2：删除旧配置文件

步骤 3：清理项目依赖

📝 详细步骤说明

1. 修改 package.json

2. 配置文件迁移

3. 环境变量处理

4. 请求配置文件修改

5. HTML 文件处理

6. 静态资源引用方式

7. 路径别名配置

🔧 常见问题解决

问题 1：CommonJS 模块报错

问题 2：process 变量报错

问题 3：CSS 预处理器错误

📦 完整迁移脚本

📊 迁移前后对比

🎯 迁移后的优势

📚 总结

校园OJ开发之布局逻辑

写给小白的校园 OJ 开发详解

前言：为什么需要这些配置？

二、地基建设：main.js

三、房子外壳：App.vue

四、房间布局：MainLayout.vue

五、导航系统：路由配置

1. 路由规则（routes.js）

2. 路由守卫（index.js）

六、权限控制逻辑

1. 路由元信息（meta 字段）

2. 用户角色判断

七、开发流程总结

步骤 1：环境配置

步骤 2：项目初始化

步骤 3：布局设计

步骤 4：路由配置

步骤 5：页面开发

步骤 6：权限集成

常见问题解答

Q1：为什么需要路由守卫？

Q2：懒加载（() => import()）有什么好处？

Q3：为什么 token 要存 store 而不是 localStorage？

Q4：如何新增一个页面？

最后的小贴士

校园OJ项目的详细开发(登录界面)

手把手教你理解校园 OJ 登录系统：从输入密码到进入首页

一、前言：登录系统的“三件套”

二、核心模块详解

1. Token 管理系统 - auth.js（你的电子门禁卡）

2. 通信专员 - request.js（你的专属信使）

3. 用户服务接口 - user.js（能办的四件事）

4. 用户管理中心 - user.js (store/modules)（楼长的登记簿）

5. 快捷访问门 - getters.js（快速查询通道）

6. Vuex 总仓库 - index.js（所有登记簿的集合）

7. 登录页面 - AppLogin.vue（前台接待处）

三、完整登录流程（故事版）

第一幕：来到登录页面

第二幕：填写信息

第三幕：点击登录按钮

第四幕：信使出发

第五幕：服务器验证

1. Token 管理系统 - `auth.js`（你的电子门禁卡）

2. 通信专员 - `request.js`（你的专属信使）

3. 用户服务接口 - `user.js`（能办的四件事）

4. 用户管理中心 - `user.js (store/modules)`（楼长的登记簿）

5. 快捷访问门 - `getters.js`（快速查询通道）

6. Vuex 总仓库 - `index.js`（所有登记簿的集合）

7. 登录页面 - `AppLogin.vue`（前台接待处）

`src/utils/mockData.js`

`src/api/admin.js` (更新版本)

`src/components/admin/ProblemManagement.vue` (关键部分更新)

`src/components/admin/ProblemForm.vue` (关键部分更新)

1. 方案 1：使用`cors`中间件（便捷高效）