• 报告期次：第1次 ｜ 报告日期：2026-10-08 ｜ 项目组号：第3组 ｜ 项目名称：在线购物系统

• 已完成工作：前端技术选型预研：方案对比后确定 Vue 3 技术栈（Vite / Router / Pinia / Axios / Element Plus），完成页面规划、可复现的环境搭建步骤与学习笔记
• 成果物：前端技术选型说明 / 学习笔记

• 项目名称：在线购物系统
• 项目组号：第 3 组
• 负责人（完成人）：范与恒
• 版本：v1
• 日期：2026-10-08

• 支撑需求规格说明书中的全部页面：买家端 4 类页面（免注册）与卖家端 4 类页面（登录后后台）。
• 团队以 Java / HTML 基础为主，要求框架学习曲线平缓、生态成熟、中文资料丰富。
• 仅做 Web 端，不做 App / 小程序；目标浏览器为 Chrome、Edge 最近两个大版本。
• 迭代 2 内必须产出可运行的前端骨架，并与后端并行联调。

结论：选择 Vue 3。 原生方案在"排队、状态机、口令查询"这类交互页面下维护成本会快速上升，排除；React 同样能胜任，但团队上手更慢，迭代 2 时间内风险更大。

1. Vue 模板语法与 HTML 接近，配合 Element Plus，登录、发布商品、意向人列表等页面可快速成型。
2. Pinia 是 Vue 官方状态方案，登录态存取逻辑简单，与组合式 API 风格一致。
3. Vite 启动与热更新快，开发效率高；生产构建基于 Rollup，产物可直接部署。
4. Element Plus 的 el-form 自带规则校验，需求中的必填、手机号格式、价格校验在前端即可完成第一层拦截（后端仍须二次校验）。
5. Vue 默认对插值做 HTML 转义，商品名称 / 描述默认不存在 XSS 注入问题（不使用 v-html）。

本章节说明我在选型过程中实际动手做了什么，而非照搬官方文档。所有验证均在本地完成，可复现。

• 用 npm create vite@latest 创建 Vue 3 工程，确认 Vite 5 在 Node 18 环境下可正常启动，开发服务器热更新延迟 < 1s。
• 安装 vue-router@4 pinia axios element-plus，确认四者版本兼容，无 peer dependency 冲突。
• 验证 npm run build 可正常产出 dist 目录，初始包体积约 140KB（gzip 后）。

• 用 Element Plus 的 el-form + el-form-item 实现了「姓名 + 电话」表单，配置必填规则与手机号正则（/^1\d{10}$/）。
• 实际验证：空提交触发必填提示、输入非 11 位数字触发格式提示、正确输入后校验通过。
• 结论：需求中 US-03 / US-04 的表单校验可完全由前端第一层拦截，无需后端往返。

• 配置 /seller/admin 为 requiresAuth: true，用 router.beforeEach 判断 Pinia 中的 loggedIn 状态。
• 实际验证：未登录直接访问 /seller/admin 自动跳转到 /seller/login；登录后可正常进入。
• 结论：卖家后台的访问控制在前端即可实现，与后端会话配合。

• 封装 Axios 实例，统一 baseURL: '/api'，响应拦截器处理 401 跳转登录。
• 在 vite.config.js 中配置 /api 代理到 http://127.0.0.1:8000，用一个 mock 接口验证代理转发正常，无跨域问题。

• Vue 3 + Vite + Element Plus 的组合能覆盖本项目全部前端需求，开发体验顺畅，包体积可接受。
• 上述 Demo 代码已作为骨架工程的基础，迭代 2 将直接在此基础上扩展真实页面。

onlineshop-web/
├── index.html
├── vite.config.js
├── package.json
└── src/
    ├── main.js                入口：挂载 Router、Pinia、Element Plus
    ├── App.vue
    ├── api/                   接口按模块封装
    │   ├── seller.js          登录、改密码
    │   ├── product.js         发布商品、查状态、历史
    │   └── intent.js          提交意向、查位次、改信息、撤销
    ├── router/index.js        路由表与登录守卫
    ├── stores/seller.js       卖家登录态
    ├── utils/http.js          Axios 实例与拦截器
    ├── components/            公共组件：ProductCard、StatusTag、CodeBox
    └── views/
        ├── buyer/             Home、BuyForm、Done、Query
        └── seller/            Login、Admin、Publish、History

• ref：包装基本类型，模板中直接用，脚本中通过 .value 取值。
• reactive：包装对象；computed 派生值；watch 监听变化。
• 组件通信用 props 接收、emit 抛出事件；<script setup> 下用 defineProps / defineEmits 声明。

import { createRouter, createWebHistory } from 'vue-router'
import { useSellerStore } from '@/stores/seller'

const routes = [
  { path: '/', component: () => import('@/views/buyer/Home.vue') },
  { path: '/buy', component: () => import('@/views/buyer/BuyForm.vue') },
  { path: '/done/:code', component: () => import('@/views/buyer/Done.vue') },
  { path: '/query', component: () => import('@/views/buyer/Query.vue') },
  { path: '/seller/login', component: () => import('@/views/seller/Login.vue') },
  {
    path: '/seller/admin',
    component: () => import('@/views/seller/Admin.vue'),
    meta: { requiresAuth: true },
  },
]

const router = createRouter({ history: createWebHistory(), routes })

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !useSellerStore().loggedIn) {
    return '/seller/login'
  }
})

export default router

import { defineStore } from 'pinia'

export const useSellerStore = defineStore('seller', {
  state: () => ({ loggedIn: false, username: '' }),
  actions: {
    setLogin(username) {
      this.loggedIn = true
      this.username = username
    },
    logout() {
      this.loggedIn = false
      this.username = ''
    },
  },
})

登录以后端会话 Cookie 为准，Pinia 仅镜像状态；刷新页面时先调用 /api/seller/me 校验，避免状态丢失。

import axios from 'axios'

const http = axios.create({ baseURL: '/api', timeout: 8000 })

http.interceptors.response.use(
  (res) => res.data,
  (err) => {
    if (err.response?.status === 401) {
      location.href = '/seller/login'
    }
    return Promise.reject(err)
  }
)

export default http

<el-form ref="formRef" :model="form" :rules="rules">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name" placeholder="请填写姓名" />
  </el-form-item>
  <el-form-item label="电话" prop="phone">
    <el-input v-model="form.phone" placeholder="请填写 11 位手机号" />
  </el-form-item>
  <el-button type="primary" @click="submit">提交购买意向</el-button>
</el-form>

const form = { name: '', phone: '' }
const rules = {
  name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请填写联系电话', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '请输入 11 位手机号', trigger: 'blur' },
  ],
}

export default {
  server: {
    proxy: {
      '/api': 'http://127.0.0.1:8000',
    },
  },
}

前端请求 /api/... 时由 Vite 转发到后端，开发期不存在跨域问题。

##### 1. 确认 Node 版本 >= 18
node -v

##### 2. 使用 Vite 脚手架创建工程
npm create vite@latest onlineshop-web -- --template vue
cd onlineshop-web

##### 3. 安装依赖与配套库
npm install
npm install vue-router@4 pinia axios element-plus

##### 4. 启动开发服务器
npm run dev

##### 5. 生产构建，产物在 dist/
npm run build

1. 可运行的前端骨架工程（路由、目录、Axios 封装齐全）。
2. 卖家登录页：表单、错误提示、登录成功跳转后台。
3. 发布商品页：必填校验、价格校验、单件在售时的提示。
4. 配合叶文锦完成上述页面的手工测试与缺陷修复。

• Vue 3 官方文档：https://cn.vuejs.org/
• Vite 官方文档：https://vitejs.cn/
• Vue Router：https://router.vuejs.org/zh/
• Pinia：https://pinia.vuejs.org/zh/
• Element Plus：https://element-plus.org/zh-CN/
• Axios：https://axios-http.com/

（评审后填写）