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文件中,添加
1
2
3
4
5
6
7
8
9
10
11
|
routes.push({ path: '/member' , name: '会员管理' , component: Main, iconCls: 'fa fa-user-circle-o' , children: [{ path: '/member/data' , component: Member, name: '会员信息管理' }] }) |
完整代码如下:
- src\router\index.js
3.修改首页,使其出现“会员管理”的菜单

- <el-menu :default-active="$route.path" :collapse="collapsed">
- <template v-for="(item,index) in menus">
- <el-submenu :index="index+''" v-if="!item.leaf">
- <template slot="title"><i :class="item.iconCls"></i><span v-if="!collapsed">{{item.name}}</span></template>
- <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" @click="$router.push(child.path)">{{child.name}}</el-menu-item>
- </el-submenu>
- <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
- </template>
- </el-menu>

完整代码如下:
点击左侧的“会员信息管理”的菜单,运行效果如下:
二、动态查询数据
1.mock.js
添加文件:src\mock\member.js

- import Mock from 'mockjs'
- let adapters = []
- adapters.push(
- (mockAdapter) => mockAdapter.onPost('/api/member/loadPage').reply(req => {
- let promise = new Promise((resolve, reject) => {
- let data = req.data ? JSON.parse(req.data) : {
- size: 20
- }
- let result = {
- rows: [],
- total: 10000
- }
- for (let i = 0; i < data.size; i++) {
- let item = Mock.mock({
- id: Mock.Random.guid(),
- name: Mock.Random.cname(),
- sex: Mock.Random.integer(1, 2),
- 'age|18-30': 1,
- date: Mock.Random.date(),
- address: Mock.mock('@county(true)'),
- })
- result.rows.push(item)
- }
- setTimeout(() => {
- resolve([200, result])
- }, 2000)
- })
- return promise
- })
- )
- export {
- adapters
- }

添加src\mock\index.js文件

- import axios from 'axios'
- import MockAdapter from 'axios-mock-adapter'
- let mockAdapter = new MockAdapter(axios)
- //会员api
- import {
- adapters as member
- } from '@/mock/member.js'
- member.forEach(item => item(mockAdapter))
- export default mockAdapter

2.修改main.js文件
在main.js中导入mock.js
- //开发模式开启mock.js
- if (process.env.NODE_ENV === 'development') {
- require('./mock')
- }
导入axios
- import axios from 'axios'
- Vue.prototype.$axios = axios
完整main.js代码:
3.修改Member.vue文件
修改查询分页的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
let getRows = function () { if ( this .pageLoading) return this .pageLoading = true let params = { page: this .page, size: this .size, query: this .filters.query } //调用post请求 this .$axios.post( '/api/member/loadPage' , params).then(res => { this .pageLoading = false if (!res.data || !res.data.rows) return //总数赋值 this .total = res.data.total this .page++; //页面元素赋值 this .rows = res.data.rows }). catch (e => this .pageLoading = false ) } |
完整的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
spring boot + vue + element-ui的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- 自搭的一个系统框架,使用Spring boot+Vue+Element
基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性: ~ 数据库访问使用spring data jpa+alibaba druid ~ 前后端数据交互使用 ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?
前两天又有小伙伴私信松哥,问题还是职业规划,Java 技术栈路线这种,实际上对于这一类问题我经常不太敢回答,每个人的情况都不太一样,而小伙伴也很少详细介绍自己的情况,大都是一两句话就把问题抛出来了,啥 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
随机推荐
- 【bzoj1044】木棍分割
Description 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍被分成了很多段,要求满足总长度最大的一段长 ...
- cf980E TheNumberGames (贪心+倍增)
由于是$2^i$,所以一定要尽量留下来编号大的点 我们干脆就让n号点做树根,它是一定要留的 然后如果要留i的话,i一直到根的路径也都要留.所以只要判断一下够不够把这个路径上还没有留的都留下来 记录下已 ...
- 【bzoj2001】 Hnoi2010—City 城市建设
http://www.lydsy.com/JudgeOnline/problem.php?id=2001 (题目链接) 题意 给出一张无向图,$m$组操作,每次修改一条边的权值,对于每次操作输出修改之 ...
- Linux上shell脚本date的用法
在shell脚本里date命令的用法: %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星期名全称 (如:星期日) %b 当前local ...
- Gulp 笔记
Gulp是一款自动化构建工具 用npm安装 npm install -g gulp npm install --save-dev gulp 分别在全局和项目目录里安装. 然后在项目目录里创建gulpf ...
- Linux 之 crontab 使用
定时任务 任务调度的crond常驻命令crond 是linux用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crond命令每分锺会定期检查是否有要执行的工作,如果有要执行 ...
- P3932 浮游大陆的68号岛
P3932 浮游大陆的68号岛 妖精仓库的储物点可以看做在一个数轴上.每一个储物点会有一些东西,同时他们之间存在距离. 每次他们会选出一个小妖精,然后剩下的人找到区间[l,r]储物点的所有东西,清点完 ...
- PDF截取矢量图
PDF截取矢量图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 方法与步骤 下载并安装 Adobe Acrobat X Pro 软件 点击右侧按钮(工具)-页面-裁剪-单击并选择区域-双击实 ...
- Apache 与 Tomcat 整合
目标 1.同一台机器上,不同的域名指向,访问不同的项目,即: (1)one.test.com 访问 project_one (2) two.test.com 访问 project_two 2.将T ...
- vue.js react.js angular.js三者比较
react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...