{"id":109806,"date":"2026-09-24T22:34:10","date_gmt":"2026-09-24T14:34:10","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/109806.html"},"modified":"2026-09-24T22:34:10","modified_gmt":"2026-09-24T14:34:10","slug":"%e7%ac%ac49%e8%af%be-%e5%89%8d%e5%90%8e%e7%ab%af%e8%81%94%e8%b0%83","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/109806.html","title":{"rendered":"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03"},"content":{"rendered":"

\u7b2c 49 \u8bfe：\u524d\u540e\u7aef\u8054\u8c03<\/h2>\n

\u672c\u8bfe\u76ee\u6807：\u642d\u5efaVue.js\u524d\u7aef\u9879\u76ee，\u914d\u7f6eAxios\u4e0e\u540e\u7aef\u8054\u8c03，\u5b9e\u73b0\u767b\u5f55\u9875\u9762\u548cCRUD\u9875\u9762\u3002<\/p>\n

\n

\u4e00\u3001\u6982\u5ff5\u8bb2\u89e3<\/h3>\n

1.1 \u524d\u540e\u7aef\u5206\u79bb\u67b6\u6784<\/h4>\n

\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u524d\u7aef(Vue) \u2502 HTTP \u2502 \u540e\u7aef(Java) \u2502
\n\u2502 \u7aef\u53e3:5173 \u2502 <\u2500\u2500\u2500\u2500\u2500> \u2502 \u7aef\u53e3:8080 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502 \u2502
\n \u2502 1. \u767b\u5f55\u8bf7\u6c42 \u2502
\n \u2502 POST \/api\/auth\/login \u2502
\n \u2502 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500>\u2502
\n \u2502 \u2502
\n \u2502 2. \u8fd4\u56deToken \u2502
\n \u2502 <\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502
\n \u2502 \u2502
\n \u2502 3. \u643a\u5e26Token\u8bf7\u6c42 \u2502
\n \u2502 GET \/api\/users \u2502
\n \u2502 Header: Authorization\u2502
\n \u2502 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500>\u2502
\n \u2502 \u2502
\n \u2502 4. \u8fd4\u56de\u6570\u636e \u2502
\n \u2502 <\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502<\/p>\n

1.2 \u5f00\u53d1\u73af\u5883\u914d\u7f6e<\/h4>\n

\u5f00\u53d1\u9636\u6bb5：
\n\u524d\u7aef(5173) \u2500\u2500proxy\u2500\u2500> \u540e\u7aef(8080)
\n\u4f7f\u7528Vite\u4ee3\u7406\u89e3\u51b3\u8de8\u57df<\/p>\n

\u751f\u4ea7\u9636\u6bb5：
\n\u6d4f\u89c8\u5668 \u2500\u2500> Nginx \u2500\u2500> \u9759\u6001\u6587\u4ef6(\u524d\u7aef)
\n \u2500\u2500> Nginx \u2500\u2500> API\u53cd\u5411\u4ee3\u7406(\u540e\u7aef)<\/p>\n

1.3 API\u5bf9\u63a5\u6d41\u7a0b<\/h4>\n

1. \u540e\u7aef\u5b9a\u4e49API\u63a5\u53e3 \u2192 Swagger\/\u624b\u5199\u6587\u6863
\n2. \u524d\u7aef\u5c01\u88c5API\u8c03\u7528 \u2192 Axios\u5c01\u88c5
\n3. \u524d\u7aef\u9875\u9762\u5f00\u53d1 \u2192 \u8c03\u7528API\u83b7\u53d6\u6570\u636e
\n4. \u8054\u8c03\u6d4b\u8bd5 \u2192 \u89e3\u51b3\u8de8\u57df\u3001\u53c2\u6570\u3001\u683c\u5f0f\u95ee\u9898<\/p>\n

\n

\u4e8c\u3001\u8bed\u6cd5\u683c\u5f0f<\/h3>\n

2.1 Axios\u57fa\u672c\u7528\u6cd5<\/h4>\n

\/\/ GET\u8bf7\u6c42<\/span>
\naxios.<\/span>get<\/span>(<\/span>'\/api\/users'<\/span>,<\/span> {<\/span> params<\/span>:<\/span> {<\/span> page<\/span>:<\/span> 1<\/span>,<\/span> size<\/span>:<\/span> 10<\/span> }<\/span> }<\/span>)<\/span><\/p>\n

\/\/ POST\u8bf7\u6c42<\/span>
\naxios.<\/span>post<\/span>(<\/span>'\/api\/users'<\/span>,<\/span> {<\/span> username<\/span>:<\/span> '\u5f20\u4e09'<\/span>,<\/span> email<\/span>:<\/span> 'test@example.com'<\/span> }<\/span>)<\/span><\/p>\n

\/\/ PUT\u8bf7\u6c42<\/span>
\naxios.<\/span>put<\/span>(<\/span>'\/api\/users\/1'<\/span>,<\/span> {<\/span> username<\/span>:<\/span> '\u674e\u56db'<\/span> }<\/span>)<\/span><\/p>\n

\/\/ DELETE\u8bf7\u6c42<\/span>
\naxios.<\/span>delete<\/span>(<\/span>'\/api\/users\/1'<\/span>)<\/span><\/p>\n

2.2 Vite\u4ee3\u7406\u914d\u7f6e<\/h4>\n

\/\/ vite.config.js<\/span>
\nexport<\/span> default<\/span> defineConfig<\/span>(<\/span>{<\/span>
\n server<\/span>:<\/span> {<\/span>
\n proxy<\/span>:<\/span> {<\/span>
\n '\/api'<\/span>:<\/span> {<\/span>
\n target<\/span>:<\/span> 'http:\/\/localhost:8080'<\/span>,<\/span>
\n changeOrigin<\/span>:<\/span> true<\/span>
\n }<\/span>
\n }<\/span>
\n }<\/span>
\n}<\/span>)<\/span><\/p>\n

\n

\u4e09\u3001\u4ee3\u7801\u6848\u4f8b<\/h3>\n

3.1 \u521b\u5efaVue\u9879\u76ee<\/h4>\n

# \u4f7f\u7528Vite\u521b\u5efaVue\u9879\u76ee<\/span>
\nnpm<\/span> create vite@latest frontend — –template<\/span> vue<\/p>\n

# \u8fdb\u5165\u9879\u76ee\u76ee\u5f55<\/span>
\ncd<\/span> frontend<\/p>\n

# \u5b89\u88c5\u4f9d\u8d56<\/span>
\nnpm<\/span> install<\/span><\/p>\n

# \u5b89\u88c5Axios\u548cElement Plus<\/span>
\nnpm<\/span> install<\/span> axios element-plus @element-plus\/icons-vue<\/p>\n

# \u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668<\/span>
\nnpm<\/span> run dev<\/p>\n

3.2 \u9879\u76ee\u7ed3\u6784<\/h4>\n

frontend\/
\n\u251c\u2500\u2500 src\/
\n\u2502 \u251c\u2500\u2500 api\/
\n\u2502 \u2502 \u251c\u2500\u2500 index.js # Axios\u5b9e\u4f8b\u914d\u7f6e
\n\u2502 \u2502 \u251c\u2500\u2500 auth.js # \u8ba4\u8bc1\u76f8\u5173API
\n\u2502 \u2502 \u2514\u2500\u2500 user.js # \u7528\u6237\u76f8\u5173API
\n\u2502 \u251c\u2500\u2500 router\/
\n\u2502 \u2502 \u2514\u2500\u2500 index.js # \u8def\u7531\u914d\u7f6e
\n\u2502 \u251c\u2500\u2500 views\/
\n\u2502 \u2502 \u251c\u2500\u2500 Login.vue # \u767b\u5f55\u9875
\n\u2502 \u2502 \u251c\u2500\u2500 Home.vue # \u9996\u9875
\n\u2502 \u2502 \u2514\u2500\u2500 UserList.vue # \u7528\u6237\u5217\u8868
\n\u2502 \u251c\u2500\u2500 utils\/
\n\u2502 \u2502 \u2514\u2500\u2500 request.js # Axios\u5c01\u88c5
\n\u2502 \u251c\u2500\u2500 App.vue
\n\u2502 \u2514\u2500\u2500 main.js
\n\u251c\u2500\u2500 vite.config.js
\n\u2514\u2500\u2500 package.json<\/p>\n

3.3 Axios\u5c01\u88c5<\/h4>\n

\/\/ src\/api\/index.js<\/span>
\nimport<\/span> axios from<\/span> 'axios'<\/span>
\nimport<\/span> {<\/span> ElMessage }<\/span> from<\/span> 'element-plus'<\/span><\/p>\n

const<\/span> service =<\/span> axios.<\/span>create<\/span>(<\/span>{<\/span>
\n baseURL<\/span>:<\/span> '\/api'<\/span>,<\/span>
\n timeout<\/span>:<\/span> 10000<\/span>
\n}<\/span>)<\/span><\/p>\n

\/\/ \u8bf7\u6c42\u62e6\u622a\u5668：\u6dfb\u52a0Token<\/span>
\nservice.<\/span>interceptors.<\/span>request.<\/span>use<\/span>(<\/span>
\n config<\/span> =><\/span> {<\/span>
\n const<\/span> token =<\/span> localStorage.<\/span>getItem<\/span>(<\/span>'token'<\/span>)<\/span>
\n if<\/span> (<\/span>token)<\/span> {<\/span>
\n config.<\/span>headers[<\/span>'Authorization'<\/span>]<\/span> =<\/span> `<\/span>Bearer <\/span>${<\/span>token}<\/span><\/span>`<\/span><\/span>
\n }<\/span>
\n return<\/span> config
\n }<\/span>,<\/span>
\n error<\/span> =><\/span> {<\/span>
\n return<\/span> Promise.<\/span>reject<\/span>(<\/span>error)<\/span>
\n }<\/span>
\n)<\/span><\/p>\n

\/\/ \u54cd\u5e94\u62e6\u622a\u5668：\u7edf\u4e00\u5904\u7406\u9519\u8bef<\/span>
\nservice.<\/span>interceptors.<\/span>response.<\/span>use<\/span>(<\/span>
\n response<\/span> =><\/span> {<\/span>
\n const<\/span> res =<\/span> response.<\/span>data
\n if<\/span> (<\/span>res.<\/span>code !==<\/span> 200<\/span>)<\/span> {<\/span>
\n ElMessage.<\/span>error<\/span>(<\/span>res.<\/span>message ||<\/span> '\u8bf7\u6c42\u5931\u8d25'<\/span>)<\/span>
\n return<\/span> Promise.<\/span>reject<\/span>(<\/span>new<\/span> Error<\/span>(<\/span>res.<\/span>message)<\/span>)<\/span>
\n }<\/span>
\n return<\/span> res
\n }<\/span>,<\/span>
\n error<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>error.<\/span>response)<\/span> {<\/span>
\n const<\/span> status =<\/span> error.<\/span>response.<\/span>status
\n if<\/span> (<\/span>status ===<\/span> 401<\/span>)<\/span> {<\/span>
\n ElMessage.<\/span>error<\/span>(<\/span>'\u767b\u5f55\u5df2\u8fc7\u671f，\u8bf7\u91cd\u65b0\u767b\u5f55'<\/span>)<\/span>
\n localStorage.<\/span>removeItem<\/span>(<\/span>'token'<\/span>)<\/span>
\n window.<\/span>location.<\/span>href =<\/span> '\/login'<\/span>
\n }<\/span> else<\/span> if<\/span> (<\/span>status ===<\/span> 403<\/span>)<\/span> {<\/span>
\n ElMessage.<\/span>error<\/span>(<\/span>'\u6ca1\u6709\u6743\u9650\u8bbf\u95ee'<\/span>)<\/span>
\n }<\/span> else<\/span> {<\/span>
\n ElMessage.<\/span>error<\/span>(<\/span>error.<\/span>message ||<\/span> '\u7f51\u7edc\u9519\u8bef'<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n return<\/span> Promise.<\/span>reject<\/span>(<\/span>error)<\/span>
\n }<\/span>
\n)<\/span><\/p>\n

export<\/span> default<\/span> service<\/p>\n

3.4 API\u5b9a\u4e49<\/h4>\n

\/\/ src\/api\/auth.js<\/span>
\nimport<\/span> request from<\/span> '.\/index'<\/span><\/p>\n

export<\/span> function<\/span> login<\/span>(<\/span>data<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> '\/user\/login'<\/span>,<\/span>
\n method<\/span>:<\/span> 'post'<\/span>,<\/span>
\n data
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

export<\/span> function<\/span> register<\/span>(<\/span>data<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> '\/user\/register'<\/span>,<\/span>
\n method<\/span>:<\/span> 'post'<\/span>,<\/span>
\n data
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

export<\/span> function<\/span> getUserInfo<\/span>(<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> '\/user\/info'<\/span>,<\/span>
\n method<\/span>:<\/span> 'get'<\/span>
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

\/\/ src\/api\/user.js<\/span>
\nimport<\/span> request from<\/span> '.\/index'<\/span><\/p>\n

export<\/span> function<\/span> getUserList<\/span>(<\/span>params<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> '\/users'<\/span>,<\/span>
\n method<\/span>:<\/span> 'get'<\/span>,<\/span>
\n params
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

export<\/span> function<\/span> getUserById<\/span>(<\/span>id<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> `<\/span>\/users\/<\/span>${<\/span>id}<\/span><\/span>`<\/span><\/span>,<\/span>
\n method<\/span>:<\/span> 'get'<\/span>
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

export<\/span> function<\/span> createUser<\/span>(<\/span>data<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> '\/users'<\/span>,<\/span>
\n method<\/span>:<\/span> 'post'<\/span>,<\/span>
\n data
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

export<\/span> function<\/span> updateUser<\/span>(<\/span>id,<\/span> data<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> `<\/span>\/users\/<\/span>${<\/span>id}<\/span><\/span>`<\/span><\/span>,<\/span>
\n method<\/span>:<\/span> 'put'<\/span>,<\/span>
\n data
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

export<\/span> function<\/span> deleteUser<\/span>(<\/span>id<\/span>)<\/span> {<\/span>
\n return<\/span> request<\/span>(<\/span>{<\/span>
\n url<\/span>:<\/span> `<\/span>\/users\/<\/span>${<\/span>id}<\/span><\/span>`<\/span><\/span>,<\/span>
\n method<\/span>:<\/span> 'delete'<\/span>
\n }<\/span>)<\/span>
\n}<\/span><\/p>\n

3.5 \u8def\u7531\u914d\u7f6e<\/h4>\n

\/\/ src\/router\/index.js<\/span>
\nimport<\/span> {<\/span> createRouter,<\/span> createWebHistory }<\/span> from<\/span> 'vue-router'<\/span><\/p>\n

const<\/span> routes =<\/span> [<\/span>
\n {<\/span>
\n path<\/span>:<\/span> '\/login'<\/span>,<\/span>
\n name<\/span>:<\/span> 'Login'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/Login.vue'<\/span>)<\/span>
\n }<\/span>,<\/span>
\n {<\/span>
\n path<\/span>:<\/span> '\/'<\/span>,<\/span>
\n name<\/span>:<\/span> 'Home'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/Home.vue'<\/span>)<\/span>,<\/span>
\n meta<\/span>:<\/span> {<\/span> requiresAuth<\/span>:<\/span> true<\/span> }<\/span>,<\/span>
\n children<\/span>:<\/span> [<\/span>
\n {<\/span>
\n path<\/span>:<\/span> 'users'<\/span>,<\/span>
\n name<\/span>:<\/span> 'UserList'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/UserList.vue'<\/span>)<\/span>,<\/span>
\n meta<\/span>:<\/span> {<\/span> requiresAuth<\/span>:<\/span> true<\/span> }<\/span>
\n }<\/span>
\n ]<\/span>
\n }<\/span>
\n]<\/span><\/p>\n

const<\/span> router =<\/span> createRouter<\/span>(<\/span>{<\/span>
\n history<\/span>:<\/span> createWebHistory<\/span>(<\/span>)<\/span>,<\/span>
\n routes
\n}<\/span>)<\/span><\/p>\n

\/\/ \u8def\u7531\u5b88\u536b：\u68c0\u67e5\u767b\u5f55\u72b6\u6001<\/span>
\nrouter.<\/span>beforeEach<\/span>(<\/span>(<\/span>to,<\/span> from,<\/span> next<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> token =<\/span> localStorage.<\/span>getItem<\/span>(<\/span>'token'<\/span>)<\/span>
\n if<\/span> (<\/span>to.<\/span>meta.<\/span>requiresAuth &&<\/span> !<\/span>token)<\/span> {<\/span>
\n next<\/span>(<\/span>'\/login'<\/span>)<\/span>
\n }<\/span> else<\/span> {<\/span>
\n next<\/span>(<\/span>)<\/span>
\n }<\/span>
\n}<\/span>)<\/span><\/p>\n

export<\/span> default<\/span> router<\/p>\n

3.6 \u767b\u5f55\u9875\u9762<\/h4>\n

<!– src\/views\/Login.vue –>
\n<template>
\n <div class="login-container">
\n <div class="login-card">
\n <h2 class="login-title">\u7528\u6237\u767b\u5f55<\/h2>
\n <el-form ref="formRef" :model="form" :rules="rules" label-width="0">
\n <el-form-item prop="username">
\n <el-input
\n v-model="form.username"
\n placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d"
\n :prefix-icon="User"
\n size="large"
\n \/>
\n <\/el-form-item>
\n <el-form-item prop="password">
\n <el-input
\n v-model="form.password"
\n type="password"
\n placeholder="\u8bf7\u8f93\u5165\u5bc6\u7801"
\n :prefix-icon="Lock"
\n size="large"
\n show-password
\n @keyup.enter="handleLogin"
\n \/>
\n <\/el-form-item>
\n <el-form-item>
\n <el-button
\n type="primary"
\n size="large"
\n :loading="loading"
\n style="width: 100%"
\n @click="handleLogin"
\n >
\n \u767b\u5f55
\n <\/el-button>
\n <\/el-form-item>
\n <\/el-form>
\n <div class="login-footer">
\n \u8fd8\u6ca1\u6709\u8d26\u53f7？<router-link to="\/register">\u7acb\u5373\u6ce8\u518c<\/router-link>
\n <\/div>
\n <\/div>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\nimport { ref, reactive } from 'vue'
\nimport { useRouter } from 'vue-router'
\nimport { ElMessage } from 'element-plus'
\nimport { User, Lock } from '@element-plus\/icons-vue'
\nimport { login } from '..\/api\/auth'<\/p>\n

const router = useRouter()
\nconst formRef = ref(null)
\nconst loading = ref(false)<\/p>\n

const form = reactive({
\n username: '',
\n password: ''
\n})<\/p>\n

const rules = {
\n username: [
\n { required: true, message: '\u8bf7\u8f93\u5165\u7528\u6237\u540d', trigger: 'blur' }
\n ],
\n password: [
\n { required: true, message: '\u8bf7\u8f93\u5165\u5bc6\u7801', trigger: 'blur' },
\n { min: 6, message: '\u5bc6\u7801\u4e0d\u5c11\u4e8e6\u4f4d', trigger: 'blur' }
\n ]
\n}<\/p>\n

const handleLogin = async () => {
\n const valid = await formRef.value.validate().catch(() => false)
\n if (!valid) return<\/p>\n

loading.value = true
\n try {
\n const res = await login(form)
\n localStorage.setItem('token', res.data.token)
\n localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
\n ElMessage.success('\u767b\u5f55\u6210\u529f')
\n router.push('\/')
\n } catch (error) {
\n console.error('\u767b\u5f55\u5931\u8d25', error)
\n } finally {
\n loading.value = false
\n }
\n}
\n<\/script><\/p>\n

<style scoped>
\n.login-container {
\n height: 100vh;
\n display: flex;
\n justify-content: center;
\n align-items: center;
\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
\n}
\n.login-card {
\n width: 400px;
\n padding: 40px;
\n background: white;
\n border-radius: 10px;
\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
\n}
\n.login-title {
\n text-align: center;
\n margin-bottom: 30px;
\n color: #333;
\n}
\n.login-footer {
\n text-align: center;
\n color: #666;
\n font-size: 14px;
\n}
\n<\/style><\/p>\n

3.7 \u7528\u6237\u5217\u8868\u9875\u9762<\/h4>\n

<!– src\/views\/UserList.vue –>
\n<template>
\n <div class="user-list">
\n <div class="page-header">
\n <h2>\u7528\u6237\u7ba1\u7406<\/h2>
\n <el-button type="primary" @click="handleAdd">\u65b0\u589e\u7528\u6237<\/el-button>
\n <\/div><\/p>\n

<!– \u641c\u7d22\u680f –>
\n <div class="search-bar">
\n <el-input
\n v-model="searchKeyword"
\n placeholder="\u641c\u7d22\u7528\u6237\u540d"
\n :prefix-icon="Search"
\n clearable
\n style="width: 300px"
\n @keyup.enter="handleSearch"
\n \/>
\n <el-button type="primary" @click="handleSearch">\u641c\u7d22<\/el-button>
\n <el-button @click="handleReset">\u91cd\u7f6e<\/el-button>
\n <\/div><\/p>\n

<!– \u7528\u6237\u8868\u683c –>
\n <el-table :data="userList" v-loading="loading" stripe>
\n <el-table-column prop="id" label="ID" width="80" \/>
\n <el-table-column prop="username" label="\u7528\u6237\u540d" width="150" \/>
\n <el-table-column prop="email" label="\u90ae\u7bb1" width="200" \/>
\n <el-table-column prop="role" label="\u89d2\u8272" width="120">
\n <template #default="{ row }">
\n <el-tag :type="row.role === 'ADMIN' ? 'danger' : 'info'">
\n {{ row.role === 'ADMIN' ? '\u7ba1\u7406\u5458' : '\u666e\u901a\u7528\u6237' }}
\n <\/el-tag>
\n <\/template>
\n <\/el-table-column>
\n <el-table-column prop="status" label="\u72b6\u6001" width="100">
\n <template #default="{ row }">
\n <el-tag :type="row.status === 1 ? 'success' : 'warning'">
\n {{ row.status === 1 ? '\u542f\u7528' : '\u7981\u7528' }}
\n <\/el-tag>
\n <\/template>
\n <\/el-table-column>
\n <el-table-column prop="createTime" label="\u521b\u5efa\u65f6\u95f4" width="180" \/>
\n <el-table-column label="\u64cd\u4f5c" fixed="right" width="200">
\n <template #default="{ row }">
\n <el-button type="primary" link @click="handleEdit(row)">\u7f16\u8f91<\/el-button>
\n <el-button type="danger" link @click="handleDelete(row)">\u5220\u9664<\/el-button>
\n <\/template>
\n <\/el-table-column>
\n <\/el-table><\/p>\n

<!– \u5206\u9875 –>
\n <div class="pagination">
\n <el-pagination
\n v-model:current-page="pagination.page"
\n v-model:page-size="pagination.size"
\n :page-sizes="[10, 20, 50]"
\n :total="pagination.total"
\n layout="total, sizes, prev, pager, next, jumper"
\n @size-change="handleSizeChange"
\n @current-change="handleCurrentChange"
\n \/>
\n <\/div><\/p>\n

<!– \u65b0\u589e\/\u7f16\u8f91\u5f39\u7a97 –>
\n <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
\n <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
\n <el-form-item label="\u7528\u6237\u540d" prop="username">
\n <el-input v-model="form.username" placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d" \/>
\n <\/el-form-item>
\n <el-form-item label="\u90ae\u7bb1" prop="email">
\n <el-input v-model="form.email" placeholder="\u8bf7\u8f93\u5165\u90ae\u7bb1" \/>
\n <\/el-form-item>
\n <el-form-item label="\u5e74\u9f84" prop="age">
\n <el-input-number v-model="form.age" :min="1" :max="150" \/>
\n <\/el-form-item>
\n <\/el-form>
\n <template #footer>
\n <el-button @click="dialogVisible = false">\u53d6\u6d88<\/el-button>
\n <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
\n \u786e\u5b9a
\n <\/el-button>
\n <\/template>
\n <\/el-dialog>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\nimport { ref, reactive, onMounted } from 'vue'
\nimport { ElMessage, ElMessageBox } from 'element-plus'
\nimport { Search } from '@element-plus\/icons-vue'
\nimport { getUserList, createUser, updateUser, deleteUser } from '..\/api\/user'<\/p>\n

const loading = ref(false)
\nconst submitLoading = ref(false)
\nconst userList = ref([])
\nconst dialogVisible = ref(false)
\nconst dialogTitle = ref('\u65b0\u589e\u7528\u6237')
\nconst searchKeyword = ref('')
\nconst formRef = ref(null)<\/p>\n

const pagination = reactive({
\n page: 1,
\n size: 10,
\n total: 0
\n})<\/p>\n

const form = reactive({
\n id: null,
\n username: '',
\n email: '',
\n age: 25
\n})<\/p>\n

const formRules = {
\n username: [{ required: true, message: '\u8bf7\u8f93\u5165\u7528\u6237\u540d', trigger: 'blur' }],
\n email: [
\n { required: true, message: '\u8bf7\u8f93\u5165\u90ae\u7bb1', trigger: 'blur' },
\n { type: 'email', message: '\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u90ae\u7bb1', trigger: 'blur' }
\n ]
\n}<\/p>\n

\/\/ \u83b7\u53d6\u7528\u6237\u5217\u8868
\nconst fetchUsers = async () => {
\n loading.value = true
\n try {
\n const res = await getUserList({
\n page: pagination.page,
\n size: pagination.size,
\n keyword: searchKeyword.value
\n })
\n userList.value = res.data.records
\n pagination.total = res.data.total
\n } catch (error) {
\n console.error('\u83b7\u53d6\u7528\u6237\u5217\u8868\u5931\u8d25', error)
\n } finally {
\n loading.value = false
\n }
\n}<\/p>\n

\/\/ \u641c\u7d22
\nconst handleSearch = () => {
\n pagination.page = 1
\n fetchUsers()
\n}<\/p>\n

\/\/ \u91cd\u7f6e
\nconst handleReset = () => {
\n searchKeyword.value = ''
\n pagination.page = 1
\n fetchUsers()
\n}<\/p>\n

\/\/ \u65b0\u589e
\nconst handleAdd = () => {
\n dialogTitle.value = '\u65b0\u589e\u7528\u6237'
\n form.id = null
\n form.username = ''
\n form.email = ''
\n form.age = 25
\n dialogVisible.value = true
\n}<\/p>\n

\/\/ \u7f16\u8f91
\nconst handleEdit = (row) => {
\n dialogTitle.value = '\u7f16\u8f91\u7528\u6237'
\n form.id = row.id
\n form.username = row.username
\n form.email = row.email
\n form.age = row.age
\n dialogVisible.value = true
\n}<\/p>\n

\/\/ \u5220\u9664
\nconst handleDelete = async (row) => {
\n await ElMessageBox.confirm('\u786e\u5b9a\u8981\u5220\u9664\u8be5\u7528\u6237\u5417？', '\u63d0\u793a', {
\n type: 'warning'
\n })
\n try {
\n await deleteUser(row.id)
\n ElMessage.success('\u5220\u9664\u6210\u529f')
\n fetchUsers()
\n } catch (error) {
\n console.error('\u5220\u9664\u5931\u8d25', error)
\n }
\n}<\/p>\n

\/\/ \u63d0\u4ea4\u8868\u5355
\nconst handleSubmit = async () => {
\n const valid = await formRef.value.validate().catch(() => false)
\n if (!valid) return<\/p>\n

submitLoading.value = true
\n try {
\n if (form.id) {
\n await updateUser(form.id, form)
\n ElMessage.success('\u66f4\u65b0\u6210\u529f')
\n } else {
\n await createUser(form)
\n ElMessage.success('\u521b\u5efa\u6210\u529f')
\n }
\n dialogVisible.value = false
\n fetchUsers()
\n } catch (error) {
\n console.error('\u64cd\u4f5c\u5931\u8d25', error)
\n } finally {
\n submitLoading.value = false
\n }
\n}<\/p>\n

\/\/ \u5206\u9875
\nconst handleSizeChange = () => {
\n pagination.page = 1
\n fetchUsers()
\n}<\/p>\n

const handleCurrentChange = () => {
\n fetchUsers()
\n}<\/p>\n

onMounted(() => {
\n fetchUsers()
\n})
\n<\/script><\/p>\n

<style scoped>
\n.user-list {
\n padding: 20px;
\n}
\n.page-header {
\n display: flex;
\n justify-content: space-between;
\n align-items: center;
\n margin-bottom: 20px;
\n}
\n.search-bar {
\n display: flex;
\n gap: 10px;
\n margin-bottom: 20px;
\n}
\n.pagination {
\n margin-top: 20px;
\n display: flex;
\n justify-content: flex-end;
\n}
\n<\/style><\/p>\n

3.8 Vite\u914d\u7f6e（\u4ee3\u7406）<\/h4>\n

\/\/ vite.config.js<\/span>
\nimport<\/span> {<\/span> defineConfig }<\/span> from<\/span> 'vite'<\/span>
\nimport<\/span> vue from<\/span> '@vitejs\/plugin-vue'<\/span><\/p>\n

export<\/span> default<\/span> defineConfig<\/span>(<\/span>{<\/span>
\n plugins<\/span>:<\/span> [<\/span>vue<\/span>(<\/span>)<\/span>]<\/span>,<\/span>
\n server<\/span>:<\/span> {<\/span>
\n port<\/span>:<\/span> 5173<\/span>,<\/span>
\n proxy<\/span>:<\/span> {<\/span>
\n '\/api'<\/span>:<\/span> {<\/span>
\n target<\/span>:<\/span> 'http:\/\/localhost:8080'<\/span>,<\/span>
\n changeOrigin<\/span>:<\/span> true<\/span>
\n }<\/span>
\n }<\/span>
\n }<\/span>
\n}<\/span>)<\/span><\/p>\n

3.9 main.js\u5165\u53e3<\/h4>\n

\/\/ src\/main.js<\/span>
\nimport<\/span> {<\/span> createApp }<\/span> from<\/span> 'vue'<\/span>
\nimport<\/span> ElementPlus from<\/span> 'element-plus'<\/span>
\nimport<\/span> 'element-plus\/dist\/index.css'<\/span>
\nimport<\/span> *<\/span> as<\/span> ElementPlusIconsVue from<\/span> '@element-plus\/icons-vue'<\/span>
\nimport<\/span> App from<\/span> '.\/App.vue'<\/span>
\nimport<\/span> router from<\/span> '.\/router'<\/span><\/p>\n

const<\/span> app =<\/span> createApp<\/span>(<\/span>App)<\/span><\/p>\n

\/\/ \u6ce8\u518c\u6240\u6709\u56fe\u6807<\/span>
\nfor<\/span> (<\/span>const<\/span> [<\/span>key,<\/span> component]<\/span> of<\/span> Object.<\/span>entries<\/span>(<\/span>ElementPlusIconsVue)<\/span>)<\/span> {<\/span>
\n app.<\/span>component<\/span>(<\/span>key,<\/span> component)<\/span>
\n}<\/span><\/p>\n

app.<\/span>use<\/span>(<\/span>ElementPlus)<\/span>
\napp.<\/span>use<\/span>(<\/span>router)<\/span>
\napp.<\/span>mount<\/span>(<\/span>'#app'<\/span>)<\/span><\/p>\n

3.10 \u540e\u7aefCORS\u914d\u7f6e<\/h4>\n

package<\/span> com.<\/span>example.<\/span>demo.<\/span>common.<\/span>config<\/span>;<\/span><\/p>\n

import<\/span> org.<\/span>springframework.<\/span>context.<\/span>annotation.<\/span><\/span>Bean<\/span><\/span>;<\/span>
\nimport<\/span> org.<\/span>springframework.<\/span>context.<\/span>annotation.<\/span><\/span>Configuration<\/span><\/span>;<\/span>
\nimport<\/span> org.<\/span>springframework.<\/span>web.<\/span>cors.<\/span><\/span>CorsConfiguration<\/span><\/span>;<\/span>
\nimport<\/span> org.<\/span>springframework.<\/span>web.<\/span>cors.<\/span><\/span>UrlBasedCorsConfigurationSource<\/span><\/span>;<\/span>
\nimport<\/span> org.<\/span>springframework.<\/span>web.<\/span>filter.<\/span><\/span>CorsFilter<\/span><\/span>;<\/span><\/p>\n

@Configuration<\/span>
\npublic<\/span> class<\/span> CorsConfig<\/span> {<\/span><\/p>\n

@Bean<\/span>
\n public<\/span> CorsFilter<\/span> corsFilter<\/span>(<\/span>)<\/span> {<\/span>
\n CorsConfiguration<\/span> config =<\/span> new<\/span> CorsConfiguration<\/span>(<\/span>)<\/span>;<\/span>
\n config.<\/span>addAllowedOriginPattern<\/span>(<\/span>"*"<\/span>)<\/span>;<\/span>
\n config.<\/span>addAllowedHeader<\/span>(<\/span>"*"<\/span>)<\/span>;<\/span>
\n config.<\/span>addAllowedMethod<\/span>(<\/span>"*"<\/span>)<\/span>;<\/span>
\n config.<\/span>setAllowCredentials<\/span>(<\/span>true<\/span>)<\/span>;<\/span><\/p>\n

UrlBasedCorsConfigurationSource<\/span> source =<\/span> new<\/span> UrlBasedCorsConfigurationSource<\/span>(<\/span>)<\/span>;<\/span>
\n source.<\/span>registerCorsConfiguration<\/span>(<\/span>"\/**"<\/span>,<\/span> config)<\/span>;<\/span>
\n return<\/span> new<\/span> CorsFilter<\/span>(<\/span>source)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\n

\u56db\u3001\u5e38\u89c1\u9519\u8bef<\/h3>\n

4.1 \u8de8\u57df\u8bf7\u6c42\u88ab\u62d2\u7edd<\/h4>\n

\u73b0\u8c61：\u6d4f\u89c8\u5668\u63a7\u5236\u53f0\u663e\u793aCORS\u9519\u8bef\u3002<\/p>\n

\u89e3\u51b3：<\/p>\n

  • \u5f00\u53d1\u73af\u5883：\u914d\u7f6eVite\u4ee3\u7406（\u89c13.8\u8282）<\/li>\n
  • \u751f\u4ea7\u73af\u5883：\u914d\u7f6eNginx\u53cd\u5411\u4ee3\u7406<\/li>\n
  • \u540e\u7aef：\u6dfb\u52a0CORS\u914d\u7f6e（\u89c13.10\u8282）<\/li>\n

    4.2 Token\u672a\u643a\u5e26\u6216\u683c\u5f0f\u9519\u8bef<\/h4>\n

    \u73b0\u8c61：\u540e\u7aef\u8fd4\u56de401\u3002<\/p>\n

    \u89e3\u51b3：\u786e\u4fddAxios\u62e6\u622a\u5668\u6b63\u786e\u6dfb\u52a0Authorization: Bearer <token>\u3002<\/p>\n

    4.3 \u63a5\u53e3404<\/h4>\n

    \u73b0\u8c61：\u8bf7\u6c42\u8def\u5f84\u4e0d\u5bf9\u3002<\/p>\n

    \u89e3\u51b3：\u68c0\u67e5\u540e\u7aefcontext-path\u548c\u524d\u7aefbaseURL\u662f\u5426\u5339\u914d\u3002<\/p>\n

    4.4 \u6570\u636e\u683c\u5f0f\u4e0d\u5339\u914d<\/h4>\n

    \u73b0\u8c61：\u65e5\u671f\u663e\u793a\u4e3a\u65f6\u95f4\u6233\u6216\u683c\u5f0f\u4e0d\u5bf9\u3002<\/p>\n

    \u89e3\u51b3：\u7edf\u4e00\u4f7f\u7528yyyy-MM-dd HH:mm:ss\u683c\u5f0f，\u6216\u524d\u7aef\u683c\u5f0f\u5316\u5904\u7406\u3002<\/p>\n

    \n

    \u4e94\u3001\u8bfe\u540e\u7ec3\u4e60<\/h3>\n
  • \u5b9e\u73b0\u6ce8\u518c\u9875\u9762，\u5bf9\u63a5\u540e\u7aef\u6ce8\u518c\u63a5\u53e3<\/li>\n
  • \u4e3a\u7528\u6237\u5217\u8868\u6dfb\u52a0\u6279\u91cf\u5220\u9664\u529f\u80fd<\/li>\n
  • \u5b9e\u73b0\u5546\u54c1\u7ba1\u7406\u9875\u9762\u7684\u5b8c\u6574CRUD<\/li>\n
  • \u6dfb\u52a0\u8bf7\u6c42\u52a0\u8f7d\u72b6\u6001\u548c\u9519\u8bef\u63d0\u793a\u4f18\u5316<\/li>\n
    \n

    \u516d\u3001\u672c\u8bfe\u5c0f\u7ed3<\/h3>\n\n\u77e5\u8bc6\u70b9\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n
    Axios<\/td>\nHTTP\u5ba2\u6237\u7aef\u5e93，\u5c01\u88c5\u8bf7\u6c42\/\u54cd\u5e94\u62e6\u622a\u5668<\/td>\n<\/tr>\n
    \u8bf7\u6c42\u62e6\u622a\u5668<\/td>\n\u5728\u8bf7\u6c42\u53d1\u51fa\u524d\u6dfb\u52a0Token\u7b49\u8ba4\u8bc1\u4fe1\u606f<\/td>\n<\/tr>\n
    \u54cd\u5e94\u62e6\u622a\u5668<\/td>\n\u7edf\u4e00\u5904\u7406\u9519\u8bef，\u5982401\u8df3\u8f6c\u767b\u5f55<\/td>\n<\/tr>\n
    Vite\u4ee3\u7406<\/td>\n\u5f00\u53d1\u73af\u5883\u4ee3\u7406API\u8bf7\u6c42，\u89e3\u51b3\u8de8\u57df<\/td>\n<\/tr>\n
    Element Plus<\/td>\nVue 3 UI\u7ec4\u4ef6\u5e93，\u63d0\u4f9b\u8868\u683c\u3001\u8868\u5355\u3001\u5f39\u7a97\u7b49\u7ec4\u4ef6<\/td>\n<\/tr>\n
    \u8def\u7531\u5b88\u536b<\/td>\nVue Router\u62e6\u622a\u5668，\u672a\u767b\u5f55\u8df3\u8f6c\u767b\u5f55\u9875<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n

    \u672c\u8bfe\u7a0b\u6301\u7eed\u66f4\u65b0\u4e2d，\u6b22\u8fce\u5173\u6ce8！<\/p>\n","protected":false},"excerpt":{"rendered":"

    \u7b2c 49 \u8bfe：\u524d\u540e\u7aef\u8054\u8c03 \u672c\u8bfe\u76ee\u6807：\u642d\u5efaVue.js\u524d\u7aef\u9879\u76ee，\u914d\u7f6eAxios\u4e0e\u540e\u7aef\u8054\u8c03，\u5b9e\u73b0\u767b\u5f55\u9875\u9762\u548cCRUD\u9875\u9762\u3002 \u4e00\u3001\u6982\u5ff5\u8bb2\u89e3
    \n1.1 \u524d\u540e\u7aef\u5206\u79bb\u67b6\u6784
    \n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
    \n\u2502 \u524d\u7aef(Vue) \u2502 HTTP \u2502 \u540e\u7aef(Java) \u2502
    \n\u2502 \u7aef\u53e3:5173 \u2502 \u2502 \u7aef\u53e3:8080 \u2502
    \n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[99],"topic":[],"class_list":["post-109806","post","type-post","status-publish","format-standard","hentry","category-server","tag-java"],"yoast_head":"\n\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/109806.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u7b2c 49 \u8bfe：\u524d\u540e\u7aef\u8054\u8c03 \u672c\u8bfe\u76ee\u6807：\u642d\u5efaVue.js\u524d\u7aef\u9879\u76ee，\u914d\u7f6eAxios\u4e0e\u540e\u7aef\u8054\u8c03，\u5b9e\u73b0\u767b\u5f55\u9875\u9762\u548cCRUD\u9875\u9762\u3002 \u4e00\u3001\u6982\u5ff5\u8bb2\u89e3 1.1 \u524d\u540e\u7aef\u5206\u79bb\u67b6\u6784 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u524d\u7aef(Vue) \u2502 HTTP \u2502 \u540e\u7aef(Java) \u2502 \u2502 \u7aef\u53e3:5173 \u2502 \u2502 \u7aef\u53e3:8080 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/109806.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-24T14:34:10+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/109806.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/109806.html\",\"name\":\"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-09-24T14:34:10+00:00\",\"dateModified\":\"2026-09-24T14:34:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/109806.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/109806.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/109806.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/109806.html","og_locale":"zh_CN","og_type":"article","og_title":"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u7b2c 49 \u8bfe：\u524d\u540e\u7aef\u8054\u8c03 \u672c\u8bfe\u76ee\u6807：\u642d\u5efaVue.js\u524d\u7aef\u9879\u76ee，\u914d\u7f6eAxios\u4e0e\u540e\u7aef\u8054\u8c03，\u5b9e\u73b0\u767b\u5f55\u9875\u9762\u548cCRUD\u9875\u9762\u3002 \u4e00\u3001\u6982\u5ff5\u8bb2\u89e3 1.1 \u524d\u540e\u7aef\u5206\u79bb\u67b6\u6784 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u524d\u7aef(Vue) \u2502 HTTP \u2502 \u540e\u7aef(Java) \u2502 \u2502 \u7aef\u53e3:5173 \u2502 \u2502 \u7aef\u53e3:8080 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500","og_url":"https:\/\/www.wsisp.com\/helps\/109806.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-09-24T14:34:10+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/109806.html","url":"https:\/\/www.wsisp.com\/helps\/109806.html","name":"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-09-24T14:34:10+00:00","dateModified":"2026-09-24T14:34:10+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/109806.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/109806.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/109806.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u7b2c49\u8bfe-\u524d\u540e\u7aef\u8054\u8c03"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/109806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=109806"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/109806\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=109806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=109806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=109806"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=109806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}