投稿
  1. Java入门教程_springboot基础教程_springcloud_jvm学习交流网站【Java实验室】首页
  2. SprintBoot课程

springboot-data-jpa+vue实现前后端分离增删改分页查询代码示例

徐老师 • • SprintBoot课程 • 阅读 9257

一.后台

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>

赞 (0)
徐老师徐老师管理员
0 0
上一篇 2021年1月29日 pm3:34
下一篇 2021年1月29日 pm3:37

相关推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

记住昵称、邮箱和网址，下次评论免输入
关注我们