完成个人信息设置前端部分
This commit is contained in:
parent
feccf869ee
commit
4a71703250
@ -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 org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import org.springframework.web.bind.annotation.SessionAttribute;
|
||||
import com.example.service.UserService;
|
||||
import jakarta.annotation.Resource;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
@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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
package com.example.service;
|
||||
|
||||
import com.example.entity.user.AccountInfo;
|
||||
|
||||
public interface UserService {
|
||||
void saveUserInfo(AccountInfo info);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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-input v-model="infoForm.username" />
|
||||
<el-form-item prop="username" label="用户名">
|
||||
<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="2" size="large">女</el-radio>
|
||||
<el-radio label="male" size="large">男</el-radio>
|
||||
<el-radio label="female" size="large">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="infoForm.phone" />
|
||||
<el-form-item prop="phone" label="手机号">
|
||||
<el-input :maxlength="11" v-model="infoForm.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ">
|
||||
<el-input v-model="infoForm.qq" />
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input :maxlength="11" v-model="infoForm.qq" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信">
|
||||
<el-input v-model="infoForm.wx" />
|
||||
<el-form-item label="微信" prop="wx">
|
||||
<el-input :maxlength="30" v-model="infoForm.wx" />
|
||||
</el-form-item>
|
||||
<el-form-item label="博客">
|
||||
<el-input v-model="infoForm.blog" />
|
||||
<el-form-item label="博客" prop="blog">
|
||||
<el-input :maxlength="50" v-model="infoForm.blog" />
|
||||
</el-form-item>
|
||||
<el-form-item label="个人简介">
|
||||
<el-input type="textarea" v-model="infoForm.desc" :rows="6"/>
|
||||
<el-form-item label="个人简介" prop="desc">
|
||||
<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>
|
||||
|
||||
|
||||
@ -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}) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user