继续上面两篇博客（后台需添加了跨域配置），后台接口已经写好，前端vue使用element-plus，axios实现数据交互

后台跨域配置，新建一个文件CorsConfiguration：

 

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author yyb
 */
@Configuration
public class CorsConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowCredentials(false)
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .allowedOrigins("*");
            }
        };
    }

}

前端也进行跨域配置，创建一个vue.config.js文件，内容如下，注意代理的地址为后端端口号，我这边设置的是8888，port:9876是前端运行的端口号

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        host: 'localhost',
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:8888',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

首先安装element-plus，axios

//npm安装element plus
npm install element-plus --save

//npm安装axios
npm install axios

npm install --save axios vue-axios

安装完毕后在package.json中可以看到对应 的信息

然后在main.js中引入

 随后在组件components下面的table中写入样式，通过axios.get方式获取所有数据，加载到页面

<template>
  <div >
    <el-table :data="tableData"
              border style="width: 100%" v-loading="loading"
              default-expand-all>
      <el-table-column prop="id" label="id" sortable width="220"/>
      <el-table-column prop="username" label="username" width="250"/>
      <el-table-column prop="password" label="password" width="250"/>
      <el-table-column prop="nickname" label="nickname" width="250" />
      <el-table-column fixed="right" label="Operations">
        <template #default>
          <el-button type="text" size="small" @click="handleClick"
          >Detail</el-button
          >
          <el-button type="text" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import request from "@/utils/request";
import axios from 'axios'

export default {
  name: "Header",
  components:{

  },
  data(){
    return {
      loading: false,
      tableData:[],
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      this.loading = true
      axios.get(`http://localhost:8888/users/all`).then((response) => {
        this.loading = false
        console.log(response.data)
        this.tableData = response.data.data
        console.log(this.tableData)
      })

    }
  },
}
</script>

<style scoped>

</style>

最后运行localhost:9876，可以看到对应的页面

数据库的信息如下

对比可以看到页面数据与后台数据一致，后台数据在前台页面展示成功。