ElementUI整合SpringBoot

发表于 | 分类于
字数统计: 1.9k | 阅读时长 ≈ 10

创建前端项目

  • 使用vue cli创建一个名为element_user的vue项目
1
vue init webpack element_user
  • 在当前项目下安装elementui 
1
npm i element-ui -S
  • 在项目中的main.js中引入elementui
1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI); // 在项目中使用 elementui

ElementUI的一些基础知识：

ElementUI是基于vue的一个ui框架，并提供了很多相关组件，方便我们快速构建页面。

属性值的设置：

  • 当属性值是字符串时，直接使用属性="属性值" 的方式给属性赋值
  • 当属性值是表达式（例如 false,true，数字等等）时，使用:属性="属性值"的方式给属性赋值

事件的绑定：

  • 在组件标签中添加@事件名=vue中事件处理函数
  • 在 methods:{}内编写处理函数的实现

组件方法的调用：

  • 使用组件的方法时，需要在组件中加入ref="组件别名"
  • 在调用方法时直接使用this,$refs.组件别名.方法名()

vue项目的基本结构：

在App.vue中创建头部导航栏

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
<template>
  <div>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex"
          class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/">主页</el-menu-item>
          <el-menu-item index="/userlist">用户管理</el-menu-item>
          <el-menu-item index="/orderlist">订单管理</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeIndex: this.$route.path,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
    },
  },
};
</script>

<style>
</style>

编写主页的组件Index.vue

简单实现一个轮播图的效果。

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
<template>
  <div>
    <el-carousel :interval="3000" type="card" height="250px">
      <el-carousel-item v-for="item in imgs" :key="item">
        <el-image style="width: 500px; height: 250px" :src="item" fit="contain"></el-image>
      </el-carousel-item>
    </el-carousel>
    <h2>欢迎来到xx管理系统！</h2>
  </div>
</template>

<script>
import homeImg1 from "../assets/indexImgs/1.jpg";
import homeImg2 from "../assets/indexImgs/2.jpg";
import homeImg3 from "../assets/indexImgs/3.jpg";
import homeImg4 from "../assets/indexImgs/4.jpg";

export default {
  name: "Index",
  data() {
    return {
      imgs: [homeImg1, homeImg2, homeImg3, homeImg4],
    };
  },
};
</script>

<style>
</style>

在index.js中引入组件和访问路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../components/Index'
import UserList from '../components/User/UserList'
import OrderList from '../components/Order/OrderList'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', redirect:'/index' },
    { path: '/index', component: Index },
    { path: '/userlist', component: UserList },
    { path: '/orderlist', component: OrderList }
  ]
})

编写用户管理的组件UserList.vue

在当前工程下安装axios

1
npm install axios --save-dev

在main.js 中引入axios

1
2
3
import axios from 'axios';

Vue.prototype.$http=axios; // 修改 vue内部 $http为 axios

编写UserList.vue

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<template>
  <div>
    <el-button type="primary" size="small" @click="centerDialogVisible = true">添加</el-button>
    <el-table stripe size="small" :data="tableData">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column label="编号" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="160">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="100"></el-table-column>
      <el-table-column prop="birth" label="生日" width="160"></el-table-column>
      <el-table-column prop="address" label="地址" width="160"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="small"
           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small"  type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="员工信息" :visible.sync="centerDialogVisible" width="40%" center>
      <el-form :hide-required-asterisk="false" :rules="rules" ref="userForm" :model="form" label-suffix=":">
        <el-form-item label="姓名" prop="name">
          <el-col :span="11"><el-input v-model="form.name" size="small"></el-input></el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%" size="small"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" v-model="form.address" :rows="2"></el-input>
        </el-form-item>
        <span style="text-align: center; display: block">
          <el-button type="primary" @click="onSubmit" size="small">保存</el-button>
          <el-button @click="clear" size="small">重置</el-button>
        </span>
      </el-form>
    </el-dialog>
    <el-pagination
      layout="prev, pager, next,jumper,total,sizes"
      background
      style="margin: 10px 0px"
      :total="total"
      @current-change="findCurrentPage"
      @size-change="findPageSize"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserList",
  data() {
    return {
      search: "",
      tableData: [],
      centerDialogVisible: false,
      form: {
        name: "",
        gender: "男",
        birth: "",
        address: "",
      },
      total: 0,
      pageNo: 1,
      pageSize: 9,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        birth: [{ required: true, message: "请选择出生日期", trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    handleEdit(index, row) {
      // console.log(index, row);
      this.centerDialogVisible = true;
      this.$http
        .get("http://localhost:8989/user/select?id=" + row.id)
        .then((res) => {
          //console.log(res.data);
          this.form = res.data;
        });
    },
    handleDelete(index, row) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("http://localhost:8989/user/delete?id=" + row.id)
            .then((res) => {
              if (res.data.status) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.listAll();
              } else {
                this.$message({
                  message: "删除失败",
                  type: "error",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.$http
            .post("http://localhost:8989/user/save", this.form)
            .then((res) => {
              this.centerDialogVisible = false;
              if (res.data.status) {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
                this.listAll();
              } else {
                this.$message({
                  message: "保存失败",
                  type: "error",
                });
              }
              this.form = { gender: "男" };
            });
        } else {
          this.$message({
            message: "输入信息不合法！",
            type: "error",
          });
          return false;
        }
      });
      //console.log(this.form);
    },
    clear() {
      this.form = { id: this.form.id, gender: "男" };
    },
    listAll() {
      this.$http
        .get(
          "http://localhost:8989/user/listAll?pageNo=" +
            this.pageNo +
            "&pageSize=" +
            this.pageSize
        )
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.users;
          this.total = res.data.recordCount;
        });
    },
    findCurrentPage(page) {
      this.pageNo = page;
      this.listAll();
    },
    findPageSize(size) {
      this.pageSize = size;
      this.listAll();
    },
  },
  created() {
    this.listAll();
  },
};
</script>

实现后端接口

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
@RestController
@RequestMapping("/user")
@CrossOrigin // 解决跨域问题
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/listAll")
    public Map<String, Object> listAll(Integer pageNo, Integer pageSize) {
        HashMap<String, Object> map = new HashMap<>();
        pageNo=pageNo==null?1:pageNo;
        pageSize=pageSize==null?9:pageSize;
        List<UserPO> users = userService.listAll(pageNo, pageSize);
        Integer recordCount = userService.findTotal();
        Integer pageTotal = (recordCount - 1) / pageSize + 1;
        map.put("users", users);
        map.put("totalPage", pageTotal);
        map.put("recordCount", recordCount);
        return map;
    }

    @PostMapping("/save")
    public Result insert(@RequestBody UserPO userPO) {
        Result result = new Result();
        try {
            userService.insertOrUpdate(userPO);
            result.setStatus(true);
            result.setMsg("保存成功");
        } catch (Exception e) {
            result.setStatus(false);
            result.setMsg("保存失败");
            e.printStackTrace();
        }
        return result;
    }

    @GetMapping("/delete")
    public Result delete(Integer id) {
        Result result = new Result();
        try {
            userService.delete(id);
            result.setStatus(true);
            result.setMsg("删除成功");
        } catch (Exception e) {
            result.setStatus(false);
            result.setMsg("删除失败");
            e.printStackTrace();
        }
        return result;
    }
    
    @GetMapping("/select")
    public UserPO select(Integer id) {
        return userService.selectOne(id);
    }
}

效果