java基础面试题(springboot项目案例)

　　　　一.页面　　

　　

　　　　1.布局　　

　　

　　　　假设我们想开发一个成员列表页面。　　

　　

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

　　

　　　　参考文档http://element.eleme.io/#/zh-CN/component/table中的示例来实现静态列表页面　　

　　

　　　　代码如下：　　

　　

　　　　2.修改路线　　

　　

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

　　

　　　　完整的代码如下：　　

　　

　　　　3.修改主页，使菜单“成员管理"出现　　

　　

　　　　完整的代码如下：　　

　　

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

　　

　　　　　　

　　

　　　　二、动态查询数据　　

　　

　　　　1.mock.js　　

　　

　　　　添加文件：src \ mock \ member.js。　　

　　

　　　　添加src\mock\index.js文件　　

　　

　　　　2.修改main.js文件　　

　　

　　　　在main.js中导入mock.js　　

　　

　　　　导入axios　　

　　

　　　　完整的main.js代码：　　

　　

　　　　3.修改成员文件　　

　　

　　　　修改查询分页的方法：　　

　　

　　　　完整的会员代码如下：　　

　　

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

　　

　　　　　　

　　

　　　　按照以下步骤运行效果：　　

　　

　　　　　　

　　

　　　　Axios用于调用http post协议，url为'/api/member/loadPage '，body参数为post。　　

　　

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

　　

　　　　回到目录　　

　　

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

　　

　　　　　　

　　

　　　　如果你觉得我的博客对你有帮助，可以给我一些奖励，比如左边的微信，右边的宝。　　

　　

　　　　有可能你的小奖励会让我的博客变得更好(:)　　

xxxxbxxx