SSM+简单分页实现
SSM+简单分页实现
- 搭建环境
- 搭建环境：添加坐标、拷贝配置文件、编写启动类
- 添加坐标
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.1.6.RELEASEversion>
<relativePath/>
parent>
<properties>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
<java.version>1.8java.version>
<mybatis.starter.version>1.3.2mybatis.starter.version>
<mapper.starter.version>2.0.2mapper.starter.version>
<mysql.version>5.1.32mysql.version>
<pageHelper.starter.version>1.2.5pageHelper.starter.version>
<durid.starter.version>1.1.10durid.starter.version>
properties>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-jdbcartifactId>
dependency>
<dependency>
<groupId>org.mybatis.spring.bootgroupId>
<artifactId>mybatis-spring-boot-starterartifactId>
<version>${mybatis.starter.version}version>
dependency>
<dependency>
<groupId>tk.mybatisgroupId>
<artifactId>mapper-spring-boot-starterartifactId>
<version>${mapper.starter.version}version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-starterartifactId>
<version>${pageHelper.starter.version}version>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>${mysql.version}version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druid-spring-boot-starterartifactId>
<version>${durid.starter.version}version>
dependency>
<dependency>
<groupId>io.springfoxgroupId>
<artifactId>springfox-swagger2artifactId>
<version>2.7.0version>
dependency>
<dependency>
<groupId>io.springfoxgroupId>
<artifactId>springfox-swagger-uiartifactId>
<version>2.7.0version>
dependency>
dependencies>
- 拷贝properties文件
#端口号
server.port=8080
#数据库基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/db3?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=1234
#druid 连接池配置
#驱动
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#初始化连接池大小
spring.datasource.druid.initial-size=1
#最小连接数
spring.datasource.druid.min-idle=1
#最大连接数
spring.datasource.druid.max-active=20
#获取连接时候验证，会影响性能
spring.datasource.druid.test-on-borrow=true
# mybatis
# mybatis.type-aliases-package=com.czxy.domain.base
# mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#开启驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#开启log4j打印SQL语句
logging.level.com.czxy.dao=debug
- 编写启动类
package com.czxy;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StudentApplication {
public static void main(String[] args) {
SpringApplication.run(StudentApplication.class, args);
}
}
- 拷贝封装类
package com.czxy.vo;
import java.util.HashMap;
import java.util.Map;
public class BaseResult<T> {
//成功状态码
public static final int OK = 1;
//失败状态码
public static final int ERROR = 0;
//返回码
private Integer code;
//返回消息
private String message;
//存放数据
private T data;
//其他数据
private Map<String,Object> other = new HashMap<>();
public BaseResult() {
}
public BaseResult(Integer code, String message) {
this.code = code;
this.message = message;
}
public BaseResult(Integer code, String message, T data) {
this.code = code;
this.message = message;
this.data = data;
}
/**
* 快捷成功BaseResult对象
* @param message
* @return
*/
public static BaseResult ok(String message){
return new BaseResult(BaseResult.OK , message);
}
public static BaseResult ok(String message, Object data){
return new BaseResult(BaseResult.OK , message, data );
}
/**
* 快捷失败BaseResult对象
* @param message
* @return
*/
public static BaseResult error(String message){
return new BaseResult(BaseResult.ERROR , message);
}
/**
* 自定义数据区域
* @param key
* @param msg
* @return
*/
public BaseResult append(String key , Object msg){
other.put(key , msg);
return this;
}
public Integer getCode() {
return code;
}
public String getMessage() {
return message;
}
public T getData() {
return data;
}
public Map<String, Object> getOther() {
return other;
}
}
2.学生管理
- 数据库
# 数据库
DROP DATABASE exam_1008_001;
CREATE DATABASE exam_1008_001;
USE exam_1008_001;
# 班级表
CREATE TABLE tb_class(
c_id VARCHAR(32) PRIMARY KEY COMMENT '班级ID',
c_name VARCHAR(50) COMMENT '班级名称',
`desc` VARCHAR(200) COMMENT '班级描述'
);
INSERT INTO tb_class(`c_id`,`c_name`,`desc`) VALUES('c001','Java12班','。。。。');
INSERT INTO tb_class(`c_id`,`c_name`,`desc`) VALUES('c002','Java34班','。。。。');
# 省份表
CREATE TABLE tb_province(
p_id VARCHAR(32) PRIMARY KEY COMMENT '省ID',
p_name VARCHAR(20) COMMENT '省名称'
);
INSERT INTO tb_province(`p_id`,`p_name`) VALUES('p001','江苏省');
INSERT INTO tb_province(`p_id`,`p_name`) VALUES('p002','山西省');
INSERT INTO tb_province(`p_id`,`p_name`) VALUES('p003','河北省');
INSERT INTO tb_province(`p_id`,`p_name`) VALUES('p004','河南省');
# 学生表
CREATE TABLE tb_student(
s_id VARCHAR(32) PRIMARY KEY COMMENT '学生ID',
sname VARCHAR(50) COMMENT '姓名',
age INT COMMENT '年龄',
birthday DATE COMMENT '生日',
gender CHAR(1) NOT NULL COMMENT '性别：1表示男、0表示女',
marray CHAR(1) NOT NULL COMMENT '婚否：1表示已婚、2表示未婚、3表示保密',
c_id VARCHAR(32) NOT NULL COMMENT '班级外键',
p_id VARCHAR(32) NOT NULL COMMENT '省份外键'
);
ALTER TABLE tb_student ADD CONSTRAINT FOREIGN KEY (c_id) REFERENCES tb_class (c_id);
ALTER TABLE tb_student ADD CONSTRAINT FOREIGN KEY (p_id) REFERENCES tb_province (p_id);
INSERT INTO tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`marray`,`c_id`,`p_id`) VALUES('s001','赵三',19,'2001-01-17','1','1','c001','p001');
INSERT INTO tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`marray`,`c_id`,`p_id`) VALUES('s002','钱四',19,'2001-05-16','0','2','c001','p002');
INSERT INTO tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`marray`,`c_id`,`p_id`) VALUES('s003','孙五',18,'2002-03-15','1','3','c001','p003');
INSERT INTO tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`marray`,`c_id`,`p_id`) VALUES('s004','李三',19,'2001-04-14','0','3','c002','p004');
INSERT INTO tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`marray`,`c_id`,`p_id`) VALUES('s005','周四',19,'2001-02-13','0','2','c002','p002');
INSERT INTO tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`marray`,`c_id`,`p_id`) VALUES('s006','王五',18,'2002-06-12','1','1','c002','p003');
# 成绩表
CREATE TABLE tb_achievement(
a_id VARCHAR(32) PRIMARY KEY COMMENT '成绩ID',
course VARCHAR(50) COMMENT '课程名',
grade DOUBLE COMMENT '分数',
s_id VARCHAR(32) NOT NULL COMMENT '学生外键'
);
ALTER TABLE tb_achievement ADD CONSTRAINT FOREIGN KEY (s_id) REFERENCES tb_student (s_id);
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a001','语文',95.5,'s001');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a002','数学',94.5,'s001');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a003','英语',93.5,'s001');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a004','语文',92.5,'s002');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a005','数学',99.5,'s002');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a006','英语',98.5,'s002');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a007','语文',97.5,'s003');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a008','数学',95.5,'s003');
INSERT INTO tb_achievement(`a_id`,`course`,`grade`,`s_id`) VALUES('a009','英语',94.5,'s003');
- 后端实现
1.编写对应的javaBean
package com.czxy.pojo;
import com.fasterxml.jackson.annotation.JsonFormat;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;
@Table(name = "tb_student")
public class Student {
@Id
private String sId;
private String sname;
private Integer age;
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
private String gender;
private String marray;
private String cId;
private String pId;
//班级
private Classes classes;
//省份
private Province province;
public Classes getClasses() {
return classes;
}
public void setClasses(Classes classes) {
this.classes = classes;
}
public Province getProvince() {
return province;
}
public void setProvince(Province province) {
this.province = province;
}
public String getsId() {
return sId;
}
public void setsId(String sId) {
this.sId = sId;
}
public String getSname() {
return sname;
}
public void setSname(String sname) {
this.sname = sname;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getMarray() {
return marray;
}
public void setMarray(String marray) {
this.marray = marray;
}
public String getcId() {
return cId;
}
public void setcId(String cId) {
this.cId = cId;
}
public String getpId() {
return pId;
}
public void setpId(String pId) {
this.pId = pId;
}
public Student() {
}
public Student(String sname, Integer age, Date birthday, String gender, String marray, String cId, String pId) {
this.sname = sname;
this.age = age;
this.birthday = birthday;
this.gender = gender;
this.marray = marray;
this.cId = cId;
this.pId = pId;
}
@Override
public String toString() {
return "Student{" +
"sId='" + sId + '\'' +
", sname='" + sname + '\'' +
", age=" + age +
", birthday=" + birthday +
", gender='" + gender + '\'' +
", marray='" + marray + '\'' +
", cId='" + cId + '\'' +
", pId='" + pId + '\'' +
'}';
}
}
2.编写mapper
package com.czxy.mapper;
import com.czxy.pojo.Student;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface StudentMapper extends Mapper<Student> {
}
3编写service
package com.czxy.service;
import com.czxy.mapper.AchievementMapper;
import com.czxy.mapper.ClassesMapper;
import com.czxy.mapper.ProvinceMapper;
import com.czxy.mapper.StudentMapper;
import com.czxy.pojo.Achievement;
import com.czxy.pojo.Student;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.RequestBody;
import tk.mybatis.mapper.entity.Example;
import javax.annotation.Resource;
import java.util.List;
@Service
@Transactional
public class StudentService {
@Resource
private StudentMapper studentMapper;
@Resource
private ClassesMapper classesMapper;
@Resource
private ProvinceMapper provinceMapper;
@Resource
private AchievementMapper achievementMapper;
//模糊查询+分页
public PageInfo<Student> findAll(StudentVo studentVo, Integer pageSize, Integer pageNum) {
Example example = new Example(Student.class);
Example.Criteria criteria = example.createCriteria();
if(studentVo!=null){
if(studentVo.getcId()!=null && !"".equals(studentVo.getcId())){
criteria.andEqualTo("cId",studentVo.getcId());
}
if(studentVo.getpId()!=null && !"".equals(studentVo.getpId())){
criteria.andEqualTo("pId",studentVo.getpId());
}
if(studentVo.getSname()!=null && !"".equals(studentVo.getSname())){
criteria.andLike("sname","%"+studentVo.getSname()+"%");
}
if(studentVo.getStartAge()!=null && !"".equals(studentVo.getStartAge())){
criteria.andGreaterThanOrEqualTo("age",studentVo.getStartAge());
}
if(studentVo.getEndAge()!=null && !"".equals(studentVo.getEndAge())){
criteria.andEqualTo("age",studentVo.getEndAge());
}
}
PageHelper.startPage(pageNum,pageSize);
List<Student> studentList = studentMapper.selectByExample(example);
for (Student student : studentList) {
student.setClasses(classesMapper.selectByPrimaryKey(student.getcId()));
student.setProvince(provinceMapper.selectByPrimaryKey(student.getpId()));
}
PageInfo<Student> pageInfo = new PageInfo<>(studentList);
return pageInfo;
}
//添加
public Boolean insert(Student student) {
Student student1 = studentMapper.selectByPrimaryKey(student.getsId());
if(student1!=null){
throw new RuntimeException("id已存在");
}
int insert = studentMapper.insert(student);
return insert==1;
}
//根据id查询
public Student findById(String id) {
return studentMapper.selectByPrimaryKey(id);
}
//修改
public Boolean update(Student student) {
Student student1 = studentMapper.selectByPrimaryKey(student.getsId());
if(student1==null){
throw new RuntimeException("id不存在");
}
int i = studentMapper.updateByPrimaryKeySelective(student);
return i==1;
}
//删除
public Boolean delete(String id) {
Example example =new Example(Achievement.class);
Example.Criteria criteria = example.createCriteria();
criteria.andEqualTo("sId",id);
int num = achievementMapper.selectCountByExample(example);
if(num>0){
throw new RuntimeException("学生已考试，无法删除");
}
int i = studentMapper.deleteByPrimaryKey(id);
return i==1;
}
}
4.编写controller
package com.czxy.controller;
import com.czxy.pojo.Student;
import com.czxy.service.StudentService;
import com.czxy.vo.BaseResult;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@RestController
@RequestMapping("/student")
public class StudentController {
@Resource
private StudentService studentService;
//模糊查询
@PostMapping("/condition/{pageSize}/{pageNum}")
public BaseResult findAll(@RequestBody StudentVo studentVo,@PathVariable("pageSize") Integer pageSize,@PathVariable("pageNum") Integer pageNum){
PageInfo<Student> pageInfo = studentService.findAll(studentVo,pageSize,pageNum);
return BaseResult.ok("查询成功",pageInfo);
}
//删除
@DeleteMapping("/{id}")
public BaseResult delete(@PathVariable("id") String id){
try {
Boolean delete = studentService.delete(id);
if(delete){
return BaseResult.ok("删除成功");
}else {
return BaseResult.error("删除失败");
}
}catch (Exception e){
return BaseResult.ok(e.getMessage());
}
}
//添加
@PostMapping
public BaseResult insert(@RequestBody Student student){
try {
Boolean insert = studentService.insert(student);
if(insert){
return BaseResult.ok("添加成功");
}else {
return BaseResult.error("添加失败");
}
}catch (Exception e){
return BaseResult.error(e.getMessage());
}
}
//根据id查询
@GetMapping("/{id}")
public BaseResult findById(@PathVariable("id") String id){
Student student = studentService.findById(id);
return BaseResult.ok("查询成功",student);
}
//修改
@PutMapping
public BaseResult update(@RequestBody Student student){
try {
Boolean update = studentService.update(student);
if(update){
return BaseResult.ok("修改成功");
}else {
return BaseResult.error("修改失败");
}
}catch (Exception e){
return BaseResult.error(e.getMessage());
}
}
}
- 前端实现
1.创建static/js目录，拷贝js类库
2.列表页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雇员列表title>
<script type="text/javascript" src="/js/jquery-3.3.1.js">script>
<script type="text/javascript" src="/js/form2json-2.1.js">script>
<script type="text/javascript">
$(function () {
findClassAll()
findProvinceAll()
findAll(1)
})
function findClassAll() {
$.ajax({
"url":"/classes",
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$(data.data).each(function (index,classes) {
var html = `">${
classes.cName}`;
$("#cId").append(html);
})
}
},
"error":function () {
alert("操作失败")
},
})
}
function findProvinceAll() {
$.ajax({
"url":"/province",
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$(data.data).each(function (index,province) {
var html = `">${
province.pName}`;
$("#pId").append(html);
})
}
},
"error":function () {
alert("操作失败")
},
})
}
function findAll(pageNum) {
var conditionform = $("#conditionform").formToJson();
$.ajax({
"url":"/student/condition/2/"+pageNum,
"type":"post",
"contentType":"application/json;charset=UTF-8",
"data":conditionform,
"dataType":"json",
"success":function (data) {
if(data.code==1){
var pageInfo = data.data;
console.info(pageInfo.list)
$("#t01").html(
`
编号
学生ID
班级
省份
姓名
年龄
生日
性别
婚否
操作
`);
$(pageInfo.list).each(function (index,studnet) {
var html =
`
${
index+1}
${
studnet.sId}
${
studnet.classes.cName}
${
studnet.province.pName}
${
studnet.sname}
${
studnet.age}
${
studnet.birthday}
${
studnet.gender==0?"女":"男"}
${
studnet.marray==1?"已婚":(studnet.marray==2?"未婚":"保密")}
${
studnet.sId}">修改
${
studnet.sId}')">删除
`;
$("#t01").append(html);
})
$("#pageId").html(" ");
$("#pageId").append(`${
pageInfo.pageNum==pageInfo.firstPage?"disabled":""} οnclick="findAll('${
pageInfo.firstPage}')" value="首页">`);
$("#pageId").append(`${
pageInfo.pageNum==pageInfo.firstPage?"disabled":""} οnclick="findAll('${
pageInfo.prePage}')" value="上一页">`);
for (let i = 1; i <=pageInfo.pages ; i++) {
$("#pageId").append(`${
i ==pageInfo.pageNum?"disabled":""} type="button" οnclick="findAll('${
i}')" value="${
i}">`);
}
$("#pageId").append(`${
pageInfo.pageNum==pageInfo.lastPage?"disabled":""} οnclick="findAll('${
pageInfo.nextPage}')" value="下一页">`);
$("#pageId").append(`${
pageInfo.pageNum==pageInfo.lastPage?"disabled":""} οnclick="findAll('${
pageInfo.lastPage}')" value="尾页">`);
}
},
"error":function () {
alert("操作失败")
}
})
}
function del(id) {
var rel = confirm("确定要删除"+id+"么?");
if(rel){
$.ajax({
"url":"/student/"+id,
"type":"delete",
"dataType":"json",
"success":function (data) {
alert(data.message)
location.href="student_list.html";
},
"error":function () {
alert("操作失败")
},
})
}
}
script>
head>
<body>
<a href="index.html">返回首页a>
<a href="student_add.html">添加学生a> <br/>
<form id="conditionform" action="">
<table >
<tr>
<td>班级td>
<td>
<select name="cId" id="cId">
<option value="">--选择班级--option>
select>
td>
<td>省份td>
<td>
<select name="pId" id="pId">
<option value="">--选择省--option>
select>
td>
<td>姓名：td>
<td>
<input type="text" name="sname" id="sname" placeholder="请输入姓名" size="10">
td>
<td>年龄：td>
<td>
<input type="text" name="startAge" id="startAge" placeholder="请输入开始年龄" size="10">
--
<input type="text" name="endAge" id="endAge" placeholder="请输入结束年龄" size="10">
td>
<td><input type="button" onclick="findAll(1)" value="查询">td>
tr>
table>
form>
<hr />
<table id="t01" border="1" width="800">
<tr>
<td>编号td>
<td>学生IDtd>
<td>班级td>
<td>省份td>
<td>姓名td>
<td>年龄td>
<td>生日td>
<td>性别td>
<td>婚否td>
<td>操作td>
tr>
table>
<div id="pageId">
<input type="button" onclick="" value="">
div>
body>
html>
2.添加页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加学生title>
<script type="text/javascript" src="/js/jquery-3.3.1.js">script>
<script type="text/javascript" src="/js/form2json-2.1.js">script>
<script>
$(function () {
findClassAll()
findProvinceAll()
})
function findClassAll() {
$.ajax({
"url":"/classes",
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$(data.data).each(function (index,classes) {
var html = `">${
classes.cName}`;
$("#cId").append(html);
})
}
},
"error":function () {
alert("操作失败")
},
})
}
function findProvinceAll() {
$.ajax({
"url":"/province",
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$(data.data).each(function (index,province) {
var html = `">${
province.pName}`;
$("#pId").append(html);
})
}
},
"error":function () {
alert("操作失败")
},
})
}
function add() {
var student = $("#addform").formToJson();
$.ajax({
"url":"/student",
"type":"post",
"dataType":"json",
"contentType":"application/json;charset=UTF-8",
"data":student,
"success":function (data) {
if(data==1){
location.href="student_list.html";
}else {
alert(data.message)
}
},
"error":function () {
alert("操作失败")
},
})
}
script>
head>
<body>
<a href="student_list.html">返回学生列表a>
<form action="" id="addform">
<table border="1" width="400">
<tr>
<td>所属班级：td>
<td>
<select name="cId" id="cId">
<option value="">--请选择班级--option>
select>
td>
tr>
<tr>
<td>所属省份：td>
<td>
<select name="pId" id="pId">
<option value="">--请选择省份--option>
select>
td>
tr>
<tr>
<td>学生ID：td>
<td><input name="sId" type="text">td>
tr>
<tr>
<td>姓名td>
<td><input name="sname" type="text">td>
tr>
<tr>
<td>年龄td>
<td><input name="age" type="text">td>
tr>
<tr>
<td>生日td>
<td><input name="birthday" type="text">td>
tr>
<tr>
<td>性别td>
<td>
<input name="gender" value="1" type="radio"> 男
<input name="gender" value="0" type="radio"> 女
td>
tr>
<tr>
<td>婚否td>
<td>
<input name="marray" value="1" type="radio"> 已婚
<input name="marray" value="2" type="radio"> 未婚
<input name="marray" value="3" type="radio"> 保密
td>
tr>
<tr>
<td>td>
<td>
<input type="button" onclick="add()" value="添加">
td>
tr>
table>
form>
body>
html>
3.修改页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>修改学生title>
<script type="text/javascript" src="/js/jquery-3.3.1.js">script>
<script type="text/javascript" src="/js/form2json-2.1.js">script>
<script>
$(function () {
findClassAll()
findProvinceAll()
})
function findClassAll() {
$.ajax({
"url":"/classes",
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$(data.data).each(function (index,classes) {
var html = `">${
classes.cName}`;
$("#cId").append(html);
})
}
},
"error":function () {
alert("操作失败")
},
})
}
function findProvinceAll() {
$.ajax({
"url":"/province",
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$(data.data).each(function (index,province) {
var html = `">${
province.pName}`;
$("#pId").append(html);
})
findById()
}
},
"error":function () {
alert("操作失败")
},
})
}
function findById() {
var id = location.href.split("?id=")[1];
$.ajax({
"url":"/student/"+id,
"type":"get",
"dataType":"json",
"success":function (data) {
if(data.code==1){
$("#cId").val(data.data.cId);
$("#pId").val(data.data.pId);
$("#sId").val(data.data.sId);
$("#sname").val(data.data.sname);
$("#age").val(data.data.age);
$("#birthday").val(data.data.birthday);
$(`input[name=gender][value='${
data.data.gender}']`).prop("checked",true);
$(`input[name=marray][value='${
data.data.marray}']`).prop("checked",true);
}
},
"error":function () {
alert("操作失败")
},
})
}
function update() {
var student = $("#updateform").formToJson();
$.ajax({
"url":"/student",
"type":"put",
"dataType":"json",
"contentType":"application/json;charset=UTF-8",
"data":student,
"success":function (data) {
if(data.code==1){
location.href="student_list.html";
}else {
alert(data.message)
}
},
"error":function () {
alert("操作失败")
},
})
}
script>
head>
<body>
<a href="student_list.html">返回学生列表a>
<form action="" id="updateform">
<table border="1" width="400">
<tr>
<td>所属班级：td>
<td>
<select name="cId" id="cId">
<option value="">--请选择班级--option>
select>
td>
tr>
<tr>
<td>所属省份：td>
<td>
<select name="pId" id="pId">
<option value="">--请选择省份--option>
select>
td>
tr>
<tr>
<td>学生ID：td>
<td><input name="sId" id="sId" type="text">td>
tr>
<tr>
<td>姓名td>
<td><input name="sname" id="sname" type="text">td>
tr>
<tr>
<td>年龄td>
<td><input name="age" id="age" type="text">td>
tr>
<tr>
<td>生日td>
<td><input name="birthday" id="birthday" type="text">td>
tr>
<tr>
<td>性别td>
<td>
<input name="gender" value="1" type="radio"> 男
<input name="gender" value="0" type="radio"> 女
td>
tr>
<tr>
<td>婚否td>
<td>
<input name="marray" value="1" type="radio"> 已婚
<input name="marray" value="2" type="radio"> 未婚
<input name="marray" value="3" type="radio"> 保密
td>
tr>
<tr>
<td>td>
<td>
<input type="button" onclick="update()" value="修改">
td>
tr>
table>
form>
body>
html>
4.删除
如果学生已考试 无法删除
