复制代码
package com.longchi.common;
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 CorsConfig {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1, 设置访问源地址
corsConfiguration.addAllowedHeader("*"); // 2, 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3, 设置访问源请求方法
source.registerCorsConfiguration("/**",corsConfiguration);
// 4, 对接口配置跨域设置
return new CorsFilter(source);
}
}
复制代码
<template>
<div>
<div class="card" style="margin-bottom: 5px">
<el-input style="width: 260px;margin-right: 5px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
<el-button type="primary">查 询</el-button>
</div>
<div class="card" style="margin-bottom: 5px">
<el-button type="danger">批量删除</el-button>
<el-button type="primary">新增</el-button>
<el-button type="success">批量导入</el-button>
<el-button type="info">批量导出</el-button>
</div>
<div class="card" style="margin-bottom: 5px">
<el-table :data="data.tableData" style="width: 100%" :header-cell-style="{color: '#333', backgroundColor: 'eaf4ff'}">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" width="188" />
<el-table-column prop="phone" label="电话" />
<el-table-column prop="address" label="名称" width="188" />
</el-table>
</div>
<div class="card">
<el-pagination
v-model:current-page="data.pageNum"
:page-size="data.pageSize"
layout="total,prev,pager,next"
:total="data.total"
/>
</div>
</div>
</template>
<script setup>
import axios from 'axios';
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
const data = reactive({
name: null,
pageNum: 1,
pageSize: 5,
total: 6,
tableData: [
{name: '青哥哥',phone: '13877886677',address:'北京市朝阳区'},
{name: '小武哥哥',phone: '13977886677',address:'上海市徐汇区'},
{name: '小张哥哥',phone: '13877886654',address:'安徽省合肥市'},
{name: '小李哥哥',phone: '13877546677',address:'北京市东单区'},
{name: '小王哥哥',phone: '13877886688',address:'上海市长宁区'},
{name: '青哥哥',phone: '13877886699',address:'上海市闵行区'},
]
})
// 拿到后台接口数据(后端给前端返回的数据, 赋值给前端页面展示的数据)
axios.get('http://localhost:9999/admin/selectAll').then(res => {
console.log(res);
})
</script>
