Vue3+Vant开发:登录功能

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

目录

  • 课程名:Vue 3
    • 内容/作用:知识点/设计/实验/作业/练习
    • 学习:Vue3+Vant开发:登录功能
    • 1、创建登录路由
    • 2、实现登录布局结构
    • 3、登录布局实现
    • 4、实现基本登录功能
    • 5、登录状态提示
    • 6、表单验证功能
    • 7、处理用户Token
    • 8、封装本地存储操作
    • 总结

课程名: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模式:createWebHistoryhistory: 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-fieldname="userName"placeholder="请输入用户名"v-model="userName"left-icon="manager":rules="userFormRules.userName"/><van-fieldname="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-fieldname="userName"placeholder="请输入用户名"v-model="userName"left-icon="manager":rules="userFormRules.userName"/><van-fieldname="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();//获取storeconst 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;

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

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

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

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

总结

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

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小米SU7的防晒秘籍

在春日渐暖的日子里&#xff0c;夏天悄然而至。大家有没有从衣柜深处翻出夏衣和防晒装备&#xff0c;来迎接夏日阳光的“偏爱”呢&#xff1f; 深知防晒烦恼的小米&#xff0c;在小米SU7的设计中也充分考虑了汽车防晒这一痛点&#xff0c;采用前风挡三层镀银、天幕双层镀银、四…

阐述使用 HttpClient 进行 http 请求

1 概述 &#xff08;1&#xff09;HTTPClient 实现了所有 HTTP 的方法&#xff08;包括 GET、POST、PUT、DELETE、OPTIONS 等&#xff09;&#xff0c;使用该工具包可以很方便的发起http请求。 &#xff08;2&#xff09;Maven 依赖 <dependency><groupId>org.…

漂亮,功能就差?错!优秀B端一定是颜值、体验、功能三位一体。

每次发一些漂亮的B端页面&#xff0c;都会有些人跳出来怼&#xff0c;他们都有一个固定的思维模式&#xff1a;漂亮的B端&#xff0c;一定功能差。这就好比马路上看到开豪车的美女&#xff0c;就觉得钱来路不正。 先给大家看一些过气的B端界面&#xff0c;是不是有似曾相识的感…

Java 集合【补充复习】

Java 集合【补充复习】 Java 集合概述Collection 接口继承树Map 接口继承树 Collection 接口方法使用 iterator 接口遍历集合元素使用 forearch 遍历集合元素 List 接口List 实现类之一&#xff1a;ArrayListList 实现类之二&#xff1a;LinkedList Set 接口Set 实现类之一&…

【Alphalens】使用Alphalens配合Akshare进行双均线因子分析,附源码及常见问题

Alphalens 是非常著名的一个python因子分析库。但是该库由于目前已经不怎么维护&#xff0c;问题非常多。最新的使用建议使用alphalens-reloaded&#xff0c;地址&#xff1a;stefan-jansen/alphalens-reloaded: Performance analysis of predictive (alpha) stock factors (gi…

【数据结构|C语言版】顺序表应用

前言1. 基于动态顺序表实现通讯录1.1 通讯录功能1.2 代码实现1.2.1 SeqList.h1.2.2 SeqList.c1.2.3 Contact.h1.2.4 Contact.c1.2.5 test.c 1.3 控制台测试1.3.1 添加联系人1.3.2 删除联系人1.3.3 修改联系人1.3.4 查找联系人1.3.5 清空通讯录1.3.6 通讯录读档和存档 2. 好题测…

Netty 心跳(heartbeat)——服务源码小结(四十三)

ldleStateHandler 可以实现心跳功能&#xff0c;当服务器和客户端没有任何读写交互时&#xff0c;并超过了给定的时间&#xff0c;则会触发用户 handler 的 userEventTriggered 方法。用户可以在这个方法中尝试向对方发送信息&#xff0c;如果发送失败&#xff0c;则关闭连接。…

Java SPI机制详解

Java SPI机制详解 1、什么是SPI&#xff1f; SPI 全称为 (Service Provider Interface) &#xff0c;是JDK内置的一种服务提供发现机制。SPI是一种动态替换发现的机制&#xff0c; 比如有个接口&#xff0c;想运行时动态的给它添加实现&#xff0c;你只需要添加一个实现。我们…

力学笃行(五)Qt QWidgets类

Qt QWidgets类 QDockWidgetQDockWidget与QToolBar&#xff1a;QDockWidget与QMenuBar&#xff1a; QDockWidget QDockWidget属于Qt的窗口部件&#xff08;Widgets&#xff09;模块&#xff0c;这个模块提供了一组用于构建图形用户界面&#xff08;GUI&#xff09;的基本控件和…

Linux下SPI设备驱动实验:SPI设备驱动框架编写

一. 简介 Linux下的SPI 驱动框架和 I2C 很类似&#xff0c;都分为主机控制器驱动和设备驱动&#xff0c;SPI主机控制器是半导体厂商编写的&#xff0c;我们只需要编写 SPI设备驱动代码。 本实验的最终目的就是驱动 I.MX6ULL-ALPHA 开发板上的 ICM-20608 这个 SPI 接口的六轴…

B端:导航条长得不都一样吗?错了,这里看过来就懂了。

B端导航条看似都一样&#xff0c;大差不差&#xff0c;仔细看一下&#xff0c;其实各有各的不同&#xff0c;这里方向了十多个&#xff0c;大家仔细看细节。

avicat连接异常,错误编号2059-authentication plugin…

错误原因为密码方式不对&#xff0c;具体可自行百度 首先管理员执行cmd进入 mysql安装目录 bin下边 我的是C:\Program Files\MySQL\MySQL Server 8.2\bin> 执行 mysql -u -root -p 然后输入密码 123456 进入mysql数据库 use mysql 执行 ALTER USER rootlocalhost IDE…

关于沃进科技无线模块demo软件移植问题

文章目录 一、无线模块开发测试准备二、开发板硬件三、开发板默认功能上电默认界面功能选择界面数据包发送界面数据包接收显示界面射频性能测试界面参数设置界面固件信息显示界面 四、软件开发软件SDK框图1、射频硬件驱动&#xff08;详见./radio/myRadio_gpio.c&#xff09;2、…

51单片机实验04 -数码管的动态显示实验

目录 一、实验目的 二、实验内容 三、实验原理 四、实验方法 五&#xff0c;实验效果及代码 1&#xff0c;效果 2&#xff0c;代码 六&#xff0c;课后习题 1&#xff0c;使用定时器T0的中断函数1 从999999~0计时 1&#xff09;效果 2&#xff09;代码 2&#xff0c…

配置linux的oracle 21c启停服务

一、配置启停 1、使用root用户登陆 su - root 2、修改oratab文件 修改oratab文件&#xff0c;将红框里面的N改为“Y”&#xff0c;使启停脚本能够生效 vi /etc/oratab 3、验证 配置好后就能够使用 dbshut 停止服务 和 dbstart 启动服务 了 2.1启动服务 su - oracle dbstart…

什么是线程?线程和进程谁更弔?

第一个参数是所创建进程的pid。 第二个是线程的属性。 第三个参数是返回值为void*&#xff0c;参数也为void*的函数指针。 第四个参数是给第三个参数的参数&#xff0c;也就是给给函数传参。 #include<iostream> #include<pthread.h> #include<unistd.h>…

折叠面板组件(vue)

代码 <template><div class"collapse-info"><div class"collapse-title"><div class"title-left">{{ title }}</div><div click"changeHide"> <Button size"small" v-if"sho…

生产计划和排单管理怎么做

阅读本文&#xff0c;你将了解到&#xff1a;1、企业是如何制定生产计划和进行排单管理&#xff1f; 2.企业在执行生产计划和进行排单管理过程中会遇到那些问题&#xff1f; 3.企业如何高效利用工具去解决问题&#xff1f; 一、生产计划和排单管理是什么 1.生产计划和排单管理…

【uniapp】【uview2.0】【u-sticky】Sticky 吸顶

把pages.json文件中的 “navigationStyle"设置为"custom”, 出现的问题是&#xff0c;莫名奇妙多了个 一个高度 解决方法 /* 使用CSS的sticky定位 */ .sticky {/* #ifdef H5 */ position: -webkit-sticky;position: sticky;top: 0; /* 设置距顶部的距离 */z-ind…

[Python开发问题] Selenium ERROR: Unable to find a matching set of capabilities

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…