用户界面的设置

数据库

后端

1. 创建对应的实体类

 @TableName("数据库名称")
 public class 类名{
	
	/*
	*对应的Id :这里的Id命名有一定的规则，具体待研究
	* 若名字中字母有大写，则加载后再数据库中呈现的为下划线分割
	* 例如：roleUserId:最后的SQL语句为  role_user_id
	*/
	@TableId(type=IdType.AUTO)
	private int Id;

	// 这里的别名,首字母必须小写
	@TableField("数据库中实际的列名")
	private String 别名;

	// 逻辑删除
	@TableLogic
	@TableField()
	private int isDeteled;
	
}
	

2. 配置application.xml文件

mybatis-plus:
  type-aliases-package: com.hello java.entity
  mapper-locations: classpath:mapper/*.xml  #配置映射文件

3.配置DAO层

/*
*  BaseMapper:这个接口实现了对数据库的增删改查，不用书写实体类
*  Repository:加这个注解，是因为没有实体类，调试时会报错
*/
@Repository
public interface SysUsers  extends BaseMapper<实体类名>{} 

4.配置启动类

@SpringBootApplication
@MapperScan("DAO层的包名")
public class testApplication{
	public static void main(String[] args){
		SpringApplication.run(testApplication.class,args);
	}
}

5.配置Service类

/*
*  Service层：接口和实现类各继承一个
*/
public interface 接口名 extends IService<实体类名>{
}

@Service
public class SysUserServiceImpl extends ServiceImpl<Dao类名,实体类名> implement 接口名{
} 

6.配置Controller层

/**
 1.    1. 查询全部：  使用@RequestMapper注解
 2. 	 2.	按照ID查询: 使用@GetMapper注解，@PathVariable接收数据
 3.    3. 按照ID删除：使用@DeleteMapper注解，@PathVariable接收数据
 4. 	 4. 批量删除：  使用@DeleteMapper注解，@RequestBody接收数据
 5.    5. 新增: 使用@PostMapper注解,@RequestBody接收数据
 6.    6. 修改: 使用@PutMapper注解，@RequestBody接收数据
 7. */
 @Api(tags = "用户管理界面")
@RestController
@RequestMapping("/system/sysUsers")
public class SysUserController {

    @Autowired
    private SysUsersService sysUsersService;

    @ApiOperation(value = "查询所有用户")
    @RequestMapping("/login")
    public Result findAll(){
        List<SysUsers> list =sysUsersService.list();
        return Result.ok(list);
    }

    @ApiOperation(value="分页查询")
    @GetMapping("{page}/{limit}")
    public Result pageQueryUser(@PathVariable int page,
                                @PathVariable int limit){

        Page<SysUsers> pageParam =new Page(page,limit);
        LambdaQueryWrapper<SysUsers> wrapper =new LambdaQueryWrapper<>();
        wrapper.orderBy(true,true,SysUsers::getuserid);
        try{
            IPage<SysUsers> pageModel =sysUsersService.page(pageParam,wrapper);
            return Result.ok(pageModel);
        }catch (Exception e){
            System.out.println(e);
            return null;
        }


    }

    @ApiOperation(value = "根据Id查询")
    @GetMapping("get/{UserId}")
    public Result fingById(@PathVariable int UserId){
        SysUsers sysUsers =sysUsersService.getById(UserId);
        if(sysUsers.getuserid()>0){
            return Result.ok(sysUsers);
        }else{
            return Result.fail("查询不到用户");
        }
    }

    @ApiOperation(value = "新增用户")
    @PostMapping("add")
    public Result add(@RequestBody SysUsers sysUsers){
        boolean bool =sysUsersService.save(sysUsers);
        if(bool){
            return Result.ok();
        }else {
            return Result.fail();
        }
    }

    @ApiOperation(value="根据Id删除用户")
    @DeleteMapping("delete/{UserId}")
    public Result deleted_id(@PathVariable int UserId){
        boolean bool =sysUsersService.removeById(UserId);
        if(bool){
            return Result.ok();
        }else {
            return Result.fail();
        }
    }

    @ApiOperation(value="修改用户")
    @PutMapping("update")
    public Result update(@RequestBody SysUsers sysUsers){
        boolean bool=sysUsersService.updateById(sysUsers);
        if(bool){
            return Result.ok();
        }else {
            return Result.fail();
        }
    }

    @ApiOperation(value="批量删除")
    @DeleteMapping("batchRemove")
    public Result batchRemove(@RequestBody List<Integer> idList){
        boolean bool =sysUsersService.removeByIds(idList);
        if(bool){
            return Result.ok();
        }else {
            return Result.fail();
        }
    }

}

前端

1.在router中添加路由

{
    path: '/system',
    component: Layout,
    redirect: '/system',
    name: '系统管理',
    meta: { title: '系统管理', icon: 'el-icon-s-help' },
    children: [{
      path: 'sysRole',
      name: '角色管理',
      component: () => import('@/views/system/sysRole/list'),
      // title :在上方显示的路径,左侧显示的名字
      // icon:左边title前的图标
      meta: { title: '角色管理', icon: 'sysRole' }
    },
    {
      path: 'sysUsers',
      name: '用户管理',
      component: () => import('@/views/system/sysUsers/list'),
      // 在上方显示的路径,左侧显示的名字
      meta: { title: '用户管理', icon: 'sysUsers' }

    }
    ]
  },

2.建立和后端交互的js文件

import request from '@/utils/request'

export default {
  // 分页查询
  getPageList(page, limit) {
    return request({
      url: `/system/sysUsers/${page}/${limit}`,
      method: 'get'
    })
  },
  // 按照Id删除
  deleteById(usersid) {
    return request({
      url: `/system/sysUsers/delete/${usersid}`,
      method: 'delete'
    })
  },
  // 新增用户
  add(sysUsers) {
    return request({
      url: `/system/sysUsers/add`,
      method: 'post',
      data: sysUsers
    })
  },
  // 按照Id查询
  getById(usersid) {
    return request({
      url: `/system/sysUsers/get/${usersid}`,
      method: 'get'
    })
  },

  // 修改用户
  update(Users) {
    return request({
      url: `/system/sysUsers/update`,
      method: 'put',
      data: Users
    })
  },
  // 批量删除
  removeByIds(idList) {
    return request({
      url: `/system/sysUsers/batchRemove`,
      method: 'delete',
      data: idList
    })
  }
}

3.用户呈现的vue文件

<template>
  <div class="app-container">
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="用户名称">
              <el-input v-model="searchObj.UserName" style="width:100%" placeholder="用户名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tools-div">
      <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
      <el-button size="mini" @click="batchRemove()">批量删除</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      style="width: 100;margin-top: 10px;"
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection" />
      <el-table-column
        label="序号"
        width="70"
        :align="'center'"
      >
        <template slot-scope="scope">
          {{ (page-1)*limit+scope.$index+1 }}
        </template>
      </el-table-column>

      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="creatTime" label="创建时间" />
      <el-table-column label="操作" width="200" :align="'center'">
        <template slot-scope="scope">
          <!--这里的userid要和后端实体类中的userid名字一致-->
          <el-button type="primary" icon="el-icon-edit" size="mini" title="修改" @click="edit(scope.row.userid)" />
          <el-button type="danger" icon="el-icon-delete" size="mini" title="删除" @click="removeById(scope.row.userid)" />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: center;"
      layout="total,prev,pager,next,jumper"
      @current-change="fetchData"
    />

    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="sysUsers" :model="sysUsers" prop="sysUsers" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="sysUsers.userName" />
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="sysUsers.userPassword" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="big" icon="el-icon-refresh-right" @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()">确 认</el-button>
        <el-button @click="resetForm('sysUsers')">重 置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

// 引入定义的js文件
import api from '@/api/system/sysUsers'
export default {
  // 初始值
  data() {
    return {
      list: [], // 将后端返回的所有数据存储在此
      page: 1,
      limit: 10,
      total: 0,
      sysUsers: {}, // 用来存储弹窗中的数据，以及根据ID查询的数据都存储在此
      searchObj: {},
      dialogVisible: false, // 用来控制弹窗
      selects: [] // 用来存储批量删除的Id
    }
  },
  // 页面渲染之前执行
  created() {
    this.fetchData()
  },
  // 具体执行的方法
  methods: {
    // 分页查询
    fetchData(current = 1) {
      this.page = current
      api.getPageList(this.page, this.limit)
        .then(response => {
          this.list = response.data.records
          this.total = response.data.total
        })
    },
    // 按照Id删除
    removeById(id) {
      this.$confirm('此操作将永久删除,是否继续？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return api.deleteById(id)
      }).then(response => {
        this.fetchData()
        this.$message.success(response.$message || '删除成功')
      })
    },
    // 添加用户
    add() {
      this.sysUsers = {}
      this.dialogVisible = true
    },

    // 点击编辑以后,先执行了一个查询操作，因为要判断是编辑用户，还是新增用户
    edit(usersid) {
      this.dialogVisible = true
      api.getById(usersid)
        .then(response => {
          this.sysUsers = response.data
        })
    },
    saveOrUpdate() {
      this.saveBtnDisabled = true
      if (!this.sysUsers.userid) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    saveData() {
      api.add(this.sysUsers)
        .then(response => {
          this.$message.success(response.message || '操作成功')
          this.dialogVisible = false
          this.fetchData(this.page)
        })
    },
    updateData() {
      api.update(this.sysUsers)
        .then(response => {
          this.$message.success(response.message || '操作成功')
          this.dialogVisible = false
          this.fetchData(this.page)
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 批量删除
    batchRemove() {
      if (this.selects.length === 0) {
        this.$message.warning('请选择要删除的记录')
      } else {
        this.$confirm('此操作将永久删除,是否继续?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var idList = []
          this.selects.forEach(item => {
            idList.push(item.userid)
          })
          return api.removeByIds(idList)
        }).then(response => {
          this.$message.success(response.message || '删除成功')
          this.fetchData(this.page)
        })
      }
    },
    handleSelectionChange(selection) {
      this.selects = selection
    }
  }
}
</script>