springboot + vue + element-ui + axios 查询数据功能实现

1. 创建vue 工程，参考博客 安装 elment-ui 和 axios

https://blog.csdn.net/qq_21344887/article/details/116256535

2. 使用mybatis-plus 生成 springboot 项目

参考地址： https://gitee.com/superman58/SpringbootDemo/tree/master/mybatis-plus

3. 前端视图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4Q8QfSs-1619659774614)(C:\Users\zhaid\AppData\Roaming\Typora\typora-user-images\image-20210429083720018.png)]

3.1 创建table.vue

配置路由router/index.js

import Table from '../views/Table'

const routes = [

  {
    path: '/table',
    name: 'Table',
    component: Table,
  },
]

3.2 修改 app.vue 中的template

<template>
<!--  保证table 可以视图展示-->
  <router-view></router-view>
</template>

3.3 element 官网复制自己喜欢的table 代码

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

启动项目： 访问 http://locahost:8080/table 如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tGSpmuiY-1619659774617)(C:\Users\zhaid\AppData\Roaming\Typora\typora-user-images\image-20210429085530054.png)]

4. 后端项目准备：

自动生成代码后

4.1 在 UserController.java 中添加

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserServiceImpl userService;
	//查询数据库中所有数据
    @GetMapping("/list")
    public List<User> list(){
        return this.userService.list();
    }

}

4.2 yaml 中修改端口号避免与前端8080 端口冲突

server:
  port: 8081

4.3 后端解决跨域问题

@Configuration

public class Cors implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

4.4 前端Table.Vue 页面修改

<template>
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="id"
        label="编号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="age"
        label="年龄">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "Table",

  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [
  /*    {
        id: 1,
        name: '王小虎',
        age: 20,
        email: 'wxh@qq.com'
      },
        {
          id: 2,
          name: '王小虎',
          age: 20,
        }, {
          id: 3,
          name: '王小虎',
          age: 20,
        }, {
          id: 4,
          name: '王小虎',
          age: 20,
        }, {
          id: 5,
          name: '王小虎',
          age: 20,
        },*/
      ]
    }
  },
  created() {
    //请求后台数据
    let _this = this
    axios.get('http://localhost:8082/user/list').then(function (resp) {
      //console.log(resp.data);
      _this.tableData = resp.data
    })
  }

}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

5. 启动前后端项目，前段访问 http://locahost:8080/table 获得后端数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnZAxC1N-1619659774619)(C:\Users\zhaid\AppData\Roaming\Typora\typora-user-images\image-20210429091341228.png)]

项目代码： springboot_vue2+ vue2

background: oldlace;

}

.el-table .success-row {
background: #f0f9eb;
}

## 5.  启动前后端项目，前段访问 http://locahost:8080/table 获得后端数据

[外链图片转存中...(img-PnZAxC1N-1619659774619)]

项目代码： [springboot_vue2+ vue2]()