spring jpa+vue +Swagger 前后端分离增删改查

最新推荐文章于 2023-01-30 15:31:15 发布
最新推荐文章于 2023-01-30 15:31:15 发布
阅读量503 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz6178/article/details/90815313
版权

1.勾选好项目依赖

在这里插入图片描述
我这里只勾了必要的三个 Lombok是工具类

这里是最终pox.xml文件
<?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.changan</groupId>
    <artifactId>springboot_vue</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot_vue</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-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.13</version>
        </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>
最终yml文件
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/springjpa?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
最终目录结构图

在这里插入图片描述

实体类
package com.wz.springbootvue.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Data
@Entity
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String name;

    private String sex;

    private Integer gradeId;
}
接下来我把DAO成和Controller。。。Service成代码放在下面
package com.wz.springbootvue.dao;

import com.wz.springbootvue.entity.Student;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;

public interface StudentDao extends JpaRepository<Student,Integer> , JpaSpecificationExecutor<Student> {

}
Controller
package com.wz.springbootvue.controller;

import com.wz.springbootvue.entity.Student;
import com.wz.springbootvue.service.StudentService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;

import java.util.List;
//https://www.kancloud.cn/yunye/axios/234845
@RestController
@RequestMapping("/student")
@Api(value = "swagger ui 注释 api 级别")
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping(value = {"/getAll/{pagenum}","/getAll"})
    @ApiOperation(value = "查询所有学生",notes = "查询所有学生")
    public Page<Student> getAll(@PathVariable(value = "pagenum",required = false) Integer pagenum){
        return studentService.getAll(pagenum);
    }

    @PostMapping("/save")
    public Student save(@RequestBody Student student){
        System.out.println(student.getName());
        return studentService.save(student);
    }

    @PutMapping("/update")
    public Student update(Student student){
        return studentService.update(student);
    }

    @DeleteMapping("delete")
    public int delete(Integer id){
        try {
            studentService.delete(id);
            return 1;
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }
}

@ApiOperation(value = “查询所有学生”,notes = “查询所有学生”) 是接口方法的注释 swagger的

Service

package com.wz.springbootvue.service;

import com.wz.springbootvue.entity.Student;
import org.springframework.data.domain.Page;

import java.util.List;

public interface StudentService {

    Student save(Student student);

    Page<Student> getAll(Integer pagenum);

    Student update(Student student);

    void delete(Integer id);
}

Serviceimpl

package com.wz.springbootvue.service.impl;

import com.wz.springbootvue.dao.StudentDao;
import com.wz.springbootvue.entity.Student;
import com.wz.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.data.jpa.domain.Specifications;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentDao studentDao;

    @Override
    public Student save(Student student) {
        return studentDao.save(student);
    }

    @Override
    public Page<Student> getAll(Integer pagenum) {
        if (pagenum==null){
            pagenum=1;
        }
        StringBuffer sql=new StringBuffer("select ");
        int size=2;
        PageRequest list=PageRequest.of(pagenum-1,size);
        Page<Student> page=studentDao.findAll(list);

        return page;
    }

    @Override
    public Student update(Student student) {
        return studentDao.save(student);
    }

    @Override
    public void delete(Integer id) {
        studentDao.deleteById(id);
    }

}

接下来是 Swagger配置文件

package com.wz.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.wz.springbootvue.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Spring Boot中使用Swagger实现前(Vue)后端分离")
                .description("springjap简单增删改查分页")
                .termsOfServiceUrl("https://blog.csdn.net/ca1993422")
                .contact("wz")
                .version("1.0")
                .build();
    }
}
  1. .apis是自己包的的路径
  2. title 是标题
  3. description 是注释
  4. 其他的不重要
如果前段vue出现跨域问题就把这个类加上去
package com.wz.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");
            }
        };
    }
}

最后记得给启动类加上这个@EnableSwagger2注解

接下来上前段veu，一个简单的分页增删改查

<!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.content">
					<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>
						{{students.pageable.pageNumber}}
				
				<a href="#" @click="pagefenye(1)">首页</a><a href="#" @click="pagefenye(students.pageable.pageNumber)">上一页</a> <a href="#" @click="pagefenye(students.pageable.pageNumber+2)">下一页</a><a href="#" @click="pagefenye(students.pageable.pageSize)">尾页</a>
				 
				</template>
			</table>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					student: {
						id: '',
						name: '',
						sex: '',
						gradeId: ''
					},
					students: []
				},
				methods: {
					findAll: function() {
						var _this = this;
						axios.get('http://localhost:8080/student/getAll')
							.then(function(response) {
								_this.students = response.data;
								
							})
							.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/student/update', 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/student/save', 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/student/delete', {
								params: {
									id: sid
								}
							})
							.then(function(response) {
								_this.findAll();
							})
							.catch(function(error) {
								console.log(error);
							});
					},
					Edit: function(student) {
						this.student = student;
					},
					pagefenye:function(pagenum){
									var _this = this;	
									var page=pagenum
		
										var url="http://localhost:8080/student/getAll/"+page
										axios.get(url)
										.then(function(response) {
											_this.students = response.data;
									
											
										})
										.catch(function(error) {
											console.log(error);
										});
					
									}
				},
				created: function() { //创建vue对象的时候自动调用查询所有的方法
					this.findAll();
				},
				
				
			})
		</script>
	</body>
</html>
数据表会自动生成 ，只要把库建好就行。
我爱我头像
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring-data-jpa+vue+swagger 实现一个前端后分离的小Demo
星云的博客
06-04 375
1、创建一个springboot项目 如何创建就不多讲述了，以下为所选依赖 2、配置yml.文件 数据库改为你本地的数据库 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/jpa_student?useUnicode=true&am...
vue 根据swagger 生成接口_Vue 使用typescript， 优雅的调用swagger API
weixin_40002238的博客
12-19 996
Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务，后端集成下Swagger，然后就可以提供一个在线文档地址给前端同学。前端如何优雅的调用呢？入门版根据文档，用axios自动来调用// 应用管理相关接口import axios from '../interceptors.js'// 获取应用列表export const getList = (...
Spring&boot;mybatis;增删改查前后端分离分页demo
11-07
Spring&boot;&mybatis;增删改查&前后端分离&分页&demo;
使用spring-data-jpa+swagger+vue
weixin_42845412的博客
06-04 265
上次写的控制器改了一点 @RestController @Api(value = "swagger ui 注释 api 级别") public class StudentController { @Autowired StudentService studentService; static final Integer pageSize = 2; Intege...
springboot+vue+swagger+redis+mysql+mybatis+pagehelper+druid+quartz
04-09
开源项目后台管理springboot+vue+swagger+redis+mysql+mybatis+pagehelper+druid+quartz 前后端在一起打包的 有安装步骤 亲测有效
基于SpringBoot2+Jpa+SpringSecurity+redis+Vue的前后端分离系统
03-10
持久层框架：Spring boot Jpa 安全框架：Spring Security 缓存框架：Redis 日志打印：logback+log4jdbc 接口文档 swagger2 其他：fastjson，aop，MapStruct等。 页面框架：Vue 前端源码：eladmin-qt 后端源码：el...
SpringBoot+SpringJPA+Swagger+Shiro 快速搭建前后端分离的权限管理系统 完整毕设
03-06
SpringBoot+SpringJPA+Swagger+Shiro 快速搭建前后端分离的权限管理系统 介绍：这次我们使用 Shiro 快速搭建前后端分离的权限管理系统 利用 JPA 帮我们管理数据库，Swagger Knife4j 帮我搭建 Web 测试环境； 后台...
使用SpringBoot+SpringJPA+Swagger+Shiro快速搭建前后端分离的权限管理系统.zip
最新发布
05-14
该项目利用了基于springboot + vue + mysql的开发...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
shiro-auth:使用SpringBoot+SpringJPA+Swagger+Shiro快速搭建前后端分离的权限管理系统
05-10
快速搭建前后端分离的权限管理系统 提供一套基于SpringBoo+shiro的权限管理思路. 前后端都加以控制,做到按钮/接口级别的权限。 并没有加加密等过多限制，避免增加大家学习的负担。 #####本文只是提供一套基于shiro...
使用SpringBoot+SpringJPA+Swagger+Shiro快速搭建前后端分离的权限管理系统 .zip
08-05
这个项目使用了SpringBoot、SpringJPA、Swagger和Shiro等技术，构建了一个高效、便捷的前后端分离架构。接下来，我们将深入探讨这些技术及其在系统中的应用。 1. **SpringBoot**：SpringBoot是Spring框架的一个扩展...
vue-swagger-ui:自定义swagger界面
05-02
vue-swagger-ui 接口文档界面 效果
SpringCloud+Oauth2+Vue+ElementUI前后端分离快速上手项目实战开发
06-21
适用人群Java开发人员, Vue开发人员, 前后端分离开发人员, 权限管理和配置开发人员，微服务SpringCloud版本开发人员 课程概述微服务SpringCloud前后端分离Vue企业项目实战，微服务脚手架，具有统一授权、认证后台管理系统；SpringCloud+Nacos+ SpringBoot+OAuth2+Jwt+Swagger等，核心技术采用Nacos、Fegin、Ribbon、Gateway、Hystrix、JWT Token、Mybatis、SpringBoot、Redis等主要框架和中间件。SpringCloud整合详细如下：
springcloud+vue实战项目
12-25
基于springcloud+vu构建的项目 用maven多模块的方式，下载下来安装maven环境 即可运行
vue实现学生信息管理系统
10-15
主要为大家详细介绍了vue实现学生信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
spring-Data-Jpa(简易增删改查) 一
cxxx45的博客
06-03 165
pom.xml该有的依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</a...
springBoot+swagger+mybatis 常用的增删改
cai750415222的博客
06-15 1463
项目结构，狠明确的三层结构 首先构建一个maven的工程 做好pox.xml的jar的引入，然后在swagger的配置          io.springfox          springfox-swagger2          2.6.1                      io.springfox          springfox-swagger
Vue项目中使用Swagger生成接口文档
05-20 4568
在线：https://editor.swagger.io/ 下载：https://github.com/swagger-api/swagger-ui 解压后，复制整个dist文件夹到服务端的public目录下，并改名为apidocs（随意） 在Swagger Editor中把文档保存为YAML或者JSON，我命名为swagger.json(或者swagger.yaml) 然后将文档放进api-docs文件夹，打开api-docs文件夹中的index.html，找到末尾的JavaScrip
vue 自动生成swagger接口请求文件
jsrgckf的专栏
01-30 1578
vue 生成swagger 接口请求js文件
vue3+ts实战开发之swagger自动生成（一）
热门推荐
欢迎来到☆槿畔☆的博客
04-24 1万+
vue3+ts的实战开发，重点讲述了api的调用规则，api的interface如何定义等因素。
基于Spring Boot + Vue进行开发
05-19
Spring Boot和Vue组合是一种非常流行的全栈开发组合，可以提供高度可扩展性和灵活性。下面是一些关于如何基于Spring Boot和Vue进行开发的提示： 1. 使用Spring Boot来创建RESTful API，可以使用Spring Data JPA来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值