03. 带你开发一个基础的用户管理模块（下）

/**
 * 新增数据
 * @param user 参数的对象
 */
@PostMapping("/add")
public Result add(@RequestBody User user) {
    userService.add(user);
    return Result.success();
}

public void add(User user) {
    String username = user.getUsername();
    // 校验账户是否重复
    User dbUser = userMapper.selectByUsername(username);
    if (dbUser != null) {
        throw new CustomException("新增失败！账号重复");
    }
    if (StrUtil.isBlank(user.getPassword())) {
        // 默认密码
        user.setPassword("123");
    }
    if (StrUtil.isBlank(user.getName())) {
        // 默认姓名
        user.setName(user.getUsername());
    }
    user.setRole("普通用户"); // 默认用户的角色
    user.setAccount(BigDecimal.ZERO);  // 默认用户的账户余额
    userMapper.insert(user);
}

<insert id="insert" parameterType="com.example.entity.User">
    insert into `user` (username, password, name, avatar, role, account)
    values (#{username}, #{password}, #{name}, #{avatar}, #{role}, #{account})
</insert>

<div style="margin-bottom: 10px">
  <el-button @click="handleAdd" type="primary">新增</el-button>
</div>

<el-dialog title="用户信息" v-model="data.formVisible" width="30%" destroy-on-close>
  <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="80px" style="padding-right: 30px">
    <el-form-item prop="username" label="账号">
      <el-input :disabled="data.form.id !== undefined" v-model="data.form.username" placeholder="请输入账号" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="name" label="姓名">
      <el-input v-model="data.form.name" placeholder="请输入姓名" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="data.formVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </template>
</el-dialog>

const handleAdd = () => {
  data.form = {}
  data.formVisible = true
}


const add = () => {
  request.post('/user/add', data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      data.formVisible = false
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

/**
 * 更新数据
 * @param user 参数的对象  编辑后的数据
 */
@PutMapping("/update")
public Result update(@RequestBody User user) {
    userService.update(user);
    return Result.success();
}

public void update(User user) {
    // user对象里面必须包含ID，否则无法更新数据
    userMapper.updateById(user);
}

<update id="updateById">
    update `user` set username = #{username}, password = #{password}, name = #{name}, avatar = #{avatar},
                      role = #{role}, account = #{account}
    where id = #{id}
</update>

<el-table-column label="操作" width="180" fixed="right" >
  <template #default="scope">
    <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

const handleEdit = (row) => {
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}

const update = () => {
  request.put('/user/update', data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      data.formVisible = false
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}  

const save = () => {
  formRef.value.validate((valid) => {
    if (valid) {  // 表示表单校验通过
      data.form.id ? update() : add()
    }
  })
}  

<el-upload
    :action="baseUrl + '/files/upload'"
    list-type="picture"
    :on-success="handleFileUpload"
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

// 表单头像上传组件的回调函数  res.data 就是头像的url
const handleFileUpload = (res) => {
  data.form.avatar = res.data
}

<el-table-column prop="avatar" label="头像">
  <template #default="scope">
    <el-image v-if="scope.row.avatar" style="width: 50px; height: 50px; display: block; border-radius: 50%"
              :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" preview-teleported></el-image>
  </template>
</el-table-column>