（练习）vue2 修改密码 axios安装 点击按钮加加 (3)

一，登陆页面  页面代码 

<template>
  <div class="img">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <div class="nav">
        <el-form-item label="旧密码" prop="oldpasswold">
          <el-input v-model="ruleForm.oldpasswold"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passwold">
          <el-input v-model="ruleForm.passwold"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newpasswold">
          <el-input v-model="ruleForm.newpasswold"></el-input>
        </el-form-item>
        <button @click="denglu" class="but"> 修改密码</button>
      </div>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      ruleForm: {
        oldpasswold:'',
        passwold:'',
        newpasswold:"",
     
      },
      rules: {
        oldpasswold: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        passwold: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        newpasswold: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    denglu() {
      // axios数据请求
      axios.post("/api?oldpasswold=zhou&newpasswold=zhou11&passwold=zhou11") //路径换成自己的
        .then(response => {
            //判断是不是 json 
          // if (typeof (response.data) == 'string') {
          //   response.data = JSON.parse(response.data.trim());
          // }
          console.log(response.data )
            if (this.ruleForm.oldpasswold === response.data.args.oldpasswold && this.ruleForm.passwold === response.data.args.passwold && this.ruleForm.newpasswold === response.data.args.newpasswold ) {
            console.log('修改成功 ')
            // alert('成功')
            this.$router.push({ path: "/Demo" });  //判断成功  跳转到新的页面
          }else if( !this.ruleForm.passwold === this.ruleForm.newpasswold ){
              console.log('密码不相同')
          } else {
            // alert('登录失败')
            console.log('修改失败')
          }
        })
        .catch(error => {
          console.log(error, '失败');
        });
    }
  }
}
</script>
<style lang="less">
.img {
  height: 45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/photo-1684341326866-ad9fdde2314c.webp')center center no-repeat;
  background-size: 100% 100%
}

.nav {
  border-radius: 10px;
  padding: 52px 54px 52px 0;
  width: 100%;
  background: linear-gradient(rgb(158, 116, 116), rgb(138, 138, 205));

}
.but {
  margin-left: 44px;
  margin-top: -22px;
  width: 83px;
  height: 40px;
  background-color: cornflowerblue;
}
.jizhu {
  margin-top: -17px;
  margin-left: 116px;
}</style>

axios 安装

npm install axios

main.js   根据自己需要截取

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


import echarts from 'echarts'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)
var axios = require('axios')
axios.default.baseURL = '/api'
 
Vue.prototype.$http = axios //正确的使用 



new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

展示

---

二，数字加加  效果展示 

代码 

<template>
  <div>
    <h1>数字：{{ this.counter}}</h1>
    <button @click="plusOne">点击加1</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    plusOne() {
      this.counter++;
    },
  },
};
</script>