VUE-05 登陆与注册，双绑，进行跳转

一.登陆界面流程：

（1.）创建一个.vue页面

（2.）编写登陆html代码

（3.）编写script代码，引入axios

（4.）调用服务器接口

（5.） 判断密码是否正确

（6.）vue路由的配置

1、html代码：如图所示：

2、 script代码 如图所示：

3、路由配置 如图所示：

 2.注册流程

1.html代码 如图所示：

 2.script 代码 如图所示：

 

 3.路由配置 如图所示：

最后：

登陆的完整代码

<template>
  <div>
    <div>
      用户名:
      <input type="text" v-model="account">
       <!-- 1.v-model="变量" 双绑--> </div>
    <div>
      密码:
      <input type="text" v-model="pwd">
    </div>
    <div>
      <button @click="toLogin">登录</button>
      <!-- 2.点击实现方法 -->
    </div>
    <div>
      <button @click="gotRegister">去注册</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      account: "",
      pwd: ""
      // 1.因为要存内容，所以要先定义一个空变量，储存信息。
    };
  },
  methods: {
    toLogin() {
      this.axios//2.引入axios，才可以给服务器送账号和密码
        .post("http://www.yhjtp.com:8761/admin/login", {
          //3.post方法，实现登陆的功能接口
          account: this.account,
          pwd: this.pwd  //4.赋值
        })
        .then(function(response) {
          if (response.data.code == 200) {//5.判断是否账号密码正确
            alert("登录成功");//正确就跳出窗口：登陆成功
          } else {
            alert(response.data.errorMsg);//否则就登陆失败
          }
          console.log(response);//控制台输出内容
        });
    },
    gotRegister() {
      this.$router.push("/regist");//点击之后跳到注册界面
    }
  },
  components: {}
};
</script>

注册的完整代码：

<template>
  <div>
    <div>
      用户名:
      <input type="text" v-model="account">
      <!-- 1.v-model="account" 进行双绑 -->
    </div>
    <div>
      密码:
      <input type="text" v-model="pwd">
    </div>
    <div>
      确认密码:
      <input type="text" v-model="pwd1">
    </div>
    <div>
      <button @click="toRegister">提交注册</button>
      <!-- 2.点击调用功能 -->
    </div>
    <div>
      <button @click="toLogin">去登录</button>
    </div>
    <div>{{account}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: "",//1.定义空变量储存接收到的内容
      pwd: "",
      pwd1: ""
    };
  },
  methods: {
    toLogin() {
      this.$router.push("/Admin_login");//跳到再次登陆的页面
    },
    toRegister() {
      if (this.pwd != this.pwd1) {//2.判断2次密码是否一致
        alert("两次输入的密码不一样哦！");
      }
      //3.引入axios功能
      this.axios
        .post("http://www.yhjtp.com:8761/admin/register", {//4.调用注册的接口
          account: this.account,
          pwd: this.pwd
        })
        .then(function(response) {
          if (response.data.code == 200) {//5.判断是否注册成功
            alert(response.data.data);
          } else {
            alert(response.data.errorMsg);
          }
          console.log(response);
        });
    }
  },

  components: {}
};
</script>

<style>
</style>

路由的配置代码

import Test from "../components/Test"     //import 定义名 form "路径"
// 网址名字Test 访问 Test这个文件内容，均可自定义
import regist  from "../pages/admin/regist"
import login   from "../pages/admin/login"
// import login 和下面component: login要一致。 


const routes = [
   { path: "/regist", component: regist},
   { path: "/login", component: login},
]
export default routes;