Vue学习笔记-02-登录界面

 

实现电商系统的登录界面

1.绘制登录用的会话框和背景

首先设置背景色，在Component文件夹下的Login.vue中新建一个div 作为界面的container，然后我们要在style中编辑login_container的样式

刷新后查看源代码发现，html文件的head和body并不是占满全屏的，因此我们可以在src的assets文件夹下新建一个css文件夹，在css文件夹下管理全局的样式

新建一个文件命名为global.css

代码如下：

/*全局样式表*/
html,
body,
#app {
    height:100%;
    margin:0;
    padding:0;
}

因为在Login.vue中的style是 scoped，所以Login.vue中的style样式不受global.css中控制，我们可以绘制一个login_box用来装载登录的输入框和按钮等，

新建一个div标签，class为login_box，并且在<style>中设置样式 整个Login.vue的代码如下

<template>
    <div class="login_container">
        <div class="login_box"></div>
    </div>
</template>

<script>
export default {}
</script>

<!--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%);
}
</style>

紧接着要实现登录的头像，在登录框中新增一个div，class为avatar_box，然后在div中添加一个img标签，定义src到assets文件夹下的logo.png.

在style中定义样式 样式如下

.avatar_box{
    background-color: #fff;
    height: 130px;
    width: 130px;
    border:1px solid#eee;//描边
    border-radius: 50%;//圆角 实现圆框
    padding: 10px;//留白（和容器中的物体之间)
    box-shadow: 0 0 10px #ddd;//边界阴影
    position:absolute;
    left: 50%;
    transform: translate(-50%,-50%);//百分比是根据本组件的大小的百分比
    img{
        height: 100%;
        width: 100%;
        border-radius: 50%;//圆角
        background-color: #eee;
    }
}

2.使用element-ui完成input框的绘制

使用element-ui或者其它组件插件，步骤为：

①在plugins文件夹下的js文件中 以element-ui为例，在plugins下的element.js中注册组件

import Vue from 'vue'
import { Button } from 'element-ui'
import { Form } from 'element-ui'
import { FormItem } from 'element-ui'
import { Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

②去element-ui的官网查找对应组件的代码

③复制粘贴到我们需要用的地方

<el-form class="login_form">
                <!-- 用户名 -->
                <el-form-item>
                    <el-input prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary">登录</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>

            </el-form>

 

3.使用form实现表单的数据绑定

　　在vue中，要用:model属性来绑定表单，在<script>中的export default{}内定义data()函数。

　　data函数中规定返回的值的格式。

<script>
export default {
    data(){
        return{
            //这是登录表单的数据绑定
            loginForm:{
                username:'',
                password:''
            }
        };
    }
};
</script>

　　不要忘记给el-input 添加属性type="password"来隐藏密码。

 4.使用axios来发送http请求

　　首先我们要在main.js中引入axios并且正确配置它。

import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
Vue.prototype.$http = axios

　　引入axios之后，为了在按下登录按钮之后，能把表单提交并发送http请求，我们需要调用data()下定义的数据表单，在element-ui中，添加一个ref属性，vue就可以通过调用$ref对象的ref属性名称来访问对象表单进行操作，在绑定好数据之后，利用axios的$http.post方法传输表单即可。

<!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="restLoginForm">重置</el-button>
                </el-form-item>

login(){
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) return;
                const { data:res } = await this.$http.post("login", this.loginForm);
                if (res.meta.status !== 200) return this.$message.error('密码或用户名错误');
                this.$message.success("登录成功");
            });
        }

此处的message是element-ui中定义好的组件，具体的定义可以去参考element-ui的官方中文文档

引入message组件有特殊的引用方式，在plugin的element.js文件中写入

//导入弹框提示组件
import { Message } from 'element-ui'

//绑定vue
Vue.prototype.$message = Message

然后就可以在login()函数中直接调用啦！

 

5.实现登录之后的内部数据操作

1.将登录成功之后的token，保存到客户端的 sessionStorage 中

　　1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问

　　1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage中

2.通过编程式导航跳转到后台主页，路由地址是 /home

 

首先我们在component文件夹下新建一个Home.vue文件，然后在Login.vue中实现颁发token和重定向到home的操作。

token是后端返回给我们的一个访问令牌，它保存在返回给我们的res中，我们只需要取出一个res.data.token然后保存到sessionStorage中

 

//保存token
window.sessionStorage.setItem("token",res.data.token);
//页面跳转
this.$router.push('/home')

 

6.路由导航守卫

项目中，后端设置对于session和token的安全验证，一般前端也会配套写一个前端的验证，这样如果前端验证都不通过就不需要提交到后台去进行验证处理。

前端的token验证由路由导航守卫来实现

在router下的index.js中，定义const router = new Vuerouter({routes}) 一般项目会定义好

 

//挂载路由导航守卫
router.beforeEach((to,from,next)=>{
  //to将要访问的路径
  //from 代表从哪个路径跳转而来
  //next是一个函数，表示放行
  // next() 放行     next('/login') 强制跳转

  if(to.path === '/login') return next();
  //获取token
  const tokenStr=window.sessionStorage.getItem('token');
  if(!tokenStr) return next('/login');
  next();

 

可以看到这里的token是从后端拿到的，前端不知道后端发来的是哪一个token，此时可以向后端请求token来验证或者直接将token返回到后端去验证，前端只需要验证token是否存在就好了。

7.退出功能

使用this.$router.push去跳转，使用window.sessionStorage.clear()实现清除token

<template>
    <div>
        <el-button type="info" @click="logout">退出</el-button>
    </div>
</template>

<script>
export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        }
    }
};
</script>

<style lang="less" scoped>

</style>