vue学习总结八(做后台管理系统5-2)

一.导航守卫的使用,实现登录判断

1.首先,去main.vue里面把判断token的beforeCreate生命周期函数去掉,因为我们要在router.js路由里用导航守卫去代替:

二.主页开始

1.布局:使用element-ui

2.逻辑开始

3.面包屑的使用

我们如何在main.vue里访问myBreadcrumd.vue的内容呢?总共分为如下4步:
1.准备一个myBreadcrumd.vue页面

<template>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script>
</script>
<style>
</style>

2.在main.js里,导入这个模块:

import myBreadcrumd from './components/myBreadcrumd.vue';

3.在main.js的里注册组件:

Vue.component('myBreadcrumd',myBreadcrumd)
}

4.在main.vue的结构里引用:

5.上述是可以完成渲染,但是面包屑里的内容不能写死,解决方法:通过 Prop 向子组件传递数据
在myBreadcrumd.vue(子页面)里修改如下:让level属性暴露出来

在main.vue(父页面)中传递数据:

参考资料:

四.实现user.vue页面

1.我们是用路由来管理页面的,所以回到路由router.js页面:

2.准备一个user.vue页面

<template>
    <myBreadcrumd level2="二级" level3="三级"></myBreadcrumd>

</template>

<script>
export default {


}
</script>
<style lang="scss">
</style>

3.同时在main.vue里:删除面包屑,添加router-view

这样点击用户列表后它会自动跳转到user.vue里的内容显示

4.user.vue结构布局,布局是element-ui里的内容:

<template>
    <div class="user-container">
        <!-- 顶部面包屑 -->
        <el-row class="bread">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <myBreadcrumd :level2="level2" :level3="level3"></myBreadcrumd>
                </div>
            </el-col>
        </el-row>
        <!-- 搜索框 -->
        <el-row class="my-search">
            <el-col :span="8" class="my-search">
                <div class="grid-content bg-purple">
                    <el-input placeholder="请输入内容" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </el-col>
            <el-col :span="16" class="my-search">
                <div class="grid-content bg-purple my-btn">
                    <el-button type="primary" class="">添加用户</el-button>
                </div>
            </el-col>
        </el-row>

        <!-- 用户数据 -->
        <el-row>
            <el-col :span="24">
                <el-table :data="userList" style="width: 100%" border>
                    <el-table-column label="#" width="30" type="index"></el-table-column>
                    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="email" label="邮箱" width="300"></el-table-column>
                    <el-table-column prop="mobile" label="电话" width="300"></el-table-column>
                    <el-table-column prop="mg_state" label="用户状态" width="80">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" icon="el-icon-edit"></el-button>
                            <el-button type="danger" plain size="mini" icon="el-icon-delete"></el-button>
                            <el-button type="warning" plain size="mini" icon="el-icon-check"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 底部的分页 -->
        <el-row>
            <el-col :span="24">
                <el-pagination :current-page="pageData.pagenum" :page-sizes="[2, 4, 6, 8,10]" :page-size="pageData.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </el-col>
        </el-row>
    </div>

</template>

5.逻辑交互:

<script>
export default {
  // 顶部面包屑
  data() {
    return {
      level2: '用户管理',
      level3: '用户列表',
      pageData: {
        //默认接口要给的参数
        query: '', //查询参数
        pagenum: 1, //当前页码
        pagesize: 10 //每页显示条数
      },
      //总页数
      total: 0,
      //用户的数据
      userList: []
    }
  },
  // 创建声明周期函数,在创建实例之后
  created() {
    // 发axios请求
    this.$axios
      .get('/users', {
        //   记得参数写法是params
        params: this.pageData
      })
      .then(response => {
        // console.log(response)
        this.userList = response.data.data.users
        this.total = response.data.data.total
        console.log(this.userList)
        console.log(this.total)
      })
      .catch(function(error) {
        console.log(error)
      })
  }
}
</script>

附源码链接:https://github.com/huanggengzhong/manager26