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>

完整代码如下:

 src\pages\Main.vue

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

二、动态查询数据


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代码:

 src\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代码如下:

 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

spring boot + vue + element-ui的更多相关文章

  1. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  2. 自搭的一个系统框架,使用Spring boot+Vue+Element

    基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性:    ~ 数据库访问使用spring data jpa+alibaba druid    ~ 前后端数据交互使用 ...

  3. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  4. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  5. 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?

    前两天又有小伙伴私信松哥,问题还是职业规划,Java 技术栈路线这种,实际上对于这一类问题我经常不太敢回答,每个人的情况都不太一样,而小伙伴也很少详细介绍自己的情况,大都是一两句话就把问题抛出来了,啥 ...

  6. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  7. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  8. 一个实际的案例介绍Spring Boot + Vue 前后端分离

    介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...

  9. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

随机推荐

  1. 【刷题】HDU 5869 Different GCD Subarray Query

    Problem Description This is a simple problem. The teacher gives Bob a list of problems about GCD (Gr ...

  2. 洛谷P4234 最小差值生成树(LCT,生成树)

    洛谷题目传送门 和魔法森林有点像,都是动态维护最小生成树(可参考一下Blog的LCT总结相关部分) 至于从小到大还是从大到小当然无所谓啦,我是从小到大排序,每次枚举边,还没连通就连,已连通就替换环上最 ...

  3. 【UVA514】铁轨

    题目大意:给定 N 个数,编号从 1 到 N,现需要判断,利用一个无限大的栈结构,能否实现到给定序列的转换. 题解:本题一共涉及三个部分的交互,分别是目标序列,栈和初始序列,由栈的顶端进入,顶端弹出性 ...

  4. linux中awk工具的使用(转载)

    awk是一个非常好用的数据处理工具.相较于sed常常一整行处理,awk则比较倾向于一行当中分成数个“字段”处理,awk处理方式如下: $ awk '条件类型1{动作1} 条件类型2{动作2} ...' ...

  5. node.js 开发简易的小爬虫

    node.js  开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...

  6. C语言复习---比赛问题

    一:比赛问题 两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单. ...

  7. POJ 3252 Round Number(数位DP)

    Round Numbers Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6983   Accepted: 2384 Des ...

  8. bzoj千题计划279:bzoj4591: [Shoi2015]超能粒子炮·改

    http://www.lydsy.com/JudgeOnline/problem.php?id=4591 最后的式子合并同类项 #include<cstdio> #include<i ...

  9. bzoj千题计划210:bzoj2642 | Poj3968 | UVALive 4992| hdu 3761 Jungle Outpost

    http://www.lydsy.com/JudgeOnline/problem.php?id=2642 题意: n个瞭望台,形成一个凸n边形.这些瞭望台的保护范围是这个凸包内的任意点. 敌人进攻时, ...

  10. postman提取接口的返回值及动态设置变量(一)

    一.提取接口返回值   1.当返回值是返回JSON时 let json = JSON.parse(responseBody); // responseBody是包含整个返回内容的字符串 let foo ...