Spring Boot+Vue前后端分离开发05-----Vue开发指南(续1)

Vue 开发指南(续1)

上一章节Spring Boot+Vue前后端分离开发04-----Vue开发指南已讲解到前三点内容,本章节补充了后面三点,综合起来知识点如下

  1. 路由配置
  2. 简单表格
  3. 读取接口数据
  4. 集成ElementUI
  5. 使用Container布局容器
  6. 使用Element菜单

4、集成ElementUI

点击右上角安装依赖

image.png-73.7kB

输入Element UI

image.png-78.8kB

接着运行,运行到这个步骤的时候说明element-ui组件已经安装成功

vue add element-ui #如果element-ui没有安装成功,那么在工程项目下面新增此命令
cnpm install --save element-ui

回到索引

5、使用Container布局容器

element-ui使用container容器布局,当要新建一个布局的时候,直接输入el-container的标签即可。除此之外还有:el-aside菜单栏el-header页头el-main页主体。通过上述几个标签开发一个标准的管理控制台布局,如下图:

image.png-38.4kB

views/目录下新建Container.vue

image.png-130.8kB

进入到element-ui官网https://element.eleme.cn/#/zh-CN/component/container复制如下代码到Container.vue

<el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>导航一</template>
                <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <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-menu-item-group title="分组2">
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="1-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="2-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="3-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="3-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </el-aside>

    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>王小虎</span>
        </el-header>

        <el-main>
            <el-table :data="tableData">
                <el-table-column prop="date" label="日期" width="140">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</el-container>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>

<script>
    export default {
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    };
</script>

随后在index.js上面添加一个路由

const routes = [

   ……

    //新增一个Container路由
    {
        path: '/container',
        name: 'Container',
        component: () => import('../views/Container.vue')
    }

]

最后访问http://localhost:8080/container即可看到Container布局的界面

image.png-109kB

回到索引

6、使用Element菜单

Elment菜单由el-menu定义,el-submenu表示这一层菜单栏之下还有一个子菜单,
el-menu-item-group表示一个菜单组合。

image.png-229.2kB

此外还有属性:default-openeds代表子菜单是否展开,index代表菜单顺序通常用1、2、3、4表示(子菜单会多一级1-1、1-2、1-3),具体代码如下

<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
	<el-menu :default-openeds="['1', '3']">
		<el-submenu index="1">
			<template slot="title"><i class="el-icon-message"></i>导航一</template>
			<el-menu-item-group>
				<template slot="title">分组一</template>
				<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-menu-item-group title="分组2">
				<el-menu-item index="1-3">选项3</el-menu-item>
			</el-menu-item-group>
			<el-submenu index="1-4">
				<template slot="title">选项4</template>
				<el-menu-item index="1-4-1">选项4-1</el-menu-item>
			</el-submenu>
		</el-submenu>
	</el-menu>
</el-aside>

接下来还有一种方法是通过Vue router开发动态菜单,即通过点击菜单实现页面切换,首先我们创建One.vueTwo.vueThree.vue

image.png-27.3kB

<template>
    <!--One.vue 页面一-->
    <!--Two.vue 页面二-->
    <!--Three.vue 页面三-->
    <div>页面一</div>
</template>

<script>
    export default {
        name: "One"
    }
</script>

<style scoped>

</style>

接着将它添加到index.js路由上去

import One from '../views/One.vue'
import Two from '../views/Two.vue'
import Three from '../views/Three.vue'

const routes = [

    ……
    
    {
        path: '/one',
        name: 'One',
        component: One
    },
    {
        path: '/two',
        name: 'Two',
        component: Two
    },
    {
        path: '/three',
        name: 'Three',
        component: Three
    }
    
]

修改项目根目录App.vue的代码,在el-main标签内增加这样一行

<router-view></router-view>

image.png-112.8kB

<template>
  <div>

    <!--整体页面容器-->
    <el-container style="height: 500px; border: 1px solid #eee">

      <!--左侧菜单栏-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>页面一</template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-setting"></i>页面二</template>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>页面三</template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!--主内容部分-->
      <el-container>

        <!--内容头部-->
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <!--具体内容-->
        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>

    </el-container>


  </div>
</template>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
    export default {
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    };
</script>

最后分别访问,可以看到以下效果
http://localhost:8080/one
http://localhost:8080/two
http://localhost:8080/three

回到索引


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值