spring boot + vue + element-ui

spring boot + vue + element-ui

一、页面

1.布局

假设，我们要开发一个会员列表的页面。

首先，添加vue页面文件“src\pages\Member.vue”

参照文档http://element.eleme.io/#/zh-CN/component/table中的例子,实现一个静态的列表页面

代码如下：

Member.vue

2.修改路由

src\router\index.js文件中，添加

　　

完整代码如下：

src\router\index.js

3.修改首页，使其出现“会员管理”的菜单

src\pages\Main.vue

点击左侧的“会员信息管理”的菜单，运行效果如下：

src\main.js

3.修改Member.vue文件

修改查询分页的方法：

　　

完整的Member.vue代码如下：

src\pages\Member.vue

完整的项目结构如下图所示：



运行效果如下：



其中，使用了axios来调用http post协议,url是'/api/member/loadPage'，并post了body参数。

但我并没有写任何后端代码。奇怪的是，获取的数据从哪里来？答案是：mock.js，因为使用了mock.js+axios-mock-adapter来拦截并模拟http协议。

返回目录

git代码地址：https://github.com/carter659/spring-boot-vue-element.git