spring boot + vue + element-ui全棧開發入門——主頁面開發

冬子哥發表於2018-02-09
Spring BootVueUI全棧

目的

 

開發一個後臺管理的前端，頂部是標題，左側是選單導航欄，中間是要顯示的內容。而內容可以是各種圖表，也可以是資料列表。

 

一、準備工作

 

1..修改App.vue檔案

程式碼如下：

<template>
<div id="app">
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</div>
</template>

<script>
export default {
  name: 'app',
  components: {}
}
</script>

<style lang="scss">
body {
    margin: 0;
    padding: 0;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

#app {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.el-submenu [class^=fa] {
    vertical-align: baseline;
    margin-right: 10px;
}

.el-menu-item [class^=fa] {
    vertical-align: baseline;
    margin-right: 10px;
}

.toolbar {
    background: #f2f2f2;
    padding: 10px;
    margin: 10px 0;
    .el-form-item {
        margin-bottom: 10px;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.2s ease;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}
</style>

　　

 2.在src目錄下新建pages資料夾，並新增兩個空vue檔案：“Main.vue”和“Dashboard.vue”，

Main.vue：是主頁面

Dashboard.vue：是為了以後顯示首頁內容的儀表盤

檔案內容如下：

<template>
<section>

</section>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

　　

 

3.修改路由

修改src\router\index.js檔案

內容如下：

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

Vue.use(Router)

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

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

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

export default router

　　

這時，重新整理頁面。則頁面變成白色，而且沒有任何內容

 

 

二、首頁佈局

 

vue檔案的程式碼結構如下：

佈局程式碼：<template>...</template>中，語法使用html語法

指令碼程式碼：<script>...</script>中，使用javascript語法

樣式程式碼：<style>...</style>中

我們需要實現如下佈局：

 

 

參考element-ui文件，佈局容器元件：http://element.eleme.io/#/zh-CN/component/container

 

Main.vue的完整程式碼如下：

<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 :collapse="collapsed">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>選單一</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">選項1</el-menu-item>
                <el-menu-item index="1-2">選項2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </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: '系統管理員'
  }
}

export default {
  data: data,
  methods: {

  },
  mounted: function() {

  }
}
</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;
            span {
                padding: 0 20px;
            }
        }
    }

    .system-name {
        font-size: large;
        font-weight: bold;
    }
}
</style>

 

在script中，使用了vue的語法結構。

其中，data是vue例項繫結的物件；

methods是可以呼叫的方法；

mounted是頁面繫結完畢後執行的方法。

 

重新整理頁面，效果如下：

 

 

點選選單展開與收縮的效果：

 

 

 

 

 

 

 

 

返回目錄

 

git程式碼地址：https://github.com/carter659/spring-boot-vue-element.git

 

如果你覺得我的部落格對你有幫助，可以給我點兒打賞，左側微信，右側支付寶。

有可能就是你的一點打賞會讓我的部落格寫的更好:)

相關文章