vue学习的第十二天——element项目开发（含解析）

前言：在经过了第8天的element基础学习，今天通过一个具体的实例去展示一下怎么用element快速的去开发一个系统。今天只做前端的学习，后端改天再聊。

一.项目展示

按照element的框架部分进行开发避免了css过多的繁琐，如有忘记看第八天的ps导航菜单详解部分

 因为el-aside和el-haeder部分比较简单就不做详细的介绍，重点讲解四.el-main部分!!!

二.el-aside和el-haeder部分html部分编写

<template>      //模板语法
  <el-container style="height: 100%" class="manage">  //大盒子
    <el-aside width="180">   //左边横栏盒子
           <!-- 部门效果嵌套 -->
      <el-menu
        background-color="rgb(0,21,41)"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="height: 100%"
        default-active="1_1"
        default-openeds="['1_1','1_2','2_1','2_2']"
        :router="true"
        @select="handleSelect"
      >
        <div class="user_box">    
          <div class="username">社区管理后台</div>
        </div>
        <el-submenu :index="item.id" v-for="item in menuList" :key="item.index">
          <template slot="title">
            <i :class="item.icon"></i>{{ item.title }}</template>
          <el-menu-item
            :index="ele.index"
            v-for="ele in item.childrenlist"
            :key="ele.index"
            :route="ele.route"
          >
            <i :class="ele.inner_icon"></i>{{ ele.text }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ manage_name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ list_name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <i
          class="el-icon-setting"
          style="font-size: 17px; position: absolute; right: 74px; top: 22px"
        ></i>
        <span
          style="font-size: 17px"
          class="usertext"
          @click="$router.push('/apartmentArea')"
          >{{ username }}</span
        >
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

三.el-aside和el-haeder部分js部分代码

<script>
export default {
  data() {
    return {                 //闭包（方式其他页面出现下面相同的定义赋值会冲突）
      username: localStorage.getItem("username"),
      manage_name: "用户管理",
      list_name: "用户列表",
      menuList: [
        {
          id: "1",
          title: "用户管理",
          icon: "el-icon-s-custom",
          childrenlist: [
            {
              index: "1_1",
              route: "/backstageManage/Userlist",
              text: "用户列表",
              inner_icon: "el-icon-menu",
            },

             {
              index: "1_2",
              route: "/backstageManage/usercar",
              text: "用户车辆",
              inner_icon: "el-icon-menu",
            },
          ],
        },

        {
          id: "2",
          title: "用户数据",
          icon: "el-icon-s-custom",
          childrenlist: [
            {
              index: "2_1",
              route: "/backstageManage/Userlist",
              text: "用户账号",
              inner_icon: "el-icon-menu",
            },

             {
              index: "2_2",
              route: "/backstageManage/usercar",
              text: "用户密码",
              inner_icon: "el-icon-menu",
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleSelect(index) {
      this.menu_idx = index.substring(0, 1);
      this.menuList.forEach((res) => {
        if (res.id == this.menu_idx) {
          this.manage_name = res.title;
          res.childrenlist.forEach((ele) => {
            if (index == ele.index) {
              this.list_name = ele.text;
            }
          });
        }
      });
    },
  },
};
</script>

四.el-main的编写

相信大家由二部分可以看得出来，el-main是为了给子路由部分占坑，当我们点击用户的列表时，我们就会看见我们跳转到了一个子路由，而el-main部分也相应的改变了。现在我们来看看el-main部分是怎么编写的。

4.1el-main部分用户信息展示页面html部分（含解析）

<template>
  <div class="Userlist">
    <el-input
      placeholder="请输入内容"       //输入框默认内容 
      v-model="input2"                //数据双向绑定
      style="width: 350px"           //内嵌式css
      @change="searchUserInfoMed"      //v-on元素绑定事件
    >
      <template slot="append">
        <el-button slot="append" icon="el-icon-search"></el-button>    //slot为插槽运用子组件可以换取父组件定义的数据，但el-button的slot="append" 为按钮组件紧贴在依赖组件，如紧贴在输入框的后面（prepend）为紧贴在前面。
        </template>
    </el-input>
    <el-button type="text" @click="dialogVisible = true" class="dialog_btn"
      >添加用户</el-button>       //元素事件绑定外置写法，当点击时dislogvisible的值变为ture


    <el-dialog               //新增和编辑操作想要以弹框的方式显示，title为标题设置
      title="新增用户"        
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"     //点击el-dialog外不会让el-dialog关闭（网上还有很多属性可以去了解）
      @close="closeDialog"          //当关闭el-dialog时触发closedialog方法
    >
      <el-input v-model="iptUsername" placeholder="请输入用户名"></el-input>
      <el-input
        v-model="password"
        placeholder="请输入密码"
        type="password"
        style="margin: 20px 0 20px 0"
      ></el-input>
      <el-input
        v-model="again_password"
        placeholder="请确认密码"
        type="password"
      ></el-input>
      <span slot="footer" class="dialog-footer">     //意思为按键跟在输入框底部，是element自定义的布局
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="registerUserMed">确 定</el-button>   //type为定义按钮的样式在element中有很多不同的按钮样式可以直接使用很方便
      </span>
    </el-dialog>



    <el-table :data="tableData" style="padding-top: 30px" v-show="!notFound">    
//:date为绑定数据源
      <el-table-column prop="id" label="Id"> </el-table-column>    //设置表格中的一列，label指定该列对应的数据，prop指定该列对应的数据
      <el-table-column prop="username" label="姓名"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="type" label="角色"></el-table-column>
      <el-table-column align="left" prop="operate" label="操作">
        <template slot-scope="scope">    //简单来说就是在el-table中先占个位置
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"   //传递实参用scope.$index获取当前行的数据在数组中的索引，用scope.row获取当前行的数据
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="[]" style="padding-top: 30px" v-show="notFound">
      <el-table-column prop="id" label="Id"> </el-table-column>
      <el-table-column prop="username" label="姓名"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="type" label="角色"></el-table-column>
      <el-table-column align="left" prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

4.2el-main部分用户信息展示页面js部分（含解析）

<script>
import {
  getUserInfo,
  registerUser,
  deleteUser,
  searchUserInfo,
} from "@/requestApi/mainPage";
export default {
  data() {
    return {                   //return为闭包，为了避免在其他页面对一下的值进行定义会影响到以下的值
      input2: "",
      iptUsername: "",
      password: "",
      again_password: "",
      dialogVisible: false,
      tableData: [],
      notFound: false,
    };
  },
  mounted() {
    this.getUserInfoMed();
  },
  methods: {
    closeDialog() {
      this.iptUsername = "";
      this.password = "";
      this.again_password = "";
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);          //这里的传参完全就是users表里面的数据
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(row.id).then((res) => {
            // console.log(res);             //每个局部里面的res都不是一个res这个res里面包含着data（errorno）
            if (res.data.errorno == 0) {
              this.$message("删除成功");
              this.getUserInfoMed();
            }
          });
        })
        .catch(() => {});
    },
    getUserInfoMed() {
      getUserInfo().then((res) => {
        console.log(res);  //打印出来发现res里面有数据库的所有数据
        let option = [];
        option = res.data.userinfo;
        option.forEach((res) => {
          if (res.type == 1) {
            res.type = "超级管理员";
          } else {
            res.type = "普通用户";
          }
          res.password = res.password.substring(0, 1) + "********";    //substring(0,1)0表示从字符串第一个字符开始，1为获取1个字符
        });
        this.tableData = option;
      });
    },
    registerUserMed() {
      if (
        this.iptUsername &&
        this.password === this.again_password &&
        this.password &&
        this.again_password
      ) {
        let options = {
          username: this.iptUsername,
          password: this.again_password,
        };
        registerUser(options).then((res) => {
          // console.log(res);
          if (res.data.errorno === 0) {
            this.$message("添加用户成功");
            this.dialogVisible = false;
            this.getUserInfoMed();
          }
        });
      } else {
        this.$message({
          message: "输入用户名密码不能为空且确保两次输入的密码一致",
          type: "warning",
        });
      }
    },
    deleteUserMed() {},
    searchUserInfoMed() {
      let option = {
        username: this.input2,
      };
      searchUserInfo(option).then((res) => {
        if (res.data.userinfo.length > 0) {
          let option = [];
          option = res.data.userinfo;
          option.forEach((res) => {
            if (res.type == 1) {
              res.type = "超级管理员";
            } else {
              res.type = "普通用户";
            }
            res.password = res.password.substring(0, 1) + "********";
          });
          this.tableData = option;
          this.notFound = false;
        } else {
          this.notFound = true;
        }
      });
    },
  },
};
</script>