学习9
老年人评估系统前端代码
首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>老年人评估系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 全局样式 */
body {
background-color: #f5f5f5;
font-family: "Microsoft YaHei", sans-serif;
}
/* 头部样式 */
.header {
background-color: #fff;
padding: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo img {
max-height: 60px;
}
/* 搜索框样式 */
.search-wrap {
padding: 10px 0;
}
.search-box {
display: flex;
margin-bottom: 10px;
}
.search-box input {
flex: 1;
padding: 8px 15px;
border: 2px solid #007bff;
border-right: none;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box button {
padding: 8px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.hot-search {
font-size: 14px;
color: #666;
}
/* 导航栏样式 */
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .navbar {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar-style .nav-link:hover,
.navbar-style .nav-link.active {
background-color: #0056b3;
}
/* 主要内容区域样式 */
.main-content {
padding: 30px 0;
}
.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.card-header {
background-color: #f8f9fa;
border-bottom: 2px solid #007bff;
padding: 15px;
}
.card-header h5 {
color: #007bff;
font-weight: bold;
}
/* 新闻列表样式 */
.list-unstyled li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.list-unstyled li:last-child {
border-bottom: none;
}
.list-unstyled a {
color: #333;
text-decoration: none;
transition: color 0.3s;
}
.list-unstyled a:hover {
color: #007bff;
}
/* 登录框样式 */
.form-control {
border: 1px solid #ddd;
padding: 10px;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}
.btn-primary {
padding: 8px 25px;
background-color: #007bff;
border: none;
}
.btn-primary:hover {
background-color: #0056b3;
}
.dropdown-menu {
background-color: #fff;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dropdown-item {
padding: 10px 20px;
color: #333;
}
.dropdown-item:hover {
background-color: #007bff;
color: #fff;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
}
.containers {
width: 100%;
height: 500px;
background-image: url(https://www.cma.org.cn/picture/0/10eb00542857469fab5d0d2793d3ab98.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative; /* 添加相对定位 */
display: flex; /* 使用flex布局 */
/* justify-content: center; */
/* 水平居中 */
align-items: center; /* 垂直居中 */
}
.containers .box {
width: 30%;
height: 30%;
border-radius: 10px;
background-color: #F7F7F5;
}
.containers .box-content {
width: 80%;
height: 100%;
font-size: 15px;
font-weight: bold;
}
.containers .box-content ul {
list-style: none;
}
.container-1 {
width: 100%;
height: 100px;
background-color: #fff;
}
.container-1 .box-1 p{
font-size: 12px;
text-align: center;
color: #8f8f8e;
}
/* 响应式调整 */
@media (max-width: 768px) {
.header {
padding: 10px 0;
}
.navbar-style .nav-link {
padding: 10px 15px !important;
}
.search-wrap {
margin-top: 15px;
}
}
</style>
</head>
<body>
<div class="header">
<div class="containter">
<div class="row">
<div class="col-lg-8 col-md-6">
<a href="#" class="logo">
<img src="#" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6">
<div class="search-wrap">
<form action="/Serach" method="get" class="search-box" target="_blank">
<input type="text" name="keys" autocomplete="off" value>
<button type="submit">搜索</button>
</form>
<dl class="hot-search">
<dt>
<span>热门搜索：</span>
</dt>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-style">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="./index.html">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="assessmentDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
老年人定期评估
</a>
<ul class="dropdown-menu" aria-labelledby="assessmentDropdown">
<li><a class="dropdown-item" href="./评估目的.html">评估目的</a></li>
<li><a class="dropdown-item" href="./评估重要性.html">评估重要性</a></li>
<li><a class="dropdown-item" href="./评估指标和方法.html">评估指标和方法</a></li>
<li><a class="dropdown-item" href="./评估问卷.html">评估问卷</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./评估数据查询页面.html">评估数据查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./通知公告.html">通知公告</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./常见问题解答.html">常见问题解答</a>
<!-- </li>
<li class="nav-item">
<a class="nav-link" href="#">专家老师</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">课程中心</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="./联系方式.html">联系方式</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">证书查询</a>
</li> -->
</ul>
</div>
</div>
</nav>
</div>
<div class="main-content mt-4">
<div class="container">
<div class="row">
<!-- 新闻动态 -->
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-header d-flex justify-content-between">
<h5 class="mb-0">新闻动态</h5>
<a href="#" class="more">更多</a>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li class="mb-2">
<a href="#">老年人能力评估MZT039-2013民政部标准</a>
<span class="float-end text-muted">09-02</span>
</li>
<li class="mb-2">
<a href="#">老年人能力定期评估</a>
<span class="float-end text-muted">09-25</span>
</li>
</ul>
</div>
</div>
<!-- 通知公告 -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between">
<h5 class="mb-0">通知公告</h5>
<a href="#" class="more">更多</a>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li class="mb-2">
<a href="#">关于2024年第一季度老年人能力评估工作安排的通知</a>
<span class="float-end text-muted">03-01</span>
</li>
<li class="mb-2">
<a href="#">2023年度评估结果公示通知</a>
<span class="float-end text-muted">02-15</span>
</li>
<li class="mb-2">
<a href="#">关于开展老年人能力评估师培训的通知</a>
<span class="float-end text-muted">02-01</span>
</li>
</ul>
</div>
</div>
<!-- 政策法规 -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between">
<h5 class="mb-0">政策法规</h5>
<a href="#" class="more">更多</a>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li class="mb-2">
<a href="#">《老年人能力评估标准》（2024版）</a>
<span class="float-end text-muted">01-15</span>
</li>
<li class="mb-2">
<a href="#">关于加强老年人能力评估工作的指导意见</a>
<span class="float-end text-muted">12-20</span>
</li>
<li class="mb-2">
<a href="#">老年人能力评估管理办法（试行）</a>
<span class="float-end text-muted">11-30</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 登录框 -->
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="mb-0">登录</h5>
</div>
<div class="card-body">
<form>
<div class="mb-3">
<label class="form-label">用户名：</label>
<input type="text" class="form-control" id="username">
</div>
<div class="mb-3">
<label class="form-label">密码：</label>
<input type="password" class="form-control" id="password">
</div>
<div class="mb-3">
<label class="form-label">验证码：</label>
<div class="d-flex">
<input type="text" class="form-control" id="imageCaptchaCode">
<img src="https://www.jkheb2030.org.cn/Tools/SecurityCode?chk=11111111" valign ="middle"id="imgverify"align-="middle"alt="看不清？点击更换" onclick="this.src =this.src+'1'" width="80" height="34" style="cursor:pointer;">
</div>
</div>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary" onclick="submitLogin()">登录</button>
<div>
<a href="./注册.html" class="text-decoration-none">免费注册</a>
<a href="#" class="text-decoration-none ms-2">忘记密码?</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="containers">
<div class="box">
<div class="box-content">
<h3>联系方式</h3>
<hr width="100%" height="2px" color="black">
<ul>
<li>联系电话：1234567890</li>
<li>邮箱：1234567890@qq.com</li>
<li>地址：河北省石家庄市长安区</li>
</ul>
</div>
</div>
</div>
<div class="container-1">
<div class="box-1">
<p>石家庄市老年人能力评估中心/地址：河北省石家庄市长安区</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 设置 axios 默认配置
axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.withCredentials = true;
function submitLogin() {
// 获取表单数据
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const imageCaptchaCode = document.getElementById('imageCaptchaCode').value;
// 表单验证
if (!username || !password || !imageCaptchaCode) {
alert('请填写所有必填项');
return;
}
// 构造请求数据
const requestData = {
username: username,
password: password,
imageCaptchaCode: imageCaptchaCode
};
console.log('Sending login request:', requestData); // 添加调试日志
// 发送登录请求
axios.post('/api/login', requestData, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log('Login response:', response); // 添加调试日志
if (response.data.code === '1') {
alert('登录成功！');
window.location.href = './用户中心.html';
// 存储用户信息到 localStorage
localStorage.setItem('user', JSON.stringify(response.data.data));
} else {
alert(response.data.msg || '登录失败');
}
})
.catch(error => {
console.error('Login error:', error); // 添加调试日志
if (error.response && error.response.data) {
alert(error.response.data.msg || '登录失败，请稍后重试');
} else {
alert('登录失败，请检查网络连接');
}
});
}
// 添加按钮点击事件监听器
// document.addEventListener('DOMContentLoaded', function() {
// const loginButton = document.querySelector('button[onclick="submitLogin()"]');
// if (loginButton) {
// loginButton.addEventListener('click', function(e) {
// e.preventDefault(); // 阻止表单默认提交
// submitLogin();
// });
// }
// });
</script>
</body>
</html>
注册页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f5f5f5;
font-family: "Microsoft YaHei", sans-serif;
}
.header {
background-color: #fff;
padding: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo img {
max-height: 60px;
}
.main-content {
padding: 40px 0;
}
.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.card-header {
background-color: #f8f9fa;
border-bottom: 2px solid #007bff;
padding: 15px;
}
.card-header h5 {
color: #007bff;
font-weight: bold;
}
.form-control {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 15px;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}
.btn-primary {
padding: 8px 25px;
background-color: #007bff;
border: none;
}
.btn-primary:hover {
background-color: #0056b3;
}
.verification-code {
display: flex;
gap: 10px;
align-items: center;
}
.verification-code img {
height: 38px;
cursor: pointer;
}
.verification-code .btn {
white-space: nowrap;
}
@media (max-width: 768px) {
.header {
padding: 10px 0;
}
}
/* 搜索框样式 */
.search-wrap {
padding: 10px 0;
}
.search-box {
display: flex;
margin-bottom: 10px;
}
.search-box input {
flex: 1;
padding: 8px 15px;
border: 2px solid #007bff;
border-right: none;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box button {
padding: 8px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.hot-search {
font-size: 14px;
color: #666;
}
/* 导航栏样式 */
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .navbar {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar-style .nav-link:hover,
.navbar-style .nav-link.active {
background-color: #0056b3;
}
/* 导航栏样式 */
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .navbar {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar-style .nav-link:hover,
.navbar-style .nav-link.active {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- <a href="#" class="logo">
<img src="#" alt="logo">
</a> -->
</div>
</div>
</div>
</div>
<div class="header">
<div class="containter">
<div class="row">
<div class="col-lg-8 col-md-6">
<a href="#" class="logo">
<img src="#" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6">
<div class="search-wrap">
<form action="/Serach" method="get" class="search-box" target="_blank">
<input type="text" name="keys" autocomplete="off" value>
<button type="submit">搜索</button>
</form>
<dl class="hot-search">
<dt>
<span>热门搜索：</span>
</dt>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-style">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="./老年人评估系统.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">老年人定期评估</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">评估数据查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">通知公告</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">政策法规</a>
<!-- </li>
<li class="nav-item">
<a class="nav-link" href="#">专家老师</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">课程中心</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#">联系方式</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">证书查询</a>
</li> -->
</ul>
</div>
</div>
</nav>
</div>
<div class="main-content">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="mb-0">用户注册</h5>
</div>
<div class="card-body">
<form id="registerForm">
<div class="mb-3">
<label class="form-label">用户名：</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="mb-3">
<label class="form-label">图片验证码：</label>
<div class="verification-code">
<input type="text" class="form-control" id="imageCaptchaCode" required>
<img src="https://www.jkheb2030.org.cn/Tools/SecurityCode?chk=11111111" valign ="middle"id="imgverify"align-="middle"alt="看不清？点击更换" onclick="this.src =this.src+'1'" width="80" height="34" style="cursor:pointer;">
</div>
</div>
<div class="mb-3">
<label class="form-label">设置密码：</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<label class="form-label">确认密码：</label>
<input type="password" class="form-control" id="confirmPassword" required>
</div>
<div class="d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-primary" onclick="submitRegister()">注册</button>
<a href="./老年人评估系统.html" class="text-decoration-none">已有账号？立即登录</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// axios配置
const instance = axios.create({
baseURL: 'http://localhost:8080',
withCredentials: true,
headers: {
'Content-Type': 'application/json'
}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:5500';
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 刷新验证码
function refreshCaptcha() {
document.getElementById('captchaImage').src =
'http://localhost:8080/api/captcha?' + new Date().getTime();
}
// 提交注册
function submitRegister() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
const imageCaptchaCode = document.getElementById('imageCaptchaCode').value;
// 表单验证
if (!username || !password || !confirmPassword || !imageCaptchaCode) {
alert('请填写所有必填项');
return;
}
if (password !== confirmPassword) {
alert('两次输入的密码不一致');
return;
}
// 构造请求数据
const requestData = {
username: username,
password: password,
imageCaptchaCode: imageCaptchaCode
};
// 发送请求
axios.post('http://localhost:8080/api/register', requestData, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.data.code === '1') {
alert('注册成功！');
window.location.href = './index.html';
} else {
alert(response.data.msg || '注册失败');
}
})
.catch(error => {
console.error('Error:', error);
if (error.response && error.response.data) {
alert(error.response.data.msg || '注册失败，请稍后重试');
} else {
alert('注册失败，请检查网络连接');
}
});
}
</script>
</body>
</html>
用户基本信息填写
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户中心 - 老年人评估系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 继承老年人评估系统的全局样式 */
body {
background-color: #f5f5f5;
font-family: "Microsoft YaHei", sans-serif;
}
.header {
background-color: #fff;
padding: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar-style .nav-link:hover,
.navbar-style .nav-link.active {
background-color: #0056b3;
}
/* 搜索框样式 */
.search-wrap {
padding: 10px 0;
}
.search-box {
display: flex;
margin-bottom: 10px;
}
.search-box input {
flex: 1;
padding: 8px 15px;
border: 2px solid #007bff;
border-right: none;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box button {
padding: 8px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.hot-search {
font-size: 14px;
color: #666;
}
/* 导航栏样式 */
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .navbar {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar-style .nav-link:hover,
.navbar-style .nav-link.active {
background-color: #0056b3;
}
/* 用户中心特定样式 */
.user-info-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
margin-top: 20px;
}
.form-label {
font-weight: 500;
}
.required::after {
content: "*";
color: red;
margin-left: 4px;
}
.btn-save {
background-color: #007bff;
color: white;
padding: 10px 30px;
border: none;
border-radius: 4px;
font-size: 16px;
}
.btn-save:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div class="navbar-style">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="./index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./用户中心.html">用户中心</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./评估数据查询页面.html">评估数据查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./通知公告.html">通知公告</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./联系方式.html">联系方式</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- 主要内容 -->
<div class="container">
<div class="user-info-card">
<h3 class="mb-4">基本信息</h3>
<form id="userInfoForm">
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label required">姓名</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">性别</label>
<select class="form-select" id="gender" required>
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">出生日期</label>
<input type="date" class="form-control" id="birthDate" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">身份证号</label>
<input type="text" class="form-control" id="idCard" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">社保卡号</label>
<input type="text" class="form-control" id="socialSecurityCard" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">民族</label>
<select class="form-select" id="ethnicity" required>
<option value="">请选择</option>
<option value="汉族">汉族</option>
<option value="other">其他</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">文化程度</label>
<select class="form-select" id="education" required>
<option value="">请选择</option>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">宗教信仰</label>
<select class="form-select" id="religion">
<option value="">请选择</option>
<option value="none">无</option>
<option value="buddhism">佛教</option>
<option value="christianity">基督教</option>
<option value="islam">伊斯兰教</option>
<option value="other">其他</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">婚姻状况</label>
<select class="form-select" id="maritalStatus" required>
<option value="">请选择</option>
<option value="married">已婚</option>
<option value="single">未婚</option>
<option value="divorced">离异</option>
<option value="widowed">丧偶</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label required">居住情况</label>
<select class="form-select" id="livingCondition" required>
<option value="">请选择</option>
<option value="withFamily">与家人同住</option>
<option value="alone">独居</option>
<option value="nursingHome">养老院</option>
<option value="other">其他</option>
</select>
</div>
</div>
<div class="text-center mt-4">
<button type="button" class="btn btn-save" onclick="saveUserInfo()">保存信息</button>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 修改 axios 默认配置
axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.withCredentials = true;
// 页面加载时获取用户信息
document.addEventListener('DOMContentLoaded', function() {
// 获取用户详细信息
axios.get('http://localhost:8080/api/user/info/{idCard}', {
params: {
idCard: localStorage.getItem('userIdCard') // 假设登录时存储了身份证号
}
})
.then(response => {
if (response.data.code === '1' && response.data.data) {
// 用户信息存在，填充表单
fillForm(response.data.data);
// 禁用表单编辑
disableForm(true);
} else {
// 用户信息不存在，允许编辑
disableForm(false);
}
})
.catch(error => {
console.error('Get user info error:', error);
// 发生错误时允许编辑
disableForm(false);
});
});
function fillForm(userInfo) {
document.getElementById('name').value = userInfo.name || '';
document.getElementById('gender').value = userInfo.gender || '';
document.getElementById('birthDate').value = formatDate(userInfo.birthDate) || '';
document.getElementById('idCard').value = userInfo.idCard || '';
document.getElementById('socialSecurityCard').value = userInfo.socialSecurityCard || '';
document.getElementById('ethnicity').value = userInfo.ethnicity || '';
document.getElementById('education').value = userInfo.education || '';
document.getElementById('religion').value = userInfo.religion || '';
document.getElementById('maritalStatus').value = userInfo.maritalStatus || '';
document.getElementById('livingCondition').value = userInfo.livingCondition || '';
}
function disableForm(disabled) {
const formElements = document.querySelectorAll('#userInfoForm input, #userInfoForm select');
formElements.forEach(element => {
element.disabled = disabled;
});
// 如果表单被禁用，隐藏保存按钮
const saveButton = document.querySelector('.btn-save');
if (saveButton) {
saveButton.style.display = disabled ? 'none' : 'block';
}
}
function formatDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toISOString().split('T')[0];
}
function saveUserInfo() {
const formData = {
name: document.getElementById('name').value,
gender: document.getElementById('gender').value,
birthDate: document.getElementById('birthDate').value + 'T00:00:00', // 添加时间部分
idCard: document.getElementById('idCard').value,
socialSecurityCard: document.getElementById('socialSecurityCard').value,
ethnicity: document.getElementById('ethnicity').value,
education: document.getElementById('education').value,
religion: document.getElementById('religion').value || null,
maritalStatus: document.getElementById('maritalStatus').value,
livingCondition: document.getElementById('livingCondition').value
};
// 表单验证
if (!validateForm(formData)) {
return;
}
// 发送保存请求
axios.post('/api/user/info', formData) // 直接发送对象，让axios处理序列化
.then(response => {
if (response.data.code === '1') {
alert('保存成功！');
disableForm(true);
location.reload();
} else {
alert(response.data.msg || '保存失败');
}
})
.catch(error => {
console.error('Save error:', error);
alert(error.response?.data?.msg || '保存失败，请稍后重试');
});
}
function validateForm(formData) {
// 必填字段验证
const requiredFields = ['name', 'gender', 'birthDate', 'idCard', 'socialSecurityCard',
'ethnicity', 'education', 'maritalStatus', 'livingCondition'];
for (const field of requiredFields) {
if (!formData[field]) {
alert(`请填写${getFieldName(field)}`);
return false;
}
}
// 身份证号验证
if (!/^\d{17}[\dX]$/.test(formData.idCard)) {
alert('请输入正确的身份证号');
return false;
}
// 验证日期不能大于当前日期
const birthDate = new Date(formData.birthDate);
const today = new Date();
if (birthDate > today) {
alert('出生日期不能大于当前日期');
return false;
}
return true;
}
function getFieldName(field) {
const fieldNames = {
name: '姓名',
gender: '性别',
birthDate: '出生日期',
idCard: '身份证号',
socialSecurityCard: '社保卡号',
ethnicity: '民族',
education: '文化程度',
maritalStatus: '婚姻状况',
livingCondition: '居住情况'
};
return fieldNames[field] || field;
}
</script>
</body>
</html>
浙公网安备 33010602011771号