[toc] ### 1. 删除忘记密码和竖线 ### 2. 注册账户文字切换 与 登录按钮文字切换 ``` 1. 在data内定义 type : "login", 2. <a href="#" class="ml-auto small" @click="changeType"> 3. changeType(){ this.type = this.type == "login" ? "reg" : "login" }, 4. <a href="#" class="ml-auto small" @click="changeType"> {{type == "login" ? "注册账户" :"立即登录" }} </a> <Button type="primary" long @click="handleSubmit('formItem')"> {{type == "login" ? "登 录" :"注 册" }} </Button> ``` ### 3. 实现表单注册框确认密码 ``` <Form ref="formItem" :label-width="0" :model="formItem" :rules="rules"> <FormItem prop="username"> <Input v-model="formItem.username" placeholder="请输入用户名..."></Input> </FormItem> <FormItem prop="password"> <Input type="password" v-model="formItem.password" placeholder="请输入密码..."></Input> </FormItem> <FormItem prop="repassword" v-if="type === 'reg'"> <Input type="password" v-model="formItem.repassword" placeholder="请输入确认密码..."></Input> </FormItem> <div class="d-flex align-items-center mb-2"> <Checkbox v-model="formItem.remember">自动登录</Checkbox> <a href="#" class="ml-auto small" @click="changeType"> {{type == "login" ? "注册账户" :"立即登录" }} </a> </div> <FormItem> <Button type="primary" long @click="handleSubmit('formItem')"> {{type == "login" ? "登 录" :"注 册" }} </Button> </FormItem> </Form> repassword: [{ required: true, message: '请输入确认密码...', trigger: 'blur' }, { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' } ] ``` ### 4. 实现登录与注册的数据交互 ``` handleSubmit(name) { this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); let text = this.type == "login" ? "登录" : "注册" this.axios.post("/api/" + this.type,this.formItem).then(res=>{ if(this.type == "reg"){ this.$Message.success(text + "成功"); this.type = "login" }else{ //存储登录的状态 //跳转到首页 this.$router.push({name : "index"}) } }).catch(err=>{ }) } else { this.$Message.error('Fail!'); } }) } ``` ### 5. 存储登录状态 ``` import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { user : null }, mutations: {}, actions: { //存储登录状态 login({state},user){ state.user = user; window.localStorage.setItem("user",JSON.stringify(user)); window.localStorage.setItem("token",user.token); } }, modules: {} }); ``` ``` handleSubmit(name) { this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); let text = this.type == "login" ? "登录" : "注册" this.axios.post("/api/" + this.type,this.formItem).then(res=>{ if(this.type == "reg"){ this.$Message.success(text + "成功"); this.type = "login" }else{ //存储登录的状态 this.$store.dispatch("login",res) //跳转到首页 this.$router.push({name : "index"}) } }).catch(err=>{ }) } else { this.$Message.error('Fail!'); } }) } ```