个人做网站的流程,互助网站开发,新能源课件网站开发新能源,互联网营销行业前景#x1f648;作者简介#xff1a;练习时长两年半的Java up主 #x1f649;个人主页#xff1a;程序员老茶 #x1f64a; ps:点赞#x1f44d;是免费的#xff0c;却可以让写博客的作者开心好久好久#x1f60e; #x1f4da;系列专栏#xff1a;Java全栈#xff0c;… 作者简介练习时长两年半的Java up主 个人主页程序员老茶 ps:点赞是免费的却可以让写博客的作者开心好久好久 系列专栏Java全栈计算机系列火速更新中 格言种一棵树最好的时间是十年前其次是现在 动动小手点个关注不迷路感谢宝子们一键三连 目录 课程名Vue 3内容/作用知识点/设计/实验/作业/练习学习Vue3Vant开发登录功能1、创建登录路由2、实现登录布局结构3、登录布局实现4、实现基本登录功能5、登录状态提示6、表单验证功能7、处理用户Token8、封装本地存储操作总结 课程名Vue 3
内容/作用知识点/设计/实验/作业/练习
学习Vue3Vant开发登录功能
1、创建登录路由
npm install vue-router4以上安装了最新版本的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.
该组件中的内容如下所示
templatediv登录/div
/templatescript
export default {};
/scriptstyle/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,指定路由的出口。
templaterouter-view/router-view
/templatescript setup/scriptstyle/style
在浏览器中输入http://localhost:3000/#/login查看效果。
2、实现登录布局结构
templatediv classlogin-container!-- 导航栏 --van-nav-bar title登录 /!-- 导航栏结束 --!-- 登录表单 --van-formvan-field nameuserName placeholder请输入用户名 /van-field nameuserPwd placeholder请输入密码 /div stylemargin: 16pxvan-button block typeprimary native-typesubmit提交/van-button/div/van-form!-- 登录表单结束 --/div
/templatescript
export default {};
/scriptstyle/style3、登录布局实现
这里我们首先设置一下导航栏的样式。由于很多页面都会用到导航栏所以可以将样式定义在全局的文件中而不是单独的定义在登录组件中。
在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登录 classpage-nav-bar /下面给登录表单的文本框与密码框添加对应的图标。
对应的官网
https://vant-contrib.gitee.io/vant/v3/#/zh-CN/fieldvan-formvan-field nameuserName placeholder请输入用户名 left-iconmanager /van-field nameuserPwd placeholder请输入密码 left-iconlock//van-fielddiv stylemargin: 16pxvan-button block typeprimary native-typesubmit 提交/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 classlogin-container!-- 导航栏 --van-nav-bar title登录 classpage-nav-bar /!-- 导航栏结束 --!-- 登录表单 --van-form submitonSubmitvan-fieldnameuserNameplaceholder请输入用户名v-modeluserNameleft-iconmanager:rulesuserFormRules.userName/van-fieldnameuserPwdplaceholder请输入密码v-modeluserPwdleft-iconlock:rulesuserFormRules.userPwd/van-fielddiv stylemargin: 16pxvan-button block typeprimary native-typesubmit登录/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-fieldnameuserNameplaceholder请输入用户名v-modeluserNameleft-iconmanager:rulesuserFormRules.userName/van-fieldnameuserPwdplaceholder请输入密码v-modeluserPwdleft-iconlock:rulesuserFormRules.userPwd/van-field7、处理用户Token
用户登录成功以后会返回token数据。
Token是用户登录成功之后服务端返回的一个身份令牌在项目中经常要使用。
例如访问需要授权的API接口。
校验页面的访问权限等。
同时这里我们还需要将token数据进行存储这样在访问其它的页面组件的时候就可以获取token数据来进行校验。
关于token数据存储在哪儿呢
可以存储到本地
存储到本地的问题是数据不是响应式的。
存储到Vuex中获取方便并且是响应式的。但是存储到Vuex中也是有一定的问题的就是当我们刷新浏览器的时候数据就会丢失所以还是需要把token数据存放到本地存储到本地的目的就是为了进行持久化。
所以这里我们需要在登录成功以后把token数据存储到vuex中这样可以实现响应式在本地存储就是为了解决持久化的问题。
安装最新版本的Vuex
npm install vuexnext --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中做一下测试
templatedivrouter-view/router-view/div
/templatescript
import { useStore } from vuex;
export default {setup() {const store useStore();console.log(store.state.user);},
};
/scriptstyle/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全栈开发数据结构与算法计算机组成原理操作系统数据库系统物联网控制原理与技术
