[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!'); } }) } ```