前后端分离知识要点

前端框架采用VUE框架，发送请求使用axios,UI框架使用ElementUi；

在main.js中自定义vue属性对象和默认请求路径：

import axios from 'axios'
axios.defaults.baseURL= "http://127.0.0.1:8080/"
//自定义Vue对象属性
Vue.prototype.$http = axios

发送批量删除请求用patch; 后端使用PatchMapping("/emp/delByBatch"):

const ids = this.sels.map(item => item.id); 
let para = {ids: ids};//id数组
        this.$http.patch('/emp/delByBatch', para).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '批量删除成功',
            type: 'success'
          });

部门无限级树：无限级树使用到ElementUI的级联选择器

后端实体字段

// 部门无限级树 
 @TableField(exist = false)
 @JsonInclude(JsonInclude.Include.NON_EMPTY)// 过滤空的集合
 List<Department> children = new ArrayList<>();

方案：
- 一次性查询出全部数据；
- 从所有数据中找到一级数据；
- 只要不是一级数据那就找到自己的上级数据，放入到上级数据的children中。

代码实现

@Override
   public Result getDepartmentTrees() {
       final ArrayList<Department> list = new ArrayList<>();
       //查询所有部门数据
       final List<Department> departments = departmentMapper.selectList(new LambdaQueryWrapper<>());
       for (Department department : departments) {
           if (null != department.getParentId()) {
               //表示为子级部门 找到唯一父级部门
           /*   双重for循环实现无限级树效率慢 所以使用HashMap
            for (Department parent : departments) {
                   if (department.getParentId().equals(parent.getId())) {
                       parent.getChildren().add(department);
                       break;//找到一个父级部门就跳出循环相当于一个父亲
                   }
               }*/
               // 实现无限级树高级版^_^
               // 将集合转成map 键是id 值是部门类
     Map<Long, Department> map = departments.stream().collect(Collectors.toMap(Department::getId, e -> e));
               //上面一行代码相当于如下代码
            /*   final HashMap<Long, Department> map2 = new HashMap<>();
               for (Department d : departments) {
                   map2.put(d.getId(), d);
               }*/
               //获取父级部门
               final Department dept = map.get(department.getParentId());
               //将当前子级部门添加到父级部门
               dept.getChildren().add(department);
           } else {
               //顶级部门
               list.add(department);
           }
       }
       return Result.success(list);
   }

复制对象Object.assign()

1 2	// 复制对象 let para = Object.assign({}, this.editForm);//assign<T, U>(target: T, source: U): T & U;

常用工具条

<!--工具条-->
<el-col :span="24" class="toolbar">
 <el-button type="danger" icon="el-icon-delete-solid"@click="batchRemove":disabled="this.sels.length===0">			批量删除
  </el-button>
  <!--  分页插件  -->
     <el-pagination
         background
         layout="total,sizes, prev, pager, next, jumper"
         :total="total" :current-page="currentPage" :page-size="pageSize"
         @current-change="handleCurrentChange"
         @size-change="handleSizeChange"
         :page-sizes="pageSizes"
         style="float:right">
     </el-pagination>
</el-col>

后端配置跨域

package io.coderyeah.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class WebConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

使用Knife4j文档测试接口

导入依赖

<!--开发文档-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
            <version>2.0.9</version>
        </dependency>
 <!--参数验证-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

配置类

package io.coderyeah.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.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc;

@Configuration
@EnableSwagger2WebMvc
public class Knife4jConfig {
    @Bean(value = "defaultApi2")
    public Docket defaultApi2() {
        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder()
                        .title("# coderyeah的接口测试文档")
                        .description("# coderyeah：18 true")
                        .termsOfServiceUrl("https://coderyeah.gitee.io/")
                        .contact(new Contact("lqs", "https://coderyeah.gitee.io/", "[email protected]"))
                        .version("1.0")
                        .build())
                //分组名称
                .groupName("petHome:1.0")
                .select()
                //这里指定Controller扫描包路径
                .apis(RequestHandlerSelectors.basePackage("io.coderyeah.org.controller"))
                .paths(PathSelectors.any())
                .build();
        return docket;
    }
}

访问路径：http://localhost:8080/doc.html#/home (端口号修改成本地项目端口号)