技术要求
在idea中新建项目,并选择以下五个包。
BootStrap
BootStrap官网中我们可以选择符合主题或自己喜欢的样式,将他添加进
html页面中的头部标签中。
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
功能选择
设备
学号,学生姓名,学生性别,年龄,学院,专业,班级,年级,联系方式
public class Student {
// IDENTITY
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
@Column(name = "s_id")
private String sId;
@Column(name = "s_name")
private String sName;
@Column(name = "s_sex")
private String sSex;
@Column(name = "s_age")
private String sAge;
@Column(name = "s_department")
private String sDepartment;
@Column(name = "s_grade")
private String sGrade;
@Column(name = "s_class")
private String sClass;
@Column(name = "s_major")
private String sMajor;
@Column(name = "s_phone")
private String sPhone;
}
添加设备
添加功能:我们根据主要功能添加,可以添加主要功能里的所有信息,并将这些内容进行保存,同时也要存进数据表里(mysql),在设置一个按钮进行保存设置,保存完毕后网页跳转到学生信息管理系统的首页。
在StudentContorller中写入代码
添加完代码更新
@GetMapping("/showNewStudentForm")
public String showNewStudentForm(Model model) {
// create model attribute to bind form data
Student student = new Student();
model.addAttribute("student", student);
return "new_student";
将新添加的代码保存
@PostMapping("/saveStudent")
public String saveStudent(@ModelAttribute("student") Student student) {
// save employee to database
studentService.saveStudent(student);
return "redirect:/";
}
在html中添加一个按钮,点击按钮跳回到添加页面
<a th:href = "@{/showNewStudentForm}" class="btn btn-success btn-lg mb-3">添加</a>
新增或添加一个学生
void saveStudent (Student student);
删除设备
根据学生ID,锁定一行数据进行删除处理,点击删除键,页面停留在学生信息管理系统首页。
@GetMapping("/deleteStudent/{id}")
public String deleteStudent(@PathVariable(value = "id") long id) {
// call delete employee method
this.studentService.deleteStudentById(id);
return "redirect:/";
}
删除指定ID的学生
void deleteStudentById(long id);
@Override
public void deleteStudentById(long id) {
this.studentRepository.deleteById(id);
}
获取学生ID进行删除,添加一个删除按钮。
<a th:href="@{/deleteStudent/{id}(id=${student.id})}" class="btn btn-warning">删除</a>
更新
点击更新按钮,跳转到添加页面,可以根据需求更改信息内容,后面的操作就和添加功能的操作一样了。
@GetMapping("/showFormForUpdate/{id}")
public String showFormForUpdate(@PathVariable(value = "id") long id, Model model) {
// get employee from the service
Student student = studentService.getStudentById(id);
// set employee as a model attribute to pre-populate the form
model.addAttribute("student", student);
return "update_student";
}
<a th:href="@{/showFormForUpdate/{id}(id=${student.id})}" class="btn btn-info">修改</a>
查找
这里我们根据学生的姓名进行查找,在对应的表格里填写你要查询的姓名,注意:这里不一定要查询的是完整的学生姓名,如果你只记得他的姓或名都可以进行填写,点击查询他回把带有的内容进行返回,返回的页面里只包含了你所要查询的内容,,根据你输入的姓名返回姓名所在的行。
@GetMapping("/query{inpname}")
public String query(@PathVariable(value = "inpname") String inpame,Model model){
List<Student> listStudentName = studentService.findByStudentName(inpame);
model.addAttribute("listStudents",listStudentName);
return "index";
}
根据mysql语句查询到带有相关的信息的那一行全部输出,返回到页面中。
@Query("select n from Student n where n.sName like %:sName%")
List<Student> findAllByStudentName(@Param("sName") String sName);
List<Student> findByStudentName(String sName);
@Override
public List<Student> findByStudentName(String sName) {
List<Student> optiona1 = studentRepository.findAllByStudentName(sName);
return optiona1;
}
在html中写入了样式
<form id="query-form" action="/query" method="get">
<h6 style="color: darkred">搜索</h6>
<input type="text" id="name-input" name="inpname" placeholder="请输入姓名" style="border: 1px solid #aaaaaa;background: cornflowerblue">
<button type="button" onclick="queryStudent()" style="color: cornflowerblue;border-radius: 30px;border-color: aliceblue">查询</button>
</form>
找到对应的信息后返回一个网址
<script>
function queryStudent() {
var sName = document.getElementById("name-input").value;
var url = "/query" + encodeURIComponent(sName);
window.location.href = url;
}
</script>
分页
规定每页数据超过五个就进入下一页,设置他的数量是依次递增的。
@GetMapping("/page/{pageNo}")
public String findPaginated(@PathVariable (value = "pageNo") int pageNo,
@RequestParam("sortField") String sortField,
@RequestParam("sortDir") String sortDir,
Model model) {
int pageSize = 5;
Page<Student> page = studentService.findPaginated(pageNo, pageSize, sortField, sortDir);
List<Student> listStudents = page.getContent();
List<Integer> numbers =new ArrayList<>();
for (int i=1;i<listStudents.size();i++){
numbers.add(i);
}
Page<Student> findPaginated(int pageNo, int pageSize, String sortField, String sortDirection);
我们设置了三个盒子,内容分别显示为当前所在页数,一共有多少页,和显示每一页数据,在进行一个跳转到第一页和最后一页。
<div>
<div class = "row col-sm-12">
<div class = "col-sm-3">
共[[${totalItems}]]条记录
</div>
<div class = "col-sm-3">
当前第[[${currentPage}]]页 共[[${totalPages}]]页
</div>
<div class = "col-sm-5">
<span th:each="i: ${numbers}">
<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">第[[${i}]]页</a>
<span th:unless="${currentPage != i}">第[[${i}]]页</span>
</span>
</div>
<div class = "col-sm-2">
<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>
<span th:unless="${currentPage < totalPages}">Next</span>
</div>
<div class="col-sm-1">
<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>
<span th:unless="${currentPage < totalPages}">Last</span>
</div>
</div>
</div>
排序
可以根据不同的需求按照不同的列数进行排序desc:为降序,asc:为升序,根据我们进行的排序,将页面返回到学生信息管理系统首页,根据页号/每页记录数/排序依据返回某指定页面数据。
model.addAttribute("currentPage", pageNo);
model.addAttribute("totalPages", page.getTotalPages());
model.addAttribute("totalItems", page.getTotalElements());
model.addAttribute("numbers", numbers);
model.addAttribute("sortField", sortField);
model.addAttribute("sortDir", sortDir);
model.addAttribute("reverseSortDir", sortDir.equals("asc") ? "desc" : "asc");
model.addAttribute("listStudents", listStudents);
return "index";
@Override
public Page<Student> findPaginated(int pageNo, int pageSize, String sortField, String sortDirection) {
//设置排序参数,升序ASC/降序DESC?
Sort sort = sortDirection.equalsIgnoreCase(Sort.Direction.ASC.name())
? Sort.by(sortField).ascending()
: Sort.by(sortField).descending();
//根据页号/每页记录数/排序依据返回某指定页面数据。
Pageable pageable = PageRequest.of(pageNo - 1, pageSize, sort);
return this.studentRepository.findAll(pageable);
}
部署
本地部署
spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useSSL=false&serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.username= root
spring.datasource.password= 123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# for Spring Boot 2
# spring.jpa.properties.hibernate.dialect= org.hibernate.dialect.MySQL5InnoDBDialect
# for Spring Boot 3
spring.jpa.properties.hibernate.dialect= org.hibernate.dialect.MySQLDialect
# Hibernate ddl auto (create, create-drop, validate, update)
spring.jpa.hibernate.ddl-auto= update
#?????hibernate-sql
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type=TRACE
注意
将每一个文件写入对应的文件夹下