完成个人信息设置前端部分

study-project-backend/src/main/java/com/example/controller/UserController.java

@@ -1,18 +1,29 @@
 package com.example.controller;
 
 import com.example.entity.RestBean;
+import com.example.entity.user.AccountInfo;
 import com.example.entity.user.AccountUser;
-import org.springframework.web.bind.annotation.GetMapping;
+import com.example.service.UserService;
-import org.springframework.web.bind.annotation.RequestMapping;
+import jakarta.annotation.Resource;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.SessionAttribute;
 
 @RestController
 @RequestMapping("/api/user")
 public class UserController {
 
+    @Resource
+    UserService service;
+
     @GetMapping("/me")
     public RestBean<AccountUser> me(@SessionAttribute("account") AccountUser user){
         return RestBean.success(user);
     }
+
+    @PostMapping("/save-info")
+    public RestBean<Void> saveInfo(@RequestBody AccountInfo info,
+                                   @SessionAttribute("account") AccountUser user){
+        info.setUid(user.getId());
+        service.saveUserInfo(info);
+        return RestBean.success();
+    }
 }

study-project-backend/src/main/java/com/example/entity/user/AccountInfo.java

@@ -0,0 +1,15 @@
+package com.example.entity.user;
+
+import lombok.Data;
+
+@Data
+public class AccountInfo {
+    int uid;
+    String username;
+    String sex;
+    String phone;
+    String qq;
+    String wx;
+    String blog;
+    String desc;
+}

study-project-backend/src/main/java/com/example/mapper/UserMapper.java

@@ -1,6 +1,7 @@
 package com.example.mapper;
 
 import com.example.entity.auth.Account;
+import com.example.entity.user.AccountInfo;
 import com.example.entity.user.AccountUser;
 import org.apache.ibatis.annotations.Insert;
 import org.apache.ibatis.annotations.Mapper;
@@ -20,4 +21,12 @@ public interface UserMapper {
 
     @Update("update db_account set password = #{password} where email = #{email}")
     int resetPasswordByEmail(String password, String email);
+
+    @Insert("""
+            insert into db_account_info (uid, sex, phone, qq, wx, blog, `desc`)
+             values (#{uid}, #{sex}, #{phone}, #{qq}, #{wx}, #{blog}, #{desc})
+             on duplicate key update uid=#{uid}, sex=#{sex}, phone=#{phone},
+             qq=#{qq}, wx=#{wx}, blog=#{blog}, `desc`=#{desc}
+            """)
+    void saveInfo(AccountInfo info);
 }

study-project-backend/src/main/java/com/example/service/UserService.java

@@ -0,0 +1,7 @@
+package com.example.service;
+
+import com.example.entity.user.AccountInfo;
+
+public interface UserService {
+    void saveUserInfo(AccountInfo info);
+}

study-project-backend/src/main/java/com/example/service/impl/UserServiceImpl.java

@@ -0,0 +1,18 @@
+package com.example.service.impl;
+
+import com.example.entity.user.AccountInfo;
+import com.example.mapper.UserMapper;
+import com.example.service.UserService;
+import jakarta.annotation.Resource;
+import org.springframework.stereotype.Service;
+
+@Service
+public class UserServiceImpl implements UserService {
+    @Resource
+    UserMapper mapper;
+
+    @Override
+    public void saveUserInfo(AccountInfo info) {
+        mapper.saveInfo(info);
+    }
+}

study-project-frontend/src/components/settings/InfoSettings.vue

@@ -1,6 +1,60 @@
 <script setup>
-import {reactive} from "vue";
+import {reactive, ref} from "vue";
 import {Select} from "@element-plus/icons-vue";
+import {post} from "@/net";
+import {ElMessage} from "element-plus";
+
+const form = ref()
+
+const validateUsername = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请输入用户名'))
+  } else if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)){
+    callback(new Error('用户名不能包含特殊字符，只能是中文/英文'))
+  } else {
+    callback()
+  }
+}
+
+const validatePhoneNumber = (rule, value, callback) => {
+  if(value !== '' && !/^1[3-9]\d{9}$/.test(value)) {
+    callback(new Error('手机号格式错误'))
+  } else {
+    callback()
+  }
+}
+
+const validateBlogURL = (rule, value, callback) => {
+  if(value !== '' && !/^https?:\/\/((www.)?[\w-]+.[\w-]+.?[\w-])?\/?([\w-])\/?([\w-]*)\/?$/.test(value)) {
+    callback(new Error('博客地址格式错误'))
+  } else {
+    callback()
+  }
+}
+
+const rules = {
+  username: [
+    { validator: validateUsername, trigger: ['blur', 'change'] },
+    { min: 2, max: 8, message: '用户名的长度必须在2-8个字符之间', trigger: ['blur', 'change'] },
+  ],
+  phone: [
+    { validator: validatePhoneNumber, trigger: ['blur', 'change'] },
+    { min: 11, max: 11, message: '手机号只能是11位标准手机号', trigger: ['blur', 'change'] },
+  ],
+  qq: [
+    { min: 8, max: 11, message: 'QQ号只能是8-11位', trigger: ['blur', 'change'] },
+  ],
+  wx: [
+    { min: 5, max: 30, message: '微信号只能是5-30位', trigger: ['blur', 'change'] },
+  ],
+  blog: [
+    { validator: validateBlogURL, trigger: ['blur', 'change'] },
+    { max: 50, message: '博客URL地址太长', trigger: ['blur', 'change'] },
+  ],
+  desc: [
+    { max: 500, message: '个人简介不能超过500字', trigger: ['blur', 'change'] },
+  ]
+}
 
 const infoForm = reactive({
   username: '',
@@ -9,43 +63,57 @@ const infoForm = reactive({
   qq: '',
   wx: '',
   blog: '',
-  sex: ''
+  sex: 'male'
 })
+
+const save = () => {
+  form.value.validate((isValid) => {
+    if(isValid) {
+      post('/api/user/save-info', infoForm, () => {
+        ElMessage.success("保存成功！")
+      }, 'json')
+    } else {
+      ElMessage.warning('表单内容有误，请重新检查内容是否正确填写')
+    }
+  })
+}
 </script>
 
 <template>
   <div>
     <el-form
+        ref="form"
+        :rules="rules"
         label-position="top"
         label-width="100px"
         :model="infoForm"
         style="max-width: 460px">
-      <el-form-item label="用户名">
+      <el-form-item prop="username" label="用户名">
-        <el-input v-model="infoForm.username" />
+        <el-input :maxlength="8" v-model="infoForm.username" />
       </el-form-item>
       <el-form-item label="性别">
         <el-radio-group v-model="infoForm.sex" class="ml-4">
-          <el-radio label="1" size="large">男</el-radio>
+          <el-radio label="male" size="large">男</el-radio>
-          <el-radio label="2" size="large">女</el-radio>
+          <el-radio label="female" size="large">女</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="手机号">
+      <el-form-item prop="phone" label="手机号">
-        <el-input v-model="infoForm.phone" />
+        <el-input :maxlength="11" v-model="infoForm.phone" />
       </el-form-item>
-      <el-form-item label="QQ">
+      <el-form-item label="QQ" prop="qq">
-        <el-input v-model="infoForm.qq" />
+        <el-input :maxlength="11" v-model="infoForm.qq" />
       </el-form-item>
-      <el-form-item label="微信">
+      <el-form-item label="微信" prop="wx">
-        <el-input v-model="infoForm.wx" />
+        <el-input :maxlength="30" v-model="infoForm.wx" />
       </el-form-item>
-      <el-form-item label="博客">
+      <el-form-item label="博客" prop="blog">
-        <el-input v-model="infoForm.blog" />
+        <el-input :maxlength="50" v-model="infoForm.blog" />
       </el-form-item>
-      <el-form-item label="个人简介">
+      <el-form-item label="个人简介" prop="desc">
-        <el-input type="textarea" v-model="infoForm.desc" :rows="6"/>
+        <el-input :maxlength="500" type="textarea" v-model="infoForm.desc" :rows="6"/>
       </el-form-item>
     </el-form>
-    <el-button type="success" :icon="Select">保存个人信息设置</el-button>
+    <el-button type="success" :icon="Select" @click="save">保存个人信息设置</el-button>
   </div>
 </template>
 

study-project-frontend/src/net/index.js

@@ -5,10 +5,10 @@ import router from "@/router";
 const defaultError = () => ElMessage.error('发生了一些错误，请联系管理员')
 const defaultFailure = (message) => ElMessage.warning(message)
 
-function post(url, data, success, failure = defaultFailure, error = defaultError) {
+function post(url, data, success, type = 'x-www-form-urlencoded', failure = defaultFailure, error = defaultError) {
     axios.post(url, data, {
         headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
+            'Content-Type': 'application/'+type
         },
         withCredentials: true
     }).then(({data}) => {