一.登陆界面流程:
(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;