1.登录

token 和 session的选择

客户端和服务器是否存在跨域问题，存在使用token，反之使用session

token原理

2.前端

新增单文件 vue组件

<template> </template>  //模板区<script>  //行为区
export default {}
</script><style lang="less" scoped>  //样式区  scoped 代表样式只在当前组件生效</style>

router.js 中增加路由规则

App.vue中增加路由占位符

访问根路径,重定向到/login

style 使用的less，要添加less和less-loader

// 最新版本 可能会报错
npm install less less-loader --save-dev  //卸载命令
npm uninstall less-loader//安装其他版本
npm install less-loader@4.1.0 //全局安装其他版本
npm install less-loader@4.1.0 -D//--save-dev 安装到开发环境
npm install less@3.12.2 less-loader@4.1.0 --save-dev//页面中使用
<style  lang='less'>@import url("./statistical.less");
</style>

全局样式

入口文件中导入css

登录界面

一些样式说明

输入框内容前面小图标，使用自定义

表单验证

表单重置

点击重置按钮，调用重置方法

登录预校验，发起登录请求的前对表单的数据先校验，校验成功才发起请求。

axios 发起登录请求

导入axios

await async 简化Promise 对象

返回对象解构

element-ui 弹框

路由导航守卫

如果用户没有登录，访问其他页面，就会直接跳转到登录页

退出登录

只需要清空token

语法检查

git 提交合并

//将本地login 分支推送到云端login分支上
git push -u origin login

1.vue前端项目实战-登录功能相关推荐

[Vue项目实战]登录功能实现
登录功能实现写在前面登录概述登录业务流程登录业务的相关技术点登录---token原理分析登录功能实现登录页面的布局在components文件下创建一个vue文件配置路由(并添加路由重 ...
vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue 3 项目实战一（绘制登录界面）
目录一.概述二.创建vue项目三.需求分析四.构建组件五.vue组件之间的通信一.概述本文记录了项目实现的详细步骤以及原理,十分适合初学vue的萌新练手,也是阶段性学习的一个总结,可能会 ...
Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第十节：评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第六节：首页视频详情功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第十五节：朋友页面功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...

1.vue前端项目实战-登录功能

1.登录

token 和 session的选择

token原理

2.前端

1.vue前端项目实战-登录功能相关推荐

最新文章

热门文章