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

133 阅读 0 评论 88 点赞

我是靠谱客的博主背后香水，这篇文章主要介绍springboot + vue + element-ui + axios 功能实现springboot + vue + element-ui + axios 查询数据功能实现，现在分享给大家，希望可以做个参考。

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:UserszhaidAppDataRoamingTyporatypora-user-imagesimage-20210429083720018.png)]

3.1 创建table.vue

配置路由router/index.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
import Table from '../views/Table'

const routes = [

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

3.2 修改 app.vue 中的template

复制代码

1
2
3
4
5
<template>
<!--  保证table 可以视图展示-->
  <router-view></router-view>
</template>

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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:UserszhaidAppDataRoamingTyporatypora-user-imagesimage-20210429085530054.png)]

4. 后端项目准备：

自动生成代码后

4.1 在 UserController.java 中添加

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserServiceImpl userService;
	//查询数据库中所有数据
    @GetMapping("/list")
    public List<User> list(){
        return this.userService.list();
    }

}

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

复制代码

1
2
3
server:
  port: 8081

4.3 后端解决跨域问题

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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 页面修改

复制代码

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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<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:UserszhaidAppDataRoamingTyporatypora-user-imagesimage-20210429091341228.png)]

项目代码： springboot_vue2+ vue2

复制代码

1
2
background: oldlace;

}

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

复制代码

1
2
3
4
5
6
7
8

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

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

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

最后

以上就是背后香水最近收集整理的关于springboot + vue + element-ui + axios 功能实现springboot + vue + element-ui + axios 查询数据功能实现的全部内容，更多相关springboot内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：vue.js
浏览次数：133 次浏览
发布日期：2024-01-08 22:05:46
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogfy_14__23_g3.html

vue-element ui-axios-springboot环境：文件和表单上传后端此文，主要讲解element ui的文件上传功能，以及文件+表单一起作为参数被后端接收的内容。vue-element ui -axios代码前端 api：import { uploadFile } from '@/api/fileUpLoad.api';

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

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

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

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

3. 前端视图

3.1 创建table.vue

3.2 修改 app.vue 中的template

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

4. 后端项目准备：

4.1 在 UserController.java 中添加

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

4.3 后端解决跨域问题

4.4 前端Table.Vue 页面修改

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

最后

评论列表共有 0 条评论

发表评论取消回复

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

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

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

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

3. 前端视图

3.1 创建table.vue

3.2 修改 app.vue 中的template

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

4. 后端项目准备：

4.1 在 UserController.java 中添加

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

4.3 后端解决跨域问题

4.4 前端Table.Vue 页面修改

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

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

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

发表评论取消回复