使用spring-data-jpa+swagger+vue

最新推荐文章于 2021-01-27 09:07:19 发布

weixin_42845412

最新推荐文章于 2021-01-27 09:07:19 发布

阅读量267

点赞数

分类专栏： spring-data-jpa 文章标签：前后端分离

本文链接：https://blog.csdn.net/weixin_42845412/article/details/90814015

版权

spring-data-jpa 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上次写的控制器改了一点

@RestController
@Api(value = "swagger ui 注释 api 级别")
public class StudentController {

    @Autowired
    StudentService studentService;

    static final Integer pageSize = 2;

    Integer TotalPages;

    @GetMapping({"/","index"})
    @ApiOperation(value = "查询第一页学生",notes = "查询第一页学生")
    public Page<Student> findAll(){
        Page<Student> all = studentService.findAll(1, this.pageSize);
        this.TotalPages = all.getTotalPages();
        return all;
    }

    @GetMapping("/student")
    @ApiOperation(value = "分页查询",notes = "分页查询")
    public Page<Student> findAll(Integer page) {
        if (page <= 0) {
            page = 1;
        }
        if(page>this.TotalPages){
            page = this.TotalPages;
        }
        Page<Student> all = studentService.findAll(page, this.pageSize);
        this.TotalPages = all.getTotalPages();
        return all;
    }

    @DeleteMapping("/student")
    @ApiOperation(value = "删除学生",notes = "删除学生")
    public void del(Long id){
        studentService.delStudent(id);
    }
    @PutMapping("/student")
    @ApiOperation(value = "修改学生",notes = "修改学生")
    public Student update(@RequestBody Student student){
        return studentService.modifyStudent(student);
    }
    @PostMapping("/student")
    @ApiOperation(value = "添加学生",notes = "添加学生")
    public Student save(@RequestBody Student student){
        return studentService.addStudent(student);
    }

}

这次整合了swagger

1、在pom文件中加入依赖

<!--添加对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>

2、在springboot程序入口处加一个注解@EnableSwagger2

@EnableSwagger2

3、在controller类和方法上依次加入注解

@Api(value = "swagger ui 注释 api 级别")

@ApiOperation(value = "查询第一页学生",notes = "查询第一页学生")

然后还加上了swagger的配置类


@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.zzb.student_jpa_vue.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Spring Boot中使用Swagger2实现前后端分离开发")
                .description("此项目只是练习如何实现前后端分离开发的小Demo")
                .termsOfServiceUrl("https://blog.csdn.net/ca1993422")
                .contact("zzb")
                .version("1.0")
                .build();
    }
}

解决跨域的配置类

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

浏览器地址输入http://localhost:8080/swagger-ui.html后效果如下
在这里插入图片描述

后台整合的差不多了，然后就是前端代码

引入vue.js和axios.js可以去https://www.bootcdn.cn/拷贝链接或标签


<body>
    <div id="app">
        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年级</th>
                <th>操作</th>
            </tr>
            <tr v-if="students" v-for="stu in students.content">
                <td v-text="stu.id"></td>
                <td v-text="stu.name"></td>
                <td v-text="stu.sex"></td>
                <td v-text="stu.gradeId"></td>
                <td>
                    <input type="button" @click="del(stu.id)" value="删除">
                    <input type="button" @click="edit(stu)" value="编辑">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" v-model="student.id" placeholder="编号" readonly>
                </td>
                <td>
                    <input type="text" v-model="student.name" placeholder="姓名">
                </td>
                <td>
                    <input type="text" v-model="student.sex" placeholder="性别">
                </td>
                <td>
                    <input type="text" v-model="student.gradeId" placeholder="年级">
                </td>
                <td>
                    <input type="button" @click="save" value="保存">
                </td>
            </tr>
        </table>
        <h2>当前页码{{students.number+1}}/{{students.totalPages}}</h2>
        <a href="#" @click="paging(students.number)">上一页</a>
        <a href="#" @click="paging(students.number+2)">下一页</a>


    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                student: {
                    id: "",
                    name: "",
                    sex: "",
                    gradeId: "",
                },
                students: []
            },
            methods: {
                /**
                 *   查询              
                 */
                findAll: function() {
                    let _this = this;
                    axios({
                            method: 'get',
                            url: 'http://localhost:8080/index',
                            data: {}
                        })
                        .then(res => {
                            _this.students = res.data
                        })
                        .catch(err => {
                            console.log(err)
                        })
                },
                /**
                 *  新增 修改              
                 */
                save: function() {
                    let _this = this;
                    var stu = JSON.stringify(this.student);
                    alert(stu);
                    if (_this.student.id != '') {
                        console.log(_this.student.name)
                            //修改
                        axios.put('http://localhost:8080/student', stu, {
                                headers: {
                                    'content-type': 'application/json;charset=utf-8'
                                }
                            })
                            .then(res => {
                                _this.findAll()
                            })
                            .catch(err => {
                                console.error(err);
                            })
                    } else {
                        //新增
                        axios.post('http://localhost:8080/student', stu, {
                                headers: {
                                    'content-type': 'application/json;charset=utf-8'
                                }
                            })
                            .then(res => {
                                _this.findAll()
                            })
                            .catch(err => {
                                console.error(err);
                            })
                    }


                },
                /***
                *修改传值
                */
                edit: function(stu) {
                    this.student = stu
                },
                del: function(uid) {
                    let _this = this;
                    axios({
                            method: 'delete',
                            url: 'http://localhost:8080/student',
                            params: {
                                id: uid
                            }
                        })
                        .then(res => {
                            _this.findAll()

                        })
                        .catch(err => {
                            console.log(err)
                        })
                },
                /**
                *分页
                */
                paging: function(number) {
                    var _this = this
                    axios({
                            method: 'get',
                            url: 'http://localhost:8080/student',
                            params: {
                                page: number
                            }
                        })
                        .then(res => {
                            _this.students = res.data
                        })
                        .catch(err => {
                            console.log(err)
                        })
                }


            },
            created() {
                let _this = this;
                axios({
                        method: 'get',
                        url: 'http://localhost:8080/index',
                        data: {}
                    })
                    .then(res => {
                        _this.students = res.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }

        })
    </script>
</body>

weixin_42845412

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用spring-data-jpa+swagger+vue

上次写的控制器改了一点@RestController@Api(value = "swagger ui 注释 api 级别")public class StudentController { @Autowired StudentService studentService; static final Integer pageSize = 2; Intege...
复制链接

扫一扫

专栏目录