## 前言本章节我们将切换到 **前端开发** 的视角。我们将使用 `frontend-student` 项目作为练习环境，该项目已经搭建好了基础框架（Vue 3 + Vite + Element Plus），但 **登录** 和 **商品管理** 模块的代码已被清空。你的任务是：**手动实现这两个模块的前端逻辑，并与后端接口进行对接！** **后端接口文档地址**：`http://localhost:8080/doc.html` (请确保后端项目已启动) --- ## 一、前端环境准备 ### 1.1 安装 Node.js 前端开发离不开 Node.js 环境。请确保你已安装 Node.js (建议 v16+)。验证命令： ```bash node -v npm -v ``` ### 1.2 启动项目进入 `frontend-student` 目录，安装依赖并启动： ```bash # 进入目录 cd frontend-student # 安装依赖 npm install # 启动项目 npm run dev ``` 启动成功后，浏览器打开 `http://localhost:5173`。你会看到一个空白的登录页。 --- ## 二、实战：登录模块 (`Login.vue`) **目标**：实现用户登录界面，调用后端 `/api/login` 接口，登录成功后跳转到首页。 **文件位置**：`src/views/Login.vue` ### 2.1 编写 HTML 结构 (Template) 使用 Element Plus 的表单组件。 ```html ``` ### 2.2 编写 JS 逻辑 (Script) 使用 Vue 3 的 `setup` 语法糖和 `axios` 请求。 ```javascript ``` ### 2.3 添加样式 (Style) ```css ``` --- ## 三、实战：商品管理 (`Product.vue`) **目标**：实现商品的增删改查 (CRUD)。为了让大家更好地理解，我们将这个大功能**拆解为 5 个小步骤**，逐一实现。 **文件位置**：`src/views/Product.vue` ### 3.1 第一步：基础列表展示 (Read) 先实现最简单的功能：从后端获取数据，展示在表格中。不考虑搜索和分页。 #### 3.1.1 编写 HTML (Template) 只保留表格部分，使用 `el-table` 组件。 ```html ``` #### 3.1.2 编写 JS (Script) 定义数据并调用 `/api/products` 接口。 ```javascript ``` ### 3.2 第二步：添加搜索和分页数据量大了需要分页，且需要根据名称搜索。 #### 3.2.1 修改 HTML 在表格上方添加 **搜索框**，在表格下方添加 **分页组件**。 ```html ``` #### 3.2.2 修改 JS 添加分页参数和搜索参数，并更新 `fetchData` 方法。 ```javascript // ... 之前的 import ... // 新增响应式数据 const searchName = ref('') const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) // 总条数 const fetchData = async () => { loading.value = true try { // 传入参数 const res = await request.get('/products', { params: { page: currentPage.value, size: pageSize.value, name: searchName.value } }) tableData.value = res.data.data.records total.value = res.data.data.total // 更新总条数 } finally { loading.value = false } } // ... onMounted ... ``` 记得添加样式： ```css .toolbar { margin-bottom: 20px; display: flex; } .pagination { margin-top: 20px; display: flex; justify-content: flex-end; } ``` ### 3.3 第三步：添加“新建商品”功能 (Create) 通过弹窗 (`el-dialog`) 来实现商品的添加。 #### 3.3.1 修改 HTML 1. 在工具栏添加“新建”按钮。 2. 添加弹窗组件。 ```html

``` #### 3.3.2 修改 JS 添加弹窗控制、表单数据、分类列表获取、提交逻辑。 ```javascript import { ref, reactive, onMounted } from 'vue' import { ElMessage } from 'element-plus' // ... 之前的代码 ... const dialogVisible = ref(false) const categories = ref([]) // 分类下拉数据 const form = reactive({ name: '', categoryId: null, price: 0, stock: 0 }) // 获取分类列表 (用于下拉框) const fetchCategories = async () => { const res = await request.get('/categories') categories.value = res.data.data } // 打开新建弹窗 const openCreateDialog = () => { // 重置表单 form.name = '' form.categoryId = null form.price = 0 form.stock = 0 dialogVisible.value = true // 如果分类数据为空，则请求一次 if (categories.value.length === 0) { fetchCategories() } } // 提交新建表单 const submitCreateForm = async () => { try { // 调用后端 POST 接口 await request.post('/products', form) ElMessage.success('添加成功') dialogVisible.value = false fetchData() // 刷新列表 } catch (error) { console.error(error) } } ``` ### 3.4 第四步：添加“编辑商品”功能 (Update) 复用同一个弹窗，但需要区分是“新建”还是“编辑”。 #### 3.4.1 修改 HTML 1. 在表格中添加“操作”列（包含编辑按钮）。 2. 修改弹窗标题，动态显示“新建”或“编辑”。 3. **注意**：我们将之前的“新建商品”按钮的点击事件也修改为 `openDialog`。 ```html

``` #### 3.4.2 修改 JS 增加 `id` 字段，并合并新建和编辑的逻辑。我们将之前的 `openCreateDialog` 和 `submitCreateForm` 改造为通用的 `openDialog` 和 `submitForm`。 ```javascript // 1. 修改 form 定义，增加 id 字段 const form = reactive({ id: null, // 新增 name: '', categoryId: null, price: 0, stock: 0 }) // 2. 定义通用的打开弹窗方法 (替换原有的 openCreateDialog) const openDialog = (row = null) => { if (row) { // 编辑模式：回显数据 Object.assign(form, row) } else { // 新建模式：重置表单 form.id = null form.name = '' form.categoryId = null form.price = 0 form.stock = 0 } dialogVisible.value = true if (categories.value.length === 0) { fetchCategories() } } // 3. 定义通用的提交方法 (替换原有的 submitCreateForm) const submitForm = async () => { try { if (form.id) { // 有ID，说明是编辑 -> PUT await request.put('/products', form) } else { // 无ID，说明是新建 -> POST await request.post('/products', form) } ElMessage.success('操作成功') dialogVisible.value = false fetchData() // 刷新列表 } catch (error) { console.error(error) } } ``` ### 3.5 第五步：添加“删除”功能 (Delete) 最后完善删除逻辑。 #### 3.5.1 修改 HTML 在操作列添加“删除”按钮，使用 `el-popconfirm` 二次确认。 ```html ``` #### 3.5.2 修改 JS 添加删除方法。 ```javascript const handleDelete = async (id) => { try { await request.delete(`/products/${id}`) ElMessage.success('删除成功') fetchData() // 刷新列表 } catch (error) { console.error(error) } } ``` --- ## 四、总结通过本章节的练习，你应该掌握了： 1. **Vue 3 组合式 API** (`ref`, `reactive`, `onMounted`) 的基本使用。 2. **Element Plus** 常用组件 (`el-table`, `el-form`, `el-dialog`) 的使用。 3. **Axios** 前后端数据交互（GET, POST, PUT, DELETE）。前端开发的本质就是：**获取数据 -> 渲染页面 -> 响应交互 -> 提交数据**。希望你能通过这个案例举一反三！

进销存系统登录

07_前端开发基础_Vue3实战