说明:
此项目中使用的是
本地SQL数据库,Vue2
。其他功能请见本人后续的其他相关文章。
本文内容实现的最终效果如下图:
目录
【如果没node_modules文件夹,需要添加node_modules文件夹】
(!!!常用)【!!!用async和await简化promise操作,并且解构赋值】
【将登录成功后console.log(res)结果中的data中的token,保存到客户端的sessionStorage中】
【通过编程式导航对象$router,跳转到后台主页,路由地址是/home】
【在路由文件中,改造代码:需要拿到路由对象,给其挂载一个导航守卫】
一.登录功能的实现
1.登录页面的布局:
用vscode,打开素材里的vue-shop文件夹:
在vscode中,终端-新建终端:
(1)查看当前工作区是否干净
在vscode终端中,输入
git status
,回车:
出现如下提示,则表明当前工作区干净。
(2)创建分支
在开发新功能的时候,都将新功能放到一个新分支上。
新功能开发完毕,再将这个新分支合并到主分支master上。
(【新建分支命令】在vscode终端中,输入
git checkout -b
,回车)
【此处新建名字是login的分支】在vscode终端中,输入
git checkout -b login
,回车。
(3)查看分支
【查看当前项目所有分支命令】在vscode终端中,输入
git branch
,回车。
*代表当前处在的分支。
master是代表从master切换到当前的login分支上的。
(4)运行项目
【如果没node_modules文件夹,需要添加node_modules文件夹】
回到vue-shop文件夹,打开cmd终端,输入
npm install
,回车安装依赖。
(如果输入
npm install
,回车,之后出现下图的情况:
则输入
npm cache clear –force
,回车。再输入
npm i
,回车,即可)
【运行项目】
回到vue-shop文件夹,打开cmd终端,输入
npm run serve
,回车。
复制http://localhost:8080/,去浏览器打开。
【启动mySQL,使得点击登录按钮后可跳转到home页面】
用phpStudy,启动mySQL数据库:
点击其他选项菜单:
打开vue_api_server文件夹,
按住shift+右键
,点里面的app.js文件:
【启动api接口】
输入
node app
,回车:
用vscode,打开素材里的vue-shop文件夹:
打开里面的src-views-main.js——整个项目的入口文件:
【梳理App.vue—根组件】
打开里面的src-App.vue—根组件:
template是ui结构
script是行为
style是样式
template中,删除以下红框部分:
script中,只留下以下部分:
style中,清空里面的内容
【梳理router.js—路由】打开里面的src-router.js—路由:
只留下下图部分内容:
删除src-views-Home.vue和About.vue=直接删除views文件夹:
删除src-components-HelloWorld.vue:
(6)创建登录组件
【新建Login.vue】
在src-components中,新建一个叫Login.vue的文件:
在Login.vue的文件输入以下内容:
【导入Login.vue登录组件】
打开router.js文件,输入以下内容:
【加上
路由占位符
】
打开App.vue文件,输入以下内容:
这样通过路由匹配到的组件都会被渲染到App.vue文件的<router-view></router-view>中,来展示。
【添加
路由重定向
路由规则】
打开router.js文件,输入以下内容:
【设置登录页面的背景色】
打开Login.vue文件,输入以下内容:
【设置登录页面的登录框盒子】
打开Login.vue文件,输入以下内容:
【新建并设置
全局样式表
】
在src-assets-css里,新建一个global.css文件。在global.css文件中,输入以下内容:
【导入全局样式表】
在main.js里,输入以下内容:
【设置登录组件的头部布局(设置了登录框的头像)】
在Login.vue里,输入以下内容:
<!-- 模板 -->
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../assets/logo.png" alt="">
</div>
</div>
</div>
</template>
<!-- 行为 -->
<script>
export default {}
</script>
<!-- 样式 -->
<!-- 加上了scoped,表明该样式只在当前组件生效 -->
<!-- 去掉scoped,表明该样式全局生效 -->
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.avatar_box {
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
</style>
实现以下效果:
(7)用element-ui布局登录框的表单
【给表单加文本框】
登录element-ui官网:
Element – The world’s most popular Vue UI framework
点击组件-form表单:
复制需要的表单部分的代码,粘贴到Login.vue组件中:
Login.vue组件中:
【导入element-ui】
在src-plugins-element.js中,输入以下内容:
【给表单文本框加按钮】
在element-ui官网:
Element – The world’s most popular Vue UI framework
点击组件-Button按钮:
复制需要的按钮部分的代码,粘贴到Login.vue组件中:
Login.vue组件中,改文字内容:
再修改登录表单的CSS样式:
最终实现到下图效果:
【给表单文本框加icon图标】
在element-ui官网:
Element – The world’s most popular Vue UI framework
点击组件-input输入框:
复制需要的输入框的icon部分的代码,粘贴到Login.vue组件中:
Login.vue组件中:
实现的效果:
【修改表单文本框的icon图标】
在element-ui官网:
Element – The world’s most popular Vue UI framework
点击组件-icon图标:
复制需要的输入框的icon图标部分的代码,粘贴到Login.vue组件中:
如果没合适的图标,可去素材-fonts:
将fonts文件夹复制到项目的vue_shop的assets文件夹中:
【在入口文件main.js中导入字体图标】
在项目的main.js文件中,导入iconfont.css:
参考fonts里面的iconfont.html,在项目的Login.vue文件中修改用户名和密码的类名:
Login.vue文件中:
实现的效果:
【登录框表单的数据绑定】
去element-ui官网,组件-Form表单中:
用里面的:model,v-model双向绑定数据:
在Login.vue文件中:
【让密码隐藏】
在Login.vue文件中,给密码表单加上type=”password”或type=”show-password”。
实现的效果:
【实现表单的数据验证】
打开Element-ui官网,点击组件-Form表单-表单验证,参考表单验证的道理:
【验证用户名】
在Login.vue文件中,添加以下内容:
实现效果,当失去焦点的时候:
【验证密码】
在Login.vue文件中,添加以下内容:
实现的效果,失去焦点时:
【实现表单重置——点击重置按钮,即可重置表单】
打开Element-ui官网,点击组件-Form表单-Form Methods,参考重置表单的道理:
在Login.vue文件中,添加以下部分:
给<el form>添加ref=”loginFormRef”,该loginFormRef属性值是表单的引用对象。
下面那个$refs是如果console.log(this)的this里面的一个属性叫$refs:
(常用)【发起登录请求之前,要对
表单进行预验证
】
登录Element-ui官网,点击组件-Form表单-Form Methods,参考里面的
validate方法
:
在Login.vue文件中,添加以下内容:
(常用)【根据登录验证的结果,
判断
是否进行登录】
在Login.vue文件中,添加以下内容:
在main.js入口文件中,添加以下内容:
参考api接口文档:
在Login.vue文件中,添加以下内容:
参考api文档:
(常用)【启动mySQL数据库】
用phpStudy,启动mySQL数据库:
点击其他选项菜单:
打开vue_api_server文件夹,
按住shift+右键
,点里面的app.js文件:
【启动api接口】
输入
node app
,回车:
在Login.vue文件中,输入以下内容:
(!!!常用)【
!!!用async和await简化promise操作,并且解构赋值
】
其中{data:res}是用对象解构的方法,提取await this.$http.post(‘login’, this.loginForm);返回值里面的data,并且将其命名为res。
【添加登录的消息提示】
登录Element-ui官网,点击组件-Message消息提示,参考以下内容:
【导入Message组件】
去element.js里面,添加如下内容:
在Login.vue文件中,添加以下内容:
实现的效果:
如果登录失败:
如果登录成功:
后续要进行的操作:
【设置默认的登录框的数据】
在Login.vue文件中,修改username为admin,password改为123456:
【将登录成功后console.log(res)结果中的data中的token,保存到客户端的sessionStorage中】
在Login.vue文件中,添加以下内容:
【通过
编程式导航对象
$router,跳转到后台主页,路由地址是/home】
在Login.vue文件中,添加以下内容:
【新建Home.vue文件】
在components文件夹中,新建一个Home.vue文件:
在Home.vue文件中,添加以下内容:
【导入Home组件】
(常用)【
路由重定向
】
在router.js文件中,添加以下内容:
实现的效果:当点击登录按钮,则记录token,同时跳转到/home地址,访问到登录组件:
(8)通过
路由导航守卫
,控制访问权限
此时没token也能看到/home页面(访问到登录组件),这是不对的,应该是只有登录情况下,有token才行。
【在路由文件中,改造代码:需要拿到路由对象,给其挂载一个导航守卫】
在router.js路由文件中,添加以下内容:
实现的效果:
如果用户没登陆,想直接跳转到/home页面,则会被强制跳转回/login登录页面。
(9)实现登录的退出功能
退出功能实现原理:
在Home.vue文件中,添加以下内容:
实现的效果:
点击灰色的退出按钮,token会被销毁,页面会跳转到登录页。