学习19
老年人评估系统的前端修改
index.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;
}
/* 搜索框样式 */
.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.data);
if (response.data.code === '1') {
// 存储用户信息和token
localStorage.setItem('user', JSON.stringify(response.data.data));
localStorage.setItem('token', response.data.data.token);
alert('登录成功！');
window.location.href = './用户中心.html';
} else {
alert(response.data.msg || '登录失败');
}
})
.catch(error => {
console.error('Login error:', error);
if (error.response) {
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="./index.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>
<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="./联系方式.html">联系方式</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() {
// 从 localStorage 获取用户信息和 token
const userInfo = JSON.parse(localStorage.getItem('user') || '{}');
const token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = './index.html';
return;
}
// 获取用户详细信息
axios.get('/api/user/info', {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
})
.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 token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = './index.html';
return;
}
const formData = {
name: document.getElementById('name').value,
gender: document.getElementById('gender').value,
birthDate: document.getElementById('birthDate').value,
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, {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
})
.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>
评估问卷
<!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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.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;
}
.main-content {
padding: 40px 0;
}
.assessment-form {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.form-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 20px 30px;
}
.form-header h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.form-progress {
padding: 20px 30px;
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
.progress {
height: 10px;
border-radius: 5px;
}
.form-section {
padding: 30px;
display: none;
}
.form-section.active {
display: block;
}
.question-group {
margin-bottom: 30px;
padding: 20px;
border-radius: 8px;
background: #f8f9fa;
}
.question-title {
font-weight: 600;
color: #007bff;
margin-bottom: 15px;
font-size: 18px;
}
.form-check {
margin-bottom: 10px;
padding-left: 30px;
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.form-navigation {
padding: 20px 30px;
background: #f8f9fa;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.btn-nav {
padding: 10px 25px;
border-radius: 5px;
font-weight: 500;
}
.section-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
padding-bottom: 10px;
border-bottom: 2px solid #007bff;
}
/* 添加动画效果 */
.form-section {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</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">
<div class="container">
<form class="assessment-form">
<div class="form-header">
<h2><i class="fas fa-clipboard-list me-2"></i>老年人能力评估问卷</h2>
</div>
<div class="form-progress">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div>
</div>
<div class="form-section active" id="section1">
<div class="section-title">
<i class="fas fa-tasks me-2"></i>日常生活活动 (ADL)
</div>
<!-- 进食 -->
<div class="question-group">
<div class="question-title">进食: 老年人是否能够独立使用餐具进食？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="eating" id="eating1">
<label class="form-check-label" for="eating1">完全独立，可自行使用餐具</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="eating" id="eating2">
<label class="form-check-label" for="eating2">需要部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="eating" id="eating3">
<label class="form-check-label" for="eating3">使用留置营养管</label>
</div>
</div>
<!-- 洗澡 -->
<div class="question-group">
<div class="question-title">洗澡: 老年人是否能够独立完成洗澡过程？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bathing" id="bathing1">
<label class="form-check-label" for="bathing1">完全独立，可自行完成</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bathing" id="bathing2">
<label class="form-check-label" for="bathing2">需要他人帮助</label>
</div>
</div>
<!-- 修饰 -->
<div class="question-group">
<div class="question-title">修饰: 老年人是否能够独立完成洗脸、刷牙、梳头、刮脸等？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="grooming" id="grooming1">
<label class="form-check-label" for="grooming1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="grooming" id="grooming2">
<label class="form-check-label" for="grooming2">需要帮助</label>
</div>
</div>
<!-- 穿衣 -->
<div class="question-group">
<div class="question-title">穿衣: 老年人是否能够独立穿脱衣服、系扣、拉拉链、穿脱鞋袜、系鞋带？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="dressing" id="dressing1">
<label class="form-check-label" for="dressing1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="dressing" id="dressing2">
<label class="form-check-label" for="dressing2">需要帮助</label>
</div>
</div>
<!-- 大便控制 -->
<div class="question-group">
<div class="question-title">大便控制: 老年人是否能够控制大便？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bowelControl" id="bowelControl1">
<label class="form-check-label" for="bowelControl1">完全控制</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bowelControl" id="bowelControl2">
<label class="form-check-label" for="bowelControl2">偶尔失控</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bowelControl" id="bowelControl3">
<label class="form-check-label" for="bowelControl3">完全失控</label>
</div>
</div>
<!-- 小便控制 -->
<div class="question-group">
<div class="question-title">小便控制: 老年人是否能够控制小便？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="urineControl" id="urineControl1">
<label class="form-check-label" for="urineControl1">完全控制</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="urineControl" id="urineControl2">
<label class="form-check-label" for="urineControl2">偶尔失控</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="urineControl" id="urineControl3">
<label class="form-check-label" for="urineControl3">完全失控</label>
</div>
</div>
<!-- 如厕 -->
<div class="question-group">
<div class="question-title">如厕: 老年人是否能够独立完成去厕所、解开衣裤、擦净、整理衣裤、冲水？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="toileting" id="toileting1">
<label class="form-check-label" for="toileting1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="toileting" id="toileting2">
<label class="form-check-label" for="toileting2">需要帮助</label>
</div>
</div>
<!-- 床椅转移 -->
<div class="question-group">
<div class="question-title">床椅转移: 老年人是否能够独立完成床椅转移？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer1">
<label class="form-check-label" for="bedTransfer1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer2">
<label class="form-check-label" for="bedTransfer2">部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer3">
<label class="form-check-label" for="bedTransfer3">极大帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer4">
<label class="form-check-label" for="bedTransfer4">完全依赖他人</label>
</div>
</div>
<!-- 平地行走 -->
<div class="question-group">
<div class="question-title">平地行走: 老年人是否能够独立在平地上行走45m？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking1">
<label class="form-check-label" for="walking1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking2">
<label class="form-check-label" for="walking2">部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking3">
<label class="form-check-label" for="walking3">极大帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking4">
<label class="form-check-label" for="walking4">完全依赖他人</label>
</div>
</div>
<!-- 上下楼梯 -->
<div class="question-group">
<div class="question-title">上下楼梯: 老年人是否能够独立上下楼梯？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs1">
<label class="form-check-label" for="stairs1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs2">
<label class="form-check-label" for="stairs2">部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs3">
<label class="form-check-label" for="stairs3">极大帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs4">
<label class="form-check-label" for="stairs4">完全依赖他人</label>
</div>
</div>
</div>
<!-- 第二部分：精神状态 -->
<div class="form-section" id="section2">
<div class="section-title">
<i class="fas fa-brain me-2"></i>精神状态
</div>
<!-- 认知功能 -->
<div class="question-group">
<div class="question-title">认知功能</div>
<p>请您依次回答以下问题，以评估老年人的认知功能。</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cognitive" id="cognitive1">
<label class="form-check-label" for="cognitive1">老年人能够回忆出您刚刚说过的三个物品？</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cognitive" id="cognitive2">
<label class="form-check-label" for="cognitive2">老年人能够正确绘制一个时钟，并标出10点45分？</label>
</div>
</div>
<!-- 攻击行为 -->
<div class="question-group">
<div class="question-title">攻击行为</div>
<p>请您根据老年人近期的表现，选择相应的选项。</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="aggression" id="aggression1">
<label class="form-check-label" for="aggression1">老年人出现过身体攻击行为（如打人、踢人）？</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="aggression" id="aggression2">
<label class="form-check-label" for="aggression2">老年人出现过语言攻击行为（如骂人、威胁）？</label>
</div>
</div>
<!-- 抑郁症状 -->
<div class="question-group">
<div class="question-title">抑郁症状</div>
<p>请您根据老年人近期的表现，选择相应的选项。</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="depression" id="depression1">
<label class="form-check-label" for="depression1">老年人情绪低落、不爱说话、不爱梳洗、不爱活动？</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="depression" id="depression2">
<label class="form-check-label" for="depression2">老年人有自杀念头或行为？</label>
</div>
</div>
</div>
<!-- 第三部分：感知觉与沟通 -->
<div class="form-section" id="section3">
<div class="section-title">
<i class="fas fa-eye me-2"></i>感知觉与沟通
</div>
<!-- 意识水平 -->
<div class="question-group">
<div class="question-title">意识水平</div>
<p>请您根据老年人的意识状态，选择相应的选项。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness1">
<label class="form-check-label" for="consciousness1">清醒，对周围环境警觉</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness2">
<label class="form-check-label" for="consciousness2">嗜睡</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness3">
<label class="form-check-label" for="consciousness3">昏睡</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness4">
<label class="form-check-label" for="consciousness4">昏迷</label>
</div>
</div>
<!-- 视力 -->
<div class="question-group">
<div class="question-title">视力</div>
<p>请您评估老年人佩戴眼镜后的视力状况。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision1">
<label class="form-check-label" for="vision1">能看清书报上的标准字体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision2">
<label class="form-check-label" for="vision2">能看清楚大字体，但看不清书报上的标准字体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision3">
<label class="form-check-label" for="vision3">视力有限，看不清报纸大标题，但能辨认物体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision4">
<label class="form-check-label" for="vision4">辨认物体有困难，但眼睛能跟随物体移动，只能看到光、颜色和形状</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision5">
<label class="form-check-label" for="vision5">没有视力，眼睛不能跟随物体移动</label>
</div>
</div>
<!-- 听力 -->
<div class="question-group">
<div class="question-title">听力</div>
<p>请您评估老年人佩戴助听器后的听力状况。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing1">
<label class="form-check-label" for="hearing1">能正常交谈，听到电视、电话、门铃的声音</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing2">
<label class="form-check-label" for="hearing2">轻声说话或说话距离超过2米时听不清</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing3">
<label class="form-check-label" for="hearing3">正常交流有些困难，需在安静的环境或大声说话才能听到</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing4">
<label class="form-check-label" for="hearing4">讲话者大声说话或说话很慢，才能部分听见</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing5">
<label class="form-check-label" for="hearing5">完全听不见</label>
</div>
</div>
<!-- 沟通交流 -->
<div class="question-group">
<div class="question-title">沟通交流</div>
<p>请您评估老年人与人沟通交流的能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication1">
<label class="form-check-label" for="communication1">能与他人正常沟通和交流</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication2">
<label class="form-check-label" for="communication2">能表达自己的需要及理解别人的话，但需要增加时间或给予帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication3">
<label class="form-check-label" for="communication3">表达需要或理解有困难，需频繁重复或简化口头表达</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication4">
<label class="form-check-label" for="communication4">不能表达需要或理解他人的话</label>
</div>
</div>
</div>
<!-- 第四部分：社会参与 -->
<div class="form-section" id="section4">
<div class="section-title">
<i class="fas fa-users me-2"></i>社会参与
</div>
<!-- 生活能力 -->
<div class="question-group">
<div class="question-title">生活能力</div>
<p>请您评估老年人处理日常生活事务的能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills1">
<label class="form-check-label" for="lifeSkills1">除个人生活自理外，能料理家务或当家管理事务</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills2">
<label class="form-check-label" for="lifeSkills2">除个人生活自理外，能做家务，但欠好，家庭事务安排欠条理</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills3">
<label class="form-check-label" for="lifeSkills3">个人生活能自理；只有在他人帮助下才能做些家务，但质量不好</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills4">
<label class="form-check-label" for="lifeSkills4">个人基本生活事务能自理，在督促下可洗漱</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills5">
<label class="form-check-label" for="lifeSkills5">个人基本生活事务需要部分帮助或完全依赖他人帮助</label>
</div>
</div>
<!-- 工作能力 -->
<div class="question-group">
<div class="question-title">工作能力</div>
<p>请您评估老年人处理工作的能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills1">
<label class="form-check-label" for="workSkills1">原来熟练的脑力工作或体力技巧性工作可照常进行</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills2">
<label class="form-check-label" for="workSkills2">原来熟练的脑力工作或体力技巧性工作能力有所下降</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills3">
<label class="form-check-label" for="workSkills3">原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills4">
<label class="form-check-label" for="workSkills4">对熟练工作只有一些片段保留，技能全部遗忘</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills5">
<label class="form-check-label" for="workSkills5">对以往的知识或技能全部磨灭</label>
</div>
</div>
<!-- 时间/空间定向 -->
<div class="question-group">
<div class="question-title">时间/空间定向</div>
<p>请您评估老年人对时间和空间的感知能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="timeSpaceOrientation" id="timeSpaceOrientation1">
<label class="form-check-label" for="timeSpaceOrientation1">时间观念清楚，可单独出远门，能很快掌握新环境的方位</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="timeSpaceOrientation" id="timeSpaceOrientation2">
<label class="form-check-label" for="timeSpaceOrientation2">时间观念有些下降，年、月、日清楚，但有时相差几天；可单独来往于近街，知道现住地的名称和方位，但不知回家路线</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="timeSpaceOrientation" id="timeSpaceOrientation3">
<label class="form-check-label" for="timeSpaceOrientation3">时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位</label>
</div>
</div>
</div>
<div class="form-navigation">
<button type="button" class="btn btn-secondary btn-nav" id="prevBtn">
<i class="fas fa-arrow-left me-2"></i>上一步
</button>
<button type="button" class="btn btn-primary btn-nav" id="nextBtn">
下一步<i class="fas fa-arrow-right ms-2"></i>
</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; // 允许跨域请求携带凭证
// 处理表单导航
let currentSection = 1;
const totalSections = 4;
function updateProgress() {
const progress = (currentSection / totalSections) * 100;
document.querySelector('.progress-bar').style.width = `${progress}%`;
}
function showSection(sectionNumber) {
document.querySelectorAll('.form-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(`section${sectionNumber}`).classList.add('active');
updateProgress();
}
let formData = {
// ADL部分
eating: '',
bathing: '',
grooming: '',
dressing: '',
bowelControl: '',
urineControl: '',
toileting: '',
bedTransfer: '',
walking: '',
stairs: '',
// 精神状态部分
cognitiveMemory: false,
cognitiveClock: false,
aggressionPhysical: false,
aggressionVerbal: false,
depressionMood: false,
depressionSuicide: false,
// 感知觉与沟通部分
consciousness: '',
vision: '',
hearing: '',
communication: '',
// 社会参与部分
lifeSkills: '',
workSkills: '',
timeSpaceOrientation: ''
};
// 修改收集数据的函数，确保数据格式与后端实体类匹配
function collectCurrentSectionData() {
const currentSectionElement = document.getElementById(`section${currentSection}`);
// 获取所有单选按钮的值
currentSectionElement.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
const name = radio.getAttribute('name');
// 获取选中选项的文本内容，并限制长度
const value = radio.nextElementSibling.textContent.trim();
// 根据不同字段设置不同的最大长度
const maxLength = getMaxLength(name);
formData[convertToCamelCase(name)] = value.substring(0, maxLength);
});
// 获取所有复选框的值
currentSectionElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
const name = checkbox.getAttribute('name');
if (name === 'cognitive') {
if (checkbox.id === 'cognitive1') {
formData.cognitiveMemory = checkbox.checked;
} else if (checkbox.id === 'cognitive2') {
formData.cognitiveClock = checkbox.checked;
}
} else if (name === 'aggression') {
if (checkbox.id === 'aggression1') {
formData.aggressionPhysical = checkbox.checked;
} else if (checkbox.id === 'aggression2') {
formData.aggressionVerbal = checkbox.checked;
}
} else if (name === 'depression') {
if (checkbox.id === 'depression1') {
formData.depressionMood = checkbox.checked;
} else if (checkbox.id === 'depression2') {
formData.depressionSuicide = checkbox.checked;
}
}
});
}
// 辅助函数：转换为驼峰命名
function convertToCamelCase(str) {
return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
}
// 根据字段名获取最大长度
function getMaxLength(fieldName) {
const lengthMap = {
// ADL部分
eating: 100,
bathing: 100,
grooming: 100,
dressing: 100,
bowelControl: 100,
urineControl: 100,
toileting: 100,
bedTransfer: 100,
walking: 100,
stairs: 100,
// 感知觉与沟通部分
consciousness: 100,
vision: 200,
hearing: 200,
communication: 200,
// 社会参与部分
lifeSkills: 200,
workSkills: 200,
timeSpaceOrientation: 200
};
return lengthMap[fieldName] || 100; // 默认长度为100
}
// 修改提交问卷函数
function submitQuestionnaire() {
// 最后一次收集数据
collectCurrentSectionData();
// 打印数据，用于调试
console.log('提交的数据：', formData);
// 发送数据到后端
axios.post('/api/questionnaire/submit', formData, {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
}
})
.then(response => {
console.log('响应数据：', response.data);
if (response.data.code === '1') {
alert('问卷提交成功！');
// 重置表单
document.querySelector('form').reset();
// 返回第一部分
currentSection = 1;
showSection(currentSection);
} else {
alert(response.data.msg || '提交失败');
}
})
.catch(error => {
console.error('Submit error:', error);
alert('提交失败：' + (error.response?.data?.msg || '请稍后重试'));
});
}
// 添加表单验证
function validateForm() {
const currentSectionElement = document.getElementById(`section${currentSection}`);
const unfilledQuestions = [];
// 检查当前部分的所有问题组
currentSectionElement.querySelectorAll('.question-group').forEach(group => {
const questionTitle = group.querySelector('.question-title').textContent;
const hasChecked = group.querySelector('input[type="radio"]:checked, input[type="checkbox"]:checked');
if (!hasChecked) {
unfilledQuestions.push(questionTitle.split(':')[0]);
}
});
if (unfilledQuestions.length > 0) {
alert(`请完成以下问题：\n${unfilledQuestions.join('\n')}`);
return false;
}
return true;
}
// 修改下一步按钮的点击事件
document.getElementById('nextBtn').addEventListener('click', () => {
// 验证当前部分
if (!validateForm()) {
return;
}
// 收集当前部分的答案
collectCurrentSectionData();
if (currentSection < totalSections) {
currentSection++;
showSection(currentSection);
} else {
// 最后一部分完成时，提交整个问卷
submitQuestionnaire();
}
});
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentSection > 1) {
currentSection--;
showSection(currentSection);
}
});
axios.get('/api/questionnaire/' + id)
.then(response => {
if (response.data.code === '1') {
const questionnaire = response.data.data;
document.getElementById('totalScore').textContent =
questionnaire.totalScore;
document.getElementById('assessmentResult').textContent =
questionnaire.assessmentResult;
}
});
document.addEventListener('DOMContentLoaded', function() {
// 检查登录状态
const token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = './index.html';
return;
}
// 初始化表单导航
updateProgress();
showSection(currentSection);
// 绑定提交按钮事件
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
submitQuestionnaire();
});
});
// 直接在新窗口打开下载链接
window.open('/api/questionnaire/export?' +
'startDate=2024-01-01&endDate=2024-03-20&assessmentResult=正常');
</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">
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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;
}
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
}
.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;
}
.filter-form {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}
.table th {
background-color: #f8f9fa;
}
.pagination {
margin-bottom: 0;
}
.btn-primary {
background-color: #007bff;
border: none;
}
.btn-primary:hover {
background-color: #0056b3;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}
.status-badge {
padding: 5px 10px;
border-radius: 15px;
font-size: 12px;
}
.status-normal {
background-color: #28a745;
color: white;
}
.status-attention {
background-color: #ffc107;
color: black;
}
.status-warning {
background-color: #dc3545;
color: white;
}
/* 搜索框样式 */
.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;
}
.search-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.table-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</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">
<div class="container">
<div class="card">
<div class="card-header">
<h5 class="mb-0">评估数据查询</h5>
</div>
<div class="card-body">
<!-- 查询条件表单 -->
<div class="search-section">
<form id="searchForm" class="row g-3">
<div class="col-md-4">
<label class="form-label">开始日期</label>
<input type="date" class="form-control" id="startDate">
</div>
<div class="col-md-4">
<label class="form-label">结束日期</label>
<input type="date" class="form-control" id="endDate">
</div>
<div class="col-md-4">
<label class="form-label">评估结果</label>
<select class="form-select" id="assessmentResult">
<option value="">全部</option>
<option value="正常">正常</option>
<option value="需要关注">需要关注</option>
<option value="需要警惕">需要警惕</option>
</select>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">
<i class="bi bi-search"></i> 查询
</button>
<button type="button" class="btn btn-success ms-2" id="exportBtn">
<i class="bi bi-download"></i> 导出Excel
</button>
</div>
</form>
</div>
<!-- 查询结果表格 -->
<div class="table-container">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>评估时间</th>
<th>评估结果</th>
<th>总分</th>
</tr>
</thead>
<tbody id="questionnaireList">
<!-- 数据将通过JavaScript动态填充 -->
</tbody>
</table>
</div>
<!-- 分页 -->
<nav aria-label="Page navigation" class="mt-4">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
$(document).ready(function() {
// 初始化日期范围选择器
$('#dateRange').daterangepicker({
locale: {
format: 'YYYY-MM-DD',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '至',
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
]
},
startDate: moment().subtract(29, 'days'),
endDate: moment(),
ranges: {
'今日': [moment(), moment()],
'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'最近7日': [moment().subtract(6, 'days'), moment()],
'最近30日': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
});
});
document.addEventListener('DOMContentLoaded', function() {
// 检查登录状态
const token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = './login.html';
return;
}
// 加载初始数据
loadQuestionnaires();
// 查询表单提交
document.getElementById('searchForm').addEventListener('submit', function(e) {
e.preventDefault();
loadQuestionnaires();
});
// 导出按钮点击事件
document.getElementById('exportBtn').addEventListener('click', exportQuestionnaires);
});
function loadQuestionnaires() {
const token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = './login.html';
return;
}
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const assessmentResult = document.getElementById('assessmentResult').value;
// 修改API路径，确保与后端Controller路径一致
axios.get('http://localhost:8080/api/questionnaire/search', {
params: {
startDate: startDate || null,
endDate: endDate || null,
assessmentResult: assessmentResult || null
},
headers: {
'Authorization': token
}
})
.then(response => {
if (response.data.code === '1') {
displayQuestionnaires(response.data.data);
} else {
alert(response.data.msg || '查询失败');
}
})
.catch(error => {
console.error('查询错误:', error);
if (error.response) {
// 服务器返回错误状态码
alert('查询失败: ' + (error.response.data.msg || '服务器错误'));
} else if (error.request) {
// 请求发送失败
alert('无法连接到服务器，请检查网络连接');
} else {
// 其他错误
alert('查询失败，请稍后重试');
}
});
}
function displayQuestionnaires(questionnaires) {
const tbody = document.getElementById('questionnaireList');
tbody.innerHTML = '';
if (!questionnaires || questionnaires.length === 0) {
tbody.innerHTML = '<tr><td colspan="3" class="text-center">暂无数据</td></tr>';
return;
}
questionnaires.forEach(q => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${formatDate(q.createTime)}</td>
<td>
<span class="status-badge ${getStatusClass(q.assessmentResult)}">
${q.assessmentResult}
</span>
</td>
<td>${q.totalScore}</td>
`;
tbody.appendChild(row);
});
}
function getStatusClass(result) {
switch (result) {
case '正常':
return 'status-normal';
case '需要关注':
return 'status-attention';
case '需要警惕':
return 'status-warning';
default:
return '';
}
}
function formatDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}
function exportQuestionnaires() {
const token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = './login.html';
return;
}
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const assessmentResult = document.getElementById('assessmentResult').value;
// 构建参数对象，只包含非空值
const params = new URLSearchParams();
if (startDate) {
params.append('startDate', startDate);
}
if (endDate) {
params.append('endDate', endDate);
}
if (assessmentResult) {
params.append('assessmentResult', assessmentResult);
}
// 创建下载链接
const downloadUrl = `http://localhost:8080/api/questionnaire/export${params.toString() ? '?' + params.toString() : ''}`;
// 添加token到header并下载
fetch(downloadUrl, {
headers: {
'Authorization': token
}
})
.then(response => {
if (!response.ok) {
throw new Error('导出失败');
}
return response.blob();
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `评估数据_${new Date().toLocaleDateString()}.xlsx`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('导出错误:', error);
alert('导出失败，请稍后重试');
});
}
</script>
</body>
</html>
以上是最主要的页面代码。
通过对前后端代码的修改，完善了登录状态的保持功能但是整体效果一般，实现了我预期的一些功能。
至此，老年人评估系统就基本写完了，但是还存在很多问题，需要不断的修改优化，在写这个管理系统的时候我借助了AI帮我进行优化和前端框架的书写。在写的过程中收获了很多，自己也有了一定的进步。
浙公网安备 33010602011771号