spring boot + vue + element-ui

一、页面


1.布局

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

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

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

代码如下:

  1.  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: '会员信息管理'
  }]
})

  

完整代码如下:

  1.  src\router\index.js

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

  1. <el-menu :default-active="$route.path" :collapse="collapsed">
  2. <template v-for="(item,index) in menus">
  3. <el-submenu :index="index+''" v-if="!item.leaf">
  4. <template slot="title"><i :class="item.iconCls"></i><span v-if="!collapsed">{{item.name}}</span></template>
  5. <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>
  6. </el-submenu>
  7. <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>
  8. </template>
  9. </el-menu>

完整代码如下:

 src\pages\Main.vue

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

二、动态查询数据


1.mock.js

添加文件:src\mock\member.js

  1. import Mock from 'mockjs'
  2.  
  3. let adapters = []
  4. adapters.push(
  5. (mockAdapter) => mockAdapter.onPost('/api/member/loadPage').reply(req => {
  6. let promise = new Promise((resolve, reject) => {
  7. let data = req.data ? JSON.parse(req.data) : {
  8. size: 20
  9. }
  10. let result = {
  11. rows: [],
  12. total: 10000
  13. }
  14. for (let i = 0; i < data.size; i++) {
  15. let item = Mock.mock({
  16. id: Mock.Random.guid(),
  17. name: Mock.Random.cname(),
  18. sex: Mock.Random.integer(1, 2),
  19. 'age|18-30': 1,
  20. date: Mock.Random.date(),
  21. address: Mock.mock('@county(true)'),
  22. })
  23. result.rows.push(item)
  24. }
  25. setTimeout(() => {
  26. resolve([200, result])
  27. }, 2000)
  28. })
  29. return promise
  30. })
  31. )
  32.  
  33. export {
  34. adapters
  35. }

添加src\mock\index.js文件

  1. import axios from 'axios'
  2. import MockAdapter from 'axios-mock-adapter'
  3.  
  4. let mockAdapter = new MockAdapter(axios)
  5.  
  6. //会员api
  7. import {
  8. adapters as member
  9. } from '@/mock/member.js'
  10. member.forEach(item => item(mockAdapter))
  11.  
  12. export default mockAdapter

2.修改main.js文件

在main.js中导入mock.js

  1. //开发模式开启mock.js
  2. if (process.env.NODE_ENV === 'development') {
  3. require('./mock')
  4. }

导入axios

  1. import axios from 'axios'
  2. 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. 【bzoj1044】木棍分割

    Description 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍被分成了很多段,要求满足总长度最大的一段长 ...

  2. cf980E TheNumberGames (贪心+倍增)

    由于是$2^i$,所以一定要尽量留下来编号大的点 我们干脆就让n号点做树根,它是一定要留的 然后如果要留i的话,i一直到根的路径也都要留.所以只要判断一下够不够把这个路径上还没有留的都留下来 记录下已 ...

  3. 【bzoj2001】 Hnoi2010—City 城市建设

    http://www.lydsy.com/JudgeOnline/problem.php?id=2001 (题目链接) 题意 给出一张无向图,$m$组操作,每次修改一条边的权值,对于每次操作输出修改之 ...

  4. Linux上shell脚本date的用法

    在shell脚本里date命令的用法: %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星期名全称 (如:星期日) %b 当前local ...

  5. Gulp 笔记

    Gulp是一款自动化构建工具 用npm安装 npm install -g gulp npm install --save-dev gulp 分别在全局和项目目录里安装. 然后在项目目录里创建gulpf ...

  6. Linux 之 crontab 使用

    定时任务 任务调度的crond常驻命令crond 是linux用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crond命令每分锺会定期检查是否有要执行的工作,如果有要执行 ...

  7. P3932 浮游大陆的68号岛

    P3932 浮游大陆的68号岛 妖精仓库的储物点可以看做在一个数轴上.每一个储物点会有一些东西,同时他们之间存在距离. 每次他们会选出一个小妖精,然后剩下的人找到区间[l,r]储物点的所有东西,清点完 ...

  8. PDF截取矢量图

    PDF截取矢量图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 方法与步骤 下载并安装 Adobe Acrobat X Pro 软件 点击右侧按钮(工具)-页面-裁剪-单击并选择区域-双击实 ...

  9. Apache 与 Tomcat 整合

    目标 1.同一台机器上,不同的域名指向,访问不同的项目,即: (1)one.test.com 访问 project_one (2) two.test.com 访问 project_two   2.将T ...

  10. vue.js react.js angular.js三者比较

    react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...