yb课堂 注册-登陆-个人模块 《三十九》
Cube-UI的form表单
https://didi.github.io/cube-ui/#/zh-CN/docs/form
注册
Register.vue
<template> <div class="main"> <cube-form :model="model" @submit="submitHandler"> <cube-form-group> <!--名称--> <cube-form-item :field="fields[0]"></cube-form-item> <!--⼿机号--> <cube-form-item :field="fields[1]"></cube-form-item> <!--密码--> <cube-form-item :field="fields[2]"></cube-form-item> </cube-form-group> <cube-form-group> <cube-button type="submit">注册</cube-button> </cube-form-group> </cube-form> <router-link to="/login" class="reg">登录</router-link> </div> </template> <script> import { registerApi } from "@/api/getData.js"; export default { //注册接口引入 data() { return { model: { phoneValue: "", pwdValue: "", nameValue: "" }, fields: [ { type: "input", modelKey: "phoneValue", label: "手机号", props: { placeholeder: "请输入手机" }, rules: { required: true }, messages: { required: "手机号不能为空" } }, { type: "input", modelKey: "pwdValue", label: "密码", props: { placeholeder: "请输入密码", type: "password", eye: { open: false } }, rules: { required: true }, messages: { required: "密码不能为空" } }, { type: "input", modelKey: "nameValue", label: "姓名", props: { placeholeder: "请输入姓名" }, rules: { required: true }, messages: { required: "姓名不能为空" } } ] }; }, methods: { submitHandler(e, model) { e.preventDefault(); //调用注册业务 registerApi(model.nameValue, model.phoneValue, model.pwdValue).then( res => { if (res.data.code === 0) { const toast = this.$createToast({ txt: "注册成功", type: "correct", time: 1500 }); toast.show(); } } ); } } }; </script> <style lang="scss" scoped> .main { padding: 50px 5% 0; text-align: center; } //注册 .cube-btn { margin-top: 20px; } // 登录 .reg { display: inline-block; margin-top: 30px; font-size: 18px; } </style>
登陆
Login.vue
<template> <div class="main"> <cube-form :model="model" @submit="submitHandler"> <cube-form-group> <!--⼿机号--> <cube-form-item :field="fields[0]"></cube-form-item> <!--密码--> <cube-form-item :field="fields[1]"></cube-form-item> </cube-form-group> <cube-form-group> <cube-button type="submit">登陆</cube-button> </cube-form-group> </cube-form> <router-link to="/register" class="reg">注册</router-link> </div> </template> <script> import { loginApi } from "@/api/getData.js"; export default { //注册接口引入 data() { return { model: { phoneValue: "", pwdValue: "", }, fields: [ { type: "input", modelKey: "phoneValue", label: "手机号", props: { placeholeder: "请输入手机" }, rules: { required: true }, messages: { required: "手机号不能为空" } }, { type: "input", modelKey: "pwdValue", label: "密码", props: { placeholeder: "请输入密码", type: "password", eye: { open: false } }, rules: { required: true }, messages: { required: "密码不能为空" } } ] }; }, methods: { submitHandler(e, model) { e.preventDefault(); //调用注册业务 loginApi(model.phoneValue, model.pwdValue).then( res => { if (res.data.code === 0) { //登陆成功,跳转到个人中心 //将token存储起来 localStorage.setItem('token',res.data.data) this.$store.dispatch('setToken', res.data.data) //跳转页面 this.$router.push({ path: '/'}) }else{ const toast = this.$createToast({ txt: "登陆失败", type: "error", time: 1500 }); toast.show(); } } ); } } }; </script> <style lang="scss" scoped> .main { padding: 50px 5% 0; text-align: center; } // 登录 .cube-btn { margin-top: 20px; } //注册 .reg { display: inline-block; margin-top: 30px; font-size: 18px; } </style>