Vue 用户页面的功能 第四弹

用户页面的功能

1.左侧菜单路由的渲染

​ 之前我们说了左侧菜单栏的渲染

​ 现在说说如何渲染里面的路由

​ 效果就是点击那个，就跳到对应的页面

​ 其实渲染路由挺简单的

​ 把里面的path渲染出来就行了，

​ 那为啥，上次不写？因为我忘了 ，咳咳，下面栗子

<el-submenu
:index="item.id + ''"
v-for="item in menuList"
:key="item.id"
>
    <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{ item.authName }}</span>
    </template>
        <el-menu-item-group v-for="it in item.children" :key="it.id">
            <el-menu-item :index="it.path"> //这里就是渲染path路由
                {{it.authName}}
            </el-menu-item>
    </el-menu-item-group>
</el-submenu>

​ 渲染完路由，之后把路由配置好
像这样，栗子：

忽略背景吧，我要社死了
不要在意细节，我们继续…

​ 配置完之后，我们写一下这个用户添加这些功能

2.增删改查

1.获取用户列表进行渲染

​ 1.先进行对用户列表的封装，栗子：

getusers({ query, pagenum, pagesize }) {//这里是封装方法
    return axios.get('users', {//这里按照文档要求，get请求，路径是users
        params: { //用params传输参数
        	query, pagenum, pagesize //这里是要请求的参数
        }
    })
},

​ 2.获取用户列表

​ 栗子：

 async getuser() {
      try {
        let result = await this.$axios.getusers(this.pages); //pages是一个对象
          										//将请求的信息赋值给result
        console.log(result);
        this.list = result.data1.users;
        this.pages.total = result.data1.total;
        this.$message.success(result.msg); //弹出提示
      } catch (e) {
        console.log(e); //捕获错误信息
      }
    },

​ 3.用table进行页面渲染

​ 栗子：

      <el-table :data="list" border style="width: 100%">
          		<!--这里的 :data是要渲染的数据变量和return里面的list相对应-->
        <el-table-column prop="id" label="#" width="180"> </el-table-column>
          		<!-- prop用来绑定要渲染的数据 -->
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="手机号"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
            <!--这里要用插槽渲染-->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @click.native="resetstt(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="" label="control">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          
            <el-button
            @click="deltUser(scope.row.id)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
          
          <el-button type="warning" icon="el-icon-setting" circle></el-button>
        </template>
          
        </el-table-column>
      </el-table>

2.添加用户

• 添加用户，我们首先要请求接口，

• 请求接口首先要进行封装接口

  1.封装添加用户接口

  ​ 经过前几次的训练，应该有很多小伙伴对于封装接口已经很熟悉了吧？

  ​ 添加用户接口，栗子：

  addusers({ username, password, email, mobile }) { //传递参数
      return axios.post('users', { //借口要求请求
          username, password, email, mobile
      })                                     //注释可以结合上面看
  },
  

  2.请求添加用户接口.

  栗子：

  async addusers() {
    try { //try尝试请求添加接口
      const res = await this.$axios.addusers(this.pages);
      //调用添加用户接口
      console.log(res);
      //添加之后重新获取信息，以达到刷新
      this.getuser() //参考上一篇内容
      this.$message.success(res.msg);
      //并且让弹框的值变为false关闭弹框
      this.flag = false
    }catch(e){
      console.log(e) //捕获异常
    }
  },
  

  3.点击确定触发事件

  栗子：

  <div slot="footer" class="dialog-footer">
      <el-button @click="flag = false">取 消</el-button>
      <el-button type="primary" @click="addusers">确 定</el-button>
      //点击确定出发addusers方法
  </div>
  

  这样一来，小伙伴们已经可以抓住节奏来写这些请求接口的功能了吧？

  接下来我们以删除为栗子：

  3.删除用户功能

  ​ 1.第一步：首先先封装接口，栗子：

  deltUser(id) {
  	//多了一步传id值而已
      console.log(id)
      //打印一下当前id避免错误
      return axios.delete('users/' + id);
      //返回请求的方式
  },
  

  这样就完成接口封装了

  ​ 2.第二步：请求删除数据

  async deltUser(id){
  	//传递id参数
     console.log(id)
     //打印id
     try{
        const res = await this.$axios.deltUser(id);
        //调用接口
        this.getuser()
        //重新获取数据
        this.$message.success(res.msg);
     }catch(e){
        console.log(e)//捕获异常
     }
  },
  

  ​ 3.第三部：点击删除调用方法

  ​ 栗子：

  <el-table-column prop="" label="control">
      <template slot-scope="scope"><!--模板-->
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button
              @click="deltUser(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              ></el-button>
              <!--点击删除按钮调用方法-->
          <el-button type="warning" icon="el-icon-setting" circle></el-button>
      </template>
  </el-table-column>
  

  当然其他功能也是这样，以此类推

  今天就分享到这里了，下次见