<ul id="24kqg"></ul>

H5頁面結合vue實現登錄注冊組件

ygyooo 發布于2019-08-23 14:02 / 655人閱讀

摘要：介紹結合框架作手機頁面的登錄注冊組件登錄注冊相關知識點和的作用個人理解，如果不到位，懇請指出我的電腦通過請求登錄某一個網頁，登錄成功之后，服務器會返回一個給我的電腦。

介紹

 結合`vue`框架作手機H5頁面的登錄注冊組件

登錄注冊相關知識點

1.cookie和token的作用（個人理解，如果不到位，懇請指出）

token：
我的電腦通過http請求登錄某一個網頁，登錄成功之后，服務器會返回一個token給我的電腦。
然后我只要把這個token保存下來,等下一次用我的電腦請求同一個頁面時，服務器會自動驗證我的token。
它會用它自己才知道的密鑰解析這個token是不是它上一次發送給我電腦的。
如果解析之后數據一致，那么我就可以不用登錄直接訪問頁面，如果不一致，則會認證不通過。

cookie：登錄之后，服務器也會返回一個cookie給我的瀏覽器。
cookie的作用是可以保存在本地。所以這里我是用請求到的token保存在cookie里面。
就可以做到下次免登錄就可以訪問頁面了。

2.登錄注冊與cookie、token的聯系

第一次登錄注冊------->服務器返回token、cookie----->不保存token，關閉瀏覽器---->下一次登錄需要輸入賬號密碼

第一次登錄注冊------->服務器返回token、cookie----->把token保存在cookie里面，使其token保存在本機上----->關閉瀏覽器---->下一次登錄不需要賬號密碼就可以訪問該頁面

3.獲取cookie、設置cookie、刪除cookie

1）把這個三個方法放在公共的js文件中，需要用到時調用

4.代碼實現

1）.用v-model雙向綁定數據

點擊下一步的時候，用正則判斷用戶名和手機號是否是滿足要求，滿足要求則可以點擊下一步

同樣，也是用v-model雙向綁定數據

2）.我把ajax請求放在api文件里面，在組件需要用到的時候，再調用這個函數

3）.在登錄注冊組件調用這個函數

引進請求后臺接口的函數，以及設置cookie的函數

import { getCodeNum, getRegister } from "api/register.js"
import { setCookie } from "common/js/cookie.js"

4）.在路由進入之前判斷有沒有token，是為了請求用戶信息的接口，可以獲取注冊成功之后的頭像以及用戶名

5）.退出登錄，清除cookie

GPU云服務器云服務器 vue組件 js注冊登錄頁面 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99974.html

微信小程序開發中的二三事之網易云信IMSDK DEMO

摘要：傳統的網頁編程采用的三劍客來實現，在微信小程序中同樣有三劍客。觀察者模式不難實現，重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統的事件傳遞類型有冒泡型與捕獲型，微信小程序中自然也有。本文由作者鄒永勝授權網易云社區發布。簡介為了更好的展示我們即時通訊SDK強悍的能力，網易云信IM SDK微信小程序DEMO的開發就提上了日程。用產品的話說就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
vue學習筆記3

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。Vue.js - Day3 定義Vue組件什么是組件：組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調用對應的組件即可；組件化和模塊化的不同：模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0