文章目錄
- 系列文章目錄
- 一、背景
- 二、實作登入功能
- 2.1 添加登入狀态的狀态管理器
- 2.2 編寫登入表單
- 2.3 動圖示範
- 三、添加新的注冊頁面
- 四、效果示範
- 五、源碼位址
一、背景
- 在上一篇文章中,我們加入了使用者浏覽新聞曆史的功能,本篇文章我們再來模拟使用者的注冊與登入。
二、實作登入功能
- 我們把原來的我的頁面進行改造,加入一個是否登入狀态,如果狀态為已登入,則顯示浏覽曆史、收藏等資訊,如果狀态為未登入,則顯示登入頁面。
- 注意,本文僅模拟登入的功能,沒有進行背景驗證(後續将提供完整的前後端功能)
2.1 添加登入狀态的狀态管理器
- 為了記錄該登入狀态,我們需要在狀态管理器源碼中,加入登入狀态的管理
const my = {
state: {
...
// 是否已登入
logined: false
},
mutations: {
...
SET_LOGIN: (state,) => {
state.logined = login
}
},
actions: {
...
setLogin({ commit },) {
return new Promise(resolve => {
commit('SET_LOGIN', login)
})
}
}
}
export default
2.2 編寫登入表單
- 以下是改造後完整源碼
<template>
<!-- 已登入狀态顯示我的資訊 -->
<div v-if="logined == true" class="content">
<div class="header">
<div class="user">
<img class="avatar" src="@/assets/images/avatar.png">
<p class="user-name">{{ loginForm.username }}</p>
<img class="right" src="@/assets/images/right.png">
</div>
<div class="info">
<div class="histroy" @click="toHistroy()">
<span class="histroy-count">{{ histroryCount }}</span>
<span class="histroy-text">{{ '浏覽曆史' }}</span>
</div>
<div class="fav">
<span class="fav-count">{{ favCount }}</span>
<span class="fav-text">{{ '我的收藏' }}</span>
</div>
</div>
</div>
<div class="logout">
<el-button
size="medium"
type="danger"
style="width:"
@click.native.prevent="logout"
>
<span>退 出 登 錄</span>
</el-button>
</div>
</div>
<!-- 未登入狀态顯示登入頁面 -->
<div v-else>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-position="left"
label-width="0px"
class="login-form"
>
<h2 class="title">歡迎使用</h2>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="賬号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密碼"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item style="width:">
<el-button
:loading="loading"
size="medium"
type="danger"
style="width:"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 錄</span>
<span v-else>登 錄 中...</span>
</el-button>
</el-form-item>
<p class="register">
<!-- <span class="memo">請使用Chrome,Firefox,IE 10+ </span> -->
還沒有帳号?
<a href="/register" type="primary">立即注冊</a>
</p>
</el-form>
</div>
</template>
<script>export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, trigger: 'blur', message: '使用者名不能為空' }
],
password: [
{ required: true, trigger: 'blur', message: '密碼不能為空' }
]
},
loading: false
}
},
computed: {
histroryCount() {
return this.$store.state.my.histroy.length
},
favCount() {
return this.$store.state.my.favourite.length
},
// 從狀态管理器中擷取登入狀态
logined() {
return this.$store.state.my.logined
}
},
methods: {
// 模拟登入成功
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
this.$store.commit('SET_LOGIN', true)
this.loading = false
} else {
console.log('error submit!!')
return false
}
})
},
// 模拟登出登入
logout() {
this.$store.commit('SET_LOGIN', false)
this.loginForm.username = ''
this.loginForm.password = ''
},
toHistroy() {
if (this.histroryCount > 0) {
this.$router.push('/list')
}
}
}
}</script>
<style lang="scss" scoped>.login-form {
border-radius: 6px;
background: #ffffff;
width: 100%;
padding: 25px 25px 5px 25px;
margin-top: 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
}
.register {
float: right;
font-size: 13px;
// color: rgb(24, 144, 255);
}
a {
color: #e72521;
text-decoration: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: color 0.3s;
}
a:hover {
color: #e72521;
}
.content {
width: 100%;
height: 100%;
background-color: rgb(252, 248, 248);
}
.header {
width: 100%;
height: 5.33rem;
background-color: #fff;
}
.user {
margin-top: 0.5rem;
overflow: hidden;
padding: 0.5rem;
height: 2.5rem;
width: 100%;
}
.avatar {
float: left;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
}
.user-name {
float: left;
margin-top: 0.6rem;
margin-left: 0.5rem;
color: #404040;
font-size: 18px;
}
.right {
float: right;
width: 0.8rem;
height: 0.8rem;
margin-top: 0.6rem;
}
.info {
float: left;
padding: 1rem;
height: 2.5rem;
width: 100%;
}
.histroy {
display: flex;
float: left;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.histroy-count {
color: #404040;
font-size: 18px;
}
.histroy-text {
margin-top: 0.1rem;
color: #9b9191;
font-size: 14px;
}
.fav {
display: flex;
float: right;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.fav-count {
color: #404040;
font-size: 18px;
}
.fav-text {
margin-top: 0.1rem;
color: #9b9191;
font-size: 14px;
}
.logout {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}</style>
2.3 動圖示範
三、添加新的注冊頁面
1、使用者在登入前,需要向系統進行注冊。
2、注冊時輸入使用者名,密碼(密碼需兩次輸入一緻)
3、本文隻實作模拟注冊(後續将提供完整的前後端功能)
- 完整的注冊頁面源碼:
<template>
<div>
<el-form
ref="signupForm"
:model="signupForm"
:rules="signupRules"
label-position="left"
label-width="0px"
class="login-form"
>
<h2 class="title">歡迎注冊</h2>
<el-form-item prop="username">
<el-input
v-model="signupForm.username"
type="text"
auto-complete="off"
placeholder="賬号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="signupForm.password"
type="password"
auto-complete="off"
placeholder="密碼"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password2">
<el-input
v-model="signupForm.password2"
type="password"
auto-complete="off"
placeholder="确認密碼"
@keyup.enter.native="handleSignup"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item style="width:">
<el-button
:loading="loading"
size="medium"
type="danger"
style="width:"
@click.native.prevent="handleSignup"
>
<span v-if="!loading">注 冊</span>
<span v-else>注 冊 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>export default {
data() {
// 二次密碼輸入校驗
var checkpass = (rule, value,) => {
console.log(value)
if (value === '') {
callback(new Error('請再次輸入密碼'))
} else if (value !== this.signupForm.password) {
callback(new Error('兩次輸入密碼不一緻'))
} else {
callback()
}
}
return {
signupForm: {
username: '',
password: '',
password2: ''
},
signupRules: {
username: [
{ required: true, trigger: 'blur', message: '使用者名不能為空' }
],
password: [
{ required: true, trigger: 'blur', message: '密碼不能為空' }
],
password2: [
{ trigger: 'blur', validator: checkpass }
]
},
loading: false
}
},
methods: {
// 模拟注冊成功
handleSignup() {
this.$refs.signupForm.validate((valid) => {
if (valid) {
this.loading = true
this.$store.commit('SET_LOGIN', true)
this.loading = false
this.$router.push('/my')
} else {
console.log('error signup!!')
return false
}
})
}
}
}</script>
<style lang="scss" scoped>.login-form {
border-radius: 6px;
background: #ffffff;
width: 100%;
padding: 25px 25px 5px 25px;
margin-top: 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
}</style>
四、效果示範
五、源碼位址
- 請關注文末的微信公衆号,回複“新聞用戶端”。