Vue+Element UI

主要标签

• el-contaioner:构建整个页面框架

• el-aside:构建左侧菜单

• el-menu:左侧菜单内容，常用属性:
  :default-openeds:”[’1‘,‘3’]“默认展开的菜单，通过菜单的index值来关联;
  :default-active:默认选中的菜单，通过index来关联；

• el-submenu:可展开的菜单，常用属性：
  index:菜单的而下表，必须是文本类型，

• template:设置el-submenu的菜单名
  i标签：设置菜单图标，通过class属性实现；

• el-menu-item 子菜单，即展开之后的二级菜单

Vue router来动态构建左侧菜单----用于解决不同用户权限不同的问题

实现点击不同的页面，右侧内容跳转到不同的页面

• 导航一
  页面1
  页面2
• 导航二
  页面3
  页面4
  注意所有的页面都会被加载到App.vue中，然后在显示
  设计思路：
  

步骤1：分别创建index.vue和四个页面
步骤2：在index.js中配置四个页面对应的路由，

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Book from '@/components/Book'
import Index from '@/components/Index'
import List from '@/components/List'
import SubList from '@/components/SubList'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: '导航一',
      // redirect: '/list',当进去直接默认为到list页面下
      component: Index,
      children: [
        { path: '/list',
          name: '页面一',
          component: List
        },
        { path: '/subList',
          name: '页面二',
          component: SubList
        }
      ]
    },
    {
      path: '/',
      name: '导航二',
      component: Index,
      children: [
        { path: '/list',
          name: '页面三',
          component: List
        },
        { path: '/subList',
          name: '页面四',
          component: SubList
        }
      ]
    }
  ]
})

步骤3：在APP.vue中通过<router-view>来加入index.vue；

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

步骤4：Index.vue实现，并通过<router-view>在<el-main>中引入所对应的页面内容，

<template>
  <el-contioner style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :router="true" :default-openeds="['0', '1']">
        <el-submenu v-for="(item,index) in $router.options.routes" :key="index" :index="index+''">
          <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
          <el-menu-item :key="index2" v-for="(item2,index2) in item.children" :index="item2.path">{{item2.path}}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-contioner>
</template>

<script>
export default {
  name: 'Index.vue'
}
</script>

<style scoped>

</style>

注意的点：

1. 在<el-menu>标签中添加router属性，才是实现跳转的关键步骤，否则就算index指向路由了，也不会实现跳转
2. 在<el-main>中通过<router-view>标签引入要展示的子页面，这是一个容器，可以动态渲染我们想要的东西；
3. 实现<el-menu-item>与右侧内容联动，可通过index属性来实现，index指向要跳转的路径，
   
4. $router.options.routers表示index.js中的routes

前端后端实现分页展示

created（）表示页面加载之前实现的方法，
this.$axios.post('http://localhost:8081/insertBook', form).then(function (resp)表示将整个form表单传给后端

实现数据添加功能

后端设计：
前端设计：
AddBook.vue页面设计

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
    <el-form-item label="书名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="作者" prop="author">
      <el-input v-model="form.author"></el-input>
    </el-form-item>
    <el-form-item label="出版社" prop="publish">
      <el-input v-model="form.publish"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit(form)">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'AddBook',
  data () {
    return {
      form: {
        name: '',
        author: '',
        publish: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    onSubmit (form) {
      const _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
          this.$axios.post('http://localhost:8081/insertBook', form).then(function (resp) {
            console.log(resp)
            if (resp.data === 1) {
              // 设置路由跳转
              _this.$router.push('/List')
            } else {
              return false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

注意事项：

1. :model=“form” 表示该表名为form，通过v-model="form.name"实现属性绑定

 form: {
        name: '',
        author: '',
        publish: ''
      }

2. ref="form"表示校验绑定，其中所提交的form通过@click="onSubmit(form)提交给后端

  onSubmit (form) {
      const _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
          this.$axios.post('http://localhost:8081/insertBook', form).then(function (resp) {
            console.log(resp)
            if (resp.data === 1) {//resp.data为后端返给前端的数据
              // 设置路由跳转
              _this.$router.push('/List')
            } else {
              return false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }

3. :rules="rules"表示数据校验，通过rules来设计各属性的要求

rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }

4. 实现数据跳转

无参路由跳转
_this.$router.push('/List')
有参路由跳转
_this.$router.push({
path:'/update',
query:{
   id:row.id
})
接收参数
this.$route.query.id