中医特色社区护理系统—中医生管理界面基本实现

今天实现了用户管理里面的中医生管理。
涉及了查看修改技能标签，重置密码，基本搜索，还有下面的分页系统
查看技能：

点击查看技能后跳出技能列表，出现一个弹窗，内容为数据库读出的json内容 中间涉及了一个gosn的序列化和反序列化。设置一个click在标签的叉号上可以 删除技能，点击后跳出提示弹窗
确定以后提示删除是否成功

下面开始代码讲解

1. 这里分为了两个部分 获取基本技能标签***还有***删除标签
   获取基本技能标签 在doctor.js里面创建一个export function

export function getBasicSkill (query) {
  return request({
    url: '/getBasicSkill',
    method: 'get',
    params: query
  })
}

方法为get 有参数query
然后在对应的user的userDoctor的index.vue里面的技能对话框采用的是Elementui带的代码

    <el-dialog title="技能列表" width="35%" :visible.sync="skillDialogVisible">
      <div class="basic-skill">
        <span class="basic-skill__title">基本技能</span>
        <div>
          <el-tag v-for="tag in skillTags" :key="tag.skill_id"
            closable type="success"
            @close="handleDeleteTag(tag.skill_id)">
            {{ tag.skill_name }}
          </el-tag>
        </div>
      </div>
      <div class="basic-skill">
        <span class="basic-skill__title">特殊技能</span>
        <div>
          <el-tag v-for="tag in skillTags" :key="tag.skill_id"
            closable type="success">
            {{ tag.skill_name }}
          </el-tag>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="skillDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="skillDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

外表嵌套一个el-dialog 里面放一个大div和两个div然后最下面放一个 div 作为确定和取消。然后小div里面放文字基本文字，下一个小的里面放标签 使用v-for循环skillTags点击关闭是通过设置skillDialogVisible为false 还有true实现的，获取此行的技能是通过handlePreviewSkill函数实现的

    handlePreviewSkill (user) {
      this.deleteSkillFrom.user_id = user.user_id
      getBasicSkill({ user_id: user.user_id }).then(res => {
        this.skillTags = res.data
        this.skillDialogVisible = true
      }).catch(error => {
        console.log(error)
      })
    },

后端代码是

1. 先在model里面的uitl建一个BasicSkill类

package bysj.bysj.model;

import lombok.Data;

@Data
public class BasicSkill {
    private Integer skill_id;
    private String skill_name;
}

2. 然后再mapper里面定义一个接口，返回值是String

  String findBasicSkillByUserId(Integer user_id);

4. 然后在UserDoctorMapper.xml文件里面写一个select语句返回类型为java.lang.String

  </select>
    <!-- select basic_skill from user_doctor where user_id = 1 -->
    <select id="findBasicSkillByUserId"
            resultType="java.lang.String">
     select basic_skill from user_doctor where user_id = #{user_id}
  </select>

3. 最后在controller里面实现数据处理涉及到反序列化

 @GetMapping("getBasicSkill")
    public List<BasicSkill> getBasicSkill (@RequestParam Integer user_id) {
        String json = userDoctorMapper.findBasicSkillByUserId(user_id);
        Gson gson = new Gson();
        return  gson.fromJson(json, new TypeToken<List<BasicSkill>>(){}.getType());
    }

最后使用postman测试正常

这样获取基本技能就结束了

删除标签 跟上面一样不过要考虑的东西多一些

1. 在doctor.js里面创建一个export function

export function deleteBasicSkillBySkillId (data) {
  return request({
    url: '/deleteBasicSkillBySkillId',
    method: 'delete',
    data: data
  })
}

2. 在上面的
   这里使用一个handleDeleteTag方法 这里不做过多解释逻辑简单应该能看懂 删除成功会弹出成功提示，失败同样有失败提示。同时还有一个是密码格式的处理这里给代码粘下来

      newPwdFromRules: { // 新密码表单校验规则
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ]
      },

    handleDeleteTag (id) {
      this.deleteSkillFrom.skill_id = id
      this.$confirm('此操作将删除该技能标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        return deleteBasicSkillBySkillId(this.deleteSkillFrom)
      }).then(() => {
        this.resetPwdDialogVisible = false
        return getBasicSkill({ user_id: this.deleteSkillFrom.user_id })
      }).then(res => {
        this.skillTags = res.data
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.resetPwdDialogVisible = false
        this.$message({
          type: 'error',
          message: '删除失败!'
        })
      })
    },

接下来是后端代码

1. 首先发现不需要字model里面新建实体类
2. 然后再mapper里面创建Boolean deleteBasicSkillBySkillId接口

Boolean deleteBasicSkillBySkillId(@Param("basic_skill") String basic_skill, @Param("user_id") Integer user_id);

然后在xml文件里面写一个updata语句

    <update id="deleteBasicSkillBySkillId">
     update user_doctor set basic_skill = #{basic_skill} where user_id = #{user_id}
  </update>

最后在controller里面实现数据处理 ，这里我是创建了一个新的BasicSkill用于刷新delete后的表里面 里面还有一个Gosn的序列化 我的basicskill用的是严格的json存储的文件 所以需要转义

[{"skill_id":  "0", "skill_name": "针灸" }, {"skill_id":  "1", "skill_name": "推拿" }]

    @DeleteMapping("deleteBasicSkillBySkillId")
    public Boolean deleteBasicSkillBySkillId (@RequestBody DeleteTag deleteTag) {
        System.out.println(deleteTag.getSkill_id());
        System.out.println(deleteTag.getUser_id());
        String basicSkillJson = userDoctorMapper.findBasicSkillByUserId(deleteTag.getUser_id());
        Gson  gson = new Gson();
        List<BasicSkill> oldBasicSkillList = gson.fromJson(basicSkillJson, new TypeToken<List<BasicSkill>>(){}.getType());
        List<BasicSkill> newBasicSkillList = new ArrayList<>();
        for (BasicSkill item: oldBasicSkillList) {
            if (item.getSkill_id() == deleteTag.getSkill_id()) {
                continue;
            }
            BasicSkill basicSkill = new BasicSkill();
            basicSkill.setSkill_id(item.getSkill_id());
            basicSkill.setSkill_name(item.getSkill_name());
            newBasicSkillList.add(basicSkill);
        }

测试postman同样通过

接下来是修改密码的实现

1. 在doctor.js里面创建一个export function

export function resetDoctorPwd (data) {
  return request({
    url: '/resetDoctorPwd',
    method: 'post',
    data: data
  })
}

2. 对了不要忘记在script里面引入这个方法同时 使用element里面的提示框

    <!-- 修改密码对话框：开始 -->
    <el-dialog title="提示" width="35%" :visible.sync="resetPwdDialogVisible">
      <el-form :model="newPwdFrom" :rules="newPwdFromRules" ref="newPwdFromRef">
        <el-form-item  prop="password" :label='`请输入 "${newPwdFrom.user_name}" 新密码`' >
          <el-input v-model="newPwdFrom.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="resetPwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmResetDoctorPwd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码对话框：结束 -->

使用 resetPwdDialogVisible控制界面的打开和关闭然后写一个
handleResetPw方法

    handleResetPwd (user) {
      this.newPwdFrom.user_id = user.user_id
      this.newPwdFrom.user_name = user.user_name
      this.resetPwdDialogVisible = true
    },

还有重置密码提示框

    handleConfirmResetDoctorPwd () {
      this.$refs.newPwdFromRef.validate((valid) => {
        if (valid) {
          this.$confirm('此操作将重置密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            return resetDoctorPwd(this.newPwdFrom)
          }).then(() => {
            this.resetPwdDialogVisible = false
            this.$message({
              type: 'success',
              message: '重置成功!'
            })
          }).catch(() => {
            this.resetPwdDialogVisible = false
            this.$message({
              type: 'error',
              message: '重置失败!'
            })
          })
        } else {
          return false
        }
      })
    },

后端代码实现是

1. 不需要model层新建一个实体java使用UserDoctor就可以不过需要在前段新建表单进行存储
2. 然后再mapper里面写一个接口

 Boolean resetDoctorPwd(@Param("password") String password, @Param("user_id") Integer user_id);

3. xml里面写sql代码 需要的标量为输入框里面的password 还有user_id

    <update id="resetDoctorPwd">
     update user_doctor set password = #{password} where user_id = #{user_id}
  </update>

4. 最后在controller实现数据的处理

    @PostMapping("resetDoctorPwd")
    public Boolean resetDoctorPwd (@RequestBody UserDoctor userDoctor) {
        return userDoctorMapper.resetDoctorPwd(userDoctor.getPassword(), userDoctor.getUser_id());
    }

还是通过postman调试