Vue3+Vant實(shí)現(xiàn)簡單的登錄功能

更新時間：2024年04月16日 09:58:05 作者：程序員老茶

這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vant實(shí)現(xiàn)簡單的登錄功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

內(nèi)容/作用
學(xué)習(xí)
1、創(chuàng)建登錄路由
2、實(shí)現(xiàn)登錄布局結(jié)構(gòu)
3、登錄布局實(shí)現(xiàn)
4、實(shí)現(xiàn)基本登錄功能
5、登錄狀態(tài)提示
6、表單驗(yàn)證功能
7、處理用戶Token
8、封裝本地存儲操作

內(nèi)容/作用

知識點(diǎn)/設(shè)計(jì)/實(shí)驗(yàn)/作業(yè)/練習(xí)

學(xué)習(xí)

Vue3+Vant開發(fā)：登錄功能

1、創(chuàng)建登錄路由

npm install vue-router@4

以上安裝了最新版本的vue-router.

下面在src目錄下面創(chuàng)建router目錄，在該目錄下面創(chuàng)建index.js文件，在該文件中完成路由的配置。

index.js文件中代碼如下所示：()

在下面的代碼中，首先從vue-router中導(dǎo)入createRouter以及createWebHashHistory.

createRouter用來創(chuàng)建路由實(shí)例

createWebHashHistory創(chuàng)建hash路由

Layout組件用來完成整個后臺管理頁面的布局。

在routes數(shù)組中，定義了相應(yīng)的路由規(guī)則

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/index.vue"),
  },
];
//創(chuàng)建路由實(shí)例
const router = createRouter({
  //history模式：createWebHistory
  history: createWebHashHistory(), //使用hash模式
  routes,
});
export default router;

下面在src目錄下面創(chuàng)建views目錄，在該目錄下面創(chuàng)建login目錄，然后在創(chuàng)建index.vue.

該組件中的內(nèi)容如下所示：

<template>
  <div>登錄</div>
</template>

<script>
export default {};
</script>

<style></style>

下面，返回到main.js文件中使用創(chuàng)建好的路由對象

import { createApp } from "vue";
import App from "./App.vue";
import Vant from "vant";
import "vant/lib/index.css";
import "amfe-flexible";
import router from "./router"; //導(dǎo)入路由對象
createApp(App).use(Vant).use(router).mount("#app"); //使用路由

同時在App.vue文件中，添加router-view,指定路由的出口。

<template>
  <router-view></router-view>
</template>

<script setup></script>

<style></style>

在瀏覽器中輸入http://localhost:3000/#/login查看效果。

2、實(shí)現(xiàn)登錄布局結(jié)構(gòu)

<template>
  <div class="login-container">
    <!-- 導(dǎo)航欄 -->
    <van-nav-bar title="登錄" />
    <!-- 導(dǎo)航欄結(jié)束 -->
    <!-- 登錄表單 -->
    <van-form>
      <van-field name="userName" placeholder="請輸入用戶名" />
      <van-field name="userPwd" placeholder="請輸入密碼" />
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <!-- 登錄表單結(jié)束 -->
  </div>
</template>

<script>
export default {};
</script>

<style></style>

3、登錄布局實(shí)現(xiàn)

這里我們首先設(shè)置一下，導(dǎo)航欄的樣式。由于很多頁面都會用到導(dǎo)航欄，所以可以將樣式定義在全局的文件中，而不是單獨(dú)的定義在登錄組件中。

在src目錄下面創(chuàng)建styles目錄，在該目錄下面創(chuàng)建index.css文件，該文件中的代碼如下所示：

.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title {/* 這里的van-nav-bar__title，可以查看原有的導(dǎo)航欄的樣式*/
  color: #fff;
}

在登錄組件的導(dǎo)航欄中使用該樣式。（在main.js文件中導(dǎo)入import "./styles/index.css";）

  <van-nav-bar title="登錄" class="page-nav-bar" />

下面給登錄表單的文本框與密碼框添加對應(yīng)的圖標(biāo)。

對應(yīng)的官網(wǎng)：

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/field

 <van-form>
    <van-field name="userName" placeholder="請輸入用戶名" left-icon="manager" />
      <van-field name="userPwd" placeholder="請輸入密碼"   left-icon="lock"/>
      
      </van-field>
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit"> 
          提交
        </van-button>
      </div>
    </van-form>

這里給手機(jī)號與驗(yàn)證碼添加了left-icon設(shè)置了圖標(biāo)。同時設(shè)置了“發(fā)送驗(yàn)證碼”的按鈕

4、實(shí)現(xiàn)基本登錄功能

注意：這里只是實(shí)現(xiàn)基本登錄效果，把服務(wù)端返回的內(nèi)容打印出來，不涉及到登錄狀態(tài)的提示與登錄狀態(tài)的存儲操作。

首先在src目錄下面創(chuàng)建api目錄，在該目錄下面創(chuàng)建user.js文件，該文件中封裝了用戶請求的相關(guān)處理模塊。

// 封裝用戶相關(guān)的請求模塊
import request from "../utils/request";
export const login = (data) => {
  return request({
    method: "POST",
    url: "/user/login",
    data,
  });
};

下面修改login.vue組件中的內(nèi)容

  <div class="login-container">
    <!-- 導(dǎo)航欄 -->
    <van-nav-bar title="登錄" class="page-nav-bar" />
    <!-- 導(dǎo)航欄結(jié)束 -->

    <!-- 登錄表單 -->

    <van-form @submit="onSubmit">
      <van-field
        name="userName"
        placeholder="請輸入用戶名"
        v-model="userName"
        left-icon="manager"
        :rules="userFormRules.userName"
      />
     <van-field
        name="userPwd"
        placeholder="請輸入密碼"
        v-model="userPwd"
        left-icon="lock"
        :rules="userFormRules.userPwd"
      >
      </van-field>
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">
          登錄
        </van-button>
      </div>
    </van-form>
    <!-- 登錄表單結(jié)束 -->
  </div>

給每個van-field綁定了v-model,同時給van-form添加了@submit事件。

import { reactive, toRefs } from "vue";
import { login } from "../../api/user"; //導(dǎo)入login方法，進(jìn)行請求的發(fā)送

function useSubmit(user) {
const onSubmit = async () => {
    //1、獲取表單數(shù)據(jù)
    //2、表單驗(yàn)證
    //3、提交表單請求
    Toast.loading({
      message: "登錄中...",
      forbidClick: true, //禁用背景點(diǎn)擊
      duration: 0, //持續(xù)時間，默認(rèn)是2000毫秒，如果為0則持續(xù)展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用戶登錄成功");
    } else {
      Toast.fail("用戶名或密碼錯誤");
    }

    //4、根據(jù)請求響應(yīng)結(jié)果處理后續(xù)操作。
  };
  return {
    onSubmit,
  };
}
export default {
  setup() {
   const user = reactive({
      userName: "", //用戶名
      userPwd: "", //用戶密碼
    });
  
    return {
      ...toRefs(user),
      ...useSubmit(user),
  
    };
  },
};

在setup方法中，定義user響應(yīng)式對象，最后返回。同時將外部定義的useSubmit方法進(jìn)行調(diào)用。

5、登錄狀態(tài)提示

const onSubmit = async () => {
    //1、獲取表單數(shù)據(jù)
    //2、表單驗(yàn)證
    //3、提交表單請求
    Toast.loading({
      message: "登錄中...",
      forbidClick: true, //禁用背景點(diǎn)擊
      duration: 0, //持續(xù)時間，默認(rèn)是2000毫秒，如果為0則持續(xù)展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用戶登錄成功");
    } else {
      Toast.fail("用戶名或密碼錯誤");
    }

    //4、根據(jù)請求響應(yīng)結(jié)果處理后續(xù)操作。
  };
  return {
    onSubmit,
  };
}

這里使用了Toast組件，同時需要進(jìn)行導(dǎo)入：

import { Toast } from "vant";

由于網(wǎng)絡(luò)比較快，可能看不到登錄中...這個提示，所以可以把網(wǎng)絡(luò)設(shè)置慢一些。

可以修改NetWork中的No throttling中的Slow 3G

6、表單驗(yàn)證功能

在setup函數(shù)中定義校驗(yàn)規(guī)則，并且將其返回。

setup() {
    const user = reactive({
      userName: "", //用戶名
      userPwd: "", //用戶密碼
    });
    //定義校驗(yàn)規(guī)則
   const userFormRules = {
      userName: [{ required: true, message: "請?zhí)顚懹脩裘? }],
      userPwd: [
        {
          required: true,
          message: "請?zhí)顚懨艽a",
        },
           {
          pattern: /^\d{6}$/,
          message: "密碼格式錯誤",
        },
      ],
    };
    return {
      ...toRefs(user),
      ...useSubmit(user),
      userFormRules, //返回校驗(yàn)規(guī)則
    };
  },

在表單中使用校驗(yàn)規(guī)則：

     <van-field
        name="userName"
        placeholder="請輸入用戶名"
        v-model="userName"
        left-icon="manager"
        :rules="userFormRules.userName"
      />
     <van-field
        name="userPwd"
        placeholder="請輸入密碼"
        v-model="userPwd"
        left-icon="lock"
        :rules="userFormRules.userPwd"
      >
      </van-field>

7、處理用戶Token

用戶登錄成功以后，會返回token數(shù)據(jù)。

Token是用戶登錄成功之后服務(wù)端返回的一個身份令牌，在項(xiàng)目中經(jīng)常要使用。

例如：訪問需要授權(quán)的API接口。

校驗(yàn)頁面的訪問權(quán)限等。

同時，這里我們還需要將token數(shù)據(jù)進(jìn)行存儲，這樣在訪問其它的頁面組件的時候，就可以獲取token數(shù)據(jù)來進(jìn)行校驗(yàn)。

關(guān)于token數(shù)據(jù)存儲在哪兒呢？

可以存儲到本地：

存儲到本地的問題是，數(shù)據(jù)不是響應(yīng)式的。

存儲到Vuex中，獲取方便，并且是響應(yīng)式的。但是存儲到Vuex中也是有一定的問題的，就是當(dāng)我們刷新瀏覽器的時候，數(shù)據(jù)就會丟失，所以還是需要把token數(shù)據(jù)存放到本地，存儲到本地的目的就是為了進(jìn)行持久化。

所以這里我們需要在登錄成功以后，把token數(shù)據(jù)存儲到vuex中，這樣可以實(shí)現(xiàn)響應(yīng)式，在本地存儲就是為了解決持久化的問題。

安裝最新版本的Vuex

npm install vuex@next --save

下面在src目錄下面創(chuàng)建store目錄，在store目錄中index.js文件，該文件中的代碼如下所示：

import { createStore } from "vuex";
const store = createStore({
  state: {
    //存儲當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
    user: null,
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
    },
  },
});
export default store;

在上面的代碼中，創(chuàng)建了store容器，同時指定了state對象，在該對象中定義user屬性存儲登錄用戶信息。

在mutations中定義setUser方法，完成用戶信息的更新。

下面，要實(shí)現(xiàn)的就是，當(dāng)?shù)卿洺晒σ院螅聈ser這個狀態(tài)屬性。

當(dāng)然，這里首先要做的就是把store注入到Vue的實(shí)例中。

import { createApp } from "vue";
import App from "./App.vue";
import Vant from "vant";
import "vant/lib/index.css";
import "amfe-flexible";
import "./styles/index.css";
import router from "./router";
import store from "./store"; //導(dǎo)入store
createApp(App).use(Vant).use(router).use(store).mount("#app"); //完成store的注冊操作

在main.js文件中，我們導(dǎo)入了store,并且注冊到了Vue實(shí)例中。

下面返回到views/login/index.vue頁面中，把登錄的信息存儲到store容器中。

import { reactive, toRefs, ref } from "vue";
import { login, sendSms } from "../../api/user";
import { Toast } from "vant";
import { useStore } from "vuex"; //導(dǎo)入useStore

在上面的代碼中導(dǎo)入useStore.

export default {
  setup() {
    const loginForm = ref();
    //獲取store
    const store = useStore();

在setup函數(shù)中，調(diào)用useStore方法，獲取store容器。

 return {
      ...toRefs(user),
      ...useSubmit(user, store),//在調(diào)用useSubmit方法的時候傳遞store容器
      userFormRules,
      loginForm,
    };

//用戶登錄
function useSubmit(user, store) {
  const onSubmit = async () => {
    //1、獲取表單數(shù)據(jù)
    //2、表單驗(yàn)證
    //3、提交表單請求
    Toast.loading({
      message: "登錄中...",
      forbidClick: true, //禁用背景點(diǎn)擊
      duration: 0, //持續(xù)時間，默認(rèn)是2000毫秒，如果為0則持續(xù)展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用戶登錄成功");
    } else {
      Toast.fail("用戶名或密碼錯誤");
    }

    //4、根據(jù)請求響應(yīng)結(jié)果處理后續(xù)操作。
  };
  return {
    onSubmit,
  };
}

登錄成功以后，獲取到返回的數(shù)據(jù)，同時調(diào)用store中的commit方法完成數(shù)據(jù)的保存

現(xiàn)在，我們雖然把登錄成功的數(shù)據(jù)，存儲到Vuex中，但是當(dāng)我們刷新瀏覽器的時候，Vuex中的數(shù)據(jù)還是會丟失的。所以這里，我們還需要將其存儲到本地中。

下面修改一下store/index.js文件中的代碼：

import { createStore } from "vuex";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
  state: {
    //存儲當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
    // user: null,
    user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
      window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
    },
  },
});
export default store;

在mutations中的setUser方法中，將登錄成功的用戶數(shù)據(jù)存儲到了localStorage中，在存儲的時候，將數(shù)據(jù)轉(zhuǎn)成了字符串。

同時在state中獲取數(shù)據(jù)的時候，就從localStorage中獲取，當(dāng)然獲取的時候，再將其轉(zhuǎn)換成對象的形式。

下面，我們可以在App.vue中做一下測試：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    console.log(store.state.user);
  },
};
</script>

<style></style>

通過查看瀏覽器的控制臺，可以查看到對應(yīng)的登錄用戶的token數(shù)據(jù)

8、封裝本地存儲操作

在我們的項(xiàng)目中，有很多的地方都需要獲取本地存儲的數(shù)據(jù)，如果每次都寫：

JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));

就比較麻煩了。所以這里我們建議把操作本地數(shù)據(jù)單獨(dú)的封裝到一個模塊中。

在utils目錄下面創(chuàng)建storage.js文件，該文件中的代碼如下所示：

// 存儲數(shù)據(jù)
export const setItem = (key, value) => {
  //將數(shù)組，對象類型的數(shù)據(jù)轉(zhuǎn)換為JSON格式的字符串進(jìn)行存儲
  if (typeof value === "object") {
    value = JSON.stringify(value);
  }
  window.localStorage.setItem(key, value);
};
//獲取數(shù)據(jù)
export const getItem = (key) => {
  const data = window.localStorage.getItem(key);
  //這里使用try..catch的，而不是通過if判斷一下是否為json格式的字符串，然后在通過parse進(jìn)行轉(zhuǎn)換呢，目的就是是為了方便處理，因?yàn)閷ψ址M(jìn)行判斷看一下是否為json格式的字符串，比較麻煩一些。還需要通過正則表達(dá)式來完成。而通過try..catch比較方便
  // 如果data不是一個有效的json格式字符串，JSON.parse就會出錯。
  try {
    return JSON.parse(data);
  } catch (e) {
    return data;
  }
};
//刪除數(shù)據(jù)
export const removeItem = (key) => {
  window.localStorage.removeItem(key);

下面返回到store/index.js文件中，修改對應(yīng)的代碼，這里使用我們上面封裝好的代碼。

import { createStore } from "vuex";
import { getItem, setItem } from "../utils/storage";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
  state: {
    //存儲當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
    // user: null,
    // user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
    user: getItem(TOKEN_KEY),
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
      setItem(TOKEN_KEY, state.user);
      // window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
    },
  },
});
export default store;

在上面的代碼中，我們導(dǎo)入getItem和setItem兩個方法，然后在存儲登錄用戶信息，和獲取登錄用戶信息的時候，直接使用這兩個方法，這樣就非常簡單了。

下面返回瀏覽器進(jìn)行測試。

把以前l(fā)ocalStorage中存儲的內(nèi)容刪除掉。

然后重新輸入用戶名和密碼，發(fā)現(xiàn)對應(yīng)的localStorage中存儲了對應(yīng)的數(shù)據(jù)。

以上就是Vue3+Vant實(shí)現(xiàn)簡單的登錄功能的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Vant登錄的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3+Vant實(shí)現(xiàn)簡單的登錄功能

目錄

內(nèi)容/作用

學(xué)習(xí)

1、創(chuàng)建登錄路由

2、實(shí)現(xiàn)登錄布局結(jié)構(gòu)

3、登錄布局實(shí)現(xiàn)

4、實(shí)現(xiàn)基本登錄功能

5、登錄狀態(tài)提示

6、表單驗(yàn)證功能

7、處理用戶Token

8、封裝本地存儲操作

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3+Vant實(shí)現(xiàn)簡單的登錄功能

目錄

內(nèi)容/作用

學(xué)習(xí)

1、創(chuàng)建登錄路由

2、實(shí)現(xiàn)登錄布局結(jié)構(gòu)

3、登錄布局實(shí)現(xiàn)

4、實(shí)現(xiàn)基本登錄功能

5、登錄狀態(tài)提示

6、表單驗(yàn)證功能

7、處理用戶Token

8、封裝本地存儲操作

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2、實(shí)現(xiàn)登錄布局結(jié)構(gòu)

3、登錄布局實(shí)現(xiàn)

4、實(shí)現(xiàn)基本登錄功能

5、登錄狀態(tài)提示

7、處理用戶Token