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

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

废话不多说直接上代码

一.后台

1.实体类(pojo)

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;
    }
}

2.dao层（dao）

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> {
}

3.业务层(service)

接口

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);
}

4.接口实现（impl）

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;
    }
}

5.控制层（controller）

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);
    }

}

6.备置层（config）

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();
    }
}

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");
            }
        };
    }
}

7.yml配置

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依赖包

<?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>

上结构图

二. 前台

<!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>