基础是链接Api,链接完Api之后开始拉拽Element组件,之后进行Vue的登录
<template> <div class="page"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="账号" prop="account"> <el-input type="text" v-model="account" autocomplete="open" style="width:250px"></el-input> </el-form-item> <el-form-item label="确认密码" prop="pwd"> <el-input type="password" v-model="pwd" autocomplete="open" style="width:250px"></el-input> </el-form-item> <el-form-item> <el-button type="success" @click="Login">提交</el-button> <el-button type="info" @click="Loca">注册</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { account: "", pwd: "", }; }, methods: { Login() { this.$axios .get("http://localhost:57265/api/login", { params: { account: this.account, pwd: this.pwd, }, }) .then((res) => { if (res.data > 0) { this.$message({ message: "登录成功", type: "success" }); this.$router.push(‘/Index‘); } else { this.$message.error("登录失败,账号或密码错误"); } }); }, Loca(){ this.$router.push(‘/register‘); } }, created() {}, }; </script> <style> </style>
登录之后是注册,点击注册按钮跳转至注册页面进行注册
<template> <div class="page"> <el-tabs v-model="activeName" type="card"> <el-tab-pane label="登录" name="login" @onchange=‘Loca‘> <login></login> </el-tab-pane> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="账号" prop="ruleForm"> <el-input type="text" v-model="ruleForm.Uaccount" autocomplete="off" style="width: 250px" ></el-input> </el-form-item> <el-form-item label="密码" prop="UpassWord"> <el-input type="password" v-model="ruleForm.UpassWord" autocomplete="off" style="width: 250px" ></el-input> </el-form-item> <el-form-item label="简介" prop="Uintro"> <el-input type="textarea" v-model="ruleForm.Uintro" autocomplete="off" style="width: 250px" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="Add">提交</el-button> <el-button @click=‘Loca‘>返回</el-button> </el-form-item> </el-form> </el-tabs> </div> </template> <script> export default { data() { return { ruleForm: { Uaccount: "", UpassWord: "", Uintro: "", }, }; }, methods: { Add() { this.$axios .post("http://localhost:57265/api/reg", this.ruleForm) .then((res) => { if (res.data > 0) { this.$message({ message: "注册成功", type: "success", }); this.$router.push("/"); } else { this.$message.error("注册失败"); } }); }, Loca(){ this.$router.push(‘/‘) }, Locad(){ this.$router.push(‘/index‘) } }, created() {}, }; </script>
完成任务