springboot-data-jpa+vue实现前后端分离增删改分页查询代码示例
一.后台
1.实体类(pojo)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
package com.wentao.springbootvue.pojo; import lombok.Data; import javax.persistence.*; /** * @BelongsProject: springdatajpaday1 * @BelongsPackage: com.wentao.springdatajpaday1.pojo * @Author: 13274 * @CreateTime: 2019-06-03 14:22 * @Description: ${Description} */ @Entity @Table(name = "student") @Data public class Student { //id表示主键 主键有生成策略GenerationType.IDENTITY //GenerationType.AUTO //Oracle中是没有自动增长的设置SEQUENCE 使用序列进行增长 //GeneratedValue自动增长生成的values的值 @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id;//学生id // @Column可以写可以不写 @Column(name = "name",columnDefinition = "varchar(25) comment '姓名'") private String name;//姓名 @Column private String sex;//性别 @Column private Integer gradeId;//年级id public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public Integer getGradeId() { return gradeId; } public void setGradeId(Integer gradeId) { this.gradeId = gradeId; } } |
import lombok.Data;
import javax.persistence.*;
/**
* @BelongsProject: springdatajpaday1
* @BelongsPackage: com.wentao.springdatajpaday1.pojo
* @Author: 13274
* @CreateTime: 2019-06-03 14:22
* @Description: ${Description}
*/
@Entity
@Table(name = "student")
@Data
public class Student {
//id表示主键 主键有生成策略GenerationType.IDENTITY
//GenerationType.AUTO
//Oracle中是没有自动增长的设置SEQUENCE 使用序列进行增长
//GeneratedValue自动增长生成的values的值
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;//学生id
// @Column可以写可以不写
@Column(name = "name",columnDefinition = "varchar(25) comment '姓名'")
private String name;//姓名
@Column
private String sex;//性别
@Column
private Integer gradeId;//年级id
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public Integer getGradeId() {
return gradeId;
}
public void setGradeId(Integer gradeId) {
this.gradeId = gradeId;
}
}
2.dao层(dao)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
package com.wentao.springbootvue.dao; import com.wentao.springbootvue.pojo.Student; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaSpecificationExecutor; /** * @BelongsProject: springdatajpaday1 * @BelongsPackage: com.wentao.springdatajpaday1.dao * @Author: 13274 * @CreateTime: 2019-06-03 14:33 * @Description: ${Description} */ public interface StudentDao extends JpaRepository<Student,Integer>, JpaSpecificationExecutor<Student> { } |
import com.wentao.springbootvue.pojo.Student;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
/**
* @BelongsProject: springdatajpaday1
* @BelongsPackage: com.wentao.springdatajpaday1.dao
* @Author: 13274
* @CreateTime: 2019-06-03 14:33
* @Description: ${Description}
*/
public interface StudentDao extends JpaRepository<Student,Integer>, JpaSpecificationExecutor<Student> {
}
3.业务层(service)
接口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
package com.wentao.springbootvue.service; import com.wentao.springbootvue.pojo.Student; import org.springframework.data.domain.Page; import java.util.List; /** * @BelongsProject: springdatajpaday1 * @BelongsPackage: com.wentao.springdatajpaday1.service * @Author: 13274 * @CreateTime: 2019-06-03 14:36 * @Description: ${Description} */ public interface StudentService { /** * 增加学生的方法 * @param student 要增加学生的对象 * @return 返回学生对象 */ Student add(Student student); /** * 修改学生的对象 * @param student 要增加学生的对象 * @return 返回学生对象 */ Student upd(Student student); /** * 查询学生对象 * @return 返回查询到集合 */ List<Student> seAll(); /** * 删除学生的对象 * @param id 要删除学生的id * @return 返回学生对象 */ void del(Integer id); /** * 根据id查询学生对象 * @param id 要查询的id * @return 返回查询的对象 */ Student selById(Integer id); /** * 分页查询 * @param pageNum * @param size * @return */ Page<Student> findByPage(Integer pageNum, Integer size); } |
import com.wentao.springbootvue.pojo.Student;
import org.springframework.data.domain.Page;
import java.util.List;
/**
* @BelongsProject: springdatajpaday1
* @BelongsPackage: com.wentao.springdatajpaday1.service
* @Author: 13274
* @CreateTime: 2019-06-03 14:36
* @Description: ${Description}
*/
public interface StudentService {
/**
* 增加学生的方法
* @param student 要增加学生的对象
* @return 返回学生对象
*/
Student add(Student student);
/**
* 修改学生的对象
* @param student 要增加学生的对象
* @return 返回学生对象
*/
Student upd(Student student);
/**
* 查询学生对象
* @return 返回查询到集合
*/
List<Student> seAll();
/**
* 删除学生的对象
* @param id 要删除学生的id
* @return 返回学生对象
*/
void del(Integer id);
/**
* 根据id查询学生对象
* @param id 要查询的id
* @return 返回查询的对象
*/
Student selById(Integer id);
/**
* 分页查询
* @param pageNum
* @param size
* @return
*/
Page<Student> findByPage(Integer pageNum, Integer size);
}
4.接口实现(impl)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
package com.wentao.springbootvue.service.impl; import com.wentao.springbootvue.dao.StudentDao; import com.wentao.springbootvue.pojo.Student; import com.wentao.springbootvue.service.StudentService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.stereotype.Service; import java.util.List; /** * @BelongsProject: springdatajpaday1 * @BelongsPackage: com.wentao.springdatajpaday1.service.impl * @Author: 13274 * @CreateTime: 2019-06-03 14:41 * @Description: ${Description} */ @Service public class StudentServiceImpl implements StudentService { @Autowired StudentDao studentDao; /** * 增加学生对象 * @param student 要增加学生的对象 * @return 返回学生对象 */ @Override public Student add(Student student) { Student s=studentDao.save(student); return s; } /** * 修改学生对象 * @param student 要修改学生的对象 * @return返回学生对象 */ @Override public Student upd(Student student) { return studentDao.save(student); } /** * 查询学生 * @return 返回查询到的集合 */ @Override public List<Student> seAll() { return studentDao.findAll(); } /** * 删除学生 * @param id 要删除学生的id */ @Override public void del(Integer id) { studentDao.deleteById(id); } /** * 根据id查询学生 * @param id 要查询的id * @return */ @Override public Student selById(Integer id) { return studentDao.findById(id).get(); } /** * 分页查询 * @param pageNum * @param size * @return */ @Override public Page<Student> findByPage(Integer pageNum, Integer size) { PageRequest pageRequest = PageRequest.of(pageNum - 1, size); Page<Student> page= studentDao.findAll(pageRequest); return page; } } |
import com.wentao.springbootvue.dao.StudentDao;
import com.wentao.springbootvue.pojo.Student;
import com.wentao.springbootvue.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @BelongsProject: springdatajpaday1
* @BelongsPackage: com.wentao.springdatajpaday1.service.impl
* @Author: 13274
* @CreateTime: 2019-06-03 14:41
* @Description: ${Description}
*/
@Service
public class StudentServiceImpl implements StudentService {
@Autowired
StudentDao studentDao;
/**
* 增加学生对象
* @param student 要增加学生的对象
* @return 返回学生对象
*/
@Override
public Student add(Student student) {
Student s=studentDao.save(student);
return s;
}
/**
* 修改学生对象
* @param student 要修改学生的对象
* @return返回学生对象
*/
@Override
public Student upd(Student student) {
return studentDao.save(student);
}
/**
* 查询学生
* @return 返回查询到的集合
*/
@Override
public List<Student> seAll() {
return studentDao.findAll();
}
/**
* 删除学生
* @param id 要删除学生的id
*/
@Override
public void del(Integer id) {
studentDao.deleteById(id);
}
/**
* 根据id查询学生
* @param id 要查询的id
* @return
*/
@Override
public Student selById(Integer id) {
return studentDao.findById(id).get();
}
/**
* 分页查询
* @param pageNum
* @param size
* @return
*/
@Override
public Page<Student> findByPage(Integer pageNum, Integer size) {
PageRequest pageRequest = PageRequest.of(pageNum - 1, size);
Page<Student> page= studentDao.findAll(pageRequest);
return page;
}
}
5.控制层(controller)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
package com.wentao.springbootvue.controller; import com.wentao.springbootvue.pojo.Student; import com.wentao.springbootvue.service.StudentService; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.List; import java.util.Map; /** * @BelongsProject: springdatajpaday1 * @BelongsPackage: com.wentao.springdatajpaday1.controller * @Author: 13274 * @CreateTime: 2019-06-03 14:55 * @Description: ${Description} */ @RestController @Api(value = "swagger ui 注释 api 级别") public class StudentController { @Autowired StudentService studentService; Integer count; @GetMapping("sell") @ApiOperation(value = "查询所有学生",notes = "查询所有学生") public Map selAll(Integer pageNum){ if (pageNum==null||pageNum==0){ pageNum=1; } if (count!=null&&pageNum>=count){ pageNum=count; } Page<Student> byPage = studentService.findByPage(pageNum, 2); count= byPage.getTotalPages(); Map<String,Object> map =new HashMap<String,Object>(); map.put("data",byPage); map.put("pageNum",pageNum); return map; } @DeleteMapping("del") public int del(Integer id){ try { studentService.del(id); return 1; } catch (Exception e) { return 0; } } @PostMapping("add") public Student add(@RequestBody Student student){ return studentService.add(student); } // @RequestMapping("selByid") // public String selByid(Integer id,Model model){ // Student student=studentService.selById(id); // model.addAttribute("student",student); // return "upd"; // } @PutMapping("upd") public Student modifyStudent(Student student){ return studentService.upd(student); } } |
import com.wentao.springbootvue.pojo.Student;
import com.wentao.springbootvue.service.StudentService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @BelongsProject: springdatajpaday1
* @BelongsPackage: com.wentao.springdatajpaday1.controller
* @Author: 13274
* @CreateTime: 2019-06-03 14:55
* @Description: ${Description}
*/
@RestController
@Api(value = "swagger ui 注释 api 级别")
public class StudentController {
@Autowired
StudentService studentService;
Integer count;
@GetMapping("sell")
@ApiOperation(value = "查询所有学生",notes = "查询所有学生")
public Map selAll(Integer pageNum){
if (pageNum==null||pageNum==0){
pageNum=1;
}
if (count!=null&&pageNum>=count){
pageNum=count;
}
Page<Student> byPage = studentService.findByPage(pageNum, 2);
count= byPage.getTotalPages();
Map<String,Object> map =new HashMap<String,Object>();
map.put("data",byPage);
map.put("pageNum",pageNum);
return map;
}
@DeleteMapping("del")
public int del(Integer id){
try {
studentService.del(id);
return 1;
} catch (Exception e) {
return 0;
}
}
@PostMapping("add")
public Student add(@RequestBody Student student){
return studentService.add(student);
}
// @RequestMapping("selByid")
// public String selByid(Integer id,Model model){
// Student student=studentService.selById(id);
// model.addAttribute("student",student);
// return "upd";
// }
@PutMapping("upd")
public Student modifyStudent(Student student){
return studentService.upd(student);
}
}
6.备置层(config)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
package com.wentao.springbootvue.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import springfox.documentation.builders.ApiInfoBuilder; import springfox.documentation.builders.PathSelectors; import springfox.documentation.builders.RequestHandlerSelectors; import springfox.documentation.service.ApiInfo; import springfox.documentation.spi.DocumentationType; import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2; @Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage("com.wentao.springbootvue.controller")) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("Spring Boot中使用Swagger2实现前后端分离开发") .description("此项目只是练习如何实现前后端分离开发的小Demo") .termsOfServiceUrl("https://me.csdn.net/qq_42805685") .contact("吴文涛") .version("1.0") .build(); } } |
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
@Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.wentao.springbootvue.controller"))
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("Spring Boot中使用Swagger2实现前后端分离开发")
.description("此项目只是练习如何实现前后端分离开发的小Demo")
.termsOfServiceUrl("https://me.csdn.net/qq_42805685")
.contact("吴文涛")
.version("1.0")
.build();
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
package com.wentao.springbootvue.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { //跨域配置 @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override //重写父类提供的跨域请求处理的接口 public void addCorsMappings(CorsRegistry registry) { //添加映射路径 registry.addMapping("/**") //放行哪些原始域 .allowedOrigins("*") //是否发送Cookie信息 .allowCredentials(true) //放行哪些原始域(请求方式) .allowedMethods("GET", "POST", "PUT", "DELETE") //放行哪些原始域(头部信息) .allowedHeaders("*") //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息) .exposedHeaders("Header1", "Header2"); } }; } } |
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
//跨域配置
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
//重写父类提供的跨域请求处理的接口
public void addCorsMappings(CorsRegistry registry) {
//添加映射路径
registry.addMapping("/**")
//放行哪些原始域
.allowedOrigins("*")
//是否发送Cookie信息
.allowCredentials(true)
//放行哪些原始域(请求方式)
.allowedMethods("GET", "POST", "PUT", "DELETE")
//放行哪些原始域(头部信息)
.allowedHeaders("*")
//暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
.exposedHeaders("Header1", "Header2");
}
};
}
}
7.yml配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/studentjpa?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8 password: root username: root jpa: database: mysql hibernate: ddl-auto: update naming: physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl show-sql: true |
8.pom依赖包
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.5.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.wentao</groupId> <artifactId>springbootvue</artifactId> <version>0.0.1-SNAPSHOT</version> <name>springbootvue</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!--添加对swagger的依赖--> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.7.0</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.7.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> |
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--添加对swagger的依赖-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
上结构图
二. 前台
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 通过CDN引入Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 通过CDN引入axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" cellpadding="20"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年级</th> <th>操作</th> </tr> <template v-for="student in students"> <tr> <td>{{student.id}}</td> <td>{{student.name}}</td> <td>{{student.sex}}</td> <td>{{student.gradeId}}</td> <td> <a href="#" @click="Delete(student.id)">删除</a> <a href="#" @click="Edit(student)">编辑</a> </td> </tr> </template> <template> <tr> <td><input type="text" placeholder="不需要自己填充" readonly="readonly" v-model="student.id" /></td> <td><input type="text" placeholder="请输入用户名" v-model="student.name" /></td> <td><input type="text" placeholder="请输入性别" v-model="student.sex" /></td> <td><input type="text" placeholder="请输入年级" v-model="student.gradeId" /></td> <td> <button type="button" @click="Save">保存</button> </td> </tr> </template> </table> <a href="#" @click="findAll(1)">首页</a> <a href="#" @click="findAll(pageNum-1)">上一页</a> <a href="#" @click="findAll(pageNum+1)">下一页</a> <a href="#" @click="findAll(count)">尾页</a> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: { id: '', name: '', sex: '', gradeId: '' }, students: [], pageNum:0, count:0 }, methods: { findAll: function(pageNums) { var _this = this; axios.get('http://localhost:8080/sell',{ params: { pageNum: pageNums } }) .then(function(response) { console.log(response); _this.students = response.data.data.content; _this.count=response.data.data.totalPages; _this.pageNum=response.data.pageNum }) .catch(function(error) { console.log(error); }); }, Save: function() { var _this = this; var student = JSON.stringify(_this.student) if (student.id != null && student.id != '') { //修改 axios.put('http://localhost:8080/upd', student, { headers: { "Content-Type": "application/json;charset=utf-8" //头部信息 } }) .then(function(response) { //保存完之后查询所有的信息 _this.student.name = null; _this.student.sex = null; _this.student.gradeId = null; _this.findAll(); }) .catch(function(error) { console.log(error); }); } else { //新增 axios.post('http://localhost:8080/add', student, { headers: { "Content-Type": "application/json;charset=utf-8" //头部信息 } }) .then(function(response) { //保存完之后查询所有的信息 if (_this.student.id != null) { _this.student.id = null; } _this.student.name = null; _this.student.sex = null; _this.student.gradeId = null; _this.findAll(); }) .catch(function(error) { console.log(error); }); } }, Delete: function(sid) { var _this = this; axios.delete('http://localhost:8080/del', { params: { id: sid } }) .then(function(response) { _this.findAll(); }) .catch(function(error) { console.log(error); }); }, Edit: function(student) { this.student = student; } }, created: function() { //创建vue对象的时候自动调用查询所有的方法 this.findAll(); } }) </script> </body> </html> |
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
student: {
id: '',
name: '',
sex: '',
gradeId: ''
},
students: [],
pageNum:0,
count:0
},
methods: {
findAll: function(pageNums) {
var _this = this;
axios.get('http://localhost:8080/sell',{
params: {
pageNum: pageNums
}
})
.then(function(response) {
console.log(response);
_this.students = response.data.data.content;
_this.count=response.data.data.totalPages;
_this.pageNum=response.data.pageNum
})
.catch(function(error) {
console.log(error);
});
},
Save: function() {
var _this = this;
var student = JSON.stringify(_this.student)
if (student.id != null && student.id != '') { //修改
axios.put('http://localhost:8080/upd', student, {
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(response) {
//保存完之后查询所有的信息
_this.student.name = null;
_this.student.sex = null;
_this.student.gradeId = null;
_this.findAll();
})
.catch(function(error) {
console.log(error);
});
} else { //新增
axios.post('http://localhost:8080/add', student, {
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(response) {
//保存完之后查询所有的信息
if (_this.student.id != null) {
_this.student.id = null;
}
_this.student.name = null;
_this.student.sex = null;
_this.student.gradeId = null;
_this.findAll();
})
.catch(function(error) {
console.log(error);
});
}
},
Delete: function(sid) {
var _this = this;
axios.delete('http://localhost:8080/del', {
params: {
id: sid
}
})
.then(function(response) {
_this.findAll();
})
.catch(function(error) {
console.log(error);
});
},
Edit: function(student) {
this.student = student;
}
},
created: function() { //创建vue对象的时候自动调用查询所有的方法
this.findAll();
}
})
</script>
</body>
</html>