vue项目之菜单管理项目实现

1.背景

2.菜单导航实现

 代码:

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
  export default {
    name: "User"
  }
</script>

<style scoped>

</style>

3.实现搜索输入框

 代码:

<template>
  <div>
    <!--  导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入查询的用户名">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加</el-button>
        </el-col>

      </el-row>

    </el-card>
  </div>

</template>

<script>
  export default {
    name: "User"
  }
</script>

<style scoped>

</style>

4.简单列表显示

<template>
  <div>
    <!--  导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入查询的用户名">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格区-->
    <el-table
      :data="tableData"
      stripe
      border
      style=" 100%">
      <el-table-column prop="username" label="用户名" ></el-table-column>
      <el-table-column prop="role_name" label="角色" ></el-table-column>
      <el-table-column prop="mobile" label="手机" ></el-table-column>
      <el-table-column prop="email" label="邮箱" ></el-table-column>
      <el-table-column prop="mg_state" label="状态" ></el-table-column>
      <el-table-column  label="操作" ></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "User",
    created() {
      this.getTableData()
    },
    data() {
      return {
        // 数据列表
        tableData: [],
        // 总共条数
        total:0,
        // 查询对象
        queryObj: {
          query: '',
          pagenum: 1,
          pagesize: 10
        }
      }
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        const {data: result} = await this.$http.get('users', {params: this.queryObj})
        console.log(result)
        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
        this.tableData = result.data.users
        this.total= result.data.total
      }
    }
  }
</script>

<style scoped>

</style>

5.编号显示

6.状态显示

 代码:

<template>
  <div>
    <!--  导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入查询的用户名">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格区-->
    <el-table
      :data="tableData"
      stripe
      border
      style=" 100%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column prop="username" label="用户名" ></el-table-column>
      <el-table-column prop="role_name" label="角色" ></el-table-column>
      <el-table-column prop="mobile" label="手机" ></el-table-column>
      <el-table-column prop="email" label="邮箱" ></el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="操作" ></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "User",
    created() {
      this.getTableData()
    },
    data() {
      return {
        // 数据列表
        tableData: [],
        // 总共条数
        total:0,
        // 查询对象
        queryObj: {
          query: '',
          pagenum: 1,
          pagesize: 10
        }
      }
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        const {data: result} = await this.$http.get('users', {params: this.queryObj})
        console.log(result)
        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
        this.tableData = result.data.users
        this.total= result.data.total
      }
    }
  }
</script>

<style scoped>

</style>

7.操作栏按钮显示

 8.按钮提示

 9.分页实现

 代码:

<template>
  <div>
    <!--  导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
     <!-- 条件查询-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入查询的用户名">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加</el-button>
        </el-col>
      </el-row>
      <!-- 表格区-->
      <el-table
        :data="tableData"
        stripe
        border
        style=" 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mobile" label="手机"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          <!-- 按钮文字提示-->
          <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">
            <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
     <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 3, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "User",
    created() {
      this.getTableData()
    },
    data() {
      return {
        // 数据列表
        tableData: [],
        // 总共条数
        total: 0,
        // 查询对象
        queryObj: {
          query: '',
          pagenum: 1,
          pagesize: 10
        }
      }
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        const {data: result} = await this.$http.get('users', {params: this.queryObj})
        console.log(result)
        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
        this.tableData = result.data.users
        this.total = result.data.total
      },
      // 每页显示条数改变
      handleSizeChange(newSize){
        this.queryObj.pagesize=newSize
        this.getTableData()
      },
      // 当前页改变
      handleCurrentChange(newPage){
        this.queryObj.pagenum=newPage
        this.getTableData()
      }
    }
  }
</script>

<style scoped>

</style>

10.高级查询条件实现

1.绑定查询参数

2.点击图标触发事件

3.添加清除数据库按钮

4.清除数据时触发查询

11.状态修改实现

// 状态改变是触发
      async changeState(rowObj) {
        const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
        console.log(result)
        if (result.meta.status !== 200) {
          // 重置状态
          rowObj.mg_state = !rowObj.mg_state
          // 消息提示
          return this.$message.error(result.meta.msg)
        }
        // 状态修改成功
        return this.$message.success('状态修改成功')
      }

12.删除实现

1.确认是否删除

2.执行删除

 代码：

<template>
  <div>
    <!--  导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
      <!-- 条件查询-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加</el-button>
        </el-col>
      </el-row>
      <!-- 表格区-->
      <el-table
        :data="tableData"
        stripe
        border
        style=" 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mobile" label="手机"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改-->
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <!-- 删除-->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button>
            <!-- 按钮文字提示-->
            <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">
              <!-- 权限修改-->
              <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 3, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "User",
    created() {
      this.getTableData()
    },
    data() {
      return {
        // 数据列表
        tableData: [],
        // 总共条数
        total: 0,
        // 查询对象
        queryObj: {
          query: '',
          pagenum: 1,
          pagesize: 10
        }
      }
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        const {data: result} = await this.$http.get('users', {params: this.queryObj})
        console.log(result)
        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
        this.tableData = result.data.users
        this.total = result.data.total
      },
      // 每页显示条数改变
      handleSizeChange(newSize) {
        this.queryObj.pagesize = newSize
        this.getTableData()
      },
      // 当前页改变
      handleCurrentChange(newPage) {
        this.queryObj.pagenum = newPage
        this.getTableData()
      },
      // 状态改变是触发
      async changeState(rowObj) {
        const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
        console.log(result)
        if (result.meta.status !== 200) {
          // 重置状态
          rowObj.mg_state = !rowObj.mg_state
          // 消息提示
          return this.$message.error(result.meta.msg)
        }
        // 状态修改成功
        return this.$message.success('状态修改成功')
      },
      // 删除用户
      async deleteById(id) {
        // 确认是否删除
        const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err);
        // 如果用户确认删除，则返回值为字符串 confirm
        // 如果用户取消了删除，则返回值为字符串 cancel
        if (confirmResult !== 'confirm') return this.$message.error('取消删除')

        const {data: result} = await this.$http.delete(`users/` + id)
        console.log(result)
        if (result.meta.status !== 200) {
          // 消息提示
          return this.$message.error(result.meta.msg)
        }
        // 重新查询列表
        this.getTableData()
        // 删除成功
        return this.$message.success('删除成功')
      }
    }
  }
</script>

<style scoped>

</style>

13.新增实现

1.弹出新增对话框

2.执行新增

3.回到列表

代码:

<template>
  <div>
    <!--  导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
      <!-- 条件查询-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addUser">添加</el-button>
        </el-col>
      </el-row>
      <!-- 表格区-->
      <el-table
        :data="tableData"
        stripe
        border
        style=" 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mobile" label="手机"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改-->
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <!-- 删除-->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button>
            <!-- 按钮文字提示-->
            <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">
              <!-- 权限修改-->
              <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.pagenum"
        :page-sizes="[2, 3, 10, 20]"
        :page-size="queryObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 增加用户对话框-->
    <el-dialog title="新增用户" :visible.sync="dialogVisibleAddUser" width="50%" @close="resetForm('addFormRef')">
      <!-- 输入框-->
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="70px">
        <!-- 用户名 prop="username" 与表单验证属性对应-->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <!-- 手机 -->
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item>
          <el-button type="primary" @click="addUserData">新建</el-button>
          <el-button type="info" @click="dialogVisibleAddUser=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "User",
    created() {
      this.getTableData()
    },
    data() {
      return {
        // 添加用户对象
        addForm: {
          username: '',
          password: '',
          email: '',
          mobile: ''
        },
        // 用户规则
        addRules: {
          username: [
            {required: true, message: '请输入用户名称', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11位', trigger: 'blur'}
          ],
        },
        // 是否显示新增对话框
        dialogVisibleAddUser: false,
        // 数据列表
        tableData: [],
        // 总共条数
        total: 0,
        // 查询对象
        queryObj: {
          query: '',
          pagenum: 1,
          pagesize: 10
        }
      }
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        const {data: result} = await this.$http.get('users', {params: this.queryObj})
        console.log(result)
        if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
        this.tableData = result.data.users
        this.total = result.data.total
      },
      // 每页显示条数改变
      handleSizeChange(newSize) {
        this.queryObj.pagesize = newSize
        this.getTableData()
      },
      // 当前页改变
      handleCurrentChange(newPage) {
        this.queryObj.pagenum = newPage
        this.getTableData()
      },
      // 状态改变是触发
      async changeState(rowObj) {
        const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
        console.log(result)
        if (result.meta.status !== 200) {
          // 重置状态
          rowObj.mg_state = !rowObj.mg_state
          // 消息提示
          return this.$message.error(result.meta.msg)
        }
        // 状态修改成功
        return this.$message.success('状态修改成功')
      },
      // 删除用户
      async deleteById(id) {
        // 确认是否删除
        const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err);
        // 如果用户确认删除，则返回值为字符串 confirm
        // 如果用户取消了删除，则返回值为字符串 cancel
        if (confirmResult !== 'confirm') return this.$message.error('取消删除')
        const {data: result} = await this.$http.delete(`users/` + id)
        console.log(result)
        if (result.meta.status !== 200) {
          // 消息提示
          return this.$message.error(result.meta.msg)
        }
        // 重新查询列表
        this.getTableData()
        // 删除成功
        return this.$message.success('删除成功')
      },
      // 显示添加用户弹框
      addUser() {
        // 打开弹框
        this.dialogVisibleAddUser = true
      },
      // 保存用户数据
      addUserData() {
        // 数据校验
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) return ;
          // 发出请求
          let {data: result} = await this.$http.post('users', this.addForm)
          console.log(result)
          if (result.meta.status !== 201){
            this.$message.error(result.meta.msg)
            return
          }
          this.$message.success("新增成功")
          // 关闭弹框
          this.dialogVisibleAddUser=false
          // 查询数据
          this.getTableData()
        })
      },
      // 表单重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

</style>

14.修改实现

完美!