import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
// import 'element-plus/theme-chalk/index.css';
import 'element-plus/dist/index.css'
import axios from 'axios'

const app = createApp(App)

// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8088'
//将axios作为全局的自定义属性，每个组件可以在内部直接访问（Vue3），该部分要放在pp.mount('#app')的全面
app.config.globalProperties.$http = axios

app.use(ElementPlus)
app.mount('#app')

2 App.vue

App.vue是运行vue的主文件，引入myTable.vue测试文件。代码如下：

<template>
  <div>
    <myTable></myTable>
  </div>
</template>

<script lang="ts">
import myTable from '@/components/Cesium/demo-test/myTable.vue'
export default {
  name: 'App',
  data:function(){
    return {
    }
  },
  created: function(){
    console.log("组件被创建了")
  },
  components: {
    myTable
  }
}
</script>
<style>
</style>

3 myTable.vue测试页面

这是测试页面，逻辑流程如下，

首先加载页面的时候，前端vue接收到sprintboot返回到的查询【my_geo】表中所有数据记录，展示到页面上；
当点击复选框选择“铁路”类型，并点击“确定”按钮之后，vue的axios将“铁路”参数传送到sprintboot后端；
sprintboot后端接收到“铁路”参数，重新查询数据库中的【my_geo】表，过滤得到结果，并返回给前端vue；
前端vue接收到sprintboot返回到的结果时，更新页面展示数据，并展示到页面上；

<template>
	<div>
	  <div>
		<div v-for="item in checkboxData" 
		:key="item.dictid" 
		style="font-size: 18px">
		  <el-checkbox 
			v-model="item.checked" :label="item.type" :id="item.typeid" :value="item.type">
		  </el-checkbox>
		</div>
		<div style="margin-top: 10px">
		<el-button @click="checkall" size="small">全选</el-button>
		<el-button @click="checkno" size="small">全不选</el-button>
		<el-button type="primary" @click="checkok" size="small">确定</el-button>
	  </div>
	  </div>
	  
	  <el-table 
      ref="multipleTable" 
      :data="tableDataInfo" 
      tooltip-effect="dark" 
      style="width: 100%" 
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="85">
        </el-table-column>
        <el-table-column prop="dictid" label="ID" width="220">
        </el-table-column>
        <el-table-column prop="dictvalue" label="类型" width="220">
        </el-table-column>
        <el-table-column prop="lng" label="经度" width="220">
        </el-table-column>
        <el-table-column prop="lat" label="纬度" width="220">
        </el-table-column>
      </el-table>
	</div>
  </template>
   
<script>
export default {
	name: 'test',
	data: function(){
	  return {
		sourcedata: [],
		checkboxData: [],
		selectedData: [],
		tableDataInfo:[]
	  }
	},
	methods:{
	  checkall(){ // 全选
		this.checkboxData.forEach(item => {
		  item.checked = true;
		})
		this.selectedData = []
	  },
   
	  checkno(){ // 全不选
		this.checkboxData.forEach(item => {
		  item.checked = false;
		})
		this.selectedData = []
	  },
	  checkok(){ // 确定
		// 获取Array [ Proxy, Proxy ]的target数据
		var selected = JSON.parse(JSON.stringify(this.checkboxData.filter(item => item.checked)))
		for(var i=0; i<selected.length; i++){
			this.selectedData.push(JSON.parse(JSON.stringify(selected[i])).type)  // 返回被选中的type，存入列表
		}
		console.log(JSON.parse(JSON.stringify(this.selectedData)))  // 返回proxy，转列表
		var p = this.selectedData[0]
		//  get请求 RequestParam传参
		var data = this.$http.get('/geo/getRequestParam', {params: {p}}).then((response)=>{
			console.log("get请求 RequestParam传参", data);
			this.tableDataInfo = response.data
			console.log(response.data)
		})
	  }
	},
	created(){
	// 【从后端获取过来的json数据】
	  this.$http.get("/geo/findAll").then((response)=>{
		this.sourcedata = response.data
		this.tableDataInfo = response.data

		// 原数据中没有checked字段，所以给每条数据添加checked以便后续操作
		for(var i=0; i<this.sourcedata.length; i++){
			this.sourcedata[i].checked = false
		}
		// console.log("this.sourcedata:", this.sourcedata)
		this.tableDataInfo = this.sourcedata
		})
	// 【复选框中的树结构数据】
	  this.checkboxData = [
		{ typeid: 0, type: '铁路'},
		{ typeid: 1, type: '高架桥'},
	  ] 
	}
}
</script>
<style scoped>
</style>

三、springboot部分

如果有需要，请移步到基于vscode创建SpringBoot项目，连接postgresql数据库 2 更简单_水w的博客-CSDN博客

目前项目的目录结构，如下所示：

1 Geo.java

创建实体类，

package com.example.demotwo.entity;

//@TableName("my_geo")
public class Geo {
    private int dictid;
    private String dictvalue;
    private String lng;
    private String lat;

    public String getDictvalue() {
        return dictvalue;
    }

    public void setDictvalue(String dictvalue) {
        this.dictvalue = dictvalue;
    }

    public String getLng() {
        return lng;
    }

    public void setLng(String lng) {
        this.lng = lng;
    }

    public String getLat() {
        return lat;
    }

    public void setLat(String lat) {
        this.lat = lat;
    }

    @Override
    public String toString() {
        return "{" + "dictid:" + dictid +
                ", dictvalue:" + dictvalue + '\'' +
                ", lng:" + lng +
                ", lat:" + lat +
                '}';
    }
}

2 GeoMapper.java

package com.example.demotwo.mapper;

//import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demotwo.entity.Geo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import java.util.List;

@Mapper
public interface GeoMapper {
    // 查询所有用户
    @Select("select * from my_geo")
    public List<Geo> find();

    @Select("select * from my_geo WHERE dictvalue = #{type}")
    public List<Geo> filter(@Param("type") String p);
}

3 application.properties配置文件

application.properties配置如下，其中Tomcat端口也可以不改，那就是8080，我是为了防止端口冲突，就随便改了一个。

url在数据为postgresql时是jdbc:postgresql://localhost:5432/[数据库名]
后面是用户名和密码，我直接postgres登录的。

#??Tomcat??
server.port=8088
spring.datasource.url=jdbc:postgresql://localhost:5432/test-demo
spring.datasource.username=postgres
spring.datasource.password=123456
spring.datasource.driver-class-name=org.postgresql.Driver

4 GeoController.java

springboot接口如下：

使用get请求获得时，要用params传参数给后端，params会被添加到url的请求字符串中，就是常见的点击某个按钮路径后面会拼接一堆东西。

package com.example.demotwo.controller;

import com.example.demotwo.entity.Geo;
import com.example.demotwo.mapper.GeoMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
@CrossOrigin
public class GeoController {
    @Autowired
    private GeoMapper geoMapper;

    @GetMapping("/geo/findAll")
    public List query(){
        List <Geo> list = geoMapper.find();
        System.out.println(list);  // 快捷键：so
        return list;
    }

    /**
     * 测试get请求RequestParam传参
     */
    @GetMapping("/geo/getRequestParam")
    public List testGetRequestParam(@RequestParam("p") String p) {
        System.out.println("result:" + p);
        List <Geo> result = geoMapper.filter(p);
        System.out.println(result);  // 快捷键：so
        return result;
    }
}