vue項目實現(xiàn)登陸注冊效果
更新時間:2021年09月26日 08:49:45 作者:段嘉許..!
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)登陸注冊效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue項目實現(xiàn)登陸注冊效果的具體代碼,供大家參考,具體內容如下
主要內容
本章目標:vue+element-ui完成注冊以及登陸
1.效果展示
2.視圖頁面:views
注冊頁面效果實現(xiàn):
<template> <div class="login-section"> <!-- :rules="rules" --> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref='ruleForm'> <el-form-item label="用戶名" prop="name"> <el-input type="text" v-model="rulesForm.name"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input type="password" v-model="rulesForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button>重置</el-button> </el-form-item> </el-form> </div> </template> <script> import {login} from '@/service/api'; export default { data() { return { rulesForm:{ name:'', password:'' }, rules:{ name:[ {required:true,message:'名字沒寫',trigger:'blur'}, {min:1,max:5,message:'長度在3到5位'} ], password:[ {required:true,message:'名字沒寫',trigger:'blur'}, {min:3,max:5,message:'長度在3到5位'} ] } }; }, methods: { submitForm(formName){ this.$refs[formName].validate((valid)=>{ if(valid){//如果校檢通過向后端發(fā)送用戶名 密碼 login({ name:this.rulesForm.name, password:this.rulesForm.password }).then((data)=>{ console.log(data) if(data.code===0){ localStorage.setItem('token',data.data.token) window.location.href='/' } if(data.code===1){ this.$message.error(data.mes) } }) }else{ console.log('error submit!!'); return false; } }) } } } </script> <style lang="stylus"> .login-section padding 0px 20px </style>
login.vue
<template> <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref='ruleForm'> <el-form-item label="用戶名" prop="name"> <el-input type="text" v-model="rulesForm.name"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input type="password" v-model="rulesForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button>重置</el-button> </el-form-item> </el-form> </div> </template> <script> import {login} from '@/service/api'; export default { data() { return { rulesForm:{ name:'', password:'' }, rules:{ name:[ {required:true,message:'名字沒寫',trigger:'blur'}, {min:1,max:5,message:'長度在3到5位'} ], password:[ {required:true,message:'名字沒寫',trigger:'blur'}, {min:3,max:5,message:'長度在3到5位'} ] } }; }, methods: { submitForm(formName){ this.$refs[formName].validate((valid)=>{ if(valid){//如果校檢通過向后端發(fā)送用戶名 密碼 login({ name:this.rulesForm.name, password:this.rulesForm.password }).then((data)=>{ console.log(data) if(data.code===0){ localStorage.setItem('token',data.data.token) window.location.href='/' } if(data.code===1){ this.$message.error(data.mes) } }) }else{ console.log('error submit!!'); return false; } }) } } } </script> <style lang="stylus"> .login-section padding 0px 20px </style>
路由:index.js
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Store from '@/store' import {userInfo} from '@/service/api.js' import Home from '@/views/home/Home.vue' import Login from '@/views/user-login/index.vue' const router = new Router({ mode:"history", routes:[ { path:'/', name:"Home", title:"首頁", component:Home }, { path:'/login', name:"login", title:"登錄頁", component:Login, meta:{ login:true } } ] }); router.beforeEach( async (to,from,next) => { const token = localStorage.getItem('token'); const isLogin = !!token; //進入路由的時候,需要向后端發(fā)送token,驗證是否合法 const data = await userInfo(); Store.commit('chageUserInfo',data.data) if(to.matched.some(item => item.meta.login)){//需要登錄 if(isLogin){//已經(jīng)登錄的,直接通過 if(data.error === 400){//后端告訴你,登錄不成功 next({name:'login'}); localStorage.removeItem('token'); return; } if(to.name === 'login'){ next({name:'home'}); }else{ next(); } return; } if(!isLogin && to.name === 'login'){//未登錄,但是要去登錄頁 next(); } if(!isLogin && to.name !== 'login'){//未登錄,去的也不是登錄頁 next({name:'login'}); } }else{ next(); } }) export default router;
總結
今天的內容就先到這里,因為還有一些沒完善所以不是很好,后面再繼續(xù)改進!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue 修改 data 數(shù)據(jù)問題并實時顯示的方法
今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問題并實時顯示的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08python虛擬環(huán)境 virtualenv的簡單使用
virtualenv是一個創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡單使用,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01Vue中對watch的理解(關鍵是immediate和deep屬性)
watch偵聽器,是Vue實例的一個屬性,是用來響應數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,這篇文章主要介紹了Vue中對watch的理解,需要的朋友可以參考下2022-11-11