168 lines
4.0 KiB
Vue
168 lines
4.0 KiB
Vue
<template>
|
|
<el-row class="loginPage">
|
|
<!-- element-plus login form -->
|
|
<el-form
|
|
ref="form"
|
|
size="large"
|
|
autocomplete="false"
|
|
:model="loginData"
|
|
:rules="rules"
|
|
v-if="isLogin === true"
|
|
>
|
|
<el-form-item>
|
|
<h1>登录</h1>
|
|
</el-form-item>
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
placeholder="请输入用户名或邮箱"
|
|
v-model="loginData.username"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
placeholder="请输入密码"
|
|
type="password"
|
|
v-model="loginData.password"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
class="button"
|
|
type="primary"
|
|
auto-insert-space
|
|
@click="login"
|
|
>登录</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item class="flex">
|
|
<el-link @click="isLogin = false"> 注册 </el-link>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- element-plus register form -->
|
|
<el-form
|
|
ref="form"
|
|
size="large"
|
|
autocomplete="false"
|
|
:model="registerData"
|
|
:rules="rules"
|
|
v-if="isLogin === false"
|
|
>
|
|
<el-form-item>
|
|
<h1>注册</h1>
|
|
</el-form-item>
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
placeholder="请输入用户名"
|
|
v-model="registerData.username"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="email">
|
|
<el-input
|
|
placeholder="请输入邮箱"
|
|
v-model="registerData.email"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
placeholder="请输入密码"
|
|
type="password"
|
|
v-model="registerData.password"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
placeholder="请再次输入密码"
|
|
type="password"
|
|
v-model="registerData.repassword"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" auto-insert-space>注册</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="flex">
|
|
<el-link @click="isLogin = true"> 返回 </el-link>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import axios from "axios";
|
|
import { loginService, registerService } from "@/api/user.js";
|
|
import token from "@/utils//global.js";
|
|
import router from "@/router/index.js";
|
|
const isLogin = ref(true);
|
|
|
|
|
|
const loginData = ref({
|
|
username: "",
|
|
email: "lijun.lj@foxmail.com",
|
|
password: "",
|
|
});
|
|
const registerData = ref({
|
|
username: "",
|
|
email: "",
|
|
password: "",
|
|
repassword: "",
|
|
});
|
|
|
|
//表单校验规则
|
|
const rules = {
|
|
password: [
|
|
{ required: true, message: "请输入密码", trigger: "blur" },
|
|
{
|
|
min: 6,
|
|
max: 20,
|
|
message: "密码长度在 6 到 20 个字符",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
username: [
|
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
|
{
|
|
min: 5,
|
|
max: 20,
|
|
message: "用户名长度在 6 到 20 个字符",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
email: [{}],
|
|
};
|
|
|
|
//登录接口调用
|
|
const login = async () => {
|
|
// let req = axios.create({
|
|
// baseURL: "/api",
|
|
// timeout: 5000,
|
|
// });
|
|
// await req
|
|
// .post("/user/login", {
|
|
// email: loginData.value.username,
|
|
// password: loginData.value.password,
|
|
// })
|
|
// .then((response) => {
|
|
// alert(response.data.message);
|
|
// resp = response.data;
|
|
// jwt = resp.data;
|
|
// console.log(jwt);
|
|
// })
|
|
// .catch((error) => {
|
|
// console.error(error);
|
|
// });
|
|
let result = await loginService(loginData.value);
|
|
alert(result.message);
|
|
token.value= result.data;
|
|
router.push("/videoList", {token:result.data});
|
|
};
|
|
const register = async () => {
|
|
let result = registerService(registerData.value);
|
|
if (result.code === 0) {
|
|
alert(result.message);
|
|
} else {
|
|
alert(result.message);
|
|
}
|
|
};
|
|
</script>
|