vue整理

发表于 | 分类于

vue返回后端的数据

  • consume层返回一个ResultMsg类
1
2
// 首页忘记密码 修改
 @ApiOperation(value = "修改个人密码", notes = "个人中心-修改个人密码")
  @PostMapping("/editPasswordIndex")
  public ResultMsg<String> editPasswordIndex(@RequestParam("mobile") String mobile, @RequestParam("newPwd") String newPwd) throws Exception {
      if (StringUtils.isEmpty(newPwd))
          throw new Exception("错误：新密码不能为空");
      UserParam up = new UserParam();
      up.setMobile(mobile);
      List<User> list = userService.getList(up).getList();
      if (list.size()!=1)throw new Exception("错误：没有该用户或者该用户有误！");
      User o = list.get(0);
      o.setPassword(HashKit.sha256(o.getUsername() + newPwd));
      userService.edit(o);
      // 返回账号给用户
      return new ResultMsg(o.getUsername());
  }
  • ResultMsg类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@Data
public class ResultMsg<T> implements Serializable {
    Integer resultCode = HttpStatus.OK.value();
    T data;// 相应成功时的数据
    String message;// 错误信息
    Date timestamp;// 时间戳

    public ResultMsg(T data) {
        this.data = data;
    }

    public ResultMsg() {
        this.message = "操作成功";
    }

    public static <T> ResultMsg<T> error(HttpStatus httpStatus, String message) {
        return new ResultMsg<T>()
                .putMessage(message)
                .putCode(httpStatus)
                .putTimestamp(new Date());
    }

    public static <T> ResultMsg<T> error(String message) {
        return new ResultMsg<T>()
                .putMessage(message)
                .putCode(HttpStatus.INTERNAL_SERVER_ERROR)
                .putTimestamp(new Date());
    }

    public static <T> ResultMsg<T> ok(T data) {
        return new ResultMsg(data)
                .putCode(HttpStatus.OK)
                .putMessage("操作成功")
                .putTimestamp(new Date());
    }

    public static <T> ResultMsg<T> ok() {
        return ok(null);
    }

    ResultMsg<T> putMessage(String message) {
        this.message = message;
        return this;
    }

    ResultMsg<T> putCode(HttpStatus httpStatus) {
        this.resultCode = httpStatus.value();
        return this;
    }

    ResultMsg<T> putTimestamp(Date date) {
        this.timestamp = date;
        return this;
    }
}
  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
forgetPhone2() {
    // 使用正则进行规范
   var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
   var reg2 = /([a-zA-Z0-9!@#$%^&*()_?<>{}]){8,18}/;
   // 如果vue的模版中，我们添加了对应的ref属性，那么我们就可以用$refs来取值
    if (this.$refs.inputForgetPassword1.value != this.$refs.inputForgetPassword2.value) {
      this.showNewPasswordErro = true;
      this.erroMessge='俩次密码输入不一致';
      return false;
    }else if (!reg.test(this.$refs.getmobile.value)) {
      this.showErro = true;
      this.erroMobileMessage='手机号码有误';
      return false;
    }else if(!reg2.test(this.$refs.inputForgetPassword1.value)){
      this.showNewPasswordErro = true;
      this.erroMessge='请输入8-18位密码';
      return false;
    }
   this.$axios({
      method: "post",
      url: this.HOME + "user/editPasswordIndex?newPwd=" + this.$refs.inputForgetPassword1.value + "&mobile=" + this.$refs.getmobile.value,
      headers: {
        "content-type": "application/json;charset=UTF-8",
      },

    })
      .then(result => {
    if (result.data.resultCode != "200") alert(result.data.message);
    if (result.data.resultCode == "200") {
      this.isShow2 = false;
      this.isShow3 = true;
      // 这一块用来将后端的值赋给ContentData这个我们自定义的字段
      // $common为自定义的公共方法包
      const msg = !this.$common.isNull(result.data.data)
        ? result.data.data
        : "";
      this.ContentData = msg;
    }
  }
      )
      .catch(err => {
        alert("错误：获取数据异常" + err);
      })
    ;
}
  • html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div slot="footer" class="dialog1-footer" v-show="isShow2">
     <el-button @click="dialogVisible=false;dialogVisible3=false;dialogVisible4=false" class="button_f">取 消
     </el-button>
     <el-button type="primary" @click="forgetPhone2(mobile)" class="button_next">下一步</el-button>
   </div>
   <!--忘记密码 通过手机重置 完成-->
   <div v-show="isShow3">
     <el-steps :space="200" :active="3" finish-status="success" align-center
               style="margin-left: -25px;margin-right: -25px;">
       <el-step title="验证手机"></el-step>
       <el-step title="设置新密码"></el-step>
       <el-step title="完成"></el-step>
     </el-steps>
     <div class="finish_con"><img src="@/assets/img/secret.png" alt="完成" width="" height=""></div>
     <p style="text-align: center;font-size: 16px;margin-top: 20px">恭喜你</p>
     <p style="text-align: center;font-size: 18px;margin-top: 10px;font-weight: 600">密码修改成功</p>
     <p style="text-align: center">请记住你的账号</p>
     <p style="text-align: center">{{ContentData}}</p>
</div>
赏个🍗吧
0%