统一管理API接口

my-project-frontend/src/App.vue

@@ -2,7 +2,7 @@
 import { useDark, useToggle } from '@vueuse/core'
 import {onMounted, provide, ref} from "vue";
 import {unauthorized} from "@/net";
-import {getUserInfo} from "@/net/api/user";
+import {apiUserInfo} from "@/net/api/user";
 
 useDark({
   selector: 'html',
@@ -20,7 +20,7 @@ useDark({
 
 onMounted(() => {
     if(!unauthorized()) {
-        getUserInfo(loading)
+        apiUserInfo(loading)
     }
 })
 </script>

my-project-frontend/src/net/api/user.js

@@ -1,7 +1,7 @@
-import {get} from "@/net";
+import {get, post} from "@/net";
 import {useStore} from "@/store";
 
-export const getUserInfo = (loadingRef) => {
+export const apiUserInfo = (loadingRef) => {
     if(loadingRef) loadingRef.value = true
     get('/api/user/info', (data) => {
         const store = useStore();
@@ -10,4 +10,22 @@ export const getUserInfo = (loadingRef) => {
     })
 }
 
+export const apiUserChangePassword = (form, success) =>
+    post('/api/user/change-password', form, success)
 
+export const apiUserPrivacy = (success) =>
+    get('/api/user/privacy', success)
+
+export const apiUserPrivacySave = (data, loadingRef, success) => {
+    loadingRef.value = true
+    post('/api/user/save-privacy', data, () => {
+        loadingRef.value = false
+        success()
+    })
+}
+
+export const apiUserDetailSave = (form, success, failure) =>
+    post('/api/user/save-details', form, success, failure)
+
+export const apiUserDetail = (success) =>
+    get('/api/user/details', success)

my-project-frontend/src/views/IndexView.vue

@@ -32,8 +32,8 @@ const userMenu = [
     ]
   }, {
     title: '个人设置', icon: Operation, sub: [
-      { title: '个人信息设置', icon: User },
+      { title: '个人信息设置', icon: User, index: '/index/user-setting' },
-      { title: '账号安全设置', icon: Lock }
+      { title: '账号安全设置', icon: Lock, index: '/index/privacy-setting' }
     ]
   }
 ]

my-project-frontend/src/views/settings/PrivacySetting.vue

@@ -3,15 +3,15 @@
 import Card from "@/components/Card.vue";
 import {Setting, Switch, Lock} from "@element-plus/icons-vue";
 import {reactive, ref} from "vue";
-import {get, post} from "@/net";
 import {ElMessage} from "element-plus";
+import {apiUserChangePassword, apiUserPrivacy, apiUserPrivacySave} from "@/net/api/user";
 
 const form = reactive({
     password: '',
     new_password: '',
     new_password_repeat: ''
 })
-const validatePassword = (rule, value, callback) => {
+const validatePassword = (_, value, callback) => {
     if (value === '') {
         callback(new Error('请再次输入密码'))
     } else if (value !== form.new_password) {
@@ -35,12 +35,12 @@ const rules = {
 }
 const formRef = ref()
 const valid = ref(false)
-const onValidate = (prop, isValid) => valid.value = isValid
+const onValidate = (_, isValid) => valid.value = isValid
 
 function resetPassword(){
     formRef.value.validate(valid => {
         if(valid) {
-            post('/api/user/change-password', form, () => {
+            apiUserChangePassword(form, () => {
                 ElMessage.success('修改密码成功！')
                 formRef.value.resetFields();
             })
@@ -56,23 +56,15 @@ const privacy = reactive({
     email: false,
     gender: false
 })
-get('/api/user/privacy', data => {
+
-    privacy.phone = data.phone
+apiUserPrivacy(data => {
-    privacy.email = data.email
+    Object.assign(privacy, data)
-    privacy.wx = data.wx
-    privacy.qq = data.qq
-    privacy.gender = data.gender
     saving.value = false
 })
+
 function savePrivacy(type, status){
-    saving.value = true
+    apiUserPrivacySave({ type, status }, saving,
-    post('/api/user/save-privacy', {
+        () => ElMessage.success('隐私设置修改成功！'))
-        type: type,
-        status: status
-    }, () => {
-        ElMessage.success('隐私设置修改成功！')
-        saving.value = false
-    })
 }
 </script>
 

my-project-frontend/src/views/settings/UserSetting.vue

@@ -7,6 +7,7 @@ import {computed, reactive, ref} from "vue";
 import {accessHeader, get, post} from "@/net";
 import {ElMessage} from "element-plus";
 import axios from "axios";
+import {apiUserDetail, apiUserDetailSave} from "@/net/api/user";
 
 const store = useStore()
 
@@ -55,7 +56,7 @@ function saveDetails() {
     baseFormRef.value.validate(isValid => {
         if (isValid) {
             loading.base = true
-            post('/api/user/save-details', baseForm, () => {
+            apiUserDetailSave(baseForm, () => {
                 ElMessage.success('用户信息保存成功')
                 store.user.usernamew = baseForm.username
                 desc.value = baseForm.desc
@@ -68,12 +69,9 @@ function saveDetails() {
     })
 }
 
-get('/api/user/details', data => {
+apiUserDetail(data => {
     baseForm.username = store.user.username
-    baseForm.gender = data.gender
+    Object.assign(baseForm, data)
-    baseForm.phone = data.phone
-    baseForm.wx = data.wx
-    baseForm.qq = data.qq
     baseForm.desc = desc.value = data.desc
     emailForm.email = store.user.email
     loading.form = false

my-project-frontend/src/views/welcome/LoginPage.vue

@@ -53,7 +53,7 @@ import {User, Lock} from '@element-plus/icons-vue'
 import router from "@/router";
 import {inject, reactive, ref} from "vue";
 import {login} from '@/net'
-import {getUserInfo} from "@/net/api/user";
+import {apiUserInfo} from "@/net/api/user";
 
 const formRef = ref()
 const form = reactive({
@@ -77,7 +77,7 @@ function userLogin() {
   formRef.value.validate((isValid) => {
     if(isValid) {
       login(form.username, form.password, form.remember, () => {
-          getUserInfo(loading)
+          apiUserInfo(loading)
           router.push("/index")
       })
     }