前后端分离知识要点

最新推荐文章于 2023-04-25 18:35:24 发布

coderyeah

最新推荐文章于 2023-04-25 18:35:24 发布

阅读量295

点赞数

分类专栏：笔记文章标签：前端 vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_49195366/article/details/127401349

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

前后端分离知识要点

前端框架采用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()

// 复制对象 
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/", "2399690261@qq.com"))
                        .version("1.0")
                        .build())
                //分组名称
                .groupName("petHome:1.0")
                .select()
                //这里指定Controller扫描包路径
                .apis(RequestHandlerSelectors.basePackage("io.coderyeah.org.controller"))
                .paths(PathSelectors.any())
                .build();
        return docket;
    }
}