前端路线--Vue(day25)

笔记

对应的用户登录显示对应的Tab页

//结构
      <!-- Tab标签页 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="tabsData in tabs"
          :key="tabsData.id"
          :label="tabsData.title"
          :name="tabsData.level"
        ></el-tab-pane>
      </el-tabs>
//data:
      // Tab标签页的数据
      activeName: "0",
      tabsDatas: [
        { id: 1, title: "所有用户", level: 0 },
        { id: 2, title: "管理员", level: 1 },
        { id: 3, title: "老师", level: 2 },
        { id: 4, title: "学生", level: 3 },
      ],
      tabs: [], //用于存放过滤后的Tab页的数据

//mounted:
    // 过滤Tab栏
    if (this.level == 0) {
      this.tabs = this.tabsDatas;
    } else {
      this.tabs = this.tabsDatas.filter((item) => {
        return item.level == this.level;
      });
    }

分类列表的开发

//前端:
category页面

<!--  -->
<template>
  <div class="category_list">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="margin: 0px 0px 20px"
      >
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户信息</a></el-breadcrumb-item>
        <el-breadcrumb-item>分类列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--树形懒加载的表格  -->
      <el-table
        :data="categoryListDatas.data"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="pic" label="用户头像" width="180">
          <template slot-scope="scope">
            <img
              :src="'http://localhost:3000/' + scope.row.pic"
              alt=""
              style="width: 60px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="分类名称"> </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" style="margin: 20px auto">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="categoryListDatas.count"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { CategoryListTwoApi } from "@/api/product.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 分页的数据
      page: 1,
      size: 5,
      currentPage1: 1,
      // 树形懒加载表格的数据
      // tableData1: [
      //   {
      //     id: 1,
      //     date: "2016-05-02",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     id: 2,
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1517 弄",
      //   },
      //   {
      //     id: 3,
      //     date: "2016-05-01",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1519 弄",
      //     hasChildren: true,
      //   },
      //   {
      //     id: 4,
      //     date: "2016-05-03",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1516 弄",
      //   },
      // ],
    };
  },
  //计算属性 类似于data概念
  computed: {
    // 树形懒加载表格的数据
    categoryListDatas() {
      return this.$store.state.products.categoryListDatas;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 树形懒加载表格的方法
    async load(tree, treeNode, resolve) {
      // tree.id对应数据库中的产品分类id
      console.log(tree.id, treeNode);
      // 在此可以进行二级分类的axios异步请求
      let subProducts = [];
      let result = await CategoryListTwoApi(tree.id);
      console.log(result.data.data);
      subProducts = result.data.data;
      setTimeout(() => {
        resolve(subProducts);
      }, 200);
    },
    //表格的操作的方法
    handleClick(row) {
      console.log(row);
    },
    // 分页的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // 将页数等于第一页
      this.page = 1;
      this.size = val;
      // 提交派遣分页数据给store的user.js
      this.$store.dispatch("actChangeCategoryListDatas", {
        page: this.page,
        size: this.size,
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //将页数等于当前页
      this.page = val;
      // 提交派遣分页数据给store的user.js
      this.$store.dispatch("actChangeCategoryListDatas", {
        page: this.page,
        size: this.size,
      });
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$store.dispatch("actChangeCategoryListDatas", {
      page: this.page,
      size: this.size,
    });
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>

后台:
router–admin.js

// 产品分类列表的路由
//http://localhost:3000/api/categorylist
router.get("/categorylist", CategoryList);
//http://localhost:3000/api/categorylisttwo
router.get("/categorylisttwo/:id", CategoryListTwo);

controller–category.js

let { request } = require("../database/db.js");
// 产品分类列表的业务(一级分类)
let CategoryList = async (req, res) => {
    // 一级分类的查询语句
    //分页
    let { page = 1, size = 5 } = req.query;
    let sql = `select * from hg_category WHERE pid=0 LIMIT ${(page-1)*size},${size}`;
    let sql2 = `select count(*) from hg_category where pid=0`;
    let result = await request(sql);
	// 为每个一级菜单的每个对象加上hasChildren: true--对应表格属性懒加载组件
	result.map(item=>{
		item.hasChildren=true;
	})
    let resultCount = await request(sql2);
    let count = resultCount[0]['count(*)'];
    let pages = Math.ceil(count / size);
    res.json({
        status: 200,
        count,
        page: Number(page),
        size: Number(size),
        pages,
        data: result
    });
}

// 产品分类列表的业务(二级和三级分类)
let CategoryListTwo = async (req, res) => {
    let id = req.params.id; //获取到动态路由的参数
    // 根据id查询对应的数据
    let sql = `select * from hg_category WHERE pid=${id}`;
    let result = await request(sql);
    // 根据查询出来的数据添加自己对应的子数据
    for (let i = 0; i < result.length; i++) {
        let sql2 = `select * from hg_category WHERE pid=${result[i].id}`;
        let result2 = await request(sql2);
		//为每个二级菜单的每个对象加上hasChildren: true--对应表格属性懒加载组件
		result[i].hasChildren=true;
        result[i].children = result2;
    }

    res.json({
        status: 200,
        msg: "查询成功",
        data: result
    });
}


// 暴露
module.exports = {
    CategoryList,
    CategoryListTwo
}