主要參考的博客為：

從零搭建SpringBoot3+Vue3前后端分離項目基座，中小項目可用_springboot+vue3-CSDN博客

記錄一下自己的實現(xiàn)過程。

最終實現(xiàn)效果如下：

后端環(huán)境搭建參考博客【Springboot3+vue3】從零到一搭建Springboot3+vue3前后端分離項目之后端環(huán)境搭建

2 前端環(huán)境搭建

2.1 環(huán)境準備

• node安裝
• vscode安裝

2.2 創(chuàng)建Vue3項目

在將要存放vue3項目的路徑打開cmd，使用以下命令創(chuàng)建項目

npm init vue@latest

此時項目創(chuàng)建完成，vscode打開項目目錄，在資源目錄空白右鍵，打開終端

執(zhí)行命令 cnpm install安裝依賴，等待安裝完成后執(zhí)行 cnpm run dev 運行項目

訪問路徑http://localhost:5173可訪問項目

在終端ctrl c 可停止運行項目
項目描述如圖

2.3 項目搭建準備

項目中使用組合式API

刪除components下的所有文件，將App.vue文件內(nèi)容修改為如下

<script setup></script><template><router-view></router-view>
</template><style scoped></style>

2.4 安裝Element Plus

• 安裝 cnpm install element-plus --save

• cnpm install @element-plus/icons-vue

  

2.5 安裝axios

• cnpm install axios

2.5.1 配置（創(chuàng)建實例，配置請求，響應(yīng)攔截器）

在src目錄下新建utils，并在utils下創(chuàng)建request.js進行axios配置

src/utils/request.js

// 請求配置import axios from "axios";// 定義公共前綴，創(chuàng)建請求實例
// const baseUrl = "http://localhost:8080";
const baseURL = '/api/';
const instance = axios.create({baseURL})import { ElMessage } from "element-plus"
import { useTokenStore } from "@/stores/token.js"
// 配置請求攔截器
instance.interceptors.request.use((config) => {// 請求前回調(diào)// 添加tokenconst tokenStore = useTokenStore()// 判斷有無tokenif (tokenStore.token) {config.headers.Authorization = tokenStore.token}return config},(err) => {// 請求錯誤的回調(diào)Promise.reject(err)}
)import router from "@/router";
// 添加響應(yīng)攔截器
instance.interceptors.response.use(result => {// 判斷業(yè)務(wù)狀態(tài)碼if (result.data.code === 1) {return result.data;}// 操作失敗ElMessage.error(result.data.message ? result.data.message : '服務(wù)異常')// 異步操作的狀態(tài)轉(zhuǎn)換為失敗return Promise.reject(result.data)},err => {// 判斷響應(yīng)狀態(tài)碼， 401為未登錄，提示登錄并跳轉(zhuǎn)到登錄頁面if (err.response.status === 401) {ElMessage.error('請先登錄')router.push('/login')} else {ElMessage.error('服務(wù)異常')}// 異步操作的狀態(tài)轉(zhuǎn)換為失敗return Promise.reject(err)  }
)export default instance

2.5.2 配置跨域

在vite.config.js中加入如下內(nèi)容

  server: {proxy: {'/api': {   // 獲取路徑中包含了/api的請求target: 'http://localhost:9999',        // 服務(wù)端地址changeOrigin: true, // 修改源rewrite:(path) => path.replace(/^\/api/, '')   // api 替換為 ''}}}

2.6 Vue Router安裝使用

• 安裝 cnpm install vue-router@4

• 在src/router/index.js中創(chuàng)建路由器并導出。index.js文件內(nèi)容如下

  // 導入vue-router
  import {createRouter, createWebHistory} from 'vue-router'// 導入組件
  import LoginVue from '@/views/Login.vue'
  import LayoutVue from '@/views/Layout.vue'
  import UserList from '@/views/user/UserList.vue'
  import EditPassword from '@/views/user/EditPassword.vue'
  import DisplayUser from '@/views/user/DisplayUser.vue'// 定義路由關(guān)系
  const routes = [{path: '/login', component: LoginVue},{path: '/', component: LayoutVue, redirect: '', children: [{path: '/user/userlist', name: "/user/userlist", component: UserList, meta: {title: "用戶列表"},},{path: '/user/editpassword', name: "/user/editpassword", component: EditPassword, meta: {title: "修改密碼"}},{path: '/user/displayuser', name: "/user/displayuser", component: DisplayUser, meta: {title: "個人信息"}}]}
  ]// 創(chuàng)建路由器 
  const router = createRouter({history: createWebHistory(),routes: routes
  })export default router
  

• 在vue實例中使用vue-router,修改main.js文件內(nèi)容為如下

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router'
import { createPinia } from 'pinia'
const pinia = createPinia()import zhLocale from 'element-plus/es/locale/lang/zh-cn'createApp(App).use(router).use(ElementPlus, {locale: zhLocale}).use(pinia).mount('#app')

• 在app.vue中聲明router-view標簽，展示組件內(nèi)容。app.vue文件內(nèi)容如下

  
  <script setup></script><template><router-view></router-view>
  </template><style scoped></style>
  

2.7 Pinia狀態(tài)管理庫

• 安裝 cnpm install pinia

• 安裝persist cnpm install pinia-persistedstate-plugin

• main.js中使用persist

  import { createPersistedState } from 'pinia-persistedstate-plugin'
  const persist = createPersistedState()
  pinia.use(persist)
  

  main.js內(nèi)容整體如下：

  import './assets/main.css'import { createApp } from 'vue'
  import App from './App.vue'
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  import router from '@/router'
  import { createPinia } from 'pinia'
  const pinia = createPinia()
  import { createPersistedState } from 'pinia-persistedstate-plugin'
  const persist = createPersistedState()
  pinia.use(persist)
  import zhLocale from 'element-plus/es/locale/lang/zh-cn'createApp(App).use(router).use(ElementPlus, {locale: zhLocale}).use(pinia).mount('#app')

• src/stores/下定義token.js和userInfo.js來存儲token和用戶相關(guān)信息

token.js

// 定義 store
import { defineStore } from "pinia"
import {ref} from 'vue'
/*第一個參數(shù):名字,唯一性第二個參數(shù):函數(shù),函數(shù)的內(nèi)部可以定義狀態(tài)的所有內(nèi)容返回值: 函數(shù)*/
export const useTokenStore = defineStore('token', () => {// 響應(yīng)式變量const token = ref('')// 修改token值函數(shù)const setToken = (newToken) => {token.value = newToken}// 移除token值函數(shù)const removeToke = () => {token.value = ''}return {token, setToken, removeToke}
}, 
{persist: true   // 持久化存儲
}
)

userInfo.js

import { defineStore } from "pinia"
import {ref} from 'vue'const useUserInfoStore = defineStore('userInfo', () => {const info = ref({})const setInfo = (newInfo) => {info.value = newInfo}const removeInfo = () => {info.value = {}}return {info, setInfo, removeInfo}
},
{persist: true
}
)export default useUserInfoStore;

2.8 搭建管理頁面基礎(chǔ)框架

2.8.1 在src/api/下創(chuàng)建user.js，封裝請求方法

import request from "@/utils/request.js"// 登錄接口調(diào)用函數(shù)
export const userLoginService = (loginData) => {return request.post('/user/login', loginData)
}// 獲取當前登錄用戶信息
export const currentUserService = () => {return request.get('/user/currentUser')
}// 獲取所有用戶信息
export const allUserService = () => {return request.get('/user/userList')
}// 分頁查詢
export const pageListService = (pageParam) => {return request.get('/user/pageList', {params: pageParam})
}// 新增用戶
export const addUserService = (addData) => {return request.post('/user/add', addData)
}// 根據(jù)id獲取用戶信息
export const getUserById = (id) => {return request.get('/user/getuserById', {params: id})
}// 修改用戶信息
export const updateUserService = (data) => {return request.put('/user/update', data)
}// 刪除用戶
export const deleteByIdService = (id) => {console.log("deleteRequestid:", id)return request.delete('/user/delete/' + id)
}

2.8.2 登陸頁面

• 安裝 cnpm install sass -D

在src下創(chuàng)建vuew項目，用于存放vue頁面組件

Header.vue

<template><div class="container"><!-- div left --><div class="left"><!-- 折疊按鈕--><div @click="toggleCollapse()"><el-icon size="24" v-show="!isMenuOpen"><Fold /></el-icon><el-icon size="24" v-show="isMenuOpen"><Expand /></el-icon></div><!-- 面包屑 --><div><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item><template v-for="(item, index) in breadList"><el-breadcrumb-itemv-if="item.name":key="index":to="item.path">{{ item.meta.title }}</el-breadcrumb-item></template></el-breadcrumb></div></div><!-- div right --><div class="right"><div><span >賬號：{{userData.loginName}}</span></div><div><el-avatar> {{userData.name}} </el-avatar></div><div><el-dropdown><el-icon size="24"><MoreFilled /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item><el-icon><UserFilled /></el-icon>個人信息</el-dropdown-item><el-dropdown-item><el-icon><EditPen /></el-icon>修改密碼</el-dropdown-item><el-dropdown-item><el-icon><ArrowLeft /></el-icon>退出登錄</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div></div>
</template><script setup>import {Fold,Expand,MoreFilled,EditPen,ArrowLeft,UserFilled} from '@element-plus/icons-vue'import {ref, defineEmits, watch} from 'vue'// 面包屑import { useRouter,useRoute } from 'vue-router'let router = useRouter()let route = useRoute()let breadList = ref()let getMatched=()=>{console.log("route.matched:",route.matched);consolebreadList.value = route.matched.filter(item => item.meta && item.meta.title);}getMatched()watch(() => route.path, (newValue, oldValue) => { //監(jiān)聽路由路徑是否發(fā)生變化，之后更改面包屑console.log("======")breadList.value = route.matched.filter(item => item.meta && item.meta.title);console.log("breadList.value", breadList.value)})import useUserInfoStore from '@/stores/userinfo.js'const userInfoStore = useUserInfoStore();// 用戶數(shù)據(jù)模型let userData = ref({id: '',name: '',loginName: ''})import {currentUserService} from '@/api/user.js'// 獲取登錄用戶信息const getUser = async () => {let result = await currentUserService()// console.log(result)userData.value = result.data;userInfoStore.setInfo(result.data)// console.log("userData:",userData)}getUser()// 折疊按鈕處理const emits = defineEmits(["parentClick"])const isMenuOpen = ref(false)const toggleCollapse = () => {isMenuOpen.value = !isMenuOpen.valueconsole.log(isMenuOpen.value)emits("parentClick", isMenuOpen.value)}</script><style lang="scss" scope>.container {  overflow: auto; /* 清除浮動影響 */  height: 48px;padding: 10px; /* 內(nèi)邊距 */  border-bottom: 2px solid; /* 設(shè)置下邊框?qū)挾群蜆邮?*/  border-bottom-color: #F5F5F5; /* 設(shè)置下邊框顏色為紅色 */  background-color: #FFFFFF;   }  .left {  height: 48px;float: left;   display: flex;align-items: center; /* 垂直居中子項 */  justify-content: center; /* 水平居中子項（如果需要）*/ }  .left > div {  padding-right: 10px; /* 設(shè)置直接子元素的 padding */  }.right {  float: right; display: flex; align-items: center; /* 垂直居中子項 */  justify-content: center; /* 水平居中子項（如果需要）*/   }.right > div {  padding-right: 10px; /* 設(shè)置直接子元素的 padding */  }
</style>

Layout.vue

<script setup>
import LeftLayout from './LeftLayout.vue'
import Header from './Header.vue'
import MainView from './MainView.vue'import {ref} from 'vue'
const isCollapse = ref(false)
const parentClick = (isCollapseValue) => {isCollapse.value = isCollapseValue;console.log(isCollapse.value)
}
</script><template><div class="common-layout"><el-container><LeftLayout :isCollapse='isCollapse' /><el-container><el-header style="padding: 0"><Header @parentClick='parentClick'/></el-header><el-main style="padding: 16px 8px 6px 8px"><MainView/></el-main><el-footer>后臺 ?2024 Created by buzhisuoyun</el-footer></el-container></el-container></div>
</template><style scoped>.el-footer {display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666;height: 38px;padding: 0;background-color: #FFFFFF; }
</style>

LeftLayout.vue

<template><el-row class="tac"><el-col ><el-menudefault-active="2"class="el-menu-vertical-demo":collapse="isCollapse":router="true"><!-- 標題 --><div class="containerdiv">  <img src="../assets/favicon.ico" alt="Your Image" class="image">  <span class="text">后臺管理</span>  </div><!-- 菜單 --><el-sub-menu index="1"><template #title><el-icon><Share /></el-icon><span>API管理</span></template><el-menu-item index="/api/apilist">API列表</el-menu-item><el-menu-item index="1-2">item two</el-menu-item><el-menu-item index="1-3">item three</el-menu-item><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item><el-sub-menu index="5"><template #title><el-icon><UserFilled /></el-icon><span>用戶管理</span></template><el-menu-item index="/user/userlist">用戶列表</el-menu-item><el-menu-item index="/user/displayuser">個人信息</el-menu-item><el-menu-item index="/user/editpassword">修改密碼</el-menu-item></el-sub-menu></el-menu></el-col></el-row></template><script lang="ts" setup>import {Document,Menu as IconMenu,Location,Share,UserFilled,Setting,} from '@element-plus/icons-vue'import {ref, defineProps} from 'vue'type Props = {isCollapse: boolean}defineProps<Props>()</script><style scoped>.el-menu-vertical-demo {height: 100vh;}.el-menu-item {min-width: 0;}.containerdiv {  /* 你可以設(shè)置容器的樣式，例如寬度、高度、背景色等 */  /* width: 300px; /* 示例寬度 */  height: 48px;  padding: 10px; /* 內(nèi)邊距 */  border-bottom: 2px solid; /* 設(shè)置下邊框?qū)挾群蜆邮?*/  border-bottom-color: #F5F5F5; /* 設(shè)置下邊框顏色為紅色 */  }  .image {  display: inline-block;  vertical-align: middle; /* 圖片與文字垂直居中對齊 */  margin-right: 6px; /* 圖片右邊距，可選 */  width: 20px;}  .text {  display: inline-block;  vertical-align: middle; /* 文字與圖片垂直居中對齊 */  font-weight: bold; /* 加粗文字 */  font-size: 14px;}</style>

Login.vue

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
//定義數(shù)據(jù)模型
const registerData = ref({loginName: 'admin',password:'admin',rePassword: ''
})// 定義表單組件的引用
const ruleFormRef = ref(null)//定義表單校驗規(guī)則
const rules = ref({loginName: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 5, max: 16, message: '長度為5~16位非空字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ min: 5, max: 16, 2: '長度為5~16位非空字符', trigger: 'blur' }]
})//綁定數(shù)據(jù),復用注冊表單的數(shù)據(jù)模型
//表單數(shù)據(jù)校驗
//登錄函數(shù)
import {userLoginService} from '@/api/user.js'
import {useTokenStore} from '@/stores/token.js'
import {useRouter} from 'vue-router'
const router = useRouter()
const tokenStore = useTokenStore();
const login = async ()=>{// 校驗表單if (!ruleFormRef.value) returnconsole.log("校驗")await ruleFormRef.value.validate(async (valid) => {if (valid) {console.log("校驗成功")// 調(diào)用接口,完成登錄let result = await userLoginService(registerData.value);/* if(result.code===0){alert(result.msg? result.msg : '登錄成功')}else{alert('登錄失敗')} *///alert(result.msg? result.msg : '登錄成功')// ElMessage.success(result.msg ? result.msg : '登錄成功')ElMessage.success(result.msg ? '登錄成功': result.msg) //提示信息//token存儲到pinia中tokenStore.setToken(result.data)//跳轉(zhuǎn)到首頁 路由完成跳轉(zhuǎn)router.push('/')} else {console.log("校驗失敗")}})
}//定義函數(shù),清空數(shù)據(jù)模型的數(shù)據(jù)
const clearRegisterData = ()=>{registerData.value={loginName: '',password:'',rePassword:''}
}
</script><template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 登錄表單 --><el-form ref="ruleFormRef" :model=registerData size="large" autocomplete="off" :rules="rules"><el-form-item><h1>登錄</h1></el-form-item><el-form-item prop="loginName"><el-input :prefix-icon="User" placeholder="請輸入用戶名" v-model="registerData.loginName"></el-input></el-form-item><el-form-item prop="password"><el-input name="password" :prefix-icon="Lock" type="password" placeholder="請輸入密碼" v-model="registerData.password"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>記住我</el-checkbox><!-- <el-link type="primary" :underline="false">忘記密碼？</el-link> --></div></el-form-item><!-- 登錄按鈕 --><el-form-item><el-button class="button" type="primary" auto-insert-space @click="login">登錄</el-button></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
/* 樣式 */
.login-page {height: 100vh;background-color: #fff;.bg {background: url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

MainView.vue

<template><div class="app-main"><!-- <transition name="fade-transfrom" mode="out-in"><router-view></router-view></transition> --><router-view v-slot="{ Component }"><transition><component :is="Component" /></transition></router-view></div>
</template><style lang="scss" scope>.app-main{width:100%;height:100%;background-color: #FFFFFF; }
</style>

user/DisplayUser.vue

<template><div><el-form :model="form" ><el-form-item label="賬號" ><el-input v-model="form.loginName" :disabled="!isAdd"/></el-form-item><el-form-item label="姓名" ><el-input v-model="form.name" :disabled="!isAdd"/></el-form-item><el-form-item label="電話" ><el-input v-model="form.phone" /></el-form-item><el-form-item label="性別"><el-radio-group v-model="form.sex" :disabled="!isAdd"><el-radio value="0" checked>女</el-radio><el-radio value="1">男</el-radio></el-radio-group></el-form-item></el-form><div class="dialog-footer"><el-button @click="onDialogFormCancel">取消</el-button><el-button type="primary" @click="onDialogFormConfirm">確認</el-button></div></div>
</template>
<script setup>import {ref} from 'vue'const form = ref({loginName: '',name: '',phone: '',sex: '0'})// 重置對話框表單const restForm = () => {form.value = {sex: '0'}title.value = '添加用戶'isAdd.value = true}const isAdd = ref(true)// 提交事件
const onDialogFormConfirm = async () => {}
// 取消事件
const onDialogFormCancel = () => {}
</script>

EditPassword.vue

<template><div> 修改密碼</div>
</template>

UserList.vue

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { allUserService, pageListService, addUserService, getUserById, updateUserService, deleteByIdService } from "@/api/user.js";
import { ElMessage, ElMessageBox  } from "element-plus"// 表單數(shù)據(jù)
const searchData = ref({name: "",
});
// 表格數(shù)據(jù)
const tableData = ref([]);/** 分頁 */
// 分頁數(shù)據(jù)
const pageData = reactive({currentPage: 1,pageSize: 10,total: 20,
})
// 分頁插件，每頁條數(shù)發(fā)生改變時
const handleSizeChange = (val) => {pageData.pageSize = valgetPageList()
}
// 分頁插件， 當頁碼發(fā)生改變時
const handleCurrentChange = (val) => {pageData.currentPage = valgetPageList()
}// // 查詢所有用戶
// const getAllUser = async () => {
//     const result = await allUserService()
//     tableData.value = result.data
// }
// getAllUser()// 分頁查詢
const getPageList = async () => {const params = {currentPage: pageData.currentPage,pageSize: pageData.pageSize,name: searchData.value.name,}//console.log("params:", params);const result = await pageListService(params);pageData.total = result.data.total;tableData.value = result.data.items;//console.log("tableData:", tableData);
}
getPageList()// 頭部表單函數(shù)定義
const onSearch = () => {getPageList()
}
// 重置查詢表單
const onRest = () => {searchData.value = {}getPageList()
}/** 添加修改對話框表單 */
const form = ref({loginName: '',name: '',phone: '',sex: '0'
})
// 重置對話框表單
const restForm = () => {form.value = {sex: '0'}title.value = '添加用戶'isAdd.value = true
}
const title = ref('添加用戶')
const isAdd = ref(true)
const dialogFormVisible = ref(false)// 提交對話框表單按鈕事件
const onDialogFormConfirm = async () => {//1.驗證表單if (!ruleFormRef.value) return//2.提交表單await ruleFormRef.value.validate((valid) => {if (valid) {    // 校驗成功confirm()}})}
// 取消對話表單框按鈕事件
const onDialogFormCancel = () => {console.log("cancel......")dialogFormVisible.value = falserestForm()
}// 添加按鈕事件
const onAdd = () => {// 打開對話框title.value = '添加用戶'isAdd.value = truedialogFormVisible.value = true
}// 修改按鈕事件
const handleEdit = async (index, row) => {title.value = '修改用戶'isAdd.value = false// 回顯數(shù)據(jù)console.log("row:", row)const id = {id: row.id}let result = await getUserById(id)form.value = result.data// 控制只讀屬性dialogFormVisible.value = true
}// 刪除按鈕事件
const handleDelete = (index, row) => {ElMessageBox.confirm('確認要刪除嗎？','提示',{confirmButtonText: '確認',cancelButtonText: '取消',type: 'warning',}).then( async () => {// 刪除console.log("delete=====")let result = await deleteByIdService(row.id)ElMessage.success(result.msg ? result.msg : '刪除成功')getPageList()}).catch(() => {})
}// 提交表單
const confirm = async () => {if(isAdd.value) {// 添加try {   // 添加成功let result = await addUserService(form.value)ElMessage.success(result.msg ? result.msg : '添加成功')// 關(guān)閉彈窗，清空表單dialogFormVisible.value = falserestForm()getPageList()} catch (error) {}} else {console.log("update=======")//修改try {   // 修改成功let result = await updateUserService(form.value)ElMessage.success(result.msg ? result.msg : '修改成功')// 關(guān)閉彈窗，清空表單dialogFormVisible.value = falserestForm()getPageList()} catch (error) {}}}/** 表單校驗 */
const ruleFormRef = ref(null)   // 定義表單組件的引用
// 定義表單校驗規(guī)則
const rules = ref({loginName: [{ required: true, message: '請輸入賬號名', trigger: 'blur' }],name: [{ required: true, message: '請輸入姓名', trigger: 'blur' }],phone: [{ required: true, trigger: 'blur',  message: "請輸入正確手機號", validator: checkPhone }]
})// 手機號自定義校驗
var checkPhone = (rule, value, callback) => {if (!value) {return callback(new Error('手機號不能為空'))} else {const reg = /^1[3|4|5|7|8][0-9]\d{8}$/console.log(reg.test(value))if (reg.test(value)) {callback()} else {return callback(new Error('請輸入正確的手機號'))}}
}</script><template><div><!-- 工具欄 --><div><el-row><el-col :span="8"><!-- 操作按鈕 --><div class="operation-div"><el-button type="primary" @click="onAdd">添加</el-button></div></el-col><el-col :span="16"><!-- 條件查詢 --><div class="search-div"><el-form :inline="true" :model="searchData" class="demo-form-inline"><el-form-item label="用戶名："><el-inputv-model="searchData.name"placeholder="請輸入用戶名"clearable/></el-form-item><el-form-item><el-button type="primary" @click="onSearch">查詢</el-button><el-button type="primary" @click="onRest">重置</el-button></el-form-item></el-form></div></el-col></el-row></div><!-- 表格內(nèi)容 --><div><el-table:data="tableData"borderstripestyle="width: 100%":header-cell-style="{ background: '#ECF5FF' }"><el-table-column type="index" :index="indexMethod" /><el-table-column prop="loginName" label="賬號" /><el-table-column prop="name" label="姓名" /><el-table-column prop="phone" label="聯(lián)系電話" /><el-table-column prop="sex" label="性別"><template #default="scope"><el-tag :type="scope.row.sex === '0'? '' : 'success'" disable-transitions>{{ scope.row.sex === '1' ? "男" : "女" }}</el-tag></template></el-table-column><el-table-column label="操作"><template #default="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table><!-- 分頁 --><div style="margin-top: 20px"><el-paginationv-model:current-page="pageData.currentPage"v-model:page-size="pageData.pageSize":page-sizes="[10, 20, 50, 100]"backgroundlayout="->, jumper, total, sizes, prev, pager, next":total="pageData.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></div></div><!-- 添加修改對話框表單--><el-dialog v-model="dialogFormVisible" :title="title" width="500" draggable overflow @close='onDialogFormCancel'><el-form :model="form" ref="ruleFormRef" :rules="rules"><el-form-item label="賬號" prop="loginName"><el-input v-model="form.loginName" :disabled="!isAdd"/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="form.name" :disabled="!isAdd"/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="form.phone" /></el-form-item><el-form-item label="性別"><el-radio-group v-model="form.sex" :disabled="!isAdd"><el-radio value="0" checked>女</el-radio><el-radio value="1">男</el-radio></el-radio-group></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="onDialogFormCancel">取消</el-button><el-button type="primary" @click="onDialogFormConfirm">確認</el-button></div></template></el-dialog>
</template><style scoped>
.operation-div {width: 100%;text-align: left;padding-left: 10px;padding-top: 10px;
}.search-div {width: 100%;text-align: right;padding-top: 10px;
}
</style>

2.9 運行展示

2.9.1 啟動前端

• cnpm run dev

進入http://localhost:5173

2.9.2 啟動后端

運行后端項目

2.9.3 測試

登錄界面，使用之前swagger測試時添加的用戶登錄即可。