登錄功能

項(xiàng)目GitHub地址：https://github.com/q2419068625/xianyun

新建登錄注冊(cè)頁(yè)的布局

新建了登錄的表單

綁定了數(shù)據(jù)到data

rules表單的驗(yàn)證

提交數(shù)據(jù)到接口

把數(shù)據(jù)保存到store

在store新建了user.js用于保存用戶的信息數(shù)據(jù)

在登錄成功之后調(diào)用user.js的設(shè)置用戶信息的方法

把用戶數(shù)據(jù)渲染到header.vue

// 用戶管理 export const state = () => ({// 采用接口返回的數(shù)據(jù)結(jié)構(gòu)userInfo: {token: "",user: {},}, }) export const mutations = {};export const actions = {};

保存store到本地

現(xiàn)在用戶已經(jīng)保存到store了，但是還有一個(gè)問題，數(shù)據(jù)是保存在緩存中的，如果頁(yè)面一刷新，那么數(shù)據(jù)就會(huì)不見了，這樣是不合理的。

所以我們需要使用localStorage把數(shù)據(jù)保存到本地，但是由于nuxtjs是運(yùn)行在服務(wù)器的，不能直接在store中使用瀏覽器的方法，所以我們需要依賴一些判斷和插件。

思路

保存用戶信息到本地

實(shí)現(xiàn)步驟

保存用戶信息到本地

nuxtjs中store不能直接在瀏覽器的lcoalStorage方法，所以我們需要依賴一個(gè)插件vuex-persistedstate，該插件會(huì)把本地存儲(chǔ)的數(shù)據(jù)讀取到store。

插件地址：https://github.com/robinvdvleuten/vuex-persistedstate

1.安裝插件

npm install --save vuex-persistedstate

在根目錄plugins中新建文件localStorage.js，加入以下代碼

import createPersistedState from 'vuex-persistedstate'export default ({store}) => {window.onNuxtReady(() => {createPersistedState({key: "store", // 讀取本地存儲(chǔ)的數(shù)據(jù)到store})(store)}) }

導(dǎo)入插件

修改nuxt.config.js配置文件，在plugins配置項(xiàng)中新增一條數(shù)據(jù)

// 其他代碼...plugins: [// 其他代碼...{ src: '@/plugins/localStorage', ssr: false } ],// 其他代碼...

修改完后重新啟動(dòng)項(xiàng)目即可。

退出

在user.js的mutations下新建刪除本地?cái)?shù)據(jù)的方法

點(diǎn)擊退出按鈕時(shí)候調(diào)用

export const mutations = {//設(shè)置用戶數(shù)據(jù)setUserInfo(state,data){state.userInfo = data},//清空用戶數(shù)據(jù)clearUserInfo(state){state.userInfo = {token:'',user:{}}} }

注冊(cè)功能

在components/user中新建register.vue表單組件

使用Element-ui的表單組件

表單數(shù)據(jù)綁定

表單驗(yàn)證

發(fā)送手機(jī)驗(yàn)證碼

注冊(cè)接口

注冊(cè)接口

// 注冊(cè) handleRegSubmit(){this.$refs['form'].validate((valid) => {if (valid) {// 注冊(cè)提交const {checkPassword, ...props} = this.regForm;this.$axios({url: `/accounts/register`,method: "POST",data: props}).then(res => {console.log(res.data);})} }); },

總結(jié)

以上是生活随笔為你收集整理的闲云旅游网03（基于vue+element ui）登录注册功能开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。