localStorage的使用方法

<template>
  <div class="box">
    <el-steps
      :active="1"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step title="输入账号"></el-step>
      <el-step title="重设密码"></el-step>
      <el-step title="修改成功"></el-step>
    </el-steps>

    <div class="Maincontent">
      <el-input
        v-model="username"
        prefix-icon="el-icon-user-solid"
        placeholder="请输入您要更改的账号"
      ></el-input>
      <br />
      <el-button type="primary" @click="reconfirm()">确认提交</el-button>
      <br />
    </div>
    <br />
    <el-link @click="openEmali()" type="info">使用邮箱修改密码</el-link>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    openEmali() {
      this.$router.push("/6/");
    },
    reconfirm() {
      localStorage.setItem("username", this.username);

      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8087/getUsername`,
        // URL中的查询参数

        //GET需要params参数;
        params: {
          username: this.username,
        },
      })
        .then((res) => {
          console.log(res.data.username);
          if (res.status === 200 && res.data.username != null) {
            this.$message.success("确定成功");
            this.$router.push("/4/");
          } else {
            this.$message.error("没有这个账号");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("网络连接超时");
        });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  margin: 100px auto;
  width: 1185px;
  height: 800px;
  border-radius: 5px 5px 5px 5px;
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.el-input {
  margin-bottom: 20px;
  margin-top: 100px;
}
.Maincontent {
  margin-top: 100px;
}
</style>

<template>
  <div class="box">
    <el-steps
      :active="2"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step title="输入账号"></el-step>
      <el-step title="重设密码"></el-step>
      <el-step title="修改成功"></el-step>
    </el-steps>

    <div class="Maincontent">
      <el-input
        v-show="false"
        v-model="username"
        class="begininput"
        prefix-icon="el-icon-user-solid"
        placeholder="请再次输入您的账号"
      ></el-input>
      <br />
      <el-input
        v-model="Oldpassword"
        prefix-icon="el-icon-view"
        placeholder="请输入您之前的密码"
      ></el-input>
      <br />
      <el-input
        class="endinput"
        v-model="password"
        prefix-icon="el-icon-view"
        placeholder="请输入您要更改的密码"
      ></el-input>
      <br />
      <el-button @click="Update()" type="primary">确认修改</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      password: "",
      Oldpassword: "",
      username: "",
    };
  },
  methods: {
    Update() {
      let uname = localStorage.getItem("username");
      console.log(uname);
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8087/getIf`,
        // URL中的查询参数

        //GET需要params参数;
        params: {
          // username: this.username,
          password: this.password,
          word: this.Oldpassword,
          username: uname,
        },
      })
        .then((res) => {
          console.log(res.data);
          if (res.status === 200 && res.data >= 1) {
            this.$message.success("修改成功");
            this.$router.push("/5/");
            localStorage.removeItem("username");
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("网络连接超时");
        });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  margin: 100px auto;
  width: 1185px;
  height: 800px;
  border-radius: 5px 5px 5px 5px;
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.begininput {
  margin-bottom: 3px;
}
.endinput {
  margin-top: 1px;
  margin-bottom: 30px;
}
.Maincontent {
  margin-top: 50px;
}
</style>