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
随机推荐
- 【刷题】HDU 5869 Different GCD Subarray Query
Problem Description This is a simple problem. The teacher gives Bob a list of problems about GCD (Gr ...
- 洛谷P4234 最小差值生成树(LCT,生成树)
洛谷题目传送门 和魔法森林有点像,都是动态维护最小生成树(可参考一下Blog的LCT总结相关部分) 至于从小到大还是从大到小当然无所谓啦,我是从小到大排序,每次枚举边,还没连通就连,已连通就替换环上最 ...
- 【UVA514】铁轨
题目大意:给定 N 个数,编号从 1 到 N,现需要判断,利用一个无限大的栈结构,能否实现到给定序列的转换. 题解:本题一共涉及三个部分的交互,分别是目标序列,栈和初始序列,由栈的顶端进入,顶端弹出性 ...
- linux中awk工具的使用(转载)
awk是一个非常好用的数据处理工具.相较于sed常常一整行处理,awk则比较倾向于一行当中分成数个“字段”处理,awk处理方式如下: $ awk '条件类型1{动作1} 条件类型2{动作2} ...' ...
- node.js 开发简易的小爬虫
node.js 开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...
- C语言复习---比赛问题
一:比赛问题 两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单. ...
- POJ 3252 Round Number(数位DP)
Round Numbers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6983 Accepted: 2384 Des ...
- bzoj千题计划279:bzoj4591: [Shoi2015]超能粒子炮·改
http://www.lydsy.com/JudgeOnline/problem.php?id=4591 最后的式子合并同类项 #include<cstdio> #include<i ...
- bzoj千题计划210:bzoj2642 | Poj3968 | UVALive 4992| hdu 3761 Jungle Outpost
http://www.lydsy.com/JudgeOnline/problem.php?id=2642 题意: n个瞭望台,形成一个凸n边形.这些瞭望台的保护范围是这个凸包内的任意点. 敌人进攻时, ...
- postman提取接口的返回值及动态设置变量(一)
一.提取接口返回值 1.当返回值是返回JSON时 let json = JSON.parse(responseBody); // responseBody是包含整个返回内容的字符串 let foo ...