spring boot + vue + element-ui全栈开发入门——前端列表页面开发

Posted 2020-10-24 刘冬的博客

 一、页面

---

 

1.布局

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

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

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

代码如下：

 

<template>
<section>
  <!--工具条-->
  <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
    <el-form :inline="true" :model="filters">
      <el-form-item>
        <el-input v-model="filters.query" placeholder="姓名/手机号等条件" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="getRows" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="handleAdd" icon="el-icon-plus">添加</el-button>
      </el-form-item>
    </el-form>
  </el-col>
  <el-table :data="rows" style="width: 100%" stripe border>
    <el-table-column label="注册日期" width="180">
      <template slot-scope="scope">
       <i class="el-icon-time"></i>
       <span style="margin-left: 10px">{{ scope.row.date }}</span>
     </template>
    </el-table-column>
    <el-table-column label="姓名" width="180" :show-overflow-tooltip="true">
      <template slot-scope="scope">
       <el-popover trigger="hover" placement="top">
         <p>姓名: {{ scope.row.name }}</p>
         <p>住址: {{ scope.row.address }}</p>
         <div slot="reference" class="name-wrapper">
           <el-tag size="medium">{{ scope.row.name }}</el-tag>
         </div>
       </el-popover>
     </template>
    </el-table-column>
    <el-table-column prop="sex" label="性别" width="100" align="center" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        {{scope.row.sex===1?\'男\':\'女\'}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
       <el-button
         size="mini"
         type="primary"
         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
       <el-button
         size="mini"
         type="danger"
         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
     </template>
    </el-table-column>
  </el-table>
</section>
</template>

<script>
let data = () => {
  return {
    filters: {},
    rows: []
  }
}

let handleAdd = function() {

}

let handleEdit = function(index, row) {
  console.log(index, row);
}

let handleDelete = function(index, row) {
  console.log(index, row);
}

let getRows = function() {
  this.rows = []
  this.rows.push({
    date: \'2018-05-02\',
    name: \'王小虎1\',
    sex: 1,
    address: \'上海市普陀区金沙江路 1518 弄\'
  })
  this.rows.push({
    date: \'2018-05-04\',
    name: \'王小虎2\',
    sex: 2,
    address: \'上海市普陀区金沙江路 1517 弄\'
  })
  this.rows.push({
    date: \'2018-05-01\',
    name: \'王小虎3\',
    sex: 2,
    address: \'上海市普陀区金沙江路 1519 弄\'
  })
  this.rows.push({
    date: \'2018-05-03\',
    name: \'王小虎5\',
    sex: 1,
    address: \'上海市普陀区金沙江路 1516 弄\'
  })
}

export default {
  data: data,
  methods: {
    //添加
    handleAdd,
    //修改
    handleEdit,
    //删除
    handleDelete,
    //获取分页
    getRows
  },
  mounted: function() {
    this.getRows()
  }
}
</script>

<style scoped>
</style>

Member.vue

 

2.修改路由

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

routes.push({
  path: \'/member\',
  name: \'会员管理\',
  component: Main,
  iconCls: \'fa fa-user-circle-o\',
  children: [{
    path: \'/member/data\',
    component: Member,
    name: \'会员信息管理\'
  }]
})

　　

完整代码如下：

import Vue from \'vue\'
import Router from \'vue-router\'

Vue.use(Router)

import Main from \'@/pages/Main\'
import Dashboard from \'@/pages/Dashboard\'
import Member from \'@/pages/Member\'

let routes = [{
  path: \'/\',
  component: Main,
  hidden: true,
  children: [{
    path: \'/\',
    component: Dashboard,
    name: \'首页\'
  }]
}]

routes.push({
  path: \'/member\',
  name: \'会员管理\',
  component: Main,
  iconCls: \'fa fa-user-circle-o\',
  children: [{
    path: \'/member/data\',
    component: Member,
    name: \'会员信息管理\'
  }]
})

const router = new Router({
  routes: routes
})

export default router

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>

完整代码如下：

<template>
<section>
  <el-container class="container">
    <!--左边-->
    <el-aside :width="collapsed? \'65px\' : \'200px\' ">
      <el-container>
        <el-header>
          <span class="menu-button" v-if="collapsed" @click.prevent="collapsed=!collapsed">
            <i class="fa fa-align-justify"></i>
          </span>
          <span v-else class="system-name">{{systemName}}</span>
        </el-header>
        <el-main>
          <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>
        </el-main>
      </el-container>
    </el-aside>
    <!--内容-->
    <el-container>
      <!--页眉-->
      <el-header class="header">
        <el-row>
          <el-col :span="18" class="header-title">
            <span v-if="collapsed" class="system-name">{{systemName}}</span>
            <span v-else class="menu-button" @click.prevent="collapsed=!collapsed">
              <i class="fa fa-align-justify"></i>
            </span>
          </el-col>
          <el-col :span="6"><span class="el-dropdown-link userinfo-inner">你好：{{userName}}</span></el-col>
        </el-row>
      </el-header>
      <!--中间-->
      <el-main class="main">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</section>
</template>

<script>
let data = () => {
  return {
    collapsed: false,
    systemName: \'后台管理\',
    userName: \'系统管理员\',
    menus: []
  }
}

let initMenu = function() {
  for (let i in this.$router.options.routes) {
    let root = this.$router.options.routes[i]
    if (root.hidden)
      continue
    let children = []
    for (let j in root.children) {
      let item = root.children[j]
      if (item.hidden)
        continue
      children.push(item)
    }

    if (children.length < 1)
      continue

    this.menus.push(root)
    root.children = children
  }
}

export default {
  data: data,
  methods: {
    initMenu
  },
  mounted: function() {
    this.initMenu()
  }
}
</script>

<style scoped="scoped"
  lang="scss">
$width: 100%;
$height: 100%;
$background-color: #0b0a3e;
$header-color: #fff;
$header-height: 60px;

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    .el-aside {
        .el-header {
            line-height: $header-height;
            background-color: $background-color;
            color: $header-color;
            text-align: center;
        }
        .el-container {
            height: $height;
            .el-main {
                padding: 0;
            }
        }
    }

    .main {
        width: $width;
        height: $height;
    }

    .menu-button {
        width: 14px;
        cursor: pointer;
    }

    .userinfo-inner {
        cursor: pointer;
    }

    .el-menu {
        height: $height;
    }

    .header {
        background-color: $background-color;
        color: $header-color;
        text-align: center;
        line-height: $header-height;
        padding: 0;

        .header-title {
            text-align: left;以上是关于spring boot + vue + element-ui全栈开发入门——前端列表页面开发的主要内容，如果未能解决你的问题，请参考以下文章
 
 Vue + Spring Boot 项目实战笔记
 spring boot + vue + element-ui全栈开发入门——spring boot后端开发
 Spring Boot + Vue  跨域请求问题
 基于Spring Boot+vue的宿舍管理系统
 使用Vue完成前后端分离开发[Spring Boot, Vue, Flask, Django]
 Spring Boot+Vue 前后端分离项目架构