山大软院创新实训之前端篇（二）——个人工作前端部分概述
我所实现的两个智慧医生界面在前面的博客中已经详细介绍过，在此主要介绍我所完成的除智慧医生界面外的其他前端部分。
个人信息界面
profile界面主要用Thymeleaf语法来动态渲染数据，例如 ${session.loginUser.imgPath} 等来获取和显示当前用户的相关信息。
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
<div th:replace="common/common-bar::#dashboard-sidebar(cur='profile')"></div>
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div class="dashboard-content">
<div class="dashboard-form mb-4">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 padding-right-30">
<div class="dashboard-list">
<h4 class="gray">我的资料</h4>
<div class="dashboard-list-static">
<div class="edit-profile-photo">
<img id="img-preview" th:src="${session.loginUser.imgPath}" alt=""/>
<div class="change-photo-btn">
<div class="photoUpload">
<span><i class="fa fa-upload"></i> 点击上传</span>
<input id="img-file" type="file" class="upload" onchange="uploadPhoto()"/>
<input style="display: none" id="img" th:value="${session.loginUser.imgPath}" type="text"/>
</div>
</div>
</div>
<div class="my-profile">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>账户名称</label>
<input style="background: #ecf0f1" disabled th:value="${session.loginUser.userAccount}" type="text"/>
<input id="userId" style="display: none" th:value="${session.loginUser.id}" type="text"/>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>真实姓名</label>
<input id="userName" th:value="${session.loginUser.userName}" type="text"/>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label>性别</label>
<input disabled style="background: #ecf0f1" th:value="${session.loginUser.userSex}" type="text"/>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>年龄</label>
<input id="userAge" th:value="${session.loginUser.userAge}" type="number"/>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label>邮箱</label>
<input style="background: #ecf0f1" disabled th:value="${session.loginUser.userEmail}" type="text"/>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>手机号</label>
<input id="userTel" th:value="${session.loginUser.userTel}" type="number"/>
</div>
</div>
</div>
<div class="form-group">
<label>注册时间</label>
<input style="background: #ecf0f1" disabled th:value="${#dates.format(session.loginUser.createTime, 'yyyy年MM月dd日 HH:mm:ss')}" type="text"/>
</div>
</div>
<div>
<button class="btn btn-na" onclick="updateProfile()">保存修改</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
展示效果如下。
全部药品&全部疾病&全部反馈界面
疾病信息中包括分类、名称、特殊症状、更新时间和操作等字段，使用了Thymeleaf模板引擎来动态填充数据，th:each迭代疾病列表illnesses，并在表格行中显示每个疾病的详细信息，操作列包含三个链接，分别用于查看、编辑和删除疾病，使用Font Awesome图标展示操作按钮。
<div class="table-responsive table-desi">
<table class="basic-table table table-hover">
<thead>
<tr>
<th>分类</th>
<th>名称</th>
<th>特殊症状</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="illness:${illnesses}">
<td th:text="${illness.kind.name}"></td>
<td th:text="${illness.illnessName}"></td>
<td th:text="${illness.specialSymptom}"></td>
<td th:text="${#dates.format(illness.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<a th:href="@{findIllnessOne(id=${illness.id})}"><i class="fa fa-eye text-info" aria-hidden="true"></i> </a>
<a th:href="@{add-illness(id=${illness.id})}"><i class="fa fa-pencil-square-o text-primary" aria-hidden="true"></i> </a>
<a th:onclick="deleteIllness([[${illness.id}]])" href="javascript:void(0)"><i class="fa fa-trash-o text-danger" aria-hidden="true"></i> </a>
</td>
</tr>
这一点上，全部疾病、全部药品和全部反馈是相似的，它们的展示效果如下图。
编辑药品&编辑疾病
这类页面主要生成一个表单，用于显示和编辑疾病信息，表单包含疾病名称、引起原因、主要症状、特殊症状、疾病分类、创建时间和修改时间等字段，使用Thymeleaf模板引擎来动态填充数据，th:value和th:text属性绑定具体的疾病信息，分类下拉菜单通过th:each迭代疾病分类列表kinds生成选项，th:if用于条件显示创建和修改时间。
<div class="dashboard-list">
<h4 class="gray">疾病信息</h4>
<div class="dashboard-list-static">
<div class="my-profile">
<div class="form-group">
<label>疾病名称</label>
<input id="illnessName" th:value="${illness.illnessName}" type="text"/>
<input style="display: none" id="id" th:value="${illness.id}" type="text"/>
</div>
<div class="form-group">
<label>引起的原因</label>
<input id="includeReason" type="text" th:value="${illness.includeReason}"/>
</div>
<div class="form-group">
<label>主要的症状</label>
<textarea id="illnessSymptom" style="height: 100px" th:text="${illness.illnessSymptom}"></textarea>
</div>
<div class="form-group">
<label>特殊的症状</label>
<textarea id="specialSymptom" style="height: 100px" th:text="${illness.specialSymptom}"></textarea>
</div>
<div class="form-group">
<label>疾病分类</label>
<select id="kindId" class="niceSelect">
<option th:if="${illness.kindId != null and illness.kindId == kind.id}" th:each="kind: ${kinds}" th:value="${kind.id}" th:text="${kind.name}"> </option>
<option th:each="kind: ${kinds}" th:value="${kind.id}" th:text="${kind.name}"> </option>
</select>
</div>
<div th:if="${illness.createTime != null}" class="form-group">
<label>创建时间</label>
<input style="background: #ecf0f1" disabled type="text" th:value="${#dates.format(illness.createTime, 'yyyy-MM-dd HH:mm:ss')}"/>
</div>
<div th:if="${illness.updateTime != null}" class="form-group">
<label>修改时间</label>
<input style="background: #ecf0f1" disabled type="text" th:value="${#dates.format(illness.updateTime, 'yyyy-MM-dd HH:mm:ss')}"/>
</div>
</div>
类似的查询过程都与System Controller中的函数密切相关，以管理疾病为例。定义了一个处理GET请求的控制器方法addIllness，用于添加或编辑疾病信息，如果用户未登录则重定向到首页；方法首先检查用户登录状态，然后创建一个新的Illness对象，如果提供了id，则从数据库获取对应的疾病信息，接着获取所有疾病种类信息，将疾病信息和种类信息存入map中传递给前端页面，最终返回视图名称add-illness，对应Thymeleaf模板文件。
@GetMapping("add-illness")
public String addIllness(Integer id, Map<String, Object> map) {
// 如果 loginUser 为空，表示用户未登录，重定向到首页
if (Assert.isEmpty(loginUser)) {
return "redirect:/index.html";
}
// 创建一个新的 Illness 对象
Illness illness = new Illness();
// 如果 id 不为空且不为零，表示是编辑已有疾病信息
if (Assert.notEmpty(id)) {
// 根据 id 从数据库获取相应的疾病信息
illness = illnessService.get(id);
}
// 获取所有疾病种类信息，并将其存入 illnessKinds 列表
List<IllnessKind> illnessKinds = illnessKindService.all();
// 将疾病信息和疾病种类信息存入 map，传递给前端页面
map.put("illness", illness);
map.put("kinds", illnessKinds);
// 返回视图名称 "add-illness"，即对应的 Thymeleaf 模板文件名
return "add-illness";
}
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
