微服务项目：尚融宝（31）（前端搭建：会员列表搭建（2））

二、前端整合

1、创建vue组件

core/user-info/list.vue

<template>
  <div class="app-container">
    user list
  div>
template>

2、配置路由 

 {
    path: '/core/user-info',
    component: Layout,
    redirect: '/core/user-info/list',
    name: 'coreUserInfo',
    meta: { title: '会员管理', icon: 'user' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreUserInfoList',
        component: () => import('@/views/core/user-info/list'),
        meta: { title: '会员列表' }
      }
    ]
  },

3、定义api模块

创建文件 src/api/core/user-info.js

import request from '@/utils/request'
 
export default {
  getPageList(page, limit, searchObj) {
    return request({
      url: `/admin/core/userInfo/list/${page}/${limit}`,
      method: 'get',
      params: searchObj
    })
  }
}

4、定义页面组件脚本

src/views/core/user-info/list.vue

5、定义页面组件模板

src/views/core/user-info/list.vue

 锁定和解锁

一、后端接口实现

1、Service

接口：UserInfoService

void lock(Long id, Integer status);

实现：UserInfoServiceImpl 

@Override
public void lock(Long id, Integer status) {
    //        UserInfo userInfo = this.getById(id);//select
    //        userInfo.setStatus(1);
    //        this.updateById(userInfo);//update
    UserInfo userInfo = new UserInfo();
    userInfo.setId(id);
    userInfo.setStatus(status);
    baseMapper.updateById(userInfo);
}

2、Controller

AdminUserInfoController

@ApiOperation("锁定和解锁")
@PutMapping("/lock/{id}/{status}")
public R lock(
    @ApiParam(value = "用户id", required = true)
    @PathVariable("id") Long id,
 
    @ApiParam(value = "锁定状态（0：锁定 1：解锁）", required = true)
    @PathVariable("status") Integer status){
 
    userInfoService.lock(id, status);
    return R.ok().message(status==1?"解锁成功":"锁定成功");
}

二、前端整合

1、定义api

src/api/core/user-info.js

  lock(id, status) {
    return request({
      url: `/admin/core/userInfo/lock/${id}/${status}`,
      method: 'put'
    })
  }

2、定义页面组件脚本

src/views/core/user-info/list.vue

    // 锁定和解锁
    lock(id, status) {
      userInfoApi.lock(id, status).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    }

3、定义页面组件模板

src/views/core/user-info/list.vue： 

"操作" align="center" width="200">
    <template slot-scope="scope">
        <el-button
                   v-if="scope.row.status == 1"
                   type="primary"
                   size="mini"
                   @click="lock(scope.row.id, 0)"
                   >
            锁定
        el-button>
        <el-button
                   v-else
                   type="danger"
                   size="mini"
                   @click="lock(scope.row.id, 1)"
                   >
            解锁
        el-button>
    template>