Vue3+Vant开发：登录功能

已于 2024-05-23 10:16:33 修改
阅读量1.1k 收藏 19
点赞数 27
分类专栏： # Vue 前端 文章标签： vue.js javascript 前端
于 2024-04-15 21:21:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53431712/article/details/137795847
版权

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

目录

课程名：Vue 3

内容/作用：知识点/设计/实验/作业/练习

学习：Vue3+Vant开发：登录功能

1、创建登录路由

npm install vue-router@4

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

下面在src目录下面创建router目录，在该目录下面创建index.js文件，在该文件中完成路由的配置。

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

在下面的代码中，首先从vue-router中导入createRouter以及createWebHashHistory.

createRouter用来创建路由实例

createWebHashHistory创建hash路由

Layout组件用来完成整个后台管理页面的布局。

在routes数组中，定义了相应的路由规则

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

下面在src目录下面创建views目录，在该目录下面创建login目录，然后在创建index.vue.

该组件中的内容如下所示：

<template>
  <div>登录</div>
</template>

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

<style></style>

下面，返回到main.js文件中使用创建好的路由对象

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"; //导入路由对象
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、实现登录布局结构

<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" />
    <!-- 导航栏结束 -->
    <!-- 登录表单 -->
    <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>
    <!-- 登录表单结束 -->
  </div>
</template>

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

<style></style>

3、登录布局实现

这里我们首先设置一下，导航栏的样式。由于很多页面都会用到导航栏，所以可以将样式定义在全局的文件中，而不是单独的定义在登录组件中。

在src目录下面创建styles目录，在该目录下面创建index.css文件，该文件中的代码如下所示：

.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title {/* 这里的van-nav-bar__title，可以查看原有的导航栏的样式*/
  color: #fff;
}

在登录组件的导航栏中使用该样式。（在main.js文件中导入import "./styles/index.css";）

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

下面给登录表单的文本框与密码框添加对应的图标。

对应的官网：

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>

这里给手机号与验证码添加了left-icon设置了图标。同时设置了“发送验证码”的按钮

4、实现基本登录功能

注意：这里只是实现基本登录效果，把服务端返回的内容打印出来，不涉及到登录状态的提示与登录状态的存储操作。

首先在src目录下面创建api目录，在该目录下面创建user.js文件，该文件中封装了用户请求的相关处理模块。

// 封装用户相关的请求模块
import request from "../utils/request";
export const login = (data) => {
  return request({
    method: "POST",
    url: "/user/login",
    data,
  });
};

下面修改login.vue组件中的内容

  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" class="page-nav-bar" />
    <!-- 导航栏结束 -->

    <!-- 登录表单 -->

    <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>
    <!-- 登录表单结束 -->
  </div>

给每个van-field绑定了v-model,同时给van-form添加了@submit事件。

<script>
import { reactive, toRefs } from "vue";
import { login } from "../../api/user"; //导入login方法，进行请求的发送

function useSubmit(user) {
const onSubmit = async () => {
    //1、获取表单数据
    //2、表单验证
    //3、提交表单请求
    Toast.loading({
      message: "登录中...",
      forbidClick: true, //禁用背景点击
      duration: 0, //持续时间，默认是2000毫秒，如果为0则持续展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用户登录成功");
    } else {
      Toast.fail("用户名或密码错误");
    }

    //4、根据请求响应结果处理后续操作。
  };
  return {
    onSubmit,
  };
}
export default {
  setup() {
   const user = reactive({
      userName: "", //用户名
      userPwd: "", //用户密码
    });
  
    return {
      ...toRefs(user),
      ...useSubmit(user),
  
    };
  },
};
</script>

在setup方法中，定义user响应式对象，最后返回。同时将外部定义的useSubmit方法进行调用。

5、登录状态提示

const onSubmit = async () => {
    //1、获取表单数据
    //2、表单验证
    //3、提交表单请求
    Toast.loading({
      message: "登录中...",
      forbidClick: true, //禁用背景点击
      duration: 0, //持续时间，默认是2000毫秒，如果为0则持续展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用户登录成功");
    } else {
      Toast.fail("用户名或密码错误");
    }

    //4、根据请求响应结果处理后续操作。
  };
  return {
    onSubmit,
  };
}

这里使用了Toast组件，同时需要进行导入：

import { Toast } from "vant";

由于网络比较快，可能看不到登录中...这个提示，所以可以把网络设置慢一些。

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

6、表单验证功能

在setup函数中定义校验规则，并且将其返回。

setup() {
    const user = reactive({
      userName: "", //用户名
      userPwd: "", //用户密码
    });
    //定义校验规则
   const userFormRules = {
      userName: [{ required: true, message: "请填写用户名" }],
      userPwd: [
        {
          required: true,
          message: "请填写密码",
        },
           {
          pattern: /^\d{6}$/,
          message: "密码格式错误",
        },
      ],
    };
    return {
      ...toRefs(user),
      ...useSubmit(user),
      userFormRules, //返回校验规则
    };
  },

在表单中使用校验规则：

     <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数据。

Token是用户登录成功之后服务端返回的一个身份令牌，在项目中经常要使用。

例如：访问需要授权的API接口。

校验页面的访问权限等。

同时，这里我们还需要将token数据进行存储，这样在访问其它的页面组件的时候，就可以获取token数据来进行校验。

关于token数据存储在哪儿呢？

可以存储到本地：

存储到本地的问题是，数据不是响应式的。

存储到Vuex中，获取方便，并且是响应式的。但是存储到Vuex中也是有一定的问题的，就是当我们刷新浏览器的时候，数据就会丢失，所以还是需要把token数据存放到本地，存储到本地的目的就是为了进行持久化。

所以这里我们需要在登录成功以后，把token数据存储到vuex中，这样可以实现响应式，在本地存储就是为了解决持久化的问题。

安装最新版本的Vuex

npm install vuex@next --save

下面在src目录下面创建store目录，在store目录中index.js文件，该文件中的代码如下所示：

import { createStore } from "vuex";
const store = createStore({
  state: {
    //存储当前登录用户信息，包含token等数据
    user: null,
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
    },
  },
});
export default store;

在上面的代码中，创建了store容器，同时指定了state对象，在该对象中定义user属性存储登录用户信息。

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

下面，要实现的就是，当登录成功以后，更新user这个状态属性。

当然，这里首先要做的就是把store注入到Vue的实例中。

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"; //导入store
createApp(App).use(Vant).use(router).use(store).mount("#app"); //完成store的注册操作

在main.js文件中，我们导入了store,并且注册到了Vue实例中。

下面返回到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"; //导入useStore

在上面的代码中导入useStore.

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

在setup函数中，调用useStore方法，获取store容器。

 return {
      ...toRefs(user),
      ...useSubmit(user, store),//在调用useSubmit方法的时候传递store容器
      userFormRules,
      loginForm,
    };

//用户登录
function useSubmit(user, store) {
  const onSubmit = async () => {
    //1、获取表单数据
    //2、表单验证
    //3、提交表单请求
    Toast.loading({
      message: "登录中...",
      forbidClick: true, //禁用背景点击
      duration: 0, //持续时间，默认是2000毫秒，如果为0则持续展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用户登录成功");
    } else {
      Toast.fail("用户名或密码错误");
    }

    //4、根据请求响应结果处理后续操作。
  };
  return {
    onSubmit,
  };
}

登录成功以后，获取到返回的数据，同时调用store中的commit方法完成数据的保存

现在，我们虽然把登录成功的数据，存储到Vuex中，但是当我们刷新浏览器的时候，Vuex中的数据还是会丢失的。所以这里，我们还需要将其存储到本地中。

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

import { createStore } from "vuex";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
  state: {
    //存储当前登录用户信息，包含token等数据
    // 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方法中，将登录成功的用户数据存储到了localStorage中，在存储的时候，将数据转成了字符串。

同时在state中获取数据的时候，就从localStorage中获取，当然获取的时候，再将其转换成对象的形式。

下面，我们可以在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>

通过查看浏览器的控制台，可以查看到对应的登录用户的token数据

8、封装本地存储操作

在我们的项目中，有很多的地方都需要获取本地存储的数据，如果每次都写：

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

就比较麻烦了。所以这里我们建议把操作本地数据单独的封装到一个模块中。

在utils目录下面创建storage.js文件，该文件中的代码如下所示：

// 存储数据
export const setItem = (key, value) => {
  //将数组，对象类型的数据转换为JSON格式的字符串进行存储
  if (typeof value === "object") {
    value = JSON.stringify(value);
  }
  window.localStorage.setItem(key, value);
};
//获取数据
export const getItem = (key) => {
  const data = window.localStorage.getItem(key);
  //这里使用try..catch的，而不是通过if判断一下是否为json格式的字符串，然后在通过parse进行转换呢，目的就是是为了方便处理，因为对字符串进行判断看一下是否为json格式的字符串，比较麻烦一些。还需要通过正则表达式来完成。而通过try..catch比较方便
  // 如果data不是一个有效的json格式字符串，JSON.parse就会出错。
  try {
    return JSON.parse(data);
  } catch (e) {
    return data;
  }
};
//删除数据
export const removeItem = (key) => {
  window.localStorage.removeItem(key);

下面返回到store/index.js文件中，修改对应的代码，这里使用我们上面封装好的代码。

import { createStore } from "vuex";
import { getItem, setItem } from "../utils/storage";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
  state: {
    //存储当前登录用户信息，包含token等数据
    // 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;

在上面的代码中，我们导入getItem和setItem两个方法，然后在存储登录用户信息，和获取登录用户信息的时候，直接使用这两个方法，这样就非常简单了。

下面返回浏览器进行测试。

把以前localStorage中存储的内容删除掉。

然后重新输入用户名和密码，发现对应的localStorage中存储了对应的数据。

总结

感谢小伙伴们一键三连，咱们下期文章再见~

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术
程序员老茶
关注
  • 27
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Vue.js】vue用户登录功能
weixin_43655896的博客
02-05 6893
vue实现用户登录功能
Vue3+Vant开发：首页功能实现
程序员老茶的博客
04-23 1351
Vue3+Vant开发：首页功能实现
Vue 登录注册（vant）
Huang_DW的博客
07-21 7249
我的页面User： <template> <div> <!-- vant导航栏 --> <van-nav-bar style="background-color: #3090EC;" :border="false"> <template #left> <van-icon style="font-size: 20px;" color="white" name="arrow-left" /> &l
Vue3+vant 带你实现常见的历史记录的业务功能
HaushoLin的博客
06-05 905
主要核心功能：获取搜索记录、设置搜索记录、清空所有历史记录、点击搜索
vscode如何创建一个go项目_vue入门003~vue项目引入element并创建一个登录页面
weixin_39963053的博客
10-27 430
上一节已经教大家如何创建一个vue项目，这一节，我们就温故下vue项目的创建，顺便引入element，实现一个简答的登陆页面。老规矩，先看效果图一，快速创建vue项目二，引入element类库首先我们进入element官网：https://element.eleme.cn/#/zh-CN/component/installation简单熟悉下element。然后如下图所示引入element类库。做...
vue+vant制作登录登出个人页面
jakelihua
06-11 3623
本文讲解，如何结合vue和vant制作登录，注册，还有个人页面功能。
利用Vant完成登录页面！
weixin_55633731的博客
06-06 6151
表单验证： 表单中使用 v-model 做数据绑定
用vant做一个登陆页面
zhuyuan123456的博客
03-18 7822
首先打开vant官方组件库，搜索form表单
tsVant:vue3.0 + typeScript + vant做的h5移动端页面
03-25
在当前的Web开发环境中，Vue.js已经成为了非常流行的前端框架，尤其随着Vue 3.0的发布，其性能和功能得到了显著提升。而TypeScript作为JavaScript的超集，为项目带来了静态类型检查和更丰富的编程特性，极大地提高了...
Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip
10-21
Vue3.0、Vant3.0 和 Vue-Router4.0 是当前前端开发领域中的热门技术栈，它们被广泛应用于构建高效、响应式的Web应用。在这个“Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目”中，开发者利用这些技术来实现一个...
vue-h5-template:使用Vue3.0+Typescript+Vant搭建移动端H5页面开发所需的基础模板，并提供一些通用型的解决方案及扩展功能
05-03
VUE-H5-TEMPLATEVue-H5-Template 项目以小商城作为基本的内容演示，使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板，并提供一些通用型的解决方案及扩展功能。基本说明部分页面预览：首页商详...
vue3-vite-ts-Vant：vue3 + vite + ts + Vant + vuex +路由器
03-04
Vue3-Vite-TS-Vant 是一个现代前端开发框架的集成，主要采用了 Vue.js 的最新版本 3，搭配了 Vite 构建工具，TypeScript 作为编程语言，Vant UI 库，Vuex 状态管理，以及 Vue Router 路由系统。这个组合为开发者提供...
电子书网站。前端采用vue3+vant-ui开发，后端采用python3开发.zip
01-04
前端采用vue3+vant-ui开发，后端采用python3。9+flask开发，后台管理系统采用vue3+elementui-plus开发. Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种...
Vant 实现简单的登录注册模块以及个人用户中心
目标架构师
07-02 3324
Vant 实现简单的登录注册模块以及个人用户中心
解决vue3项目右上角用户未登录与登录状态切换
编程小白的博客
03-13 511
解决vue3项目右上角用户未登录与登录状态切换
Vue3 _ 25. Vue 状态管理 - Vuex 4
胖子胖子大胖子的博客
07-21 242
一、什么是 Vuex 打开官网：https://next.vuex.vuejs.org/zh/index.html Vuex 是一个可以集中式存储状态的一个库，我们可以在库中定义一些全局参数，提供给项目的所有组件去使用。 二、状态管理模式 我们来看看什么是状态管理模式，直接看官网给的一个简单例子。 可以看到，这个其实非常简单，当我们触发 increment 方法的时候，界面上的 count 就会做一次自加。 在这个过程中包含了三个东西： 状态，驱动应用的数据源； 视图，以声明方式将状
Vue+vant仿有客页面
luvzen0127的博客
09-18 1281
vantUI介绍 vaniui Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 项目 前端地址：https://yk.52kfw.cn/index.html#/home 后端地址：https://yk.52kfw.cn/admin.html#/manage 接口文档：https://api.52kfw.cn/api.html 项目搭建 vue环境 vantui环境
Vue3 用户认证：如何检查用户是否已登录
andy_68147772的博客
01-01 2044
在客户端存储用户的登录状态，可以使用Vuex、Pinia或者组件的本地状态。：使用Vue Router的导航守卫来保护需要认证的路由。：与后端通信以验证用户的登录状态。
vant
Cool的博客
06-19 6056
推荐一个vue的UI框架 偏向于移动端商城开发 https://youzan.github.io/vant/#/zh-CN/intro
vue3+vant3
最新发布
06-24
Vue3 是 Vue.js 的最新版本，它是一个流行的开源 JavaScript 框架，用于构建用户界面。Vue3 引入了诸多改进，如更高效的渲染、更具竞争力的性能以及更好的组件化支持。 Vant 3 是基于 Vue3 开发的轻量级设计组件库，由 Vant 团队维护。它提供了丰富的 UI 组件，包括但不限于按钮、导航栏、表单、卡片、抽屉等，旨在简化前端开发过程，让开发者能够快速构建美观且功能完备的移动和网页应用。Vant3 注重易用性和一致性，适合快速原型设计和生产环境使用。 在 Vue3 + Vant3 的组合中，你可以享受到 Vue3 的高效模板和响应式系统，结合 Vant3 的预设组件和设计风格，能提升开发效率和界面质量。使用它们，你可以快速搭建项目结构，轻松上手并快速构建出现代的前端界面。 相关问题： 1. Vant3 在Vue3中的主要优势是什么？ 2. 如何在Vue3项目中集成Vant3组件库？ 3. Vant3是否支持自定义主题和高度可扩展性？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员老茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值