01、图书信息管理系统Springboot+Vue+ElementUI

需求：图书管理系统

实现功能：查询所有图书信息，新增，修改，删除图书信息；

 

开发技术

前端：Vue 3.0 + ElementUI

后端：springboot + Spring Data JPA

 

开发工具：Idea(前端+后端)

 

1、前端工程

1）使用vue项目管理器，创建第一个Vue 3.0工程（library），在idea中导入项目；

2）在vue ui中安装ElementUI插件；

3）在vue工程中，安装axios组件，前端可以通过axios访问后端restful接口，Terminal下执行如下命令

vue add axios
cnpm install --save axios

 4）如果前端调用后端出现跨域报错：如在8083服务（前端服务）请求8181服务（后端服务），跨服务了，就存在如下跨域报错

在后端解决方法：

增加一个配置类，com.library.springbootvue.config.CrosConfig

package com.library.springbootvue.config;

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 CrosConfig  implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTION")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

后端服务重新启动后，再执行前端请求后端服务时，就不会报跨域错误了 

 

 

 

 

 

 

 

2、后端工程

1）创建springboot工程

勾选以下几项：Lombok，Spring Web，Spring Data JPA，MySQL Driver，创建工程springbootvue

 

浏览器访问：

查询图书列表：http://localhost:8181/book/findAll

查询图书信息（分页查询）：http://localhost:8181/book/findAll/0/4

{
    "content":[
        {
            "id":1,
            "name":"java开发",
            "author":"张三"
        },
        {
            "id":2,
            "name":"vue开发",
            "author":"李四"
        },
        {
            "id":3,
            "name":"小程序开发",
            "author":"王五"
        },
        {
            "id":4,
            "name":"美丽说",
            "author":"雨仔"
        }
    ],
    "pageable":{
        "sort":{
            "sorted":false,
            "unsorted":true,
            "empty":true
        },
        "offset":0,
        "pageSize":4,
        "pageNumber":0,
        "paged":true,
        "unpaged":false
    },
    "totalElements":21,
    "totalPages":6,
    "last":false,
    "number":0,
    "size":4,
    "sort":{
        "sorted":false,
        "unsorted":true,
        "empty":true
    },
    "numberOfElements":4,
    "first":true,
    "empty":false
}