基礎crud項目（前端部分+總結）

本人根據自己對前端微不足道的理解和 AI 老師的指導下，艱難地完成了基礎crud代碼的全棧開發，算是自己的第一個 Java 項目，對此做個簡單總結。

后端部分

在前后端分離開發中，前端負責頁面交互與數據展示，后端提供接口支持。本文基于 Vue3+Element Plus 構建用戶管理前端頁面，實現新增、編輯、刪除、搜索核心功能，配合后端 RESTful 接口完成聯調，并解決開發中常見的報錯問題，適合新手快速上手。

技術棧

JavaSE，MySQL，Spring，SpringMVC，MyBatis，SpringBoot，Vue3，Element Plus。

原理

后端原理

依賴注入：通過 @Autowired 實現 Service 與 Dao、Controller 與 Service 層的解耦；
MyBatis 數據映射：開啟 map-underscore-to-camel-case 自動轉換數據庫下劃線字段（如 user_id）與 Java 駝峰屬性（如 userId），通過注解式 SQL 實現 CRUD；
RESTful 接口規范：用 @GetMapping/{id}/@PostMapping/@PutMapping/{userId}/@DeleteMapping/{id} 對應查、增、改、刪操作，路徑傳主鍵 + 請求體傳數據，確保語義清晰。
整合 Lombok 簡化 Pojo 類代碼。

前端原理
Vue3 響應式：通過ref/reactive定義響應式數據（如userList/formData），數據變化時自動更新頁面（如表格、表單）。
Element Plus 組件化：復用表格（el-table）、表單（el-form）、對話框（el-dialog）等組件，快速搭建交互界面，減少原生 DOM 操作。
Fetch 異步請求：通過原生Fetch API調用后端 RESTful 接口，實現 “數據請求 - 響應 - 頁面更新” 閉環，配合async/await簡化異步代碼。

功能

后端功能

提供用戶數據的完整 CRUD 接口：
查：按 ID 查單個用戶（/users/{id}）、查所有用戶（/users）；
增：新增用戶（/users，請求體傳待增字段）；
改：按 ID 更新用戶信息（/users，請求體傳待更字段）；
刪：按 ID 刪除用戶（/users/{id}）。

前端功能（交互 + 數據展示）
數據展示：用el-table展示用戶列表，加載時顯示動畫，搜索空結果時提示 “未找到用戶”。
新增用戶：點擊 “新增” 打開對話框，表單驗證（ID 必為數字、用戶名 / 密碼必填），提交后刷新列表。
編輯用戶：點擊 “編輯” 填充當前用戶數據，ID 禁用不可改，提交后更新列表。
搜索用戶：輸入 ID 回車 / 點擊搜索，查詢單個用戶；清空輸入框顯示所有用戶。
刪除用戶：點擊 “刪除” 彈出確認框，確認后刪除并刷新列表。

前端代碼

<template><div class="user-page"><h1>用戶管理</h1><!-- 操作區 --><div class="operation-bar"><el-input v-model="searchId"placeholder="輸入ID搜索"style="width: 200px"clearable@keyup.enter="handleSearch" /><el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button><el-button type="success" icon="Plus" @click="openAddDialog">新增用戶</el-button></div><!-- 用戶表格 --><el-table :data="userList"borderstyle="width: 100%":loading="loading"><el-table-column prop="userId" label="ID" width="80" align="center" /><el-table-column prop="userName" label="用戶名" width="150" align="center" /><el-table-column prop="password" label="密碼" align="center" /><el-table-column label="操作" width="240" align="center"><template #default="scope"><el-button type="primary"size="small"icon="Edit"@click="openEditDialog(scope.row)"style="margin-right: 5px">編輯</el-button><el-button type="danger"size="small"icon="Delete"@click="handleDelete(scope.row.userId)">刪除</el-button></template></el-table-column></el-table><!-- 新增用戶對話框 --><el-dialog title="新增用戶"v-model="addDialogVisible"width="300px"><el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="80px"><el-form-item label="用戶ID" prop="userId"><el-input v-model.number="addForm.userId" placeholder="請輸入ID" /></el-form-item><el-form-item label="用戶名" prop="userName"><el-input v-model="addForm.userName" /></el-form-item><el-form-item label="密碼" prop="password"><el-input v-model="addForm.password" type="password" /></el-form-item></el-form><template #footer><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="handleAddSubmit">確認新增</el-button></template></el-dialog><!-- 編輯用戶對話框 --><el-dialog title="編輯用戶"v-model="editDialogVisible"width="300px"><el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="80px"><!-- 編輯時ID不可修改，僅展示 --><el-form-item label="用戶ID"><el-input v-model="editForm.userId" disabled /></el-form-item><el-form-item label="用戶名" prop="userName"><el-input v-model="editForm.userName" /></el-form-item><el-form-item label="密碼" prop="password"><el-input v-model="editForm.password" type="password" /></el-form-item></el-form><template #footer><el-button @click="editDialogVisible = false">取消</el-button><el-button type="primary" @click="handleEditSubmit">確認編輯</el-button></template></el-dialog><!-- 刪除確認對話框 --><el-dialog title="確認刪除"v-model="deleteDialogVisible"width="300px"><p>確定要刪除ID為 {{ deleteId }} 的用戶嗎？</p><template #footer><el-button @click="deleteDialogVisible = false">取消</el-button><el-button type="danger" @click="confirmDelete">確認刪除</el-button></template></el-dialog></div>
</template><script setup>import { ref, reactive, onMounted } from 'vue'import { ElMessage } from 'element-plus'import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'// 基礎數據const userList = ref([])const loading = ref(false)const searchId = ref('')// 新增相關const addDialogVisible = ref(false)          // 新增對話框顯示狀態const addFormRef = ref(null)                 // 新增表單引用const addForm = reactive({                   // 新增表單數據userId: 0,userName: '',password: ''})const addRules = reactive({                  // 新增表單驗證規則userId: [{ required: true, message: '請輸入用戶ID', trigger: 'blur' },{ type: 'number', message: 'ID必須是數字', trigger: 'blur' }],userName: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }]})// 編輯相關const editDialogVisible = ref(false)         // 編輯對話框顯示狀態const editFormRef = ref(null)                // 編輯表單引用const editForm = reactive({                  // 編輯表單數據userId: '',userName: '',password: ''})const editRules = reactive({                 // 編輯表單驗證規則（無需驗證ID）userName: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }]})// 刪除相關const deleteDialogVisible = ref(false)const deleteId = ref(0)// 后端接口地址const API_URL = 'http://localhost:8081/users'// 1. 獲取所有用戶const getAllUsers = async () => {loading.value = truetry {const res = await fetch(API_URL)if (!res.ok) throw new Error('獲取失敗')userList.value = await res.json()} catch (err) {console.error('獲取用戶失敗:', err)ElMessage.error('獲取用戶失敗')} finally {loading.value = false}}// 2. 搜索用戶const handleSearch = async () => {if (!searchId.value) {getAllUsers()return}loading.value = truetry {const res = await fetch(`${API_URL}/${searchId.value}`)if (res.status === 404) {userList.value = []ElMessage.warning('用戶不存在')return}if (!res.ok) throw new Error('搜索失敗')userList.value = [await res.json()]} catch (err) {console.error('搜索失敗:', err)ElMessage.error('搜索失敗')} finally {loading.value = false}}// 3. 打開新增對話框const openAddDialog = () => {// 重置新增表單addForm.userId = ''addForm.userName = ''addForm.password = ''addDialogVisible.value = true}// 4. 提交新增表單const handleAddSubmit = async () => {if (!addFormRef.value) returntry {// 驗證新增表單await addFormRef.value.validate()// 發送新增請求const res = await fetch(API_URL, {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(addForm)  // 提交新增表單數據})if (!res.ok) throw new Error('新增失敗')ElMessage.success('新增成功')addDialogVisible.value = false  // 關閉新增對話框getAllUsers()                   // 刷新列表} catch (err) {console.error('新增失敗:', err)ElMessage.error(err.message || '新增失敗')}}// 5. 打開編輯對話框const openEditDialog = (user) => {// 填充編輯表單editForm.userId = user.userIdeditForm.userName = user.userNameeditForm.password = user.passwordeditDialogVisible.value = true}// 6. 提交編輯表單const handleEditSubmit = async () => {if (!editFormRef.value) returntry {// 驗證編輯表單await editFormRef.value.validate()// 發送編輯請求（URL包含原ID）const res = await fetch(API_URL, {method: 'PUT',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(editForm)  // 提交編輯表單數據})if (!res.ok) throw new Error('編輯失敗')ElMessage.success('編輯成功')editDialogVisible.value = false  // 關閉編輯對話框getAllUsers()                    // 刷新列表} catch (err) {console.error('編輯失敗:', err)ElMessage.error(err.message || '編輯失敗')}}// 7. 刪除用戶const handleDelete = (id) => {deleteId.value = iddeleteDialogVisible.value = true}// 確認刪除const confirmDelete = async () => {try {const res = await fetch(`${API_URL}/${deleteId.value}`, {method: 'DELETE'})if (!res.ok) throw new Error('刪除失敗')ElMessage.success('刪除成功')deleteDialogVisible.value = falsegetAllUsers()} catch (err) {console.error('刪除失敗:', err)ElMessage.error('刪除失敗')}}// 初始化onMounted(() => {getAllUsers()})
</script><style scoped>.user-page {padding: 20px;max-width: 1000px;margin: 0 auto;}.operation-bar {margin-bottom: 15px;display: flex;gap: 10px;align-items: center;}h1 {color: #333;font-size: 20px;margin-bottom: 20px;}
</style>

后端代碼已展示在文前博客鏈接中。

問題和挑戰

1.輸入數字 ID 仍提示 “ID 必須是數字”
普通 v-model 會將輸入值轉為字符串（如輸入 101，實際是 "101"），而驗證規則 type: 'number' 校驗的是數據類型，不是格式。
解決方案：用 v-model.number 自動將輸入字符串轉為數字，如果是字符串則轉為NaN，符合要求。

2.編輯功能報 “Failed to fetch”
編輯請求 URL 錯誤（如 http://localhost:8081/users/undefined），可能是 editForm.userId 未正確賦值；也可能是后端 PUT 接口路徑與前端不一致。
解決方案：
打印 URL 確認正確性：在 handleEditSubmit 中添加 console.log；修改前端接口路徑。

3.前端頁面中文亂碼
這個確實花了很長時間，反復部署各種配置，跟著 AI 和各路大佬的博客調了好久，最終發現還是經典的 encoding 問題。
附上博客

4.后端 mybatis-plus 與 springboot 版本沖突
試了好多版本都不能正常運行，最后選擇放棄阿里的 mybatis-plus，使用 mybatis。畢竟差距確實不大，進行復雜 Dao 層開發時肯定還是要自己手搓，就當練習基礎語法了。

5.Linux相關
因為 MySQL 老師講企業開發中都是在 Linux 環境下進行部署等操作的，于是跟著 AI 一步一步在 Linux 虛擬機中安裝 MySQL 和 Redis（本項目沒用到Redis），期間有不少問題是自己根本不熟悉 Linux 造成的，后來特地學習了 Linux 相關知識，計劃日后繼續學習 JVM。

6.“白學”問題
這一點見仁見智，但是部分課程確實白學。我最開始學2021年黑馬的 Javaweb，確實好多東西已經用不上了，連老師也是提前準備或對著 ppt 敲的。不過很多人認為學習了 springboot 就沒必要學習 SSM 全家桶，這一點我持否認態度。畢竟我一開始也是這樣想的時候，直接去看 springboot 根本看不懂，連URL都不知道是什么。學習確實需要腳踏實地，不能妄想一步登天。