vue学习总结九(做后台管理系统5-3,未完继续)

最新推荐文章于 2024-06-21 15:52:58 发布

庚中

最新推荐文章于 2024-06-21 15:52:58 发布

阅读量237

点赞数 1

分类专栏：十二.vue 文章标签： vue学习总结八(做后台项目3)

本文链接：https://blog.csdn.net/xiaodi520520/article/details/86518313

版权

十二.vue 专栏收录该内容

60 篇文章 6 订阅

订阅专栏

ps:
component与components用法?

一.开始角色管理页面

1.新建一个roles.vue组件;

2.在路由里面写对应关系;

3.把user.vue页面的页面复制一份进行修改即可;

二.promise的用法

三.使用async和await让代码同步执行

1.使用方法:
在这里插入图片描述

四.roles.vue页面

代码如下:

<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-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-col :span="24">
                <!-- :data是表格数据 -->
                <el-table :data="rolesList" style="width: 100%" border>
                    <!-- 这里添加展开数据,使用的是element-ui里的展开行 -->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <!-- 大的一行:for循环遍历1;props.row:官网表格数据的对象-->
                            <el-row v-for="(item, index) in props.row.children" :key="item.id">
                                <!-- 一级菜单 -->
                                <el-col :span="4">
                                    <!-- 使用标签:<el-tag closable>默认标签</el-tag> -->
                                    <el-tag closable>{{item.authName}}</el-tag>
                                    <!-- 图标 -->
                                    <i class="el-icon-arrow-right"></i>
                                </el-col>
                                <el-col :span="20">
                                    <!-- for循环遍历2 -->
                                    <el-row v-for="(level2, index) in item.children" :key="level2.id">
                                        <!--二级菜单 -->
                                        <el-col :span="4">
                                            <!-- 使用标签:<el-tag closable>默认标签</el-tag> -->
                                            <el-tag closable type="success">{{level2.authName}}</el-tag>
                                            <i class="el-icon-arrow-right"></i>

                                        </el-col>
                                        <!-- 三级菜单 -->
                                        <el-col :span="20">
                                            <!-- for循环遍历3 -->
                                            <el-tag v-for="(level3, index) in level2.children" :key="level3.id" closable type="danger">{{level3.authName}}</el-tag>

                                        </el-col>
                                    </el-row>
                                </el-col>

                            </el-row>
                        </template>
                    </el-table-column>
                    <!-- 这里添加展开数据 -->
                    <el-table-column label="#" width="30" type="index"></el-table-column>
                    <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
                    <el-table-column prop="roleDesc" label="角色描述" width="300"></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>

    </div>

</template>

<script>
export default {
  // 顶部面包屑
  data() {
    return {
      level2: '用户管理',
      level3: '用户列表',

      rolesList: []
    }
  },
  // 创建声明周期函数,在创建实例之后
  async created() {
    //async是同步的意思,里面所有的代码会依次执行
    // 发axios请求
    let res = await this.$axios.get('/roles') //加了await会实现这个先执行完后才执行新的代码
    console.log(res)
    this.rolesList = res.data.data
    console.log(this.rolesList)
  }
}
</script>
<style lang="scss" scoped>
/* 加scoped后只在本页生效 */
.el-tag {
  margin-right: 5px;
}
.el-row {
  margin-bottom: 15px;
}
</style>

五.user.vue

代码如下:

<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>
            <el-col :span="24">
                <el-table :data="rightsList" style="width: 100%" border>
                    <el-table-column label="#" width="40" type="index"></el-table-column>
                    <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
                    <el-table-column prop="path" label="路径" width="300"></el-table-column>
                    <el-table-column prop="level" label="层级" width="300">
                        <template slot-scope="scope">
                            <span v-if="scope.row.level=='0'">一级</span>
                            <span v-if="scope.row.level=='1'">二级</span>
                            <span v-if="scope.row.level=='2'">三级</span>
                        </template>
                    </el-table-column>
                
                </el-table>
            </el-col>
        </el-row>
  
    </div>

</template>

<script>
export default {
  // 顶部面包屑
  data() {
    return {
      level2: '用户管理',
      level3: '用户列表',
    
      //用户的数据
      rightsList: []
    }
  },
  // 创建声明周期函数,在创建实例之后
 async created() {
    // 发axios请求
   let res=await this.$axios
      .get('rights/list')
      .then(res => {
          console.log(res);
          this.rightsList=res.data.data;
          
      })
      .catch(function(error) {
        console.log(error)
      })
  }
}
</script>
<style lang="scss" scoped>


</style>

六.时间戳插件的使用(使用全局)

1.先安装moment.js

cnpm install moment --save

2.写结构

                        <template slot-scope="scope">
                            <!-- 使用过滤器:将时间戳转回来 -->
                          {{scope.row.add_time | capitalize }}
                        </template>
                    </el-table-column>

2.全局中导入

//全局里使用过滤器,过滤时间
//先导入
// var moment = require('moment');
import moment from 'moment';
//过滤
Vue.filter('capitalize',(value)=>{
  console.log(value);//得到goods传过来的值
  return moment(value).format('YYYY-MM-DD  hh:mm:ss')
  
})

goods完整代码:

<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="goodsList" style="width: 100%" border>
                    <el-table-column label="#" width="40" type="index"></el-table-column>
                    <el-table-column prop="goods_name" label="商品名称" width="700"></el-table-column>
                    <el-table-column prop="goods_price" label="商品价格" width="150"></el-table-column>
                    <el-table-column prop="goods_weight" label="商品重量" width="150"></el-table-column>
                    <el-table-column prop="add_time" label="创建时间" width="200">
                        <template slot-scope="scope">
                            <!-- 使用过滤器:将时间戳转回来 -->
                          {{scope.row.add_time | capitalize }}
                        </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>
                        </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" 
                @size-change="sizeChange"
                @current-change="currentChange" 
                :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>

</template>

<script>
export default {
  // 顶部面包屑
  data() {
    return {
      level2: '商品管理',
      level3: '商品列表',
      pageData: {
        //默认接口要给的参数
        query: '', //查询参数
        pagenum: 1, //当前页码
        pagesize: 8, //每页显示条数
      

      },
      //总页数
      total: 0,
      //用户的数据
      goodsList: []
    }
  },
    //事件
    methods: {
        // 封装发生请求的函数
       async getGoods(){
            // 发axios请求
                let response= await this.$axios.get('/goods', {
            //   记得参数写法是params
            params: this.pageData
                })
        this.goodsList = response.data.data.goods;
        this.total = response.data.data.total
        // console.log(this.userList)
        // console.log(this.total)

  },
       


    // 页码改变,即当前查询的是哪页
    currentChange(val1){
        // console.log(val);
        this.pageData.pagenum=val1;
        //重新渲染
        this.getGoods();
        
    },
        //页容量改变(左边的数据即一页显示多少条)
    sizeChange(val2){
        console.log(val2);
        this.pageData.pagesize=val2;
        //重新渲染
        this.getGoods();
        
        },

    },




    // 创建声明周期函数,在创建实例之后
 async created() {
//     // 发axios请求
//   let response= await this.$axios.get('/goods', {
//         //   记得参数写法是params
//         params: this.pageData
//       });
//     console.log(response);
    
//         this.goodsList = response.data.data.goods;
//         this.total = response.data.data.total
//         // console.log(this.userList)
//         // console.log(this.total)

// 上面已经封装,直接调用即可
        this.getGoods();
  }
}
</script>
<style lang="scss" scoped>
</style>

庚中

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习总结九(做后台管理系统5-3,未完继续)

ps:component与components用法?一.开始角色管理页面1.新建一个roles.vue组件;2.在路由里面写对应关系;3.把user.vue页面的页面复制一份进行修改即可;二.promise的用法三.使用async和await让代码同步执行1.使用方法:四.roles.vue逻辑1.渲染页面逻辑代码:&amp;amp;lt;script&amp;amp;gt;export default...
复制链接

扫一扫

专栏目录